Permalink
Browse files

bringing some sense to the event handlers

  • Loading branch information...
1 parent 55be8a6 commit 2a20182669b5057430e6806c1299bb699d0b2ed0 @draeton committed Dec 7, 2011
Showing with 121 additions and 134 deletions.
  1. +2 −2 src/icon.js
  2. +7 −7 src/icons.js
  3. +64 −88 src/page.js
  4. +7 −7 src/stitches.css
  5. +38 −27 src/stitches.js
  6. +3 −3 tests/index.html
View
@@ -2,7 +2,7 @@
//
// [http://draeton.github.com/stitches](http://draeton.github.com/stitches)
//
-// Copyright 2011, Matthew Cobbs
+// Copyright 2011, Matthew Cobbs
// Licensed under the MIT license.
//
/*global jQuery, Stitches */
@@ -12,7 +12,7 @@
// **Maintain a unique id for each icon**
var guid = 0;
-
+
// ## Stitches.Icon class
//
// Wraps a single icon. Creates a new image from the source
View
@@ -2,7 +2,7 @@
//
// [http://draeton.github.com/stitches](http://draeton.github.com/stitches)
//
-// Copyright 2011, Matthew Cobbs
+// Copyright 2011, Matthew Cobbs
// Licensed under the MIT license.
//
/*global jQuery, Stitches */
@@ -11,14 +11,14 @@
"use strict";
var document = window.document;
-
+
// ## Stitches.Icons namespace
//
// Holds all methods for working with icons
Stitches.Icons = (function () {
return {
// ### idealCanvas
- //
+ //
// Find the ideal sprite canvas
//
// @param {Array} icons A list of icons
@@ -55,7 +55,7 @@
},
// ### placeIcons
- //
+ //
// Place icons within the sprite (the ideal square)
//
// @param {Array} loose All loose icons
@@ -88,7 +88,7 @@
},
// ### placeIcon
- //
+ //
// Place one icon on the sprite, checking for intersects with the sprite
// dimensions and other placed icons
//
@@ -128,7 +128,7 @@
},
// ### isOverlapped
- //
+ //
// Check if this icon overlaps any of the placed icons. If not,
// add to the `placed` array
//
@@ -163,7 +163,7 @@
},
// ### cropCanvas
- //
+ //
// Crop to content, after placing icons
//
// @param {Array} placed All placed icons
View
@@ -2,7 +2,7 @@
//
// [http://draeton.github.com/stitches](http://draeton.github.com/stitches)
//
-// Copyright 2011, Matthew Cobbs
+// Copyright 2011, Matthew Cobbs
// Licensed under the MIT license.
//
/*global jQuery, Stitches */
@@ -14,32 +14,32 @@
//
// Holds all DOM interaction methods
Stitches.Page = (function () {
-
+
var rendered = false;
-
+
return {
// ### fetchTemplates
//
// Fetch the jQuery templates used to construct the widget
//
// @return {jqXHR}
- fetchTemplates: function () {
+ fetchTemplates: function () {
return $.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"),
style: Stitches.tmpl("stitches_style_tmpl")
};
-
+
/* notify */
Stitches.pub("page.templates.done");
});
},
-
+
// ### render
//
// Creates the stitches widget and content
@@ -58,84 +58,81 @@
$sprite: $("a.dlsprite", Stitches.Page.$buttons),
$stylesheet: $("a.dlstylesheet", Stitches.Page.$buttons)
};
-
+
/* notify */
rendered = true;
Stitches.pub("page.render.done");
},
-
+
// ## errorHandler
//
// Handles all error messages
- errorHandler: function (e) {
+ errorHandler: function (e) {
if (rendered) {
Stitches.Page.$droplabel.html("× " + e.message).addClass("error");
- }
+ }
throw e;
},
- // ### bindHandlers
+ // ### bindDragAndDrop
//
- // Bind all of the event listeners for the page
- bindHandlers: function () {
- /* drag and drop */
- var dragStart = function (e) {
- Stitches.Page.$dropbox.addClass("dropping");
- };
- var dragStop = function (e) {
- if ($(e.target).parents(".dropbox").length === 0) {
- Stitches.Page.$dropbox.removeClass("dropping");
- }
- };
- var dragNoop = function (e) {
- e.preventDefault();
- e.stopPropagation();
- };
-
- var dropbox = Stitches.Page.$dropbox.get(0);
- dropbox.addEventListener("dragenter", dragStart, false);
- dropbox.addEventListener("dragleave", dragStop, false);
- dropbox.addEventListener("dragexit", dragStop, false);
- dropbox.addEventListener("dragover", dragNoop, false);
- dropbox.addEventListener("drop", Stitches.Page.drop, false);
-
- Stitches.Page.$filelist.delegate("a.remove", "click", Stitches.Page.removeFile);
-
- /* buttons */
- Stitches.Page.$buttons.delegate("a", "click", Stitches.Page.handleButtons);
+ // Bind all of the event listeners for drag and drop
+ 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._dragNoop, false);
+ dropbox.addEventListener("drop", Stitches.Page._drop, false);
},
- // ### handleButtons
- //
- // One handler for all of the buttons; chooses action based on className
- //
- // @param {Event} evt Click event
- // @return {Boolean}
- handleButtons: function (evt) {
- if (/disabled/.test(this.className)) {
- return false;
+ // #### *Private drag and drop methods*
+ _dragStart: function (e) {
+ Stitches.Page.$dropbox.addClass("dropping");
+ },
+
+ _dragStop: function (e) {
+ if ($(e.target).parents(".dropbox").length === 0) {
+ Stitches.Page.$dropbox.removeClass("dropping");
}
+ },
+
+ _dragNoop: function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ },
+
+ _drop: function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ Stitches.Page.$dropbox.removeClass("dropping");
- if (/generate/.test(this.className)) {
- Stitches.Page.setButtonDisabled(true, ["generate", "clear"]);
-
+ var evt = e || window.event;
+ var files = (evt.files || evt.dataTransfer.files);
+ if (files.length > 0) {
+ Stitches.pub("page.drop.done", files);
+ }
+ },
+
+ // ### bindButtons
+ //
+ // Bind all of the event listeners for buttons
+ bindButtons: function () {
+ Stitches.Page.$elem.delegate("a", "click", function (e) {
+ return !($(this).hasClass("disabled"));
+ });
+
+ Stitches.Page.$elem.delegate("a.generate", "click", function (e) {
var icons = [];
Stitches.Page.$filelist.find("li").each(function () {
var icon = $(this).data("icon");
icons.push(icon);
});
- Stitches.generateStitches(icons);
-
- Stitches.Page.setButtonDisabled(false, ["generate", "clear"]);
- return false;
- }
-
- if (/clear/.test(this.className)) {
- Stitches.Page.clearFiles();
- return false;
- }
-
- return true;
+ Stitches.pub("sprite.generate", icons);
+ });
+
+ Stitches.Page.$elem.delegate("a.remove", "click", Stitches.Page.removeFile);
+ Stitches.Page.$elem.delegate("a.clear", "click", Stitches.Page.removeAllFiles);
},
// ### setButtonDisabled
@@ -153,27 +150,6 @@
});
},
- // ### drop
- //
- // Handles drop events; starts to process the files after
- // a drop
- //
- // @param {Event} evt A DOM drop event
- // @return {Type}
- drop: function (evt) {
- evt.stopPropagation();
- evt.preventDefault();
-
- Stitches.Page.$dropbox.removeClass("dropping");
-
- var e = evt || window.event;
- var files = (e.files || e.dataTransfer.files);
-
- if (files.length > 0) {
- Stitches.Page.handleFiles(files);
- }
- },
-
// ### handleFiles
//
// Loops through `files`; sends images to `addFile`
@@ -252,12 +228,12 @@
return false;
},
- // ### clearFiles
+ // ### removeAllFiles
//
// Clear all files from the file list
- clearFiles: function () {
+ removeAllFiles: function () {
Stitches.Page.$filelist.find("a.remove").each(function () {
- Stitches.Page.removeFile.bind(this)();
+ Stitches.Page.removeFile.call(this);
});
}
};
View
@@ -20,7 +20,7 @@
border-radius: 10px 10px 0 0;
padding: 20px 0 0;
position: relative;
-
+
background-color: #ffffff;
}
.stitches .droplabel {
@@ -75,16 +75,16 @@
}
.stitches .filelist li:hover {
background-color: #f0f0f0;
- background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
- background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
- background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
- background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
- background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
+ background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
+ background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
+ background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
+ background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
+ background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(240,240,240) 100%);
background-image: -webkit-gradient(
linear,
- left bottom,
left top,
+ left bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(240,240,240))
);
Oops, something went wrong.

0 comments on commit 2a20182

Please sign in to comment.