Moved utils to seperate folder and fixed issue with textbuttons

src/js/components/ImageEditor/Canvas.js

@@ -1,5 +1,5 @@
 'use strict';
-var util = require('./Util');
+var util = require('../util');
 var ApertureHandler = require('./ApertureHandler');
 var ButtonMenu = require('./ButtonMenu');
 var DragbarHandler = require('./DragbarHandler');

src/js/components/ImageEditor/Draggable.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var util = require('./Util');
+var util = require('../util');
 
 /**
  * @param {fabric.Image} img

src/js/components/ImageEditor/ImageEditor.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var Canvas = require('./Canvas');
-var util = require('./Util');
+var util = require('../util');
 
 function ImageEditor(args) {
     var _canvas;
@@ -21,7 +21,7 @@ function ImageEditor(args) {
             _canvas.viewport.rulers.enable(this.isActive());
         })
         .addItem(['Fullscreen', 'Exit Fullscreen'], function () {
-            util.toggleFullScreen(_canvas.getSelectionElement().parentNode);
+            util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
         })
         .render();
 

src/js/components/ImageEditor/RulerHandler.js

@@ -1,5 +1,5 @@
 'use strict';
-var util = require('./Util');
+var util = require('../util');
 var TextButton = require('./TextButton');
 
 function RulerHandler(viewport) {
@@ -18,10 +18,6 @@ function RulerHandler(viewport) {
             this.marker[axis] = this[axis] = pos;
             var dim = (this[axis] - bounds[axis]) / (viewport.data.ppmm * 10);
 
-            if (axis === 'left') {
-                dim = viewport.data.dim.width - dim;
-            }
-
             if (axis === 'top') {
                 dim = viewport.data.dim.height - dim;
             }

src/js/components/ImageEditor/TextButton.js

@@ -14,13 +14,13 @@ function TextButton(text, settings) {
     var _rect = null;
     var _text = null;
 
-    settings = $.extend({}, settings, {
+    settings = $.extend({}, config.textButton, settings, {
         text: Array.isArray(text) ? text[0] : text,
         textActive: Array.isArray(text) ? text[1] : text,
     });
 
     var _rectSettings = {
-        fill: settings.background,
+        fill: settings.fill,
         width: settings.width,
         height: settings.height,
         originX: settings.originX,
@@ -86,7 +86,7 @@ function TextButton(text, settings) {
     function handleMouseDown(e) {
         this.__active = !this.__active;
 
-        _rect.setFill(settings[this.isActive() ? 'activeBackground' : 'background']);
+        _rect.setFill(settings[this.isActive() ? 'activeFill' : 'fill']);
         this.setText(settings[this.isActive() ? 'textActive' : 'text']);
         _callback.call(this, e);
 

src/js/components/ImageEditor/Util.js

@@ -1,124 +0,0 @@
-/* jshint -W097 */
-'use strict';
-
-module.exports = {
-    assertKeyValuePair: function (key, value) {
-        if (typeof key === 'object') {
-            return key;
-        }
-
-        var returnValue = {};
-        returnValue[key] = value;
-
-        return returnValue;
-    },
-
-    assertBetween: function (value, min, max) {
-        if (value < min) {
-            return min;
-        }
-        if (value > max) {
-            return max;
-        }
-        return value;
-    },
-
-    /**
-     * @param  {Integer} width
-     * @param  {Integer} height
-     * @return {Object}
-     *          axis: STRING,
-     *          dim: OBJECT( width: NUMBER, height: NUMBER),
-     *          width: NUMBER,
-     *          height: NUMBER,
-     *          ppmm: NUMBER
-     */
-    calcCrop: function (obj, width, height) {
-        var cropRatio = width / height;
-        var objRatio = obj.width / obj.height;
-
-        var returnValue = {
-            image: obj,
-            axis: objRatio > cropRatio ? 'x' : 'y',
-            dim: { width: width, height: height },
-            width:  obj.width,
-            height: obj.height
-        };
-
-        if (objRatio > cropRatio) {
-            returnValue.width *= cropRatio / objRatio;
-        } else {
-            returnValue.height /= cropRatio / objRatio;
-        }
-
-        // Pixels per milimeter
-        returnValue.ppmm = returnValue.width / (returnValue.dim.width * 10);
-
-        return returnValue;
-    },
-
-    /**
-     * @param  {fabric.Object} obj
-     * @param  {Object} bounds
-     * @return {fabric.Object}
-     */
-    setPositionInside: function (obj, bounds) {
-        ['left', 'top'].forEach(function (v) {
-            if (obj[v] < bounds[v].min) {
-                obj.set(v, bounds[v].min).setCoords();
-            }
-
-            if (obj[v] > bounds[v].max) {
-                obj.set(v, bounds[v].max).setCoords();
-            }
-        });
-        return obj;
-    },
-
-    /**
-     * @param  {Object} obj
-     * @param  {Object} properties
-     */
-    setProperties: function (obj, properties) {
-        for (var o in properties) {
-            if (properties.hasOwnProperty(o)) {
-                Object.defineProperty(obj, o, properties[o]);
-            }
-        }
-    },
-
-    /**
-     * Toggles the full screen state for passed DOM object
-     * @param {HTMLElement} elm
-     */
-    toggleFullScreen: function (elm) {
-        var isFullScreen =
-            document.fullscreenElement ||
-            document.mozFullScreenElement ||
-            document.webkitFullscreenElement ||
-            document.msFullscreenElement;
-
-        if (isFullScreen) {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-            return;
-        }
-
-        if(elm.requestFullScreen) {
-            elm.requestFullScreen();
-        }
-        else if(elm.webkitRequestFullScreen) {
-            elm.webkitRequestFullScreen();
-        }
-        else if(elm.mozRequestFullScreen) {
-            elm.mozRequestFullScreen();
-        }
-    }
-};

src/js/components/ImageEditor/Viewport.js

@@ -2,7 +2,7 @@
 
 var GoreHandler = require('./GoreHandler');
 var RulerHandler = require('./RulerHandler');
-var util = require('./Util');
+var util = require('../util');
 
 function Viewport(canvas) {
     var _beams = [];

src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js

@@ -2,7 +2,7 @@
 
 var Draggable = require('../Draggable');
 var ImageTransformationHandler = require('../ImageTransformationHandler');
-var util = require('../Util');
+var util = require('../../util');
 
 $.extend(fabric.Object.prototype, {
     cornerSize: 0,

src/js/components/config.js

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

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

@@ -1,14 +1,5 @@
 '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/ruler-handle.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+    fontSize: 12,
+    activeFill: '#000000',
+};

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

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

src/js/components/util.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+
+    assertKeyValuePair: require('./utils/assert-key-value-pair'),
+    assertBetween: require('./utils/assert-between'),
+    calcCrop: require('./utils/calc-crop'),
+    setPositionInside: require('./utils/set-position-inside'),
+    setProperties: require('./utils/set-properties'),
+    toggleFullscreen: require('./utils/toggle-fullscreen'),
+
+};

src/js/components/utils/assert-between.js

@@ -0,0 +1,13 @@
+'use strict';
+
+function assertBetween(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+
+module.exports = assertBetween;

src/js/components/utils/assert-key-value-pair.js

@@ -0,0 +1,14 @@
+'use strict';
+
+function assertKeyValuePair(key, value) {
+    if (typeof key === 'object') {
+        return key;
+    }
+
+    var returnValue = {};
+    returnValue[key] = value;
+
+    return returnValue;
+}
+
+module.exports = assertKeyValuePair;

src/js/components/utils/calc-crop.js

@@ -0,0 +1,37 @@
+'use strict';
+
+/**
+ * @param  {Integer} width
+ * @param  {Integer} height
+ * @return {Object}
+ *          axis: STRING,
+ *          dim: OBJECT( width: NUMBER, height: NUMBER),
+ *          width: NUMBER,
+ *          height: NUMBER,
+ *          ppmm: NUMBER
+ */
+function calcCrop(obj, width, height) {
+    var cropRatio = width / height;
+    var objRatio = obj.width / obj.height;
+
+    var returnValue = {
+        image: obj,
+        axis: objRatio > cropRatio ? 'x' : 'y',
+        dim: { width: width, height: height },
+        width:  obj.width,
+        height: obj.height
+    };
+
+    if (objRatio > cropRatio) {
+        returnValue.width *= cropRatio / objRatio;
+    } else {
+        returnValue.height /= cropRatio / objRatio;
+    }
+
+    // Pixels per milimeter
+    returnValue.ppmm = returnValue.width / (returnValue.dim.width * 10);
+
+    return returnValue;
+}
+
+module.exports = calcCrop;

src/js/components/utils/set-position-inside.js

@@ -0,0 +1,21 @@
+'use strict';
+
+/**
+ * @param  {fabric.Object} obj
+ * @param  {Object} bounds
+ * @return {fabric.Object}
+ */
+function setPositionInside(obj, bounds) {
+    ['left', 'top'].forEach(function (v) {
+        if (obj[v] < bounds[v].min) {
+            obj.set(v, bounds[v].min).setCoords();
+        }
+
+        if (obj[v] > bounds[v].max) {
+            obj.set(v, bounds[v].max).setCoords();
+        }
+    });
+    return obj;
+}
+
+module.exports = setPositionInside;

src/js/components/utils/set-properties.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/**
+ * @param  {Object} obj
+ * @param  {Object} properties
+ */
+function setProperties(obj, properties) {
+    for (var o in properties) {
+        if (properties.hasOwnProperty(o)) {
+            Object.defineProperty(obj, o, properties[o]);
+        }
+    }
+}
+
+module.exports = setProperties;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+/**
+ * Toggles the full screen state for passed DOM object
+ * @param {HTMLElement} elm
+ */
+function toggleFullscreen(elem) {
+    var isFullScreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement;
+
+    if (isFullScreen) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        }
+        return;
+    }
+
+    if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+    } else if (elem.webkitRequestFullScreen) {
+        elem.webkitRequestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+    }
+}
+
+module.exports = toggleFullscreen;

src/js/main.js

@@ -3,7 +3,6 @@
 (function () {
 
     require('./components/ImageEditor/fabric.ext/ObjectDefaults');
-    //require('./components/ImageEditor/fabric.ext/BaseEventHandlers');
     require('./components/ImageEditor/ImageEditor');
 
 }());