Permalink
Browse files

finished linking interface with pub/sub; starting unit tests

  • Loading branch information...
1 parent 28b7ce4 commit f555b239e5cf6611aaec7b635c93dbd6500f4ffb @draeton committed Dec 8, 2011
Showing with 146 additions and 54 deletions.
  1. +5 −5 src/file.js
  2. +65 −8 src/page.js
  3. +4 −4 src/stitches.html
  4. +34 −20 src/stitches.js
  5. +3 −2 tests/index.html
  6. +13 −0 tests/testinit.js
  7. +0 −15 tests/tests.js
  8. +22 −0 tests/unit/main.js
View
10 src/file.js
@@ -63,15 +63,15 @@
//
// Removes an icon from the queue
//
- // @param {Icon} removeIcon
- unqueueIcon: function (removeIcon) {
+ // @param {Icon} icon
+ unqueueIcon: function (icon) {
/* remove the icon from the queue */
- Stitches.iconQueue = $.grep(Stitches.iconQueue, function (icon) {
- return icon !== removeIcon;
+ Stitches.iconQueue = $.grep(Stitches.iconQueue, function (item) {
+ return item !== icon;
});
/* notify */
- Stitches.pub("file.remove.done", removeIcon);
+ Stitches.pub("file.remove.done", icon);
},
// ### unqueueAllIcons
View
73 src/page.js
@@ -70,6 +70,42 @@
}
throw e;
},
+
+ // ## subscribe
+ //
+ // Handles all subscriptions
+ subscribe: function () {
+ var buttons = Stitches.Page.buttons,
+ $droplabel = Stitches.Page.$droplabel;
+
+ /* handle drop label and buttons on queue length changes */
+ 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");
+ });
+
+ /* 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");
+ });
+ },
// #### *Private no operation method*
_noop: function (e) {
@@ -125,20 +161,41 @@
// #### *Private button methods*
_generate: function (e) {
- var icons = [];
- Stitches.Page.$filelist.find("li").each(function () {
- var icon = $(this).data("icon");
- icons.push(icon);
- });
- Stitches.pub("sprite.generate", icons);
+ /* [].concat to copy array */
+ Stitches.pub("sprite.generate", [].concat(Stitches.iconQueue));
},
_removeFile: function (e) {
- // find the corresponding file and remove from queue
+ var icon = $(this).parent("li").data("icon");
+ Stitches.pub("file.unqueue", icon);
},
_removeAllFiles: function (e) {
- // a lot happens here
+ Stitches.pub("file.unqueue.all");
+ },
+
+ // ### addIcon
+ //
+ // Add an icon to the file list
+ // @param {Icon} icon
+ addIcon: function (icon) {
+ $(Stitches.Page.templates.icon(icon))
+ .data("icon", icon)
+ .appendTo(Stitches.Page.$filelist)
+ .fadeIn("fast");
+ },
+
+ // ### removeIcon
+ //
+ // Remove an icon from the file list
+ // @param {Icon} icon
+ removeIcon: function (icon) {
+ Stitches.Page.$filelist.find("li")
+ .filter(function () {
+ return $(this).data("icon") === icon;
+ })
+ .fadeOut("fast")
+ .remove();
}
};
})();
View
8 src/stitches.html
@@ -6,10 +6,10 @@
<ul class="filelist"></ul>
</div>
<div class="buttons">
- <a href="javascript:void(0)" class="generate">Generate</a>
- <a href="javascript:void(0)" class="dlsprite" target=_blank>Sprite &raquo;</a>
- <a href="javascript:void(0)" class="dlstylesheet" target=_blank>Stylesheet &raquo;</a>
- <a href="javascript:void(0)" class="clear">Clear Images</a>
+ <a href="javascript:void(0)" class="disabled generate">Generate</a>
+ <a href="javascript:void(0)" class="disabled dlsprite" target=_blank>Sprite &raquo;</a>
+ <a href="javascript:void(0)" class="disabled dlstylesheet" target=_blank>Stylesheet &raquo;</a>
+ <a href="javascript:void(0)" class="disabled clear">Clear Images</a>
</div>
</div>
</script>
View
54 src/stitches.js
@@ -19,10 +19,10 @@
"jsdir": "js"
};
- // **Pub/sub subscription manager**
- var topics = {};
-
return {
+ // **Pub/sub subscription manager**
+ _topics: {},
+
// ### init
//
// Readies everything for user interaction.
@@ -41,8 +41,13 @@
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);
/* notify */
@@ -56,11 +61,24 @@
// @param {String} topic The subscription topic name
// @param {Function} fn A callback to fire
sub: function (topic, fn) {
- var callbacks = topics[topic] || $.Callbacks("stopOnFalse");
+ var callbacks = Stitches._topics[topic] || $.Callbacks("stopOnFalse");
if (fn) {
callbacks.add(fn);
}
- topics[topic] = callbacks;
+ Stitches._topics[topic] = callbacks;
+ },
+
+ // ### unsub
+ //
+ // Unsubscribe from a topic
+ //
+ // @param {String} topic The subscription topic name
+ // @param {Function} fn A callback to remove
+ unsub: function (topic, fn) {
+ var callbacks = Stitches._topics[topic];
+ if (callbacks) {
+ callbacks.remove(fn);
+ }
},
// ### pub
@@ -69,9 +87,8 @@
//
// @param {String} topic The subscription topic name
pub: function (topic) {
- var callbacks = topics[topic],
+ var callbacks = Stitches._topics[topic],
args = Array.prototype.slice.call(arguments, 1);
- console.log('publishing: ', topic, callbacks, args)
if (callbacks) {
callbacks.fire.apply(callbacks, args);
}
@@ -114,9 +131,6 @@
var sprite = Stitches.makeStitches(placedIcons);
var stylesheet = Stitches.makeStylesheet(placedIcons);
- Stitches.Page.buttons.$sprite.attr("href", sprite);
- Stitches.Page.buttons.$stylesheet.attr("href", stylesheet);
-
/* notify */
Stitches.pub("sprite.generate.done");
},
@@ -197,23 +211,23 @@
});
var css = [
- ".sprite {\n",
- " background: url(sprite.png) no-repeat;\n",
- "}\n\n"
+ ".sprite {",
+ " background: url(sprite.png) no-repeat;",
+ "}\n"
];
$(placedIcons).each(function (idx, icon) {
- css.concat([
- ".sprite-" + icon.name + " {\n",
- " width: " + icon.width + "px;\n",
- " height: " + icon.height + "px;\n",
- " background-position: -" + icon.x + "px -" + icon.y + "px;\n",
- "}\n\n"
+ css = css.concat([
+ ".sprite-" + icon.name + " {",
+ " width: " + icon.width + "px;",
+ " height: " + icon.height + "px;",
+ " background-position: -" + icon.x + "px -" + icon.y + "px;",
+ "}\n"
]);
});
/* create stylesheet link */
- var data = "data:," + encodeURIComponent(css.join(""));
+ var data = "data:," + encodeURIComponent(css.join("\n"));
/* notify and return */
Stitches.pub("sprite.stylesheet.done", data);
View
5 tests/index.html
@@ -19,8 +19,9 @@
<script src="../src/file.js"></script>
<!-- test runner files -->
+ <script src="testinit.js"></script>
<script src="qunit/qunit.js"></script>
- <script src="tests.js"></script>
+ <script src="unit/main.js"></script>
</head>
<body class="flora">
<h1 id="qunit-header">QUnit Test Suite</h1>
@@ -32,6 +33,6 @@ <h2 id="qunit-userAgent"></h2>
</div>
- <div id="stitches"></div>
+ <div id="stitches"></div>
</body>
</html>
View
13 tests/testinit.js
@@ -0,0 +1,13 @@
+(function () {
+ /**
+ * Ensures that tests have cleaned up properly after themselves. Should be passed as the
+ * teardown function on all modules' lifecycle object.
+ */
+ this.moduleTeardown = function () {
+ // Allow QUnit.reset to clean up any attached elements before checking for leaks
+ QUnit.reset();
+
+ // clear out subscriptions
+ //Stitches._topics = {};
+ }
+}());
View
15 tests/tests.js
@@ -1,15 +0,0 @@
-(function (window, $, Stitches) {
-
- $(function ($) {
-
- var $stitches = $("#stitches");
- Stitches.init($stitches, {jsdir: "../src"});
-
- module("setup");
- test("init", function () {
- expect(0);
- });
-
- });
-
-})(window, jQuery, Stitches);
View
22 tests/unit/main.js
@@ -0,0 +1,22 @@
+module("main", {teardown: moduleTeardown});
+
+test("Basic requirements", function() {
+ expect(4);
+ ok( window, "window" );
+ ok( Stitches, "Stitches" );
+ ok( jQuery, "jQuery" );
+ ok( $, "$" );
+});
+
+test("Stitches.init()", function () {
+ expect(2);
+
+ equal( typeof Stitches.init, "function" );
+ equal( Stitches.init.length, 2 );
+});
+
+// for now, do the init method here
+$(function ($) {
+ var $elem = $("#stitches");
+ Stitches.init($elem, {jsdir: "../src"});
+});

0 comments on commit f555b23

Please sign in to comment.