Moved out code not connected to image editor into main.js and renamed fabric.ext files

src/js/components/ImageEditor/ImageEditor.js

@@ -79,32 +79,4 @@ function ImageEditor(args) {
     });
 }
 
-$(function () {
+module.exports = ImageEditor;
-    // Inputs for the editor
-    var $input = {
-        w: $('#form-control input[name="w"]'),
-        h: $('#form-control input[name="h"]'),
-        image_id: $('#form-control input[name="image_id"]'),
-        mirror: $('#form-control input[name="mirror"]')
-    };
-
-    var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
-
-    var editor = new ImageEditor({ 'type': 'canvas' })
-        .loadImage(imageUrl, function () {
-            $input.w.trigger('keyup');
-        });
-
-    var Event = {
-        DimensionChange: function () {
-            editor.crop($input.w.val(), $input.h.val());
-        },
-        Mirror: function () {
-            editor.canvas.image.transformation.set('mirror', this.checked);
-        }
-    };
-
-    $input.w.keyup(Event.DimensionChange);
-    $input.h.keyup(Event.DimensionChange);
-    $input.mirror.click(Event.Mirror);
-});

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

@@ -1,61 +0,0 @@
-'use strict';
-
-var Draggable = require('../Draggable');
-var ImageTransformationHandler = require('../ImageTransformationHandler');
-var util = require('../../util');
-
-$.extend(fabric.Object.prototype, {
-    cornerSize: 0,
-    hasBorders: false,
-    hasControls: false,
-    padding: 0,
-    selectable: false,
-    strokeWidth: 0,
-    addTo: function (canvas) {
-        canvas.add(this);
-        return this;
-    },
-});
-
-util.setProperties(fabric.Image.prototype, {
-    drag: {
-        get: function () {
-            return this.__draggable || (this.__draggable = new Draggable(this));
-        }
-    },
-
-    transformation: {
-        get: function () {
-            return this.__ImageTransformationHandler ||
-              (this.__ImageTransformationHandler = new ImageTransformationHandler(this));
-        }
-    }
-});
-
-$.extend(fabric.Rect.prototype, {
-  /**
-   * Gets the inner bounds of this fabric.Rect
-   * @return {Object}
-   */
-  getInsideBoundingRect: function () {
-      var bounds = this.getBoundingRect();
-      var returnValue = {
-          left:   bounds.left + this.strokeWidth,
-          top:    bounds.top + this.strokeWidth,
-          width:  bounds.width - this.strokeWidth * 2,
-          height: bounds.height - this.strokeWidth * 2
-      };
-
-      returnValue.min = {
-          left: returnValue.left,
-          top: returnValue.top
-      };
-
-      returnValue.max = {
-          left: returnValue.left + returnValue.width,
-          top: returnValue.top + returnValue.height
-      };
-
-      return returnValue;
-  }
-});

src/js/components/extend-fabric-functionality.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var Draggable = require('../Draggable');
+var ImageTransformationHandler = require('../ImageTransformationHandler');
+var util = require('../../util');
+
+function ExtendFabricFunctionality() {
+
+    // Set default values for the fabric canvas
+    $.extend(fabric.Object.prototype, {
+        cornerSize: 0,
+        hasBorders: false,
+        hasControls: false,
+        padding: 0,
+        selectable: false,
+        strokeWidth: 0,
+        addTo: function(canvas) {
+            canvas.add(this);
+            return this;
+        },
+    });
+
+
+    util.setProperties(fabric.Image.prototype, {
+        drag: {
+            get: function() {
+                return this.__draggable || (this.__draggable = new Draggable(this));
+            }
+        },
+
+        transformation: {
+            get: function() {
+                return this.__ImageTransformationHandler ||
+                    (this.__ImageTransformationHandler = new ImageTransformationHandler(this));
+            }
+        }
+    });
+
+    $.extend(fabric.Rect.prototype, {
+        /**
+         * Gets the inner bounds of this fabric.Rect
+         * @return {Object}
+         */
+        getInsideBoundingRect: function() {
+            var bounds = this.getBoundingRect();
+            var returnValue = {
+                left: bounds.left + this.strokeWidth,
+                top: bounds.top + this.strokeWidth,
+                width: bounds.width - this.strokeWidth * 2,
+                height: bounds.height - this.strokeWidth * 2
+            };
+
+            returnValue.min = {
+                left: returnValue.left,
+                top: returnValue.top
+            };
+
+            returnValue.max = {
+                left: returnValue.left + returnValue.width,
+                top: returnValue.top + returnValue.height
+            };
+
+            return returnValue;
+        }
+    });
+}
+
+module.exports = ExtendFabricFunctionality;

src/js/main.js

@@ -2,7 +2,40 @@
 
 (function () {
 
-    require('./components/ImageEditor/fabric.ext/ObjectDefaults');
+    var ExtendFabricFunctionality = require('./components/extend-fabric-functionality');
-    require('./components/ImageEditor/ImageEditor');
+    var ImageEditor = require('./components/ImageEditor/ImageEditor');
+
+    ExtendFabricFunctionality();
+    ImageEditor();
 
 }());
+
+$(function () {
+    // Inputs for the editor
+    var $input = {
+        w: $('#form-control input[name="w"]'),
+        h: $('#form-control input[name="h"]'),
+        image_id: $('#form-control input[name="image_id"]'),
+        mirror: $('#form-control input[name="mirror"]')
+    };
+
+    var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
+
+    var editor = new ImageEditor({ 'type': 'canvas' })
+        .loadImage(imageUrl, function () {
+            $input.w.trigger('keyup');
+        });
+
+    var Event = {
+        DimensionChange: function () {
+            editor.crop($input.w.val(), $input.h.val());
+        },
+        Mirror: function () {
+            editor.canvas.image.transformation.set('mirror', this.checked);
+        }
+    };
+
+    $input.w.keyup(Event.DimensionChange);
+    $input.h.keyup(Event.DimensionChange);
+    $input.mirror.click(Event.Mirror);
+}());