Skip to content

Commit

Permalink
moving stylesheet to js template
Browse files Browse the repository at this point in the history
  • Loading branch information
@draeton
draeton committed Dec 7, 2011
1 parent 97c49e8 commit 536bd60
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 66 deletions.
1 change: 1 addition & 0 deletions build.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<file name="${repo}.js"/>
<file name="icons.js"/>
<file name="icon.js"/>
<file name="tmpl.js"/>
<file name="page.js"/>
</filelist>

Expand Down
12 changes: 6 additions & 6 deletions src/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// Licensed under the MIT license.
//
/*global jQuery, Stitches */
(function (window, Stitches) {
(function (window, Stitches, $) {

"use strict";

Expand All @@ -30,7 +30,7 @@

/* find the max height & width; the area is the sum of the areas
of the rectangles */
icons.forEach(function (icon, idx) {
$(icons).each(function (idx, icon) {
maxW = icon.width > maxW ? icon.width : maxW;
maxH = icon.height > maxH ? icon.height : maxH;
area += icon.area;
Expand Down Expand Up @@ -68,7 +68,7 @@
/* loop through all of the icons, attempting to place them within the sprite
without intersections */
while (loose.length && i < 10) {
loose.forEach(function (icon, idx) {
$(loose).each(function (idx, icon) {
if (!icon.isPlaced) {
icon.isPlaced = Stitches.Icons.placeIcon(icon, placed, canvas);
}
Expand Down Expand Up @@ -141,7 +141,7 @@
var overlap = null;

/* filter the checkPoints arrays based on currentIcon position */
placed.forEach(function (p, idx) {
$(placed).each(function (idx, p) {
x1 = (p.x < icon.x + icon.width);
x2 = (p.x + p.width > icon.x);
y1 = (p.y < icon.y + icon.height);
Expand Down Expand Up @@ -171,7 +171,7 @@
cropCanvas: function (placed, canvas) {
var w = 0, h = 0;

placed.forEach(function (icon, idx) {
$(placed).each(function (idx, icon) {
w = w > icon.x + icon.width ? w : icon.x + icon.width;
h = h > icon.y + icon.height ? h : icon.y + icon.height;
});
Expand All @@ -182,4 +182,4 @@
};
})();

})(window, Stitches);
})(window, Stitches, jQuery);
62 changes: 18 additions & 44 deletions src/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,66 +10,40 @@

"use strict";

/* Simple JavaScript Templating
John Resig - http://ejohn.org/ - MIT Licensed */
(function () {
var cache = {};

Stitches.tmpl = function tmpl(str, data) {
/* Figure out if we're getting a template, or if we need to
load the template - and be sure to cache the result. */
var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :

/* Generate a reusable function that will serve as a template
generator (and which will be cached). */
new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +

/* Introduce the data as local variables using with(){} */
"with(obj){p.push('" +

/* Convert the template into pure JavaScript */
str.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'") + "');}return p.join('');");

/* Provide some basic currying to the user */
return data ? fn(data) : fn;
};
})();

// ## Stitches.Page namespace
//
// Holds all DOM interaction methods
Stitches.Page = (function () {
return {
// ### init
//
// Creates the stitches widget using the `$elem` as a container
init: function () {
Stitches.Page.getTemplates();
},

// ### getTemplates
//
// Fetch the jQuery templates used to construct the widget
getTemplates: function () {
var jsdir = Stitches.settings.jsdir;

$.get(jsdir + "/stitches.html", function (html) {
getTemplates: function () {
$.get(Stitches.settings.jsdir + "/stitches.html", function (html) {
$("body").append(html);

// TODO consider converting template to bootstrap

Stitches.Page.templates = {
stitches: Stitches.tmpl("stitches_tmpl"),
icon: Stitches.tmpl("stitches_icon_tmpl")
icon: Stitches.tmpl("stitches_icon_tmpl"),
style: Stitches.tmpl("stitches_style_tmpl")
};

var $div = $(Stitches.Page.templates.stitches({}));
$div.appendTo(Stitches.Page.$elem);

// set dom element references
Stitches.Page.setReferences();

Stitches.pub("page.render");
});
},

// ### render
//
// Creates the stitches widget and content
render: function () {
var $div = $(Stitches.Page.templates.stitches({}));
$div.appendTo(Stitches.Page.$elem);

// set dom element references
Stitches.Page.setReferences();
},

// ### setReferences
//
Expand Down Expand Up @@ -151,7 +125,7 @@
setButtonDisabled: function (disabled, buttons) {
var action = disabled ? "add" : "remove";

buttons.forEach(function (val) {
$(buttons).each(function (idx, val) {
Stitches.Page.buttons["$" + val][action + "Class"]("disabled");
});
},
Expand Down
11 changes: 10 additions & 1 deletion src/stitches.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,16 @@
<script type="text/html" id="stitches_icon_tmpl">
<li>
<span class="icon"><img src="<%=image.src%>" alt="<%=name%>" /></span>
<span class="name"><%=name%></span>
<span class="name"><%= name %></span>
<a href="javascript:void(0)" class="remove">remove</a>
</li>
</script>

<script type="text/html" id="stitches_style_tmpl">
.sprite-<%= name %> {
width: <%= width %>px;
height: <%= height %>px;
background-position: -<%= x %>px -<%= y %>px;
}

</script>
30 changes: 15 additions & 15 deletions src/stitches.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,12 @@
Stitches.filesCount = 0;
Stitches.Page.$elem = $elem;

Stitches.sub("page.init", Stitches.Page.init);
/* setup subscriptions */
Stitches.sub("page.init", Stitches.Page.getTemplates);
Stitches.sub("page.render", Stitches.Page.render);
Stitches.sub("page.error", Stitches.Page.error);

/* if html5 api support is missing, try to load it */
if (typeof FileReader === "undefined" || Modernizr.draganddrop) {
Stitches.loadSupport();
} else {
Expand Down Expand Up @@ -118,7 +121,7 @@
// Position all of the images in the `looseIcons` array within the canvas
positionImages: function () {
/* reset position of icons */
Stitches.looseIcons.forEach(function (icon, idx) {
$(Stitches.looseIcons).each(function (idx, icon) {
icon.x = icon.y = 0;
icon.isPlaced = false;
});
Expand All @@ -143,7 +146,7 @@
// Draw images on canvas
makeStitches: function () {
var context = Stitches.canvas.getContext('2d');
Stitches.placedIcons.forEach(function (icon, idx) {
$(Stitches.placedIcons).each(function (idx, icon) {
context.drawImage(icon.image, icon.x, icon.y);
});

Expand All @@ -160,21 +163,18 @@
return a.name < b.name ? -1 : 1;
});

var text = "";
text += ".sprite {\n";
text += " background: url(sprite.png) no-repeat;\n";
text += "}\n\n";

Stitches.placedIcons.forEach(function (icon) {
text += ".sprite-" + icon.name + " {\n";
text += " width: " + icon.width + "px;\n";
text += " height: " + icon.height + "px;\n";
text += " background-position: -" + icon.x + "px -" + icon.y + "px;\n";
text += "}\n\n";
var css = [
".sprite {\n",
" background: url(sprite.png) no-repeat;\n",
"}\n\n"
];

$(Stitches.placedIcons).each(function (idx, icon) {
css.push( Stitches.Page.templates.style(icon) );
});

/* add save link */
return "data:," + encodeURIComponent(text);
return "data:," + encodeURIComponent(css.join(""));
}
};
})();
Expand Down
24 changes: 24 additions & 0 deletions src/tmpl.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* Simple JavaScript Templating
John Resig - http://ejohn.org/ - MIT Licensed */
(function () {
var cache = {};

Stitches.tmpl = function tmpl(str, data) {
/* Figure out if we're getting a template, or if we need to
load the template - and be sure to cache the result. */
var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :

/* Generate a reusable function that will serve as a template
generator (and which will be cached). */
new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +

/* Introduce the data as local variables using with(){} */
"with(obj){p.push('" +

/* Convert the template into pure JavaScript */
str.replace(/[\r\t\n]/g, " ").split("<%").join("\t").replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(/\t=(.*?)%>/g, "',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'") + "');}return p.join('');");

/* Provide some basic currying to the user */
return data ? fn(data) : fn;
};
})();
1 change: 1 addition & 0 deletions tests/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<script src="../src/stitches.js"></script>
<script src="../src/icons.js"></script>
<script src="../src/icon.js"></script>
<script src="../src/tmpl.js"></script>
<script src="../src/page.js"></script>

<!-- test runner files -->
Expand Down

0 comments on commit 536bd60

Please sign in to comment.