From 75796fbbf114b5d9fe167ab3b87ab0f00ccdd7d1 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 15 May 2017 14:54:11 +0200 Subject: [PATCH] Seperated initiation from production code --- build-tasks/compile-js.js | 18 +++++- index.php | 5 +- src/js/components/ImageEditor/ImageEditor.js | 4 +- src/js/init.js | 67 ++++++++++++++++++++ src/js/main.js | 66 ------------------- 5 files changed, 89 insertions(+), 71 deletions(-) create mode 100644 src/js/init.js diff --git a/build-tasks/compile-js.js b/build-tasks/compile-js.js index 6af823e..9e5794b 100644 --- a/build-tasks/compile-js.js +++ b/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); }; diff --git a/index.php b/index.php index 9b5a60a..bc13307 100644 --- a/index.php +++ b/index.php @@ -21,12 +21,13 @@

- +



- + + diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 1bdbe57..7025da1 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/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 () { diff --git a/src/js/init.js b/src/js/init.js new file mode 100644 index 0000000..a9f11d8 --- /dev/null +++ b/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); +}()); diff --git a/src/js/main.js b/src/js/main.js index 3c44fcb..3db5d79 100644 --- a/src/js/main.js +++ b/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); -}());