Seperated initiation from production code

build-tasks/compile-js.js

@@ -22,6 +22,14 @@ module.exports = () => {
         .pipe(sourcemaps.write())
         .pipe(gulp.dest(path.join('dist', 'js')));
 
+    const production = browserify(path.join('src', 'js', 'main.js'), {
+            debug: false
+        })
+        .bundle()
+        .pipe(source('pw-image-editor.js'))
+        .pipe(buffer())
+        .pipe(gulp.dest(path.join('dist', 'js')));
+
     const min = browserify(path.join('src', 'js', 'main.js'), {
             debug: false
         })
@@ -31,5 +39,13 @@ module.exports = () => {
         .pipe(uglifyJs())
         .pipe(gulp.dest(path.join('dist', 'js')));
 
-    return merge(debug, min);
+    const init = browserify(path.join('src', 'js', 'init.js'), {
+            debug: false
+        })
+        .bundle()
+        .pipe(source('init.js'))
+        .pipe(buffer())
+        .pipe(gulp.dest(path.join('dist', 'js')));
+
+    return merge(debug, production, min, init);
 };

index.php

@@ -21,12 +21,13 @@
         </form>
         <br /><br />
         <div id="wrapper">
-          <canvas id="canvas" width="1253" height="600" data-image-id="45809"></canvas>
+          <canvas id="canvas-editor" width="1253" height="600" data-image-id="45809"></canvas>
         </div>
         <br /><br /><br />
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
-    <script src="/dist/js/main.js"></script>
+    <script src="/dist/js/pw-image-editor.js"></script>
+    <script src="/dist/js/init.js"></script>
 </body>
 </html>

src/js/components/ImageEditor/ImageEditor.js

@@ -3,7 +3,7 @@
 var Canvas = require('./Canvas');
 var util = require('../util');
 
-function ImageEditor(args) {
+function ImageEditor(canvasId, args) {
     var _canvas;
 
     var _settings = $.extend({
@@ -11,7 +11,7 @@ function ImageEditor(args) {
     }, args);
 
     // Initialize canvas
-    _canvas = new Canvas('canvas');
+    _canvas = new Canvas(canvasId);
 
     _canvas.getButtonMenu()
         .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {

src/js/init.js

@@ -0,0 +1,67 @@
+'use strict';
+
+(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"]'),
+        noCrop: $('#form-control input[name="no-crop"]')
+    };
+
+    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');
+        });
+
+    function getOptimalDimension(currentDimension, ratio) {
+        var width = $input.w.val();
+        var height = $input.h.val();
+
+        if (currentDimension === 'h') {
+            width = Math.round(height / ratio);
+        } else {
+            height = Math.round(width / ratio);
+        }
+
+        return {
+            width: width,
+            height: height
+        };
+    }
+
+    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(),
+            };
+
+            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');
+        },
+    };
+
+    $input.w.on('input', Event.DimensionChange);
+    $input.h.on('input', Event.DimensionChange);
+    $input.mirror.on('change', Event.Mirror);
+    $input.noCrop.on('change', Event.NoCrop);
+}());

src/js/main.js

@@ -9,69 +9,3 @@
     window.ImageEditor = 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"]'),
-        noCrop: $('#form-control input[name="no-crop"]')
-    };
-
-    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('input');
-        });
-
-    function getOptimalDimension(currentDimension, ratio) {
-        var width = $input.w.val();
-        var height = $input.h.val();
-
-        if (currentDimension === 'h') {
-            width = Math.round(height / ratio);
-        } else {
-            height = Math.round(width / ratio);
-        }
-
-        return {
-            width: width,
-            height: height
-        };
-    }
-
-    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(),
-            };
-
-            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');
-        },
-    };
-
-    $input.w.on('input', Event.DimensionChange);
-    $input.h.on('input', Event.DimensionChange);
-    $input.mirror.on('change', Event.Mirror);
-    $input.noCrop.on('change', Event.NoCrop);
-}());