Sass template integration based on the less template

README.md

@@ -1,8 +1,8 @@
-[Stitches](http://draeton.github.com/stitches/)
+[Stitches](http://markmoulard.github.com/responsive-stitches/)
 ==========
 
-Stitches is an HTML5 sprite sheet generator.
-The current version is `1.3.5`. Documentation is available
+Stitches is an HTML5 responsive sprite sheet generator forked from the stitches project of Matthew Cobbs.
+The current version is `1.3.6`. Documentation is available
 [here](http://draeton.github.com/stitches/stitches/doc/stitches.js.html).
 
 ## Implementation
@@ -12,7 +12,7 @@ After dependencies, Stitches requires a stylesheet, a script, and an HTML elemen
 ```html
 <link rel="stylesheet" href="css/stitches-1.3.5.min.css">
 
-<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>
+<script data-main="js/stitches.js" src="js/stitches-1.3.6.min.js"></script>
 ```
 
 The sprite sheet generator is automatically created in elements that have the `stitches` class:
@@ -49,7 +49,7 @@ If you choose, any images that are a part of the initial markup will be loaded o
 
 ## Download
 
-**The latest release, 1.3.5, is [available here](http://draeton.github.com/stitches/stitches/dist/stitches-1.3.5.zip).**
+**The latest release, 1.3.6, is [available here](http://markmoulard.github.com/response-stitches/stitches/dist/stitches-1.3.6.zip).**
 
 
 ## Contributors
@@ -59,6 +59,7 @@ If you choose, any images that are a part of the initial markup will be loaded o
 * [flying-sheep](https://github.com/flying-sheep)
 * [JonDum](https://github.com/JonDum)
 * [mreq](https://github.com/mreq)
+* [markmoulard](https://github.com/markmoulard)
 
 
 ## License

src/js/layout/base.js

@@ -66,12 +66,12 @@ function ($) {
          *
          * @param {Sprite} sprite The sprite to compare against others
          * @param {array} obstacles An array of sprites already placed
+		 * @param {boolean} placeX the intersection must place the sprite horizontaly or verticaly
          * @return undefined|Sprite
          */
-        intersection: function (sprite, obstacles) {
+        intersection: function (sprite, obstacles, placeX) {
             var x1, x2, y1, y2;
-            var intersections = [];
-            var intersection;
+            var intersection = null;
 
             $.map(obstacles, function (obstacle) {
                 x1 = (obstacle.x < (sprite.x + sprite.width));
@@ -80,14 +80,22 @@ function ($) {
                 y2 = ((obstacle.y + obstacle.height) > sprite.y);
 
                 if (x1 && x2 && y1 && y2) {
-                    intersections.push(obstacle);
+					if (intersection == null) {
+						intersection = obstacle;
+					} else {
+						if (placeX) {
+							if ((intersection.x + intersection.width) > (obstacle.x + obstacle.width)) {
+								intersection = obstacle;
+							}
+						} else {
+							if ((intersection.y + intersection.height) > (obstacle.y + obstacle.height)) {
+								intersection = obstacle;
+							}
+						}
+					}
                 }
             });
 
-            if (intersections.length) {
-                intersection = intersections.pop();
-            }
-
             return intersection;
         }
     };

src/js/layout/compact.js

@@ -81,16 +81,14 @@ function ($, util, BaseLayout) {
         placeSprite: function (sprite, placed, dimensions) {
             var intersection;
             var pass = 0;
-            var x = 0;
-            var y = 0;
 
             while (pass++ < this.settings.maxPass) {
-                for (y = 0; y <= (dimensions.height - sprite.height); y++) {
-                    for (x = 0; x <= (dimensions.width - sprite.width); x++) {
+                for (var y = 0; y <= (dimensions.height - sprite.height); y++) {
+                    for (var x = 0; x <= (dimensions.width - sprite.width); x++) {
                         sprite.x = x;
                         sprite.y = y;
 
-                        intersection = this.intersection(sprite, placed);
+                        intersection = this.intersection(sprite, placed, true);
 
                         if (!intersection) {
                             placed.push(sprite);
@@ -100,12 +98,33 @@ function ($, util, BaseLayout) {
 
                         x = intersection.x + intersection.width - 1;
                     }
-
+					sprite.x = 0;
+					intersection = this.intersection(sprite, placed, false);
+					for (var x = 0; x <= (dimensions.width - sprite.width); x++) {
+						sprite.x = x;
+						var intersectionTmp = this.intersection(sprite, placed, false);
+						if (intersectionTmp) {
+							if (!intersection) {
+								intersection = intersectionTmp;
+							} else {
+								if (intersectionTmp.y + intersectionTmp.height < intersection.y + intersection.height) {
+									intersection = intersectionTmp;
+								}
+							}
+							x += intersectionTmp.width;
+						}
+
+					}
                     y = intersection.y + intersection.height - 1;
                 }
 
-                dimensions.width += sprite.width;
-                dimensions.height += sprite.height;
+				sprite.x = 0;
+				sprite.y = 0;
+				if (sprite.width * dimensions.width <= sprite.height * dimensions.height) {
+					dimensions.width += sprite.width;
+				} else { 
+					dimensions.height += sprite.height;
+				}
             }
         }
     });

src/js/manager/layout.js

@@ -65,8 +65,30 @@ function ($, CompactLayout, VerticalLayout, HorizontalLayout) {
             var self = this;
 
             progress(0, "info");
-
-            $.map(sprites, function (sprite) {
+
+			var sizes = [];
+			$.map(sprites, function(sprite) {
+				sizes.push(sprite.width * sprite.height);
+			});
+			sizes.sort(function(a, b){return b-a});
+			var spritesSorted = [];
+			var indexSize = 0;
+			$.map(sprites, function(sprite) {
+				sprite.computed = false;
+			});
+			for (var i = 0; i < sprites.length; i++) {
+				$.map(sprites, function(sprite) {
+					if (!sprite.computed) {
+						if (sprite.width * sprite.height == sizes[indexSize]) {
+							sprite.computed = true;
+							spritesSorted.push(sprite);
+							indexSize++;
+						}
+					}
+				});
+			}
+
+            $.map(spritesSorted, function (sprite) {
                 if (!sprite.placed) {
                     sprite.placed = self.manager.placeSprite(sprite, placed, dimensions);
                 }

src/js/manager/stylesheet.js

@@ -11,16 +11,18 @@
 define([
     "wrap/jquery",
     "stylesheet/css",
-    "stylesheet/less"
+    "stylesheet/less",
+    "stylesheet/sass"
 ],
-function ($, CssStylesheet, LessStylesheet) {
+function ($, CssStylesheet, LessStylesheet, SassStylesheet) {
 
     "use strict";
 
     // **Canvas stylesheet managers**
     var managers = {
         css: CssStylesheet,
-        less: LessStylesheet
+        less: LessStylesheet,
+        sass: SassStylesheet
     };
 
     // **Module definition**
@@ -54,8 +56,13 @@ function ($, CssStylesheet, LessStylesheet) {
             var spritesheet = options.spritesheet;
             var prefix = options.prefix;
             var uri = options.uri;
+			var width = options.width;
+			var height = options.height;
+			var units = options.units;
+			var exportNormalSize = options.exportNormalSize;
+			var exportPercentageSize = options.exportPercentageSize;
 
-            var styles = this.manager.get(sprites, spritesheet, prefix, uri);
+            var styles = this.manager.get(sprites, spritesheet, prefix, uri, width, height, units, exportNormalSize, exportPercentageSize);
             styles = styles.replace(/\\n/g, "\n");
 
             return styles;

src/js/module/canvas.js

@@ -105,6 +105,17 @@ function($, util, array, layoutManager, Sprite) {
             this.$element.trigger("generate-sheets");
             this.$element.trigger("hide-overlay");
         },
+
+		/**
+		 * ### @resetWithoutPosition
+		 * Reset the spritesheet generation without recompute the dimensions and position.
+		 * Used after a change to sprite's name or settings
+		 */
+		resetWithoutPosition: function() {
+			this.$element.trigger("show-overlay");
+            this.$element.trigger("generate-sheets");
+            this.$element.trigger("hide-overlay");
+		},
 
         /**
          * ### @measure
@@ -163,7 +174,6 @@ function($, util, array, layoutManager, Sprite) {
             this.sprites.push(sprite);
             this.names.push(sprite.name);
 
-            this.$element.trigger("show-overlay");
             sprite.$element.appendTo(this.$element);
             this.$element.trigger("update-toolbar");
 
@@ -178,7 +188,13 @@ function($, util, array, layoutManager, Sprite) {
          * @param {Sprite} sprite The sprite instance to remove
          */
         remove: function (sprite) {
-            this.sprites = array.remove(this.sprites, sprite);
+            var sprites = array.remove(this.sprites, sprite);
+			this.sprites = [];
+			var globalSprites = this.sprites;
+			$.map(sprites, function (sprite) {
+                globalSprites.push(sprite);
+            });
+
             this.names = array.remove(this.names, sprite.name);
 
             this.$element.trigger("show-overlay");
@@ -222,12 +238,14 @@ function($, util, array, layoutManager, Sprite) {
          * @param {string} name The sprite name (usually from a file name)
          * @param {string} src The image src (usually from a FileReader)
          */
-        createSprite: function (name, src) {
+        createSprite: function (name, src, parentWidth, parentHeight) {
             var self = this;
             var sprite = new Sprite({
                 name: name,
                 src: src,
-                padding: this.settings.padding
+                padding: this.settings.padding,
+				parentWidth: (parentWidth ? parentWidth : 0),
+				parentHeight: (parentHeight ? parentHeight : 0),
             }, {
                 onload: function (sprite) {
                     self.add(sprite);

src/js/module/sprite.js

@@ -22,7 +22,9 @@ function($, util, templates) {
     var defaults = {
         name: "", // no special chars, no spaces
         src: "", // image src (usually from a FileReader)
-        padding: 0 // defined in stitches settings
+        padding: 0, // defined in stitches settings
+		parentWidth: 0, //parent div width
+		parentHeight: 0 //parent div height
     };
 
     /**
@@ -40,6 +42,8 @@ function($, util, templates) {
         this.name = this.cleanName(this.settings.name);
         this.src = this.settings.src;
         this.padding = parseInt(this.settings.padding, 10);
+		this.parentWidth = parseInt(this.settings.parentWidth);
+		this.parentHeight = parseInt(this.settings.parentHeight);
         this.active = false;
         this.placed = false;
 
@@ -72,7 +76,7 @@ function($, util, templates) {
             this.image.onload = function () {
                 self.x = 0;
                 self.y = 0;
-                self.width = self.image.width + self.padding * 2;
+				self.width = self.image.width + self.padding * 2;
                 self.height = self.image.height + self.padding * 2;
                 self.area = self.width * self.height;
                 self.render();
@@ -210,38 +214,32 @@ function($, util, templates) {
          * ### @left
          * Returns the x position of the sprite accounting for padding
          *
-         * @param {boolean} isPx Method returns px value
          * @return number || string
          */
-        left: function (isPx) {
-            var left = this.x + this.padding;
-
-            // left style position is always negative
-            return isPx ? util.toPx(-left) : left;
+        left: function () {
+            return (this.x + this.padding);
         },
 
         /**
          * ### @top
          * Returns the y position of the sprite accounting for padding
          *
-         * @param {boolean} isPx Method returns px value
          * @return number || string
          */
-        top: function (isPx) {
-            var top = this.y + this.padding;
-
-            // top style postion is always negative
-            return isPx ? util.toPx(-top) : top;
+        top: function (unit, canvasHeight) {
+            return (this.y + this.padding);
         },
 
-        /**
+		/**
          * ### @toJSON
          * Returns object for sprite export
          */
         toJSON: function () {
             return {
                 name: this.name,
-                src: this.src
+                src: this.src,
+				parentWidth: this.parentWidth,
+				parentHeight: this.parentHeight
             };
         }
     };