Fixed possibility to use different texts for buttons and moved mirror functionality

src/js/includes/Canvas.js

@@ -6,6 +6,7 @@ var ButtonMenu = require('./ButtonMenu');
 var DragbarHandler = require('./DragbarHandler');
 var Viewport = require('./Viewport');
 var ThreeDHandler = require('./3dHandler');
+var MirrorHandler = require('./MirrorHandler');
 
 var $document = $(document);
 
@@ -96,6 +97,14 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         return this.__image;
     },
 
+    /**
+     * @return {Viewport}
+     */
+    getMirror: function () {
+        return this.__mirror ||
+            (this.__mirror = new MirrorHandler(this.getImage()));
+    },
+
     /**
      * @return {Viewport}
      */

src/js/includes/ImageEditor.js

@@ -8,6 +8,16 @@ function ImageEditor(canvasId, args) {
 
     var _settings = $.extend({
         type: 'wallpaper',
+        buttons: {
+            flat: 'Flat',
+            threeD: '3d',
+            showMurals: 'Show Murals Panel',
+            hideMurals: 'Hide Murals Panel',
+            showRulers: 'Show Ruler',
+            hideRulers: 'Hide Ruler',
+            showFullscreen: 'Fullscreen',
+            hideFullscreen: 'Exit Fullscreen',
+        }
     }, args);
 
     // Initialize canvas
@@ -24,22 +34,22 @@ function ImageEditor(canvasId, args) {
      */
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
-            .addItem('flat', 'Flat', function () {
+            .addItem('flat', _settings.buttons.flat, function () {
                 _canvas.toggle3D(false);
             }, true)
-            .addItem('3d', '3D', function () {
+            .addItem('3d', _settings.buttons.threeD, function () {
                 _canvas.toggle3D(true);
             })
             .render();
     } else {
         _canvas.getButtonMenu()
-            .addItem('toggleMurals', ['Show Murals Panel', 'Hide Murals Panel'], function () {
+            .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
                 _canvas.getViewport().getGores().enable(this.isActive());
             })
-            .addItem('toggleRulers', ['Show Ruler', 'Hide Ruler'], function () {
+            .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                 _canvas.getViewport().getRulers().enable(this.isActive());
             })
-            .addItem('toggleFullscreen', ['Fullscreen', 'Exit Fullscreen'], function () {
+            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.hideFullscreen], function () {
                 util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
             })
             .render();

src/js/includes/ImageTransformationHandler.js

@@ -1,9 +1,6 @@
 'use strict';
 
 function ImageTransformationHandler(img) {
-    var _transformations = {
-        mirrored: 0
-    };
 
     /**
      * Gets information about how the cropped image is dragged
@@ -39,8 +36,8 @@ function ImageTransformationHandler(img) {
 
         var returnValue = $.extend(
             {},
-            _transformations,
             {
+                mirrored: img.canvas.getMirror().getStatus(),
                 width: viewportData.dim.width,
                 height: viewportData.dim.height,
             },
@@ -55,21 +52,6 @@ function ImageTransformationHandler(img) {
 
         return returnValue;
     };
-
-    /**
-     * @param  {String} name
-     * @param  {*} args
-     * @return {ImageTransformationHandler}
-     */
-    this.set = function (name, args) {
-        switch (name) {
-            case 'mirror':
-                _transformations.mirrored = (img.flipX = args) ? 1 : 0;
-        }
-        img.setCoords().canvas.renderAll();
-
-        return this;
-    };
 }
 
 module.exports = ImageTransformationHandler;

src/js/includes/MirrorHandler.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function MirrorHandler(img) {
+
+    var _mirrored = 0;
+
+    /**
+     * @param  {Boolean} checked
+     * @return {MirrorHandler}
+     */
+    this.set = function(checked) {
+        _mirrored = (img.flipX = checked) ? 1 : 0;
+        img.setCoords().canvas.renderAll();
+
+        return this;
+    }
+
+    this.getStatus = function() {
+        return _mirrored;
+    }
+
+
+}
+
+module.exports = MirrorHandler;

src/js/init.js

@@ -54,7 +54,7 @@
     }
 
     function handleMirrorChange() {
-        editor.canvas.getImage().transformation.set('mirror', this.checked);
+        editor.canvas.getMirror().set(this.checked);
     }
 
     function handleNoCropChange() {
@@ -101,7 +101,17 @@
 
     function init() {
         editor = new ImageEditor('canvas-editor', {
-                type: 'wallpaper',
+                type: 'canvas',
+                buttons: {
+                    flat: 'Flat',
+                    threeD: '3D',
+                    showMurals: 'Show Murals Panel',
+                    hideMurals: 'hide-murals',
+                    showRulers: 'show-rulers',
+                    hideRulers: 'hide-rulers',
+                    showFullscreen: 'show-fullscreen',
+                    hideFullscreen: 'hide-fullscreen',
+                }
             })
             .loadImage(imageUrl, function() {
                 $input.w.trigger('input');