diff --git a/src/js/components/ImageEditor/ApertureHandler.js b/src/js/components/ImageEditor/ApertureHandler.js index f6a4e3a..e73c8df 100644 --- a/src/js/components/ImageEditor/ApertureHandler.js +++ b/src/js/components/ImageEditor/ApertureHandler.js @@ -39,9 +39,11 @@ function ApertureHandler(canvas) { }); if (axis === 'v') { + active[0].width= active[1].width = canvas.width; active[0].top = viewport.top - active[0].height + 0.5; active[1].top = viewport.top + viewport.height - 0.5; } else { + active[0].height = active[1].height = canvas.height; active[0].left = viewport.left - active[0].width + 0.5; active[1].left = viewport.left + viewport.width - 0.5; } diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/components/ImageEditor/ButtonMenu.js index 072aec7..d5c92e6 100644 --- a/src/js/components/ImageEditor/ButtonMenu.js +++ b/src/js/components/ImageEditor/ButtonMenu.js @@ -31,9 +31,9 @@ function ButtonMenu(canvas, settings) { * @param {Function} callback * @return {ButtonMenu} */ - this.addItem = function(text, callback, isActive) { + this.addItem = function(id, text, callback, isActive) { _textButtons.push( - new TextButton(text, settings) + new TextButton(id, text, settings) .onClick(callback) .set({__group: this}) ); diff --git a/src/js/components/ImageEditor/DragHandle.js b/src/js/components/ImageEditor/DragHandle.js index 55a5c9b..f95eb69 100644 --- a/src/js/components/ImageEditor/DragHandle.js +++ b/src/js/components/ImageEditor/DragHandle.js @@ -67,6 +67,7 @@ var DragHandle = function (handler) { this.setHandlePosition = function() { this.__handles.v.set({left: handler.getTracks().v.left}).setCoords(); + this.__handles.h.set({top: handler.getTracks().h.top}).setCoords(); return this; } diff --git a/src/js/components/ImageEditor/DragbarHandler.js b/src/js/components/ImageEditor/DragbarHandler.js index 69f2a0a..0101d77 100644 --- a/src/js/components/ImageEditor/DragbarHandler.js +++ b/src/js/components/ImageEditor/DragbarHandler.js @@ -58,11 +58,12 @@ function DragbarHandler(canvas) { }; this.resetPosition = function() { - if (!_dragbars.v) { + if (!_dragbars.v || !_dragbars.h) { return this; } _dragbars.v.set({ left: canvas.width - 30 }).setCoords(); + _dragbars.h.set({ top: canvas.height - 30 }).setCoords(); this.__handles.setHandlePosition(); return this; }; diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 383ad34..285aa16 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -25,27 +25,41 @@ function ImageEditor(canvasId, args) { */ if (_canvas.__type === 'canvas') { _canvas.getButtonMenu() - .addItem('Flat', function () { + .addItem('flat', 'Flat', function () { _canvas.toggle3D(false); - }) - .addItem('3D', function () { + }, true) + .addItem('3d', '3D', function () { _canvas.toggle3D(true); }) .render(); } else { _canvas.getButtonMenu() - .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () { + .addItem('toggleMurals', ['Show Murals Panel', 'Hide Murals Panel'], function () { _canvas.getViewport().getGores().enable(this.isActive()); }) - .addItem(['Show Ruler', 'Hide Ruler'], function () { + .addItem('toggleRulers', ['Show Ruler', 'Hide Ruler'], function () { _canvas.getViewport().getRulers().enable(this.isActive()); }) - .addItem(['Fullscreen', 'Exit Fullscreen'], function () { + .addItem('toggleFullscreen', ['Fullscreen', 'Exit Fullscreen'], function () { util.toggleFullscreen(_canvas.getSelectionElement().parentNode); }) .render(); } + $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) { + var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; + + if (isFullscreen) { + return; + } + + _canvas.getButtonMenu().getItems().forEach(function(button) { + if (button.getId() === 'toggleFullscreen') { + button.setActive(false); + } + }); + }); + /** * Crops image to desired dimensions * @param {int} width [description] diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/components/ImageEditor/RulerHandler.js index 91262dc..9475677 100644 --- a/src/js/components/ImageEditor/RulerHandler.js +++ b/src/js/components/ImageEditor/RulerHandler.js @@ -77,13 +77,13 @@ function RulerHandler(viewport) { viewport.canvas.add(_lines.h); viewport.canvas.add(_lines.v); - _rect.h = new TextButton('H', config.rulerHandle) + _rect.h = new TextButton('horizontalRuler', 'H', config.rulerHandle) .set(config.rulerHandle.h(_lines, bounds)) .addTo(viewport.canvas) .on('moving', Event.onMove) .trigger('moving'); - _rect.v = new TextButton('V', config.rulerHandle) + _rect.v = new TextButton('verticalRuler', 'V', config.rulerHandle) .set(config.rulerHandle.v(_lines, bounds)) .addTo(viewport.canvas) .on('moving', Event.onMove) diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/components/ImageEditor/TextButton.js index 645042a..c15e720 100644 --- a/src/js/components/ImageEditor/TextButton.js +++ b/src/js/components/ImageEditor/TextButton.js @@ -7,12 +7,13 @@ var config = require('../config'); * @param {String} text - text to be shown inside the button * @param {Object} settings */ -function TextButton(text, settings) { +function TextButton(id, text, settings) { fabric.Group.call(this); var _callback = null; var _rect = null; var _text = null; + var _id = id; var width = settings.rect ? settings.rect.width : 0; var height = settings.rect ? settings.rect.height : 0; @@ -50,6 +51,10 @@ function TextButton(text, settings) { return this.setCoords(); }; + this.getId = function() { + return _id; + } + /** * @return {Boolean} */ @@ -58,9 +63,7 @@ function TextButton(text, settings) { }; function handleMouseDown(e) { - _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']); - _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']); - this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']); + toggleActiveStyle.call(this); _callback.call(this, e); if (this.__group) { @@ -68,6 +71,12 @@ function TextButton(text, settings) { } } + function toggleActiveStyle() { + _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']); + _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']); + this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']); + } + this.onClick = function(callback) { _callback = callback || function() {}; this.on('mousedown', function (e) { @@ -79,7 +88,7 @@ function TextButton(text, settings) { this.setActive = function (isActive) { this.__active = typeof isActive === 'undefined' ? true : !!isActive; - handleMouseDown.call(this); + toggleActiveStyle.call(this); }; if (_textSettings.text) { diff --git a/src/js/components/utils/toggle-fullscreen.js b/src/js/components/utils/toggle-fullscreen.js index d3b8c6b..cdb76ec 100644 --- a/src/js/components/utils/toggle-fullscreen.js +++ b/src/js/components/utils/toggle-fullscreen.js @@ -5,11 +5,7 @@ * @param {HTMLElement} elm */ function toggleFullscreen(elem) { - var isFullScreen = - document.fullscreenElement || - document.mozFullScreenElement || - document.webkitFullscreenElement || - document.msFullscreenElement; + var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; if (isFullScreen) { if (document.exitFullscreen) { diff --git a/src/js/init.js b/src/js/init.js index 066ce1a..2e026df 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -17,7 +17,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'); Event.handleResize(); @@ -68,8 +68,9 @@ editor.canvas.getViewport().setFrame($(this).val()); }, handleResize: function() { + var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; var width = $wrapper.width(); - var height = $wrapper.height(); + var height = isFullScreen ? $window.height() : $wrapper.height(); editor.canvas.resize({width: width, height: height}); } };