Seperated initiation from production code

2017-05-15 14:54:11 +02:00
parent e12cbac4b1
commit 75796fbbf1
5 changed files with 89 additions and 71 deletions
@@ -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);
+}());