Some refactoring and documentation

src/js/includes/ButtonMenu.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var TextButton = require('./TextButton');
-var config = require('../config');
+var config = require('./config');
 
 /**
  * Creates the menu with text-buttons settings provided. Settings will override

src/js/includes/Canvas.js

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

src/js/includes/DragHandle.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 var DragHandle = function (handler) {
     var _currentAxis;

src/js/includes/DragbarHandler.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var DragHandle = require('./DragHandle');
-var config = require('../config');
+var config = require('./config');
 
 function DragbarHandler(canvas) {
     var _dragbars = {

src/js/includes/Draggable.js

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

src/js/includes/FrameHandler.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 function FrameHandler(viewport) {
     var _frames;

src/js/includes/ImageEditor.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var Canvas = require('./Canvas');
-var util = require('../util');
+var util = require('./util');
 
 function ImageEditor(canvasId, args) {
     var _canvas;

src/js/includes/RulerHandler.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var util = require('../util');
+var util = require('./util');
 var TextButton = require('./TextButton');
-var config = require('../config');
+var config = require('./config');
 
 function RulerHandler(viewport) {
     var _enabled = false;

src/js/includes/TextButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var config = require('../config');
+var config = require('./config');
 
 /**
  * Creates a text-button with text/settings provided.

src/js/includes/Viewport.js

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var Draggable = require('./ImageEditor/Draggable');
-var ImageTransformationHandler = require('./ImageEditor/ImageTransformationHandler');
+var Draggable = require('./Draggable');
+var ImageTransformationHandler = require('./ImageTransformationHandler');
 var util = require('./util');
 
 function ExtendFabricFunctionality() {

src/js/init.js

@@ -1,30 +1,29 @@
 'use strict';
 
+
+/**
+ * This is just an example usage of the image editor. Also this is used for testing.
+ * This code can be pretty messy, but that is fine because nothing of this will come to
+ * production.
+ */
 (function() {
     var $document = $(document);
     var $window = $(window);
     var $wrapper = $('#wrapper');
+    var $formControl = $('#form-control');
+    var editor = null;
 
     // 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"]'),
-        noCrop: $('#form-control input[name="no-crop"]'),
-        border: $('#form-control select[name="canvas-border"]'),
+        w: $formControl.find('input[name="w"]'),
+        h: $formControl.find('input[name="h"]'),
+        image_id: $formControl.find('input[name="image_id"]'),
+        mirror: $formControl.find('input[name="mirror"]'),
+        noCrop: $formControl.find('input[name="no-crop"]'),
+        border: $formControl.find('select[name="canvas-border"]'),
     };
-
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
-    var editor = new ImageEditor('canvas-editor', {
-            type: 'canvas',
-        })
-        .loadImage(imageUrl, function() {
-            $input.w.trigger('input');
-            Event.handleResize();
-        });
-
     function getOptimalDimension(values, currentDimension, ratio) {
         if (currentDimension === 'h') {
             values.width = Math.round(values.height * ratio);
@@ -35,63 +34,83 @@
         return values;
     }
 
-    var Event = {
-        DimensionChange: function() {
-            var noCropIsChecked = $input.noCrop.is(':checked');
-            var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
-            var data = editor.canvas.getViewport().getData();
-            var values = {
-                width: $input.w.val(),
-                height: $input.h.val(),
-            };
+    function handleDimensionChange() {
+        var noCropIsChecked = $input.noCrop.is(':checked');
+        var currentDimension = $(this).attr('name') === 'h' ? 'h' : 'w';
+        var data = editor.canvas.getViewport().getData();
+        var values = {
+            width: $input.w.val(),
+            height: $input.h.val(),
+        };
 
-            if (noCropIsChecked) {
-                values = getOptimalDimension(values, currentDimension, data.objectRatio);
-            }
-
-            $input.w.val(values.width);
-            $input.h.val(values.height);
-
-            editor.crop(values.width, values.height);
-        },
-        Mirror: function() {
-            editor.canvas.getImage().transformation.set('mirror', this.checked);
-        },
-        NoCrop: function() {
-            $input.w.trigger('input');
-        },
-        SetBorder: function () {
-            editor.canvas.getViewport().setFrame($(this).val());
-        },
-        handleResize: function() {
-            var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
-            var width = $wrapper.width();
-            var height = isFullScreen ? ($window.height() < 800 ? $window.height() : 800) : $wrapper.height();
-            editor.canvas.resize({width: width, height: height});
+        if (noCropIsChecked) {
+            values = getOptimalDimension(values, currentDimension, data.objectRatio);
         }
-    };
 
-    $input.w.on('input', Event.DimensionChange);
-    $input.h.on('input', Event.DimensionChange);
-    $input.mirror.on('change', Event.Mirror);
-    $input.noCrop.on('change', Event.NoCrop);
-    $input.border.on('change', Event.SetBorder);
-    $document
-        .on('PIE:dragged', function() {
-           console.log('Dragged the image/dragbar!');
-        })
-        .on('PIE:needs-dragging', function(e, data) {
-           console.log('Image needs dragging on: ' + data.axis);
-        })
-        .on('PIE:dragbar-click', function(e, data) {
-           console.log('Clicked on a dragbar! Axis: ' + data.axis);
-        })
-        .on('PIE:image-start-load', function() {
-           console.log('Start loading image');
-        })
-        .on('PIE:image-end-load', function() {
-           console.log('Image loaded');
-        });
-    $window.on('resize', Event.handleResize);
+        $input.w.val(values.width);
+        $input.h.val(values.height);
+
+        editor.crop(values.width, values.height);
+    }
+
+    function handleMirrorChange() {
+        editor.canvas.getImage().transformation.set('mirror', this.checked);
+    }
+
+    function handleNoCropChange() {
+        $input.w.trigger('input');
+    }
+
+    function handleFrameChange() {
+        editor.canvas.getViewport().setFrame($(this).val());
+    }
+
+    function handleResize() {
+        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+        var width = $wrapper.width();
+        var height = isFullScreen ? $window.height() : $wrapper.height();
+        editor.canvas.resize({width: width, height: height});
+    }
+
+    function eventHandlers() {
+        $input.w.on('input', handleDimensionChange);
+        $input.h.on('input', handleDimensionChange);
+        $input.mirror.on('change', handleMirrorChange);
+        $input.noCrop.on('change', handleNoCropChange);
+        $input.border.on('change', handleFrameChange);
+
+        $document
+            .on('PIE:dragged', function() {
+                console.log('Dragged the image/dragbar!');
+            })
+            .on('PIE:needs-dragging', function(e, data) {
+                console.log('Image needs dragging on: ' + data.axis);
+            })
+            .on('PIE:dragbar-click', function(e, data) {
+                console.log('Clicked on a dragbar! Axis: ' + data.axis);
+            })
+            .on('PIE:image-start-load', function() {
+                console.log('Start loading image');
+            })
+            .on('PIE:image-end-load', function() {
+                console.log('Image loaded');
+            });
+
+        $window.on('resize', handleResize);
+    }
+
+    function init() {
+        editor = new ImageEditor('canvas-editor', {
+                type: 'canvas',
+            })
+            .loadImage(imageUrl, function() {
+                $input.w.trigger('input');
+                handleResize();
+            });
+
+        eventHandlers();
+    }
+
+    init();
 
 }());

src/js/main.js

@@ -2,10 +2,17 @@
 
 (function() {
 
-    var ExtendFabricFunctionality = require('./components/extend-fabric-functionality');
-    var ImageEditor = require('./components/ImageEditor/ImageEditor');
+    /**
+     * Fabric functionality is extended with some custom functionality. This is done before
+     * we do anything else.
+     */
+    require('./includes/extend-fabric-functionality')();
 
-    ExtendFabricFunctionality();
-    window.ImageEditor = ImageEditor;
+    /**
+     * ImageEditor is the starting point of all files. Here the image editor is created and
+     * it receives attributes from the initialisation. As this is done from outside of this file,
+     * the ImageEditor should be available on globally.
+     */
+    window.ImageEditor = require('./includes/ImageEditor');
 
 }());