Skip to content

Commit

Permalink
Toolbar now a reusable component
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakearchibald
jakearchibald committed Jun 12, 2012
1 parent 2d80e8a commit f5eebb8
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 682 deletions.
43 changes: 36 additions & 7 deletions www/assets/7/script/Toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ spriteCow.Toolbar = (function() {
event.isActive = $button.hasClass('active');

if ( !toolbar.trigger(event).isDefaultPrevented() ) {
$button.toggleClass('active');
if (event.isActive) {
toolbar.deactivate(toolName);
}
else {
toolbar.activate(toolName);
}
}

event.preventDefault();
Expand All @@ -30,9 +35,7 @@ spriteCow.Toolbar = (function() {
toolbar._$feedback = $container.find('span.feedback');
}

var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent();

SpriteCowToolbarProto.addItem = function(toolName, text, opts) {
SpriteCowToolbar.createButton = function(toolName, text, opts) {
opts = opts || {};

var $button = $('<div role="button"/>').addClass(toolName).text(text).data('toolName', toolName);
Expand All @@ -44,7 +47,18 @@ spriteCow.Toolbar = (function() {
$button.addClass('active');
}

this._$feedback.before( $button );
return $button;
};

var SpriteCowToolbarProto = SpriteCowToolbar.prototype = new spriteCow.MicroEvent();

SpriteCowToolbarProto.addItem = function(toolName, text, opts) {
if (toolName instanceof spriteCow.ToolbarGroup) {
this._$feedback.before( toolName.$container );
}
else {
SpriteCowToolbar.createButton(toolName, text, opts).insertBefore( this._$feedback );
}

return this;
};
Expand Down Expand Up @@ -88,7 +102,9 @@ spriteCow.Toolbar = (function() {
};

SpriteCowToolbarProto.activate = function(toolName) {
this.$container.find('.' + toolName + '[role=button]').addClass('active');
var $button = this.$container.find('.' + toolName + '[role=button]');
$button.closest('.toolbar-group').children().removeClass('active');
$button.addClass('active');
return this;
};

Expand All @@ -104,4 +120,17 @@ spriteCow.Toolbar = (function() {
return SpriteCowToolbar;
})();


(function() {
function ToolbarGroup() {
this.$container = $('<div class="toolbar-group"/>');
}

var ToolbarGroupProto = ToolbarGroup.prototype;

ToolbarGroupProto.addItem = function(toolName, text, opts) {
spriteCow.Toolbar.createButton(toolName, text, opts).appendTo( this.$container );
return this;
};

spriteCow.ToolbarGroup = ToolbarGroup;
})();
20 changes: 11 additions & 9 deletions www/assets/7/script/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,22 @@
cssOutput = new spriteCow.CssOutput( $codeContainer ),
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});
toolbarTop.
addItem('open-img', 'Open').
addItem('reload-img', 'Reload Current Image', {noLabel: true}).
addItem(
new spriteCow.ToolbarGroup().
addItem('select-sprite', 'Select Sprite', {active: true}).
addItem('select-bg', 'Pick Background')
).
addItem('invert-bg', 'Toggle Dark Background', {noLabel: true});

spriteCow.pageLayout.init();

// listeners
imgInput.bind('load', function(img) {
spriteCanvas.setImg(img);
spriteCanvasView.setTool('selectSprite');
spriteCanvasView.setTool('select-sprite');
cssOutput.backgroundFileName = imgInput.fileName;
spriteCow.pageLayout.toAppView();
});
Expand All @@ -59,7 +63,7 @@
spriteCanvasView.bind('bgColorSelect', function(color) {
var toolName = 'select-sprite';
spriteCanvasView.setTool(toolName);
toolbarTop.deactivate('select-bg').activate(toolName);
toolbarTop.activate(toolName);
toolbarTop.feedback( 'Background set to ' + colourBytesToCss(color) );
});

Expand All @@ -69,12 +73,10 @@

toolbarTop.bind('select-bg', function() {
spriteCanvasView.setTool('select-bg');
toolbarTop.deactivate('select-sprite');
});

toolbarTop.bind('select-sprite', function() {
spriteCanvasView.setTool('select-sprite');
toolbarTop.deactivate('select-bg');
});

toolbarTop.bind('reload-img', function(event) {
Expand Down
25 changes: 15 additions & 10 deletions www/assets/7/style/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,19 +256,9 @@
padding: 4px 0;
text-indent: -5000px;
}
&.select-sprite {
border-width: 1px;
border-radius: 4px 0 0 4px;
margin-right: 0;
}
&.select-sprite::before {
background-position: -4px -2px;
}
&.select-bg {
border-radius: 0 4px 4px 0;
margin-right: 5px;
border-left-width: 0;
}
&.select-bg::before {
background-position: -50px -3px;
}
Expand All @@ -289,6 +279,21 @@
opacity: 0;
}
}

.toolbar-group [role=button] {
margin-right: 0;
border-radius: 0;
border-left-width: 0;

&:first-child {
border-left-width: 1px;
border-radius: 4px 0 0 4px;
}
&:last-child {
margin-right: 5px;
border-radius: 0 4px 4px 0;
}
}
// Footer
.main-footer {
overflow: hidden;
Expand Down
70 changes: 37 additions & 33 deletions www/assets/7/style/all.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,51 +469,55 @@ body {
padding: 4px 0;
text-indent: -5000px; }
/* line 259, _components.scss */
.toolbar [role=button].select-sprite {
border-width: 1px;
border-radius: 4px 0 0 4px;
margin-right: 0; }
/* line 264, _components.scss */
.toolbar [role=button].select-sprite::before {
background-position: -4px -2px; }
/* line 267, _components.scss */
.toolbar [role=button].select-bg {
border-radius: 0 4px 4px 0;
margin-right: 5px;
border-left-width: 0; }
/* line 272, _components.scss */
/* line 262, _components.scss */
.toolbar [role=button].select-bg::before {
background-position: -50px -3px; }
/* line 275, _components.scss */
/* line 265, _components.scss */
.toolbar [role=button].open-img::before {
background-position: -26px -2px; }
/* line 278, _components.scss */
/* line 268, _components.scss */
.toolbar [role=button].invert-bg::before {
background-position: -99px -2px; }
/* line 281, _components.scss */
/* line 271, _components.scss */
.toolbar [role=button].reload-img::before {
background-position: -75px -2px; }
/* line 285, _components.scss */
/* line 275, _components.scss */
.toolbar .feedback {
float: left;
padding: 5px;
color: #555;
opacity: 0; }

/* line 293, _components.scss */
/* line 283, _components.scss */
.toolbar-group [role=button] {
margin-right: 0;
border-radius: 0;
border-left-width: 0; }
/* line 288, _components.scss */
.toolbar-group [role=button]:first-child {
border-left-width: 1px;
border-radius: 4px 0 0 4px; }
/* line 292, _components.scss */
.toolbar-group [role=button]:last-child {
margin-right: 5px;
border-radius: 0 4px 4px 0; }

/* line 298, _components.scss */
.main-footer {
overflow: hidden;
background: rgba(0, 0, 0, 0.23); }
/* line 297, _components.scss */
/* line 302, _components.scss */
.main-footer p {
float: right;
padding: 15px 29px 0;
margin: 0;
white-space: nowrap; }
/* line 303, _components.scss */
/* line 308, _components.scss */
.intro .main-footer p {
padding: 12px 16px 0; }
/* line 307, _components.scss */
/* line 312, _components.scss */
.main-footer .the-team-logo {
background: url("imgs/sprites1.png") no-repeat -4px -29px;
width: 88px;
Expand All @@ -522,71 +526,71 @@ body {
text-indent: -5000px;
vertical-align: top;
margin: -1px 0 0 4px; }
/* line 316, _components.scss */
/* line 321, _components.scss */
.main-footer ul {
float: left;
padding: 16px 30px; }
/* line 320, _components.scss */
/* line 325, _components.scss */
.intro .main-footer ul {
padding: 13px 16px; }
/* line 324, _components.scss */
/* line 329, _components.scss */
.main-footer li {
display: inline; }
/* line 328, _components.scss */
/* line 333, _components.scss */
.main-footer li a:link, .main-footer li a:visited {
font-weight: normal;
color: #fff;
float: left;
padding: 0 10px 0 0;
margin: 0 10px 0 0;
border-right: 1px solid #fff; }
/* line 337, _components.scss */
/* line 342, _components.scss */
.main-footer li:last-child a:link, .main-footer li:last-child a:visited {
padding: 0;
margin: 0;
border: none; }

/* line 345, _components.scss */
/* line 350, _components.scss */
.feature-test {
display: none;
width: 800px;
margin: 0 auto;
text-align: center; }
/* line 351, _components.scss */
/* line 356, _components.scss */
.not-supported .feature-test {
display: block; }
/* line 354, _components.scss */
/* line 359, _components.scss */
.feature-test h1 {
font: normal 2.5em sans-serif;
margin: 0;
padding: 40px 0; }
/* line 359, _components.scss */
/* line 364, _components.scss */
.feature-test ul {
display: inline-block;
*display: inline;
zoom: 1; }
/* line 364, _components.scss */
/* line 369, _components.scss */
.feature-test li {
margin: 10px auto;
font-size: 1.1em;
overflow: hidden;
text-align: left; }
/* line 370, _components.scss */
/* line 375, _components.scss */
.feature-test p {
width: 600px;
margin: 0 auto 20px;
font-size: 1.1em;
text-align: left; }
/* line 377, _components.scss */
/* line 382, _components.scss */
.feature-test .pass, .feature-test .fail {
float: left;
width: 50px;
font-weight: bold;
color: #5f5; }
/* line 383, _components.scss */
/* line 388, _components.scss */
.feature-test .fail {
color: #f55; }

/* line 388, _components.scss */
/* line 393, _components.scss */
.intro-copy {
display: none; }
Loading

0 comments on commit f5eebb8

Please sign in to comment.