Permalink
Browse files

Making toolbar generic, so we can have another

  • Loading branch information...
1 parent ba236c3 commit 2d80e8a20334ea56c51cef819eb8ebcfad87afcb @jakearchibald committed Jun 11, 2012
View
@@ -1,4 +1,4 @@
#!/bin/bash
ver=7
-cat www/assets/$ver/script/{jquery-1.6.2,jquery.easing,jquery.transition,jquery.fileClickjack,intro,MicroEvent,Rect,ImgInput,SpriteCanvas,SpriteCanvasView,CssOutput,Toolbar,pageLayout,FeatureTest,featureTests,base}.js | node bin/uglify.js > www/assets/$ver/script/mainmin.js
+cat www/assets/$ver/script/{jquery-1.7.1,jquery.easing,jquery.transition,jquery.fileClickjack,intro,MicroEvent,Rect,ImgInput,SpriteCanvas,SpriteCanvasView,CssOutput,Toolbar,pageLayout,FeatureTest,featureTests,base}.js | node bin/uglify.js > www/assets/$ver/script/mainmin.js
~/dev/sass/bin/sass --style compressed www/assets/$ver/style/all.scss:www/assets/$ver/style/all-min.css
@@ -10,11 +10,26 @@ spriteCow.MicroEvent.prototype = {
if( event in this._events === false ) { return; }
this._events[event].splice(this._events[event].indexOf(fct), 1);
},
- trigger: function(event /* , args... */){
+ trigger: function(event /* , args... */) {
+ var eventName,
+ args;
+
+ if (event instanceof $.Event) {
+ eventName = event.type;
+ args = Array.prototype.slice.call(arguments, 0);
+ }
+ else {
+ eventName = event;
+ args = Array.prototype.slice.call(arguments, 1);
+ }
this._events = this._events || {};
- if( event in this._events === false ) { return; }
- for(var i = 0, args = Array.prototype.slice.call(arguments, 1), len = this._events[event].length; i < len; i++) {
- this._events[event][i].apply( this, args )
+
+ if ( eventName in this._events === false ) { return event; }
+
+ for (var i = 0, len = this._events[eventName].length; i < len; i++) {
+ this._events[eventName][i].apply( this, args );
}
+
+ return event;
}
};
@@ -260,10 +260,10 @@
selectColor.deactivate();
switch (mode) {
- case 'selectSprite':
+ case 'select-sprite':
selectArea.activate();
break;
- case 'selectBg':
+ case 'select-bg':
selectColor.activate();
break;
}
@@ -3,44 +3,52 @@ spriteCow.Toolbar = (function() {
var toolbar = this,
$container = $('' +
'<div class="toolbar">' +
- '<div role="button" class="open-img">Open</div>' +
- '<div role="button" class="no-label reload-img">Reload current image</div>' +
- '<div role="button" class="select-sprite active">Select Sprite</div>' +
- '<div role="button" class="pick-bg">Pick Background</div>' +
- '<div role="button" class="no-label invert-bg">Toggle Dark Background</div>' +
'<span class="feedback"></span>' +
'</div>' +
- '').appendTo( $appendToElm ),
- $children = $container.children(),
- toolNames = [
- 'openImg',
- 'reloadImg',
- 'selectSprite',
- 'selectBg',
- 'invertBg',
- ];
-
- toolNames.forEach(function(toolName, i) {
- // avoiding jquery's event system so file dialogs can be launched
- $children.eq(i).click(function(event) {
- toolbar.trigger(toolName);
- event.preventDefault();
- });
- });
+ '').appendTo( $appendToElm );
- $container.delegate('div[role=button]', 'mouseenter', function() {
+ $container.on('mouseenter', 'div[role=button]', function() {
var $button = $(this);
toolbar.feedback( $button.hasClass('no-label') ? $button.text() : '' );
});
+
+ $container.on('click', 'div[role=button]', function() {
+ var $button = $(this),
+ toolName = $button.data('toolName'),
+ event = new $.Event( toolName );
+
+ event.isActive = $button.hasClass('active');
+
+ if ( !toolbar.trigger(event).isDefaultPrevented() ) {
+ $button.toggleClass('active');
+ }
+
+ event.preventDefault();
+ });
- toolbar._$feedback = $children.slice(-1);
- toolbar._toolNames = toolNames;
- toolbar._$children = $children;
toolbar.$container = $container;
+ toolbar._$feedback = $container.find('span.feedback');
}
- var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent;
+ var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent();
+ SpriteCowToolbarProto.addItem = function(toolName, text, opts) {
+ opts = opts || {};
+
+ var $button = $('<div role="button"/>').addClass(toolName).text(text).data('toolName', toolName);
+
+ if (opts.noLabel) {
+ $button.addClass('no-label');
+ }
+ if (opts.active) {
+ $button.addClass('active');
+ }
+
+ this._$feedback.before( $button );
+
+ return this;
+ };
+
SpriteCowToolbarProto.feedback = function(msg, severe) {
var $feedback = this._$feedback,
initialColor = '#555';
@@ -53,7 +61,7 @@ spriteCow.Toolbar = (function() {
});
if (severe) {
- $feedback.css('font-weight', 'bold')
+ $feedback.css('font-weight', 'bold');
if ($.support.transition) {
$feedback.transition({ color: 'red' }, {
@@ -80,22 +88,17 @@ spriteCow.Toolbar = (function() {
};
SpriteCowToolbarProto.activate = function(toolName) {
- this._$children.eq( this._toolNames.indexOf(toolName) )
- .addClass('active');
-
+ this.$container.find('.' + toolName + '[role=button]').addClass('active');
return this;
};
SpriteCowToolbarProto.deactivate = function(toolName) {
- this._$children.eq( this._toolNames.indexOf(toolName) )
- .removeClass('active');
-
+ this.$container.find('.' + toolName + '[role=button]').removeClass('active');
return this;
};
SpriteCowToolbarProto.isActive = function(toolName) {
- return this._$children.eq( this._toolNames.indexOf(toolName) )
- .hasClass('active');
+ return this.$container.find('.' + toolName + '[role=button]').hasClass('active');
};
return SpriteCowToolbar;
@@ -23,8 +23,14 @@
spriteCanvasView = new spriteCow.SpriteCanvasView( spriteCanvas, $canvasContainer ),
imgInput = new spriteCow.ImgInput( $canvasContainer, $canvasContainer, $tutorialLink.attr('href') ),
cssOutput = new spriteCow.CssOutput( $codeContainer ),
- toolbar = new spriteCow.Toolbar( $toolbarContainer );
+ toolbarTop = new spriteCow.Toolbar( $toolbarContainer );
+ toolbarTop.addItem('open-img', 'Open').
+ addItem('reload-img', 'Reload Current Image', {noLabel: true}).
+ addItem('select-sprite', 'Select Sprite', {active: true}).
+ addItem('select-bg', 'Pick Background').
+ addItem('invert-bg', 'Toggle Dark Background', {noLabel: true});
+
spriteCow.pageLayout.init();
// listeners
@@ -42,47 +48,48 @@
// if the rect is the same size as the whole canvas,
// it's probably because the background is set wrong
// let's be kind...
- toolbar.feedback( 'Incorrect background colour set?', true );
+ toolbarTop.feedback( 'Incorrect background colour set?', true );
}
});
spriteCanvasView.bind('bgColorHover', function(color) {
- toolbar.feedback( colourBytesToCss(color) );
+ toolbarTop.feedback( colourBytesToCss(color) );
});
spriteCanvasView.bind('bgColorSelect', function(color) {
- var toolName = 'selectSprite';
+ var toolName = 'select-sprite';
spriteCanvasView.setTool(toolName);
- toolbar.deactivate('selectBg').activate(toolName);
- toolbar.feedback( 'Background set to ' + colourBytesToCss(color) );
+ toolbarTop.deactivate('select-bg').activate(toolName);
+ toolbarTop.feedback( 'Background set to ' + colourBytesToCss(color) );
});
- toolbar.bind('selectBg', function() {
- var toolName = 'selectBg';
- spriteCanvasView.setTool(toolName);
- toolbar.deactivate('selectSprite').activate(toolName);
+ toolbarTop.bind('open-img', function(event) {
+ event.preventDefault();
+ });
+
+ toolbarTop.bind('select-bg', function() {
+ spriteCanvasView.setTool('select-bg');
+ toolbarTop.deactivate('select-sprite');
});
- toolbar.bind('selectSprite', function() {
- var toolName = 'selectSprite';
- spriteCanvasView.setTool(toolName);
- toolbar.deactivate('selectBg').activate(toolName)
+ toolbarTop.bind('select-sprite', function() {
+ spriteCanvasView.setTool('select-sprite');
+ toolbarTop.deactivate('select-bg');
});
- toolbar.bind('reloadImg', function() {
+ toolbarTop.bind('reload-img', function(event) {
imgInput.reloadLastFile();
+ event.preventDefault();
});
- imgInput.fileClickjackFor( toolbar.$container.find('div.open-img') );
+ imgInput.fileClickjackFor( toolbarTop.$container.find('div.open-img') );
- toolbar.bind('invertBg', function() {
- var toolName = 'invertBg';
- if ( toolbar.isActive(toolName) ) {
- toolbar.deactivate(toolName);
+ toolbarTop.bind('invert-bg', function() {
+ var toolName = 'invert-bg';
+ if ( toolbarTop.isActive(toolName) ) {
spriteCanvasView.setBg('#fff');
}
else {
- toolbar.activate(toolName);
spriteCanvasView.setBg('#000');
}
});
Oops, something went wrong.

0 comments on commit 2d80e8a

Please sign in to comment.