Added some config files and refactored dragbars and buttonmenu

src/js/components/ImageEditor/ButtonMenu.js

@@ -1,42 +1,42 @@
 'use strict';
 
 var TextButton = require('./TextButton');
+var config = require('../config');
 
+/**
+ * Creates the menu with text-buttons settings provided. Settings will override
+ * the defaults from the config files.
+ * @param {Object} canvas
+ * @param {Object=} settings
+ */
 function ButtonMenu(canvas, settings) {
-    var _items = [];
+    var _textButtons = [];
     var _width = 0;
-
-    var _settings = $.extend({}, settings, {
-        background: '#444',
-        fontSize: 14,
-        height: 30,
-        margin: 5,
-        padding: 20
-    });
+    settings = $.extend({}, config.buttonMenu, settings);
 
     /**
      * Calculates the width of all contained items
      * @return {Number}
      */
-    function calcWidth() {
-        var width = 0;
-        _items.forEach(function (o) {
-            width += o.width;
+    function setWidth() {
+        var startWidth = 0;
+        _textButtons.forEach(function(textButton) {
+            startWidth += textButton.width;
         });
-        width += _settings.margin * (_items.length - 1);
-        return width;
+        _width = startWidth += settings.margin * (_textButtons.length - 1);
     }
 
     /**
+     * Adds items to the button-menu.
      * @param  {String} text
      * @param  {Function} callback
      * @return {ButtonMenu}
      */
-    this.addItem = function (text, callback) {
-        _items.push(
-            new TextButton(text, _settings)
+    this.addItem = function(text, callback) {
+        _textButtons.push(
+            new TextButton(text, settings)
                 .onClick(callback)
-                .set({ __group: this })
+                .set({__group: this})
         );
         return this;
     };
@@ -44,25 +44,24 @@ function ButtonMenu(canvas, settings) {
     /**
      * @return {ButtonMenu}
      */
-    this.bringToFront = function () {
-      _items.forEach(function (o) {
-          o.bringToFront();
-      });
-      return this;
+    this.bringToFront = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.bringToFront();
+        });
+        return this;
     };
 
     /**
      * @return {Array}
      */
-    this.getItems = function () {
-        return _items;
+    this.getItems = function() {
+        return _textButtons;
     };
 
     /**
      * @return {Number}
      */
-    this.getWidth = function () {
-        _width = calcWidth();
+    this.getWidth = function() {
         return _width;
     };
 
@@ -70,21 +69,23 @@ function ButtonMenu(canvas, settings) {
      * Recalculate boundaries and add all items to canvas if required
      * @return {ButtonMenu}
      */
-    this.render = function () {
+    this.render = function() {
+        setWidth();
+
         var start = canvas.width / 2 - this.getWidth() / 2;
         var currPos = Math.round(start);
 
-        _items.forEach(function (o) {
-            o.set({ top: 10, left: currPos })
-             .setCoords();
+        _textButtons.forEach(function(textButton) {
+            textButton.set({top: 10, left: currPos})
+                .setCoords();
 
-            if (!o.canvas) {
-              o.addTo(canvas);
+            if (!textButton.canvas) {
+                textButton.addTo(canvas);
             }
-            currPos += Math.round(o.width + _settings.margin);
+            currPos += Math.round(textButton.width + settings.margin);
 
-            // Disable moving of buttons
-            o.lockMovementX = o.lockMovementY = true;
+            // Disable moving of text-buttons
+            textButton.lockMovementX = textButton.lockMovementY = true;
         });
 
         canvas.renderAll();

src/js/components/ImageEditor/Canvas.js

@@ -86,12 +86,12 @@ util.setProperties(Canvas.prototype, {
     image: {
         get: Canvas.prototype.get_image
     },
-    topMenu: {
+    buttonMenu: {
         get: function () {
-            if (!this.__topMenu) {
-                this.__topMenu = new ButtonMenu(this);
+            if (!this.__buttonMenu) {
+                this.__buttonMenu = new ButtonMenu(this);
             }
-            return this.__topMenu;
+            return this.__buttonMenu;
         }
     },
     viewport: {

src/js/components/ImageEditor/DragHandle.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var config = require('../config');
+
 var DragHandle = function (handler) {
     var _currentAxis;
     var _dragging;
@@ -33,20 +35,10 @@ var DragHandle = function (handler) {
     };
 
     function getRect(text, width) {
-        var txt = new fabric.Text(text, {
-            fontFamily: 'breuer',
-            fontSize: 12,
-            fill: '#fff',
-            originX: 'center',
-            top: 2
-        });
-
-        var rect = new fabric.Rect({
-            fill: '#666',
+        var txt = new fabric.Text(text, config.dragHandle.text);
+        var rect = new fabric.Rect($.extend({}, config.dragHandle.rect, {
             width: width,
-            height: 20,
-            originX: 'center',
-        });
+        }));
 
         return new fabric.Group([rect, txt]).set({
             evented: false,
@@ -81,8 +73,8 @@ var DragHandle = function (handler) {
 
         this.__handles.h.addTo(this.getCanvas()).centerH().set({ top: tracks.h.top }).setCoords();
         this.__handles.v.addTo(this.getCanvas())
-            .setAngle(90)
-            .centerV().set({ left: tracks.v.left + tracks.v.width })
+            .setAngle(-90)
+            .centerV().set({ left: tracks.v.left })
             .setCoords();
 
         this.getCanvas()

src/js/components/ImageEditor/DragbarHandler.js

@@ -1,8 +1,13 @@
 'use strict';
+
 var DragHandle = require('./DragHandle');
+var config = require('../config');
 
 function DragbarHandler(canvas) {
-    var _items = { h: null, v: null };
+    var _dragbars = {
+        h: null,
+        v: null
+    };
 
     /**
      * @return {DragbarHandler}
@@ -20,7 +25,7 @@ function DragbarHandler(canvas) {
 
         this.__handles.init();
 
-        [].concat(_items.h, _items.v).forEach(function (o) {
+        [].concat(_dragbars.h, _dragbars.v).forEach(function (o) {
             o.bringToFront();
         });
 
@@ -39,14 +44,14 @@ function DragbarHandler(canvas) {
      */
     this.clear = function () {
         canvas
-            .remove(_items.h)
-            .remove(_items.v)
+            .remove(_dragbars.h)
+            .remove(_dragbars.v)
             .renderAll();
         return this;
     };
 
     this.getTracks = function () {
-        return _items;
+        return _dragbars;
     };
 
     /**
@@ -55,13 +60,21 @@ function DragbarHandler(canvas) {
     this.init = function () {
         this.clear();
 
-        _items.h = new fabric.Rect({ axis: 'h', fill: '#bbb', width: canvas.image.width, height: 20 })
-                    .addTo(canvas)
-                    .centerH().set({top: canvas.height - 30}).setCoords();
+        _dragbars.h = new fabric.Rect($.extend({}, config.dragBar, {
+            axis: 'h',
+            width: canvas.image.width,
+            height: config.dragBar.size,
+        }))
+            .addTo(canvas)
+            .centerH().set({ top: canvas.height - 30 }).setCoords();
 
-        _items.v = new fabric.Rect({ axis: 'v', fill: '#bbb', width: 20, height: canvas.image.height })
-                    .addTo(canvas)
-                    .set({left: canvas.width - 30}).setCoords();
+        _dragbars.v = new fabric.Rect($.extend({}, config.dragBar, {
+            axis: 'v',
+            width: config.dragBar.size,
+            height: canvas.image.height
+        }))
+            .addTo(canvas)
+            .set({ left: canvas.width - 40 }).setCoords();
 
         canvas.image.on('moving', this.sync);
 
@@ -72,8 +85,8 @@ function DragbarHandler(canvas) {
      * @return {DragbarHandler}
      */
     this.sync = function () {
-        _items.h.set({left: canvas.image.left}).setCoords();
-        _items.v.set({top: canvas.image.top}).setCoords();
+        _dragbars.h.set({left: canvas.image.left}).setCoords();
+        _dragbars.v.set({top: canvas.image.top}).setCoords();
         return this;
     };
 }

src/js/components/ImageEditor/ImageEditor.js

@@ -13,7 +13,7 @@ function ImageEditor(args) {
     // Initialize canvas
     _canvas = new Canvas('canvas');
 
-    _canvas.topMenu
+    _canvas.buttonMenu
         .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
             _canvas.viewport.gores.enable(this.isActive());
         })
@@ -70,13 +70,13 @@ function ImageEditor(args) {
         return this;
     };
 
-     util.setProperties(this, {
-         canvas: {
-             get: function () {
-                 return _canvas;
-             }
-         }
-     });
+    util.setProperties(this, {
+        canvas: {
+            get: function () {
+                return _canvas;
+            }
+        }
+    });
 }
 
 $(function () {

src/js/components/ImageEditor/TextButton.js

@@ -1,101 +1,68 @@
 'use strict';
 
-var defaults = {
-    activeBackground: '#000',
-    background: '#000',
-    color: '#fff',
-    fontFamily: 'breuer',
-    fontSize: 12,
-    padding: 10,
-};
+var config = require('../config');
 
 /**
- * @param {String} text
+ * Creates a text-button with text/settings provided.
+ * @param {String} text - text to be shown inside the button
  * @param {Object} settings
  */
 function TextButton(text, settings) {
     fabric.Group.call(this);
 
-    var _callback = function () {};
-
+    var _callback = null;
     var _rect = null;
     var _text = null;
 
-    settings = $.extend({}, defaults, settings);
-
-    settings.text = Array.isArray(text) ? text[0] : text;
-    settings.textActive = Array.isArray(text) ? text[1] : text;
+    settings = $.extend({}, settings, {
+        text: Array.isArray(text) ? text[0] : text,
+        textActive: Array.isArray(text) ? text[1] : text,
+    });
 
     var _rectSettings = {
         fill: settings.background,
         width: settings.width,
         height: settings.height,
-        originX: 'center',
-        originY: 'center',
+        originX: settings.originX,
+        originY: settings.originY,
     };
 
     var _textSettings = {
         fill: settings.color,
         fontFamily: settings.fontFamily,
         fontSize: settings.fontSize,
-        originX: 'center',
-        originY: 'center',
+        originX: settings.originX,
+        originY: settings.originY,
     };
 
     // If width or height is omitted, the size for this button needs to be
     // calculated when setting Text.
     // An initial value for width and height needs to be set, else we won't
     // render correctly.
-    if ((settings.dynamicW = !settings.width)) {
+    if (!settings.width) {
+        settings.dynamicW = true;
         _rectSettings.width = 1;
     }
-
-    if ((settings.dynamicH = !settings.height)) {
+    if (!settings.height) {
+        settings.dynamicH = true;
         _rectSettings.height = 1;
     }
 
     // Make sure we're interactive
     this.selectable = true;
-
-    this.hoverCursor = 'default';
+    this.hoverCursor = settings.cursor;
 
     // Initialize text and rectangle
     _text = new fabric.Text('', _textSettings);
     _rect = new fabric.Rect(_rectSettings);
-    this.addWithUpdate(_rect)
-        .addWithUpdate(_text);
 
-    var Event = {
-        mouseDown: function (e) {
-            this.__active = !this.__active;
-            _rect.setFill(this.__active ? settings.activeBackground : settings.background);
-            this.setText(settings[this.isActive() ? 'textActive' : 'text']);
-            _callback.call(this, e);
-
-            if (this.__group) {
-              this.__group.render();
-            }
-        }
-    };
-
-    /**
-     * @return {Boolean}
-     */
-    this.isActive = function () {
-        return this.__active;
-    };
-
-    this.onClick = function (callback) {
-        _callback = callback || function () {};
-        this.on('mousedown', Event.mouseDown);
-        return this;
-    };
+    this.addWithUpdate(_rect).addWithUpdate(_text);
 
     /**
      * @param  {String} text
      * @return {TextButton}
      */
-    this.setText = function (text) {
+    this.setText = function(text) {
         _text.setText((text || '').toString()).setCoords();
 
         if (settings.dynamicW) {
@@ -109,6 +76,31 @@ function TextButton(text, settings) {
         return this.setCoords();
     };
 
+    /**
+     * @return {Boolean}
+     */
+    this.isActive = function() {
+        return this.__active;
+    };
+
+    function handleMouseDown(e) {
+        this.__active = !this.__active;
+
+        _rect.setFill(settings[this.isActive() ? 'activeBackground' : 'background']);
+        this.setText(settings[this.isActive() ? 'textActive' : 'text']);
+        _callback.call(this, e);
+
+        if (this.__group) {
+            this.__group.render();
+        }
+    }
+
+    this.onClick = function(callback) {
+        _callback = callback || function() {};
+        this.on('mousedown', handleMouseDown);
+        return this;
+    };
+
     if (settings.text) {
         this.setText(settings.text);
     }

src/js/components/ImageEditor/Viewport.js

@@ -121,7 +121,7 @@ function Viewport(canvas) {
         this.rulers.reset();
         canvas.aperture.setTransparent(true);
         canvas.image.__moved = false;
-        canvas.topMenu.bringToFront();
+        canvas.buttonMenu.bringToFront();
     };
 
     util.setProperties(this, {
@@ -131,16 +131,16 @@ function Viewport(canvas) {
             }
         },
         gores: {
-          get: function () {
-              return this.__goreHandler ||
-                (this.__goreHandler = new GoreHandler(this));
-          }
+            get: function () {
+                return this.__goreHandler ||
+                    (this.__goreHandler = new GoreHandler(this));
+            }
         },
         rulers: {
-          get: function () {
-              return this.__rulerHandler ||
-                (this.__rulerHandler = new RulerHandler(this));
-          }
+            get: function () {
+                return this.__rulerHandler ||
+                    (this.__rulerHandler = new RulerHandler(this));
+            }
         }
     });
 }

src/js/components/ImageEditor/settings/TopMenu.js

@@ -1,9 +0,0 @@
-'use strict';
-
-module.exports = {
-      activeBackground: '#000',
-      background: '#444',
-      fontSize: 14,
-      height: 30,
-      padding: 20
-};

src/js/components/config.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+    buttonMenu: require('./config/button-menu'),
+    dragHandle: require('./config/drag-handle'),
+    dragBar: require('./config/drag-bar'),
+};

src/js/components/config/button-menu.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+    color: '#ffffff',
+    fontFamily: 'breuer',
+    fontSize: 14,
+    background: '#000000',
+    activeBackground: '#444444',
+    cursor: 'pointer',
+    originX: 'center',
+    originY: 'center',
+    padding: 20,
+    margin: 5,
+};

src/js/components/config/drag-bar.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+    fill: '#bbbbbb',
+    size: 20,
+};

src/js/components/config/drag-handle.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = {
+    text: {
+        fontFamily: 'breuer',
+        fontSize: 12,
+        fill: '#ffffff',
+        originX: 'center',
+        top: 2,
+    },
+    rect: {
+        fill: '#666666',
+        height: 20,
+        originX: 'center',
+    },
+};

src/js/main.js

@@ -1,7 +1,9 @@
+'use strict';
+
 (function () {
-    'use strict';
 
     require('./components/ImageEditor/fabric.ext/ObjectDefaults');
     //require('./components/ImageEditor/fabric.ext/BaseEventHandlers');
     require('./components/ImageEditor/ImageEditor');
+
 }());