Skip to content
Browse files

Build 0.1.3 - Changing sprite to sprite sheet

  • Loading branch information...
1 parent 3f54668 commit 085bb35f6b7166816c2cef16f81013b8226cb314 @draeton committed Dec 11, 2011
View
10 README.md
@@ -1,21 +1,21 @@
## Stitches
-[Stitches](http://draeton.github.com/stitches/) is an HTML5 sprite generator.
-The current version is `0.1.2`. Documentation is available
+[Stitches](http://draeton.github.com/stitches/) is an HTML5 sprite sheet generator.
+The current version is `0.1.3`. Documentation is available
[here](http://draeton.github.com/stitches/stitches/docs/stitches.html).
## Implementation
Stitches requires a stylesheet, a script, and an HTML element to get the job done:
- <link rel="stylesheet" href="css/stitches-0.1.2-min.css">
+ <link rel="stylesheet" href="css/stitches-0.1.3-min.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/modernizr-2.0.6.min.js"></script>
- <script src="js/stitches-0.1.2-min.js"></script>
+ <script src="js/stitches-0.1.3-min.js"></script>
-Once that's in place, the sprite generator is created by the `init` method:
+Once that's in place, the sprite sheet generator is created by the `init` method:
<div id="stitches"></div>
View
4 _templates/README.md
@@ -1,6 +1,6 @@
## Stitches
-[Stitches](http://draeton.github.com/stitches/) is an HTML5 sprite generator.
+[Stitches](http://draeton.github.com/stitches/) is an HTML5 sprite sheet generator.
The current version is `@VERSION@`. Documentation is available
[here](http://draeton.github.com/stitches/stitches/docs/stitches.html).
@@ -15,7 +15,7 @@ Stitches requires a stylesheet, a script, and an HTML element to get the job don
<script src="js/stitches-@VERSION@-min.js"></script>
-Once that's in place, the sprite generator is created by the `init` method:
+Once that's in place, the sprite sheet generator is created by the `init` method:
<div id="stitches"></div>
View
4 build.properties
@@ -1,4 +1,4 @@
-#Wed, 07 Dec 2011 23:52:01 -0500
+#Sun, 11 Dec 2011 18:23:57 -0500
build.major=0
build.minor=1
-build.number=2
+build.number=3
View
0 build/css/stitches-0.1.2-min.css → build/css/stitches-0.1.3-min.css
File renamed without changes.
View
0 build/css/stitches-0.1.2.css → build/css/stitches-0.1.3.css
File renamed without changes.
View
1 build/js/stitches-0.1.2-min.js
@@ -1 +0,0 @@
-(function(window,$,Modernizr){window.Stitches=(function(){var defaults={jsdir:"js"};return{_topics:{},init:function($elem,config){Stitches.settings=$.extend({},defaults,config);Stitches.iconQueue=[];Stitches.Page.$elem=$elem;Stitches.sub("page.error",Stitches.Page.errorHandler);Stitches.sub("page.init.done",Stitches.Page.fetchTemplates);Stitches.sub("page.templates.done",Stitches.Page.render);Stitches.sub("page.render.done",Stitches.checkAPIs);Stitches.sub("page.apis.done",Stitches.Page.bindDragAndDrop);Stitches.sub("page.apis.done",Stitches.Page.bindButtons);Stitches.sub("page.apis.done",Stitches.Page.subscribe);Stitches.sub("page.drop.done",Stitches.File.queueFiles);Stitches.sub("file.queue.done",Stitches.File.queueIcons);Stitches.sub("file.icon.done",Stitches.Page.addIcon);Stitches.sub("file.remove.done",Stitches.Page.removeIcon);Stitches.sub("file.unqueue",Stitches.File.unqueueIcon);Stitches.sub("file.unqueue.all",Stitches.File.unqueueAllIcons);Stitches.sub("sprite.generate",Stitches.generateStitches);Stitches.pub("page.init.done");},sub:function(topic,fn){var callbacks=Stitches._topics[topic]||$.Callbacks("stopOnFalse");if(fn){callbacks.add(fn);}Stitches._topics[topic]=callbacks;},unsub:function(topic,fn){var callbacks=Stitches._topics[topic];if(callbacks){callbacks.remove(fn);}},pub:function(topic){var callbacks=Stitches._topics[topic],args=Array.prototype.slice.call(arguments,1);if(callbacks){callbacks.fire.apply(callbacks,args);}},checkAPIs:function(){Modernizr.load([{test:typeof FileReader!=="undefined"&&Modernizr.draganddrop,nope:Stitches.settings.jsdir+"/dropfile/dropfile.js"},{test:Modernizr.canvas,nope:Stitches.settings.jsdir+"/flashcanvas/flashcanvas.js",complete:function(){if(typeof FileReader!=="undefined"&&Modernizr.draganddrop&&Modernizr.canvas){Stitches.pub("page.apis.done");}else{Stitches.pub("page.error",new Error("Required APIs are not present."));}}}]);},generateStitches:function(looseIcons){var placedIcons=Stitches.positionImages(looseIcons);var sprite=Stitches.makeStitches(placedIcons);var stylesheet=Stitches.makeStylesheet(placedIcons);Stitches.pub("sprite.generate.done");},positionImages:function(looseIcons){var placedIcons=[];$(looseIcons).each(function(idx,icon){icon.x=icon.y=0;icon.isPlaced=false;});looseIcons=looseIcons.sort(function(a,b){return b.area-a.area;});Stitches.canvas=Stitches.Icons.idealCanvas(looseIcons);Stitches.Icons.placeIcons(looseIcons,placedIcons,Stitches.canvas);Stitches.Icons.cropCanvas(placedIcons,Stitches.canvas);Stitches.pub("sprite.position.done",placedIcons);return placedIcons;},makeStitches:function(placedIcons){var context,data;try{context=Stitches.canvas.getContext("2d");$(placedIcons).each(function(idx,icon){context.drawImage(icon.image,icon.x,icon.y);});data=Stitches.canvas.toDataURL();}catch(e){Stitches.pub("page.error",e);}Stitches.pub("sprite.image.done",data);return data;},makeStylesheet:function(placedIcons){placedIcons=placedIcons.sort(function(a,b){return a.name<b.name?-1:1;});var css=[".sprite {"," background: url(sprite.png) no-repeat;","}\n"];$(placedIcons).each(function(idx,icon){css=css.concat([".sprite-"+icon.name+" {"," width: "+icon.width+"px;"," height: "+icon.height+"px;"," background-position: -"+icon.x+"px -"+icon.y+"px;","}\n"]);});var data="data:,"+encodeURIComponent(css.join("\n"));Stitches.pub("sprite.stylesheet.done",data);return data;}};})();})(window,jQuery,Modernizr);(function(window,Stitches,$){var document=window.document;Stitches.Icons=(function(){return{idealCanvas:function(icons){var maxW=0;var maxH=0;var area=0;$(icons).each(function(idx,icon){maxW=icon.width>maxW?icon.width:maxW;maxH=icon.height>maxH?icon.height:maxH;area+=icon.area;});var ideal=Math.ceil(Math.sqrt(area));var idealW=maxW>ideal?maxW:ideal;var idealH=maxH>ideal?maxH:ideal;var canvas=document.createElement("canvas");canvas.width=idealW;canvas.height=idealH;return canvas;},placeIcons:function(loose,placed,canvas){var i=0;while(loose.length&&i<10){$(loose).each(function(idx,icon){if(!icon.isPlaced){icon.isPlaced=Stitches.Icons.placeIcon(icon,placed,canvas);}});i++;}for(i=0;i<loose.length;i++){if(loose[i].isPlaced){loose.splice(i);}}return true;},placeIcon:function(icon,placed,canvas){var i=0;while(i<2){for(var y=0;y<=canvas.height-icon.height;y++){for(var x=0;x<=canvas.width-icon.width;x++){icon.x=x;icon.y=y;var overlap=Stitches.Icons.isOverlapped(icon,placed);if(!overlap){return true;}x=overlap.x+overlap.width;}y=overlap.y+overlap.height;}canvas.width+=icon.width;canvas.height+=icon.height;i++;}return false;},isOverlapped:function(icon,placed){var x1,x2,y1,y2;var intersect=[];var overlap=null;$(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);y2=(p.y+p.height>icon.y);if(x1&&x2&&y1&&y2){intersect.push(p);}});if(intersect.length){overlap=intersect.pop();}else{placed.push(icon);}return overlap;},cropCanvas:function(placed,canvas){var w=0,h=0;$(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;});canvas.width=w;canvas.height=h;}};})();})(window,Stitches,jQuery);(function(window,Stitches){var guid=0;Stitches.Icon=function(name,src,cb){var self=this;this.guid=guid++;this.name=name.replace(/\.|\s+/gi,"-");this.image=new Image();this.image.onload=function(){self.x=0;self.y=0;self.width=self.image.width;self.height=self.image.height;self.area=self.width*self.height;if(cb){cb(self);}};this.image.src=src;};})(window,Stitches);(function(){var cache={};Stitches.tmpl=function tmpl(str,data){var fn=!/\W/.test(str)?cache[str]=cache[str]||tmpl(document.getElementById(str).innerHTML):new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+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('');");return data?fn(data):fn;};})();(function(window,Stitches,$){Stitches.Page=(function(){var rendered=false;return{fetchTemplates:function(){return $.get(Stitches.settings.jsdir+"/stitches.html",function(html){$("body").append(html);Stitches.Page.templates={stitches:Stitches.tmpl("stitches_tmpl"),icon:Stitches.tmpl("stitches_icon_tmpl")};Stitches.pub("page.templates.done");});},render:function(){var $div=$(Stitches.Page.templates.stitches({}));$div.appendTo(Stitches.Page.$elem);Stitches.Page.$dropbox=$(".dropbox",Stitches.Page.$elem);Stitches.Page.$droplabel=$(".droplabel",Stitches.Page.$elem);Stitches.Page.$filelist=$(".filelist",Stitches.Page.$elem);Stitches.Page.$buttons=$(".buttons",Stitches.Page.$elem);Stitches.Page.buttons={$generate:$("a.generate",Stitches.Page.$buttons),$clear:$("a.clear",Stitches.Page.$buttons),$sprite:$("a.dlsprite",Stitches.Page.$buttons),$stylesheet:$("a.dlstylesheet",Stitches.Page.$buttons)};rendered=true;Stitches.pub("page.render.done");},errorHandler:function(e){if(rendered){Stitches.Page.$droplabel.html("&times; "+e.message).addClass("error");}throw e;},subscribe:function(){var buttons=Stitches.Page.buttons,$droplabel=Stitches.Page.$droplabel;Stitches.sub("file.icon.done",function(icon){if(Stitches.iconQueue.length===1){$droplabel.fadeOut("fast");buttons.$generate.removeClass("disabled");buttons.$clear.removeClass("disabled");}buttons.$sprite.addClass("disabled");buttons.$stylesheet.addClass("disabled");});Stitches.sub("file.remove.done",function(icon){if(Stitches.iconQueue.length<1){$droplabel.fadeIn("fast");buttons.$generate.addClass("disabled");buttons.$clear.addClass("disabled");}buttons.$sprite.addClass("disabled");buttons.$stylesheet.addClass("disabled");});Stitches.sub("sprite.image.done",function(data){buttons.$sprite.attr("href",data).removeClass("disabled");});Stitches.sub("sprite.stylesheet.done",function(data){buttons.$stylesheet.attr("href",data).removeClass("disabled");});},_noop:function(e){e.preventDefault();e.stopPropagation();},bindDragAndDrop:function(){var dropbox=Stitches.Page.$dropbox.get(0);dropbox.addEventListener("dragenter",Stitches.Page._dragStart,false);dropbox.addEventListener("dragleave",Stitches.Page._dragStop,false);dropbox.addEventListener("dragexit",Stitches.Page._dragStop,false);dropbox.addEventListener("dragover",Stitches.Page._noop,false);dropbox.addEventListener("drop",Stitches.Page._drop,false);},_dragStart:function(e){Stitches.Page.$dropbox.addClass("dropping");},_dragStop:function(e){if($(e.target).parents(".dropbox").length===0){Stitches.Page.$dropbox.removeClass("dropping");}},_drop:function(e){e.stopPropagation();e.preventDefault();Stitches.Page.$dropbox.removeClass("dropping");var evt=e||window.event;var files=(evt.files||evt.dataTransfer.files);if(files.length>0){Stitches.pub("page.drop.done",files);}},bindButtons:function(){var $elem=Stitches.Page.$elem;$elem.delegate("a.disabled","click",Stitches.Page._noop);$elem.delegate("a.generate","click",Stitches.Page._generate);$elem.delegate("a.remove","click",Stitches.Page._removeFile);$elem.delegate("a.clear","click",Stitches.Page._removeAllFiles);},_generate:function(e){Stitches.pub("sprite.generate",[].concat(Stitches.iconQueue));},_removeFile:function(e){var icon=$(this).parent("li").data("icon");Stitches.pub("file.unqueue",icon);},_removeAllFiles:function(e){Stitches.pub("file.unqueue.all");},addIcon:function(icon){$(Stitches.Page.templates.icon(icon)).data("icon",icon).appendTo(Stitches.Page.$filelist).fadeIn("fast");},removeIcon:function(icon){Stitches.Page.$filelist.find("li").filter(function(){return $(this).data("icon")===icon;}).fadeOut("fast").remove();}};})();})(window,Stitches,jQuery);(function(window,Stitches,$){Stitches.File=(function(){var readQueue=[];return{queueFiles:function(files){$.each(files,function(i,file){if(/jpeg|png|gif/.test(file.type)){readQueue.push(file);Stitches.pub("file.queue.done",file);}});},queueIcons:function(){var file,reader;file=readQueue.shift();if(file){try{reader=new FileReader();reader.onloadend=function(e){var icon=new Stitches.Icon(file.name,e.target.result);Stitches.iconQueue.push(icon);Stitches.pub("file.icon.done",icon);};reader.readAsDataURL(file);}catch(e){Stitches.pub("page.error",e);}}},unqueueIcon:function(icon){Stitches.iconQueue=$.grep(Stitches.iconQueue,function(item){return item!==icon;});Stitches.pub("file.remove.done",icon);},unqueueAllIcons:function(){$.each(Stitches.iconQueue,function(i,icon){Stitches.File.unqueueIcon(icon);});}};})();})(window,Stitches,jQuery);
View
1 build/js/stitches-0.1.3-min.js
@@ -0,0 +1 @@
+(function(window,$,Modernizr){window.Stitches=(function(){var defaults={jsdir:"js"};return{_topics:{},init:function($elem,config){Stitches.settings=$.extend({},defaults,config);Stitches.iconQueue=[];Stitches.Page.$elem=$elem;Stitches.sub("page.error",Stitches.Page.errorHandler);Stitches.sub("page.init.done",Stitches.Page.fetchTemplates);Stitches.sub("page.templates.done",Stitches.Page.render);Stitches.sub("page.render.done",Stitches.checkAPIs);Stitches.sub("page.apis.done",Stitches.Page.bindDragAndDrop);Stitches.sub("page.apis.done",Stitches.Page.bindButtons);Stitches.sub("page.apis.done",Stitches.Page.subscribe);Stitches.sub("page.drop.done",Stitches.File.queueFiles);Stitches.sub("file.queue.done",Stitches.File.queueIcons);Stitches.sub("file.icon.done",Stitches.Page.addIcon);Stitches.sub("file.remove.done",Stitches.Page.removeIcon);Stitches.sub("file.unqueue",Stitches.File.unqueueIcon);Stitches.sub("file.unqueue.all",Stitches.File.unqueueAllIcons);Stitches.sub("sprite.generate",Stitches.generateStitches);Stitches.pub("page.init.done");},sub:function(topic,fn){var callbacks=Stitches._topics[topic]||$.Callbacks("stopOnFalse");if(fn){callbacks.add(fn);}Stitches._topics[topic]=callbacks;},unsub:function(topic,fn){var callbacks=Stitches._topics[topic];if(callbacks){callbacks.remove(fn);}},pub:function(topic){var callbacks=Stitches._topics[topic],args=Array.prototype.slice.call(arguments,1);if(callbacks){callbacks.fire.apply(callbacks,args);}},checkAPIs:function(){Modernizr.load([{test:typeof FileReader!=="undefined"&&Modernizr.draganddrop,nope:Stitches.settings.jsdir+"/dropfile/dropfile.js"},{test:Modernizr.canvas,nope:Stitches.settings.jsdir+"/flashcanvas/flashcanvas.js",complete:function(){if(typeof FileReader!=="undefined"&&Modernizr.draganddrop&&Modernizr.canvas){Stitches.pub("page.apis.done");}else{Stitches.pub("page.error",new Error("Required APIs are not present."));}}}]);},generateStitches:function(looseIcons){var placedIcons=Stitches.positionImages(looseIcons);var sprite=Stitches.makeStitches(placedIcons);var stylesheet=Stitches.makeStylesheet(placedIcons);Stitches.pub("sprite.generate.done",sprite,stylesheet);},positionImages:function(looseIcons){var placedIcons=[];$(looseIcons).each(function(idx,icon){icon.x=icon.y=0;icon.isPlaced=false;});looseIcons=looseIcons.sort(function(a,b){return b.area-a.area;});Stitches.canvas=Stitches.Icons.idealCanvas(looseIcons);Stitches.Icons.placeIcons(looseIcons,placedIcons,Stitches.canvas);Stitches.Icons.cropCanvas(placedIcons,Stitches.canvas);Stitches.pub("sprite.position.done",placedIcons);return placedIcons;},makeStitches:function(placedIcons){var context,data;try{context=Stitches.canvas.getContext("2d");$(placedIcons).each(function(idx,icon){context.drawImage(icon.image,icon.x,icon.y);});data=Stitches.canvas.toDataURL();}catch(e){Stitches.pub("page.error",e);}Stitches.pub("sprite.image.done",data);return data;},makeStylesheet:function(placedIcons){placedIcons=placedIcons.sort(function(a,b){return a.name<b.name?-1:1;});var css=[".sprite {"," background: url(sprite.png) no-repeat;","}\n"];$(placedIcons).each(function(idx,icon){css=css.concat([".sprite-"+icon.name+" {"," width: "+icon.width+"px;"," height: "+icon.height+"px;"," background-position: -"+icon.x+"px -"+icon.y+"px;","}\n"]);});var data="data:,"+encodeURIComponent(css.join("\n"));Stitches.pub("sprite.stylesheet.done",data);return data;}};})();})(window,jQuery,Modernizr);(function(window,Stitches,$){var document=window.document;Stitches.Icons=(function(){return{idealCanvas:function(icons){var maxW=0;var maxH=0;var area=0;$(icons).each(function(idx,icon){maxW=icon.width>maxW?icon.width:maxW;maxH=icon.height>maxH?icon.height:maxH;area+=icon.area;});var ideal=Math.ceil(Math.sqrt(area));var idealW=maxW>ideal?maxW:ideal;var idealH=maxH>ideal?maxH:ideal;var canvas=document.createElement("canvas");canvas.width=idealW;canvas.height=idealH;return canvas;},placeIcons:function(loose,placed,canvas){var i=0;while(loose.length&&i<10){$(loose).each(function(idx,icon){if(!icon.isPlaced){icon.isPlaced=Stitches.Icons.placeIcon(icon,placed,canvas);}});i++;}for(i=0;i<loose.length;i++){if(loose[i].isPlaced){loose.splice(i);}}return true;},placeIcon:function(icon,placed,canvas){var i=0;while(i<2){for(var y=0;y<=canvas.height-icon.height;y++){for(var x=0;x<=canvas.width-icon.width;x++){icon.x=x;icon.y=y;var overlap=Stitches.Icons.isOverlapped(icon,placed);if(!overlap){return true;}x=overlap.x+overlap.width;}y=overlap.y+overlap.height;}canvas.width+=icon.width;canvas.height+=icon.height;i++;}return false;},isOverlapped:function(icon,placed){var x1,x2,y1,y2;var intersect=[];var overlap=null;$(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);y2=(p.y+p.height>icon.y);if(x1&&x2&&y1&&y2){intersect.push(p);}});if(intersect.length){overlap=intersect.pop();}else{placed.push(icon);}return overlap;},cropCanvas:function(placed,canvas){var w=0,h=0;$(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;});canvas.width=w;canvas.height=h;}};})();})(window,Stitches,jQuery);(function(window,Stitches){var guid=0;Stitches.Icon=function(name,src,cb){var self=this;this.guid=guid++;this.name=name.replace(/[\s.]+/gi,"-").replace(/[^a-z0-9\-]/gi,"_");this.image=new Image();this.image.onload=function(){self.x=0;self.y=0;self.width=self.image.width;self.height=self.image.height;self.area=self.width*self.height;if(cb){cb(self);}};this.image.src=src;};})(window,Stitches);(function(){var cache={};Stitches.tmpl=function tmpl(str,data){var fn=!/\W/.test(str)?cache[str]=cache[str]||tmpl(document.getElementById(str).innerHTML):new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+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('');");return data?fn(data):fn;};})();(function(window,Stitches,$){Stitches.Page=(function(){var rendered=false;return{fetchTemplates:function(){return $.get(Stitches.settings.jsdir+"/stitches.html",function(html){$("body").append(html);Stitches.Page.templates={stitches:Stitches.tmpl("stitches_tmpl"),icon:Stitches.tmpl("stitches_icon_tmpl")};Stitches.pub("page.templates.done");});},render:function(){var $div=$(Stitches.Page.templates.stitches({}));$div.appendTo(Stitches.Page.$elem);Stitches.Page.$dropbox=$(".dropbox",Stitches.Page.$elem);Stitches.Page.$droplabel=$(".droplabel",Stitches.Page.$elem);Stitches.Page.$filelist=$(".filelist",Stitches.Page.$elem);Stitches.Page.$buttons=$(".buttons",Stitches.Page.$elem);Stitches.Page.buttons={$generate:$("a.generate",Stitches.Page.$buttons),$clear:$("a.clear",Stitches.Page.$buttons),$sprite:$("a.dlsprite",Stitches.Page.$buttons),$stylesheet:$("a.dlstylesheet",Stitches.Page.$buttons)};rendered=true;Stitches.pub("page.render.done");},errorHandler:function(e){if(rendered){Stitches.Page.$droplabel.html("&times; "+e.message).addClass("error");}throw e;},subscribe:function(){var buttons=Stitches.Page.buttons,$droplabel=Stitches.Page.$droplabel;Stitches.sub("file.icon.done",function(icon){if(Stitches.iconQueue.length===1){$droplabel.fadeOut("fast");buttons.$generate.removeClass("disabled");buttons.$clear.removeClass("disabled");}buttons.$sprite.addClass("disabled");buttons.$stylesheet.addClass("disabled");});Stitches.sub("file.remove.done",function(icon){if(Stitches.iconQueue.length<1){$droplabel.fadeIn("fast");buttons.$generate.addClass("disabled");buttons.$clear.addClass("disabled");}buttons.$sprite.addClass("disabled");buttons.$stylesheet.addClass("disabled");});Stitches.sub("sprite.generate.done",function(sprite,stylesheet){buttons.$sprite.attr("href",sprite).removeClass("disabled");buttons.$stylesheet.attr("href",stylesheet).removeClass("disabled");});},_noop:function(e){e.preventDefault();e.stopPropagation();},bindDragAndDrop:function(){var dropbox=Stitches.Page.$dropbox.get(0);dropbox.addEventListener("dragenter",Stitches.Page._dragStart,false);dropbox.addEventListener("dragleave",Stitches.Page._dragStop,false);dropbox.addEventListener("dragexit",Stitches.Page._dragStop,false);dropbox.addEventListener("dragover",Stitches.Page._noop,false);dropbox.addEventListener("drop",Stitches.Page._drop,false);},_dragStart:function(e){Stitches.Page.$dropbox.addClass("dropping");},_dragStop:function(e){if($(e.target).parents(".dropbox").length===0){Stitches.Page.$dropbox.removeClass("dropping");}},_drop:function(e){e.stopPropagation();e.preventDefault();Stitches.Page.$dropbox.removeClass("dropping");var evt=e||window.event;var files=(evt.files||evt.dataTransfer.files);if(files.length>0){Stitches.pub("page.drop.done",files);}},bindButtons:function(){var $elem=Stitches.Page.$elem;$elem.delegate("a.disabled","click",Stitches.Page._noop);$elem.delegate("a.generate","click",Stitches.Page._generate);$elem.delegate("a.remove","click",Stitches.Page._removeFile);$elem.delegate("a.clear","click",Stitches.Page._removeAllFiles);},_generate:function(e){Stitches.pub("sprite.generate",[].concat(Stitches.iconQueue));},_removeFile:function(e){var icon=$(this).parent("li").data("icon");Stitches.pub("file.unqueue",icon);},_removeAllFiles:function(e){Stitches.pub("file.unqueue.all");},addIcon:function(icon){$(Stitches.Page.templates.icon(icon)).data("icon",icon).appendTo(Stitches.Page.$filelist).fadeIn("fast");},removeIcon:function(icon){Stitches.Page.$filelist.find("li").filter(function(){return $(this).data("icon")===icon;}).fadeOut("fast").remove();}};})();})(window,Stitches,jQuery);(function(window,Stitches,$){Stitches.File=(function(){var readQueue=[];return{queueFiles:function(files){$.each(files,function(i,file){if(/jpeg|png|gif/.test(file.type)){readQueue.push(file);Stitches.pub("file.queue.done",file);}});},queueIcons:function(){var file,reader;file=readQueue.shift();if(file){try{reader=new FileReader();reader.onloadend=function(e){var icon=new Stitches.Icon(file.name,e.target.result);Stitches.iconQueue.push(icon);Stitches.pub("file.icon.done",icon);};reader.readAsDataURL(file);}catch(e){Stitches.pub("page.error",e);}}},unqueueIcon:function(icon){Stitches.iconQueue=$.grep(Stitches.iconQueue,function(item){return item!==icon;});Stitches.pub("file.remove.done",icon);},unqueueAllIcons:function(){$.each(Stitches.iconQueue,function(i,icon){Stitches.File.unqueueIcon(icon);});}};})();})(window,Stitches,jQuery);
View
16 build/js/stitches-0.1.2.js → build/js/stitches-0.1.3.js
@@ -1,4 +1,4 @@
-// ## Stitches - HTML5 Sprite Generator
+// ## Stitches - HTML5 Sprite Sheet Generator
//
// [http://draeton.github.com/stitches](http://draeton.github.com/stitches)
//
@@ -132,7 +132,7 @@
var stylesheet = Stitches.makeStylesheet(placedIcons);
/* notify */
- Stitches.pub("sprite.generate.done");
+ Stitches.pub("sprite.generate.done", sprite, stylesheet);
},
// ### positionImages
@@ -448,7 +448,7 @@
var self = this;
this.guid = guid++;
- this.name = name.replace(/\.|\s+/gi, "-");
+ this.name = name.replace(/[\s.]+/gi, "-").replace(/[^a-z0-9\-]/gi, "_");
this.image = new Image();
this.image.onload = function () {
@@ -589,11 +589,9 @@
});
/* handle sprite and stylesheet generation */
- Stitches.sub("sprite.image.done", function (data) {
- buttons.$sprite.attr("href", data).removeClass("disabled");
- });
- Stitches.sub("sprite.stylesheet.done", function (data) {
- buttons.$stylesheet.attr("href", data).removeClass("disabled");
+ Stitches.sub("sprite.generate.done", function (sprite, stylesheet) {
+ buttons.$sprite.attr("href", sprite).removeClass("disabled");
+ buttons.$stylesheet.attr("href", stylesheet).removeClass("disabled");
});
},
@@ -704,7 +702,7 @@
// ## Stitches.Fle namespace
//
- // Holds all Fle procesing methods
+ // Holds all File procesing methods
Stitches.File = (function () {
/* track files to read */
View
BIN dist/stitches-0.1.3.zip
Binary file not shown.
View
2 docs/file.html
@@ -10,7 +10,7 @@
</pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Stitches.Fle namespace</h2>
-
+
<p>Holds all File procesing methods</p> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">Stitches</span><span class="p">.</span><span class="nx">File</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
View
2 docs/icon.html
@@ -25,7 +25,7 @@
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">Stitches</span><span class="p">.</span><span class="nx">Icon</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">src</span><span class="p">,</span> <span class="nx">cb</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
-
+
<span class="k">this</span><span class="p">.</span><span class="nx">guid</span> <span class="o">=</span> <span class="nx">guid</span><span class="o">++</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[\s.]+/gi</span><span class="p">,</span> <span class="s2">&quot;-&quot;</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[^a-z0-9\-]/gi</span><span class="p">,</span> <span class="s2">&quot;_&quot;</span><span class="p">);</span>
View
8 docs/page.html
@@ -98,11 +98,9 @@
<span class="nx">$droplabel</span><span class="p">.</span><span class="nx">fadeIn</span><span class="p">(</span><span class="s2">&quot;fast&quot;</span><span class="p">);</span>
<span class="nx">buttons</span><span class="p">.</span><span class="nx">$generate</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
<span class="nx">buttons</span><span class="p">.</span><span class="nx">$clear</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="nx">buttons</span><span class="p">.</span><span class="nx">$sprite</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
- <span class="nx">buttons</span><span class="p">.</span><span class="nx">$stylesheet</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
- <span class="p">});</span>
-
+ <span class="p">}</span>
+ <span class="nx">buttons</span><span class="p">.</span><span class="nx">$sprite</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
+ <span class="nx">buttons</span><span class="p">.</span><span class="nx">$stylesheet</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;disabled&quot;</span><span class="p">);</span>
<span class="p">});</span>
<span class="cm">/* handle sprite and stylesheet generation */</span>
View
4 docs/stitches.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html> <html> <head> <title>stitches.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="file.html"> file.js </a> <a class="source" href="icon.html"> icon.js </a> <a class="source" href="icons.html"> icons.js </a> <a class="source" href="page.html"> page.js </a> <a class="source" href="stitches.html"> stitches.js </a> <a class="source" href="tmpl.html"> tmpl.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> stitches.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h2>Stitches - HTML5 Sprite Generator</h2>
+<!DOCTYPE html> <html> <head> <title>stitches.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="file.html"> file.js </a> <a class="source" href="icon.html"> icon.js </a> <a class="source" href="icons.html"> icons.js </a> <a class="source" href="page.html"> page.js </a> <a class="source" href="stitches.html"> stitches.js </a> <a class="source" href="tmpl.html"> tmpl.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> stitches.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h2>Stitches - HTML5 Sprite Sheet Generator</h2>
<p><a href="http://draeton.github.com/stitches">http://draeton.github.com/stitches</a></p>
@@ -135,7 +135,7 @@
<p>Positions all of the icons from the $filelist on the canvas;
crate the sprite link and the stylesheet link;
updates button state</p>
-
+
<pre><code>@param {[Icon]} looseIcons An Icon array of images to place
</code></pre> </td> <td class="code"> <div class="highlight"><pre>
<span class="nx">generateStitches</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">looseIcons</span><span class="p">)</span> <span class="p">{</span>
View
2 src/file.js
@@ -12,7 +12,7 @@
// ## Stitches.Fle namespace
//
- // Holds all Fle procesing methods
+ // Holds all File procesing methods
Stitches.File = (function () {
/* track files to read */
View
2 src/stitches.js
@@ -1,4 +1,4 @@
-// ## Stitches - HTML5 Sprite Generator
+// ## Stitches - HTML5 Sprite Sheet Generator
//
// [http://draeton.github.com/stitches](http://draeton.github.com/stitches)
//

0 comments on commit 085bb35

Please sign in to comment.
Something went wrong with that request. Please try again.