From 536bd60ab6676d2c1e7317363a122c06031c6f9c Mon Sep 17 00:00:00 2001 From: Matthew Cobbs Date: Tue, 6 Dec 2011 21:53:27 -0500 Subject: [PATCH] moving stylesheet to js template --- build.xml | 1 + src/icons.js | 12 ++++----- src/page.js | 62 ++++++++++++++--------------------------------- src/stitches.html | 11 ++++++++- src/stitches.js | 30 +++++++++++------------ src/tmpl.js | 24 ++++++++++++++++++ tests/index.html | 1 + 7 files changed, 75 insertions(+), 66 deletions(-) create mode 100644 src/tmpl.js diff --git a/build.xml b/build.xml index cbac0060..3c905988 100644 --- a/build.xml +++ b/build.xml @@ -18,6 +18,7 @@ + diff --git a/src/icons.js b/src/icons.js index 9b1b37f7..19cc316c 100644 --- a/src/icons.js +++ b/src/icons.js @@ -6,7 +6,7 @@ // Licensed under the MIT license. // /*global jQuery, Stitches */ -(function (window, Stitches) { +(function (window, Stitches, $) { "use strict"; @@ -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; @@ -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); } @@ -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); @@ -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; }); @@ -182,4 +182,4 @@ }; })(); -})(window, Stitches); \ No newline at end of file +})(window, Stitches, jQuery); \ No newline at end of file diff --git a/src/page.js b/src/page.js index 6cf23b08..4f18d108 100644 --- a/src/page.js +++ b/src/page.js @@ -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 // @@ -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"); }); }, diff --git a/src/stitches.html b/src/stitches.html index e79cc3d0..ca665fe8 100644 --- a/src/stitches.html +++ b/src/stitches.html @@ -17,7 +17,16 @@ + + \ No newline at end of file diff --git a/src/stitches.js b/src/stitches.js index 22ee90c9..c5c840c0 100644 --- a/src/stitches.js +++ b/src/stitches.js @@ -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 { @@ -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; }); @@ -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); }); @@ -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("")); } }; })(); diff --git a/src/tmpl.js b/src/tmpl.js new file mode 100644 index 00000000..a63ad845 --- /dev/null +++ b/src/tmpl.js @@ -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; + }; +})(); \ No newline at end of file diff --git a/tests/index.html b/tests/index.html index 991d0543..805114ec 100644 --- a/tests/index.html +++ b/tests/index.html @@ -14,6 +14,7 @@ +