diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/components/ImageEditor/ButtonMenu.js index 0230ee1..46524e2 100644 --- a/src/js/components/ImageEditor/ButtonMenu.js +++ b/src/js/components/ImageEditor/ButtonMenu.js @@ -32,12 +32,17 @@ function ButtonMenu(canvas, settings) { * @param {Function} callback * @return {ButtonMenu} */ - this.addItem = function(text, callback) { + this.addItem = function(text, callback, isActive) { _textButtons.push( new TextButton(text, settings) .onClick(callback) .set({__group: this}) ); + + if (isActive) { + _textButtons[_textButtons.length - 1].setActive(); + } + return this; }; diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index bc4e82f..6760222 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -18,24 +18,30 @@ function ImageEditor(canvasId, args) { __type: _settings.type }); - if (_canvas.__type === 'canvas') { - _canvas.getButtonMenu() - .addItem('3D', function () {}) - .addItem('Flat', function () {}) - .render(); - } else { - _canvas.getButtonMenu() - .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () { - _canvas.getViewport().getGores().enable(this.isActive()); - }) - .addItem(['Show Ruler', 'Hide Ruler'], function () { - _canvas.getViewport().getRulers().enable(this.isActive()); - }) - .addItem(['Fullscreen', 'Exit Fullscreen'], function () { - util.toggleFullscreen(_canvas.getSelectionElement().parentNode); - }) - .render(); - } + /** + * @TODO: Refactor this. Since Canvas knows the type of editor it probably + * better could reside there. + */ + $(function () { + if (_canvas.__type === 'canvas') { + _canvas.getButtonMenu() + .addItem('3D', function () {}) + .addItem('Flat', function () {}) + .render(); + } else { + _canvas.getButtonMenu() + .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () { + _canvas.getViewport().getGores().enable(this.isActive()); + }) + .addItem(['Show Ruler', 'Hide Ruler'], function () { + _canvas.getViewport().getRulers().enable(this.isActive()); + }) + .addItem(['Fullscreen', 'Exit Fullscreen'], function () { + util.toggleFullscreen(_canvas.getSelectionElement().parentNode); + }) + .render(); + } + }); /** * Crops image to desired dimensions diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/components/ImageEditor/TextButton.js index 583d516..b045e68 100644 --- a/src/js/components/ImageEditor/TextButton.js +++ b/src/js/components/ImageEditor/TextButton.js @@ -56,8 +56,6 @@ function TextButton(text, settings) { }; function handleMouseDown(e) { - this.__active = !this.__active; - _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']); this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']); _callback.call(this, e); @@ -69,10 +67,18 @@ function TextButton(text, settings) { this.onClick = function(callback) { _callback = callback || function() {}; - this.on('mousedown', handleMouseDown); + this.on('mousedown', function (e) { + this.__active = !this.__active; + handleMouseDown.call(this, e); + }.bind(this)); return this; }; + this.setActive = function (isActive) { + this.__active = typeof isActive === 'undefined' ? true : !!isActive; + handleMouseDown.call(this); + }; + if (_textSettings.text) { this.setText(_textSettings.text); } diff --git a/src/js/init.js b/src/js/init.js index 82cb1f8..f38667b 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -13,7 +13,7 @@ var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450'; - var editor = new ImageEditor('canvas-editor', {'type': 'canvas'}) + var editor = new ImageEditor('canvas-editor', {'type': 'wallpaper'}) .loadImage(imageUrl, function() { $input.w.trigger('input'); });