Added trigger for handling clicks on dragbars

src/js/components/ImageEditor/ApertureHandler.js

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

src/js/components/ImageEditor/DragHandle.js

@@ -5,6 +5,7 @@ var config = require('../config');
 var DragHandle = function (handler) {
     var _currentAxis;
     var _dragging;
+    var _moved;
 
     // Event declarations
     var events = {
@@ -14,7 +15,13 @@ var DragHandle = function (handler) {
             handler.canvas.getImage().trigger('mousedown');
         },
         mouseUp: function () {
+
+            if (!_moved && _currentAxis) {
+                $(document).trigger('PIE:dragbar-click', _currentAxis);
+            }
+
             _dragging = false;
+            _moved = false;
             _currentAxis = null;
             handler.canvas.getImage().trigger('mouseup');
         },
@@ -22,6 +29,7 @@ var DragHandle = function (handler) {
             if (!_dragging) {
                 return;
             }
+            _moved = true;
 
             if (_currentAxis === 'h') {
                 handler.canvas.getImage().left -= e.e.movementX;

src/js/init.js

@@ -71,9 +71,13 @@
     $input.noCrop.on('change', Event.NoCrop);
     $input.border.on('change', Event.SetBorder);
     $document.on('PIE:dragged', function() {
-       console.log('Now you can buy!');
+       console.log('Dragged the image/dragbar!');
     });
     $document.on('PIE:needs-dragging', function() {
-       console.log('You need to drag to be able to buy!');
+       console.log('Image needs dragging!');
+    });
+    $document.on('PIE:dragbar-click', function(e, axis) {
+
+       console.log('Clicked on a dragbar! Axis: ' + axis);
     });
 }());