feat(dragger): add option to stopPropagation, default false

Author: ajoslin

src/services/dragger.js

@@ -107,6 +107,7 @@ angular.module('ajoslin.scrolly.dragger', [])
      * @param {object=} options Options object. Able to have the following properties:
      *  - **`mouse`** - {boolean=} - Whether to bind mouse events for this dragger. Default `true`.
      *  - **`touch`** - {boolean=} - Whether to bind touch events for this dragger. Default `true`.
+     *  - **`stopPropagation**` - {boolean=} Whether to stop propagation of drag events. Default `false`.
      *
      * @returns {object} Newly created dragger object with the following properties:
      *
@@ -158,7 +159,8 @@ angular.module('ajoslin.scrolly.dragger', [])
     function $dragger(elm, options) {
       options = extend({
         mouse: true,
-        touch: true
+        touch: true,
+        stopPropagation: false
       }, options);
 
       var self = {};
@@ -208,9 +210,10 @@ angular.module('ajoslin.scrolly.dragger', [])
       }
 
       elm.bind('$destroy', function() {
-        delete listeners[DIRECTION_VERITCAL];
+        delete listeners[DIRECTION_VERTICAL];
         delete listeners[DIRECTION_HORIZONTAL];
         delete listeners[DIRECTION_ANY];
+        listeners = null;
       });
 
       function dragStart(e) {
@@ -222,7 +225,8 @@ angular.module('ajoslin.scrolly.dragger', [])
           return;
         }
 
-        e.stopPropagation();
+        options.stopPropagation && e.stopPropagation();
+
         var point = e.touches ? e.touches[0] : e;
 
         //No drag on ignored elements
@@ -243,7 +247,7 @@ angular.module('ajoslin.scrolly.dragger', [])
 
         if (self.state.active) {
           e.preventDefault();
-          e.stopPropagation();
+          options.stopPropagation && e.stopPropagation();
 
           var point = e.touches ? e.touches[0] : e;
           point = {x: point.pageX, y: point.pageY};
@@ -274,7 +278,7 @@ angular.module('ajoslin.scrolly.dragger', [])
 
         if (self.state.active) {
           e = e.originalEvent || e; // for jquery
-          e.stopPropagation();
+          options.stopPropagation && e.stopPropagation();
 
           self.state.updatedAt = Date.now();
           self.state.stopped = (self.state.updatedAt - self.state.startedAt) > _maxTimeMotionless;

src/services/dragger.spec.js

@@ -9,50 +9,78 @@ describe('scrolly.dragger', function() {
   }));
 
   describe('options', function() {
-    var elm, spy, d;
+    var elm, dragSpy, d;
     function setup(opts) {
       elm = angular.element("<div>");
       d = new $dragger(elm, opts);
-      spy = jasmine.createSpy();
-      d.addListener($dragger.DIRECTION_ANY, spy);
+      dragSpy = jasmine.createSpy();
+      d.addListener($dragger.DIRECTION_ANY, dragSpy);
     }
-    function trigger(elm, type) {
+    function trigger(elm, type, options) {
       var e = $.Event(type);
       e.pageX = e.pageY = 0;
+      angular.extend(e, options || {});
       $(elm[0]).trigger(e);
     }
+    it('should not stop propagation by default', function() {
+      setup({});
+      var stopSpy = jasmine.createSpy('stop');
+      trigger(elm, 'touchstart', {stopPropagation: stopSpy});
+      expect(stopSpy).not.toHaveBeenCalled();
+      trigger(elm, 'touchmove', {stopPropagation: stopSpy});
+      expect(stopSpy).not.toHaveBeenCalled();
+      trigger(elm, 'touchend', {stopPropagation: stopSpy});
+      expect(stopSpy).not.toHaveBeenCalled();
+    });
+    it('should stop propagation with option', function() {
+      setup({
+        stopPropagation: true
+      });
+      var stopSpy = jasmine.createSpy('stop');
+
+      trigger(elm, 'touchstart', {stopPropagation: stopSpy});
+      expect(stopSpy).toHaveBeenCalled();
+      stopSpy.reset();
+
+      trigger(elm, 'touchmove', {stopPropagation: stopSpy});
+      expect(stopSpy).toHaveBeenCalled();
+      stopSpy.reset();
+
+      trigger(elm, 'touchend', {stopPropagation: stopSpy});
+      expect(stopSpy).toHaveBeenCalled();
+    });
     it('should mouse and touch by default', function() {
       setup({});
 
       trigger(elm, 'mousedown');
-      expect(spy).toHaveBeenCalled();
-      spy.reset();
+      expect(dragSpy).toHaveBeenCalled();
+      dragSpy.reset();
 
       trigger(elm, 'touchstart');
-      expect(spy).toHaveBeenCalled();
+      expect(dragSpy).toHaveBeenCalled();
     });
     it('should not listen to mouse events with option', function() {
       setup({
         mouse: false
       });
 
       trigger(elm, 'mousedown');
-      expect(spy).not.toHaveBeenCalled();
+      expect(dragSpy).not.toHaveBeenCalled();
 
       trigger(elm, 'touchstart');
-      expect(spy).toHaveBeenCalled();
+      expect(dragSpy).toHaveBeenCalled();
     });
     it('should not listen to touch events with option', function() {
       setup({
         touch: false
       });
 
       trigger(elm, 'mousedown');
-      expect(spy).toHaveBeenCalled();
-      spy.reset();
+      expect(dragSpy).toHaveBeenCalled();
+      dragSpy.reset();
 
       trigger(elm, 'touchstart');
-      expect(spy).not.toHaveBeenCalled();
+      expect(dragSpy).not.toHaveBeenCalled();
     });
   });