diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 67154ec..bf87c62 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/src/js/components/ImageEditor/ImageEditor.js @@ -79,32 +79,4 @@ function ImageEditor(args) { }); } -$(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); -}); +module.exports = ImageEditor; diff --git a/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js b/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js deleted file mode 100644 index 6045420..0000000 --- a/src/js/components/ImageEditor/fabric.ext/ObjectDefaults.js +++ /dev/null @@ -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; - } -}); diff --git a/src/js/components/extend-fabric-functionality.js b/src/js/components/extend-fabric-functionality.js new file mode 100644 index 0000000..498b8f8 --- /dev/null +++ b/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; diff --git a/src/js/main.js b/src/js/main.js index a4a97f1..ccd1ebf 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -2,7 +2,40 @@ (function () { - require('./components/ImageEditor/fabric.ext/ObjectDefaults'); - require('./components/ImageEditor/ImageEditor'); + var ExtendFabricFunctionality = require('./components/extend-fabric-functionality'); + 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); +}());