Added event-triggers for dragged status

src/js/components/ImageEditor/ApertureHandler.js

@@ -2,6 +2,7 @@
 
 function ApertureHandler(canvas) {
     var _items = {x: [], y: []};
+    var $document = $(document);
 
     function init() {
         var bounds = canvas;
@@ -61,6 +62,7 @@ function ApertureHandler(canvas) {
         this.getApertures().forEach(function (o) {
             o.opacity = apply ? 0.7 : 1;
         });
+        
         canvas.renderAll();
         return this;
     };

src/js/components/ImageEditor/Canvas.js

@@ -22,8 +22,10 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         this.on('mouse:up', function () {
             if (this.getImage().__moved) {
                 this.getApertures().setTransparent(false);
+
+                // Trigger event to tell the image has been dragged.
+                $(document).trigger('PIE:dragged');
             }
-            $(this.upperCanvasEl).css('cursor', 'default');
             this.renderAll();
         });
     },

src/js/components/ImageEditor/Viewport.js

@@ -129,6 +129,10 @@ function Viewport(canvas) {
         canvas.getApertures().setTransparent(true);
         canvas.getImage().__moved = false;
         canvas.getButtonMenu().bringToFront();
+
+        // Trigger event to tell the image needs to be dragged.
+        $(document).trigger('PIE:needs-dragging');
+
     };
 
     /**

src/js/init.js

@@ -1,6 +1,7 @@
 'use strict';
 
 (function() {
+    var $document = $(document);
     // Inputs for the editor
     var $input = {
         w: $('#form-control input[name="w"]'),
@@ -69,4 +70,10 @@
     $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('Now you can buy!');
+    });
+    $document.on('PIE:needs-dragging', function() {
+       console.log('You need to drag to be able to buy!');
+    });
 }());