From 1ca592a6ebcf6428b9a81c82f6197fc532b27f08 Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Tue, 8 Oct 2013 14:00:53 -0400 Subject: [PATCH] feat(dragger): add option to stopPropagation, default false --- src/services/dragger.js | 14 ++++++---- src/services/dragger.spec.js | 52 +++++++++++++++++++++++++++--------- 2 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/services/dragger.js b/src/services/dragger.js index bb12589..4b9c2b5 100644 --- a/src/services/dragger.js +++ b/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; diff --git a/src/services/dragger.spec.js b/src/services/dragger.spec.js index dc5eb7e..d42462a 100644 --- a/src/services/dragger.spec.js +++ b/src/services/dragger.spec.js @@ -9,27 +9,55 @@ describe('scrolly.dragger', function() { })); describe('options', function() { - var elm, spy, d; + var elm, dragSpy, d; function setup(opts) { elm = angular.element("
"); 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({ @@ -37,10 +65,10 @@ describe('scrolly.dragger', function() { }); 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({ @@ -48,11 +76,11 @@ describe('scrolly.dragger', function() { }); trigger(elm, 'mousedown'); - expect(spy).toHaveBeenCalled(); - spy.reset(); + expect(dragSpy).toHaveBeenCalled(); + dragSpy.reset(); trigger(elm, 'touchstart'); - expect(spy).not.toHaveBeenCalled(); + expect(dragSpy).not.toHaveBeenCalled(); }); });