Fixed fullscreen toggling

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;
         }

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})
         );

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;
     }
 

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;
     };

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);
-            })
+            }, true)
-            .addItem('3D', function () {
+            .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]

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)

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']);
+        toggleActiveStyle.call(this);
-        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
-        this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
         _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) {

src/js/components/utils/toggle-fullscreen.js

@@ -5,11 +5,7 @@
  * @param {HTMLElement} elm
  */
 function toggleFullscreen(elem) {
-    var isFullScreen =
+    var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
-        document.fullscreenElement ||
-        document.mozFullScreenElement ||
-        document.webkitFullscreenElement ||
-        document.msFullscreenElement;
 
     if (isFullScreen) {
         if (document.exitFullscreen) {

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});
         }
     };