From 87766439c08ffa82ac5d9d94bbf4c893ab761db7 Mon Sep 17 00:00:00 2001 From: Andy Joslin Date: Sun, 6 Oct 2013 09:39:56 -0400 Subject: [PATCH] feat(dragger): listen to mouse and touch, options to disable either --- src/_main.js | 3 ++- src/services/dragger.js | 22 ++++++++++++++--- src/services/dragger.spec.js | 48 ++++++++++++++++++++++++++++++++++++ src/services/scroller.js | 5 +++- 4 files changed, 73 insertions(+), 5 deletions(-) diff --git a/src/_main.js b/src/_main.js index 37f54f4..c59f63b 100644 --- a/src/_main.js +++ b/src/_main.js @@ -14,4 +14,5 @@ angular.module('ajoslin.scrolly', [ var jqLite = angular.element, copy = angular.copy, forEach = angular.forEach, - isString = angular.isString; + isString = angular.isString, + extend = angular.extend; diff --git a/src/services/dragger.js b/src/services/dragger.js index a56e418..7145da6 100644 --- a/src/services/dragger.js +++ b/src/services/dragger.js @@ -104,6 +104,9 @@ angular.module('ajoslin.scrolly.dragger', []) * A factory for creating drag-listeners on elements. * * @param {element} element Element to attach drag listeners to. + * @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`. * * @returns {object} Newly created dragger object with the following properties: * @@ -153,6 +156,11 @@ angular.module('ajoslin.scrolly.dragger', []) //Creates a dragger for an element function $dragger(elm, options) { + options = extend({ + mouse: true, + touch: true + }, options); + var self = {}; var raw = elm[0]; var listeners = {}; @@ -188,9 +196,17 @@ angular.module('ajoslin.scrolly.dragger', []) } }; - elm.bind('touchstart', dragStart); - elm.bind('touchmove', dragMove); - elm.bind('touchend touchcancel', dragEnd); + if (options.touch) { + elm.bind('touchstart', dragStart); + elm.bind('touchmove', dragMove); + elm.bind('touchend touchcancel', dragEnd); + } + if (options.mouse) { + elm.bind('mousedown', dragStart); + elm.bind('mousemove', dragMove); + elm.bind('mouseup mouseout', dragEnd); + } + elm.bind('$destroy', function() { delete listeners[DIRECTION_VERITCAL]; delete listeners[DIRECTION_HORIZONTAL]; diff --git a/src/services/dragger.spec.js b/src/services/dragger.spec.js index f05bc60..312bec1 100644 --- a/src/services/dragger.spec.js +++ b/src/services/dragger.spec.js @@ -8,6 +8,54 @@ describe('scrolly.dragger', function() { $dragger = _$dragger_; })); + describe('options', function() { + var elm, spy, d; + function setup(opts) { + elm = angular.element("
"); + d = new $dragger(elm, opts); + spy = jasmine.createSpy(); + d.addListener($dragger.DIRECTION_ANY, spy); + } + function trigger(elm, type) { + var e = $.Event(type); + e.pageX = e.pageY = 0; + $(elm[0]).trigger(e); + } + it('should mouse and touch by default', function() { + setup({}); + + trigger(elm, 'mousedown'); + expect(spy).toHaveBeenCalled(); + spy.reset(); + + trigger(elm, 'touchstart'); + expect(spy).toHaveBeenCalled(); + }); + it('should not listen to mouse events with option', function() { + setup({ + mouse: false + }); + + trigger(elm, 'mousedown'); + expect(spy).not.toHaveBeenCalled(); + + trigger(elm, 'touchstart'); + expect(spy).toHaveBeenCalled(); + }); + it('should not listen to touch events with option', function() { + setup({ + touch: false + }); + + trigger(elm, 'mousedown'); + expect(spy).toHaveBeenCalled(); + spy.reset(); + + trigger(elm, 'touchstart'); + expect(spy).not.toHaveBeenCalled(); + }); + }); + makeTests('DIRECTION_HORIZONTAL'); makeTests('DIRECTION_VERTICAL'); makeTests('DIRECTION_ANY'); diff --git a/src/services/scroller.js b/src/services/scroller.js index a19b96c..0e602b6 100644 --- a/src/services/scroller.js +++ b/src/services/scroller.js @@ -203,7 +203,10 @@ angular.module('ajoslin.scrolly.scroller', [ var raw = elm[0]; var transformer = self.transformer = new $transformer(elm); - var dragger = self.dragger = new $dragger(elm); + var dragger = self.dragger = new $dragger(elm, { + touch: true, + mouse: false + }); if (_supportDesktop) { var desktopScroller = new $desktopScroller(elm, self); }