diff --git a/js/views/sliderView.js b/js/views/sliderView.js index 2c57c8291a6..ae6cdded34f 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -3,7 +3,6 @@ * * Brad Birdsall * Copyright 2013, MIT License - * */ (function(ionic) { @@ -12,7 +11,26 @@ ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { var slider = this; - + + var touchStartEvent, touchMoveEvent, touchEndEvent; + if (window.navigator.pointerEnabled) { + touchStartEvent = 'pointerdown'; + touchMoveEvent = 'pointermove'; + touchEndEvent = 'pointerup'; + } else if (window.navigator.msPointerEnabled) { + touchStartEvent = 'MSPointerDown'; + touchMoveEvent = 'MSPointerMove'; + touchEndEvent = 'MSPointerUp'; + } else { + touchStartEvent = 'touchstart'; + touchMoveEvent = 'touchmove'; + touchEndEvent = 'touchend'; + } + + var mouseStartEvent = 'mousedown'; + var mouseMoveEvent = 'mousemove'; + var mouseEndEvent = 'mouseup'; + // utilities var noop = function() {}; // simple no operation function var offloadFn = function(fn) { setTimeout(fn || noop, 0); }; // offload a functions execution @@ -20,7 +38,6 @@ ionic.views.Slider = ionic.views.View.inherit({ // check browser capabilities var browser = { addEventListener: !!window.addEventListener, - touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, transitions: (function(temp) { var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition']; for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true; @@ -251,7 +268,7 @@ ionic.views.Slider = ionic.views.View.inherit({ var events = { handleEvent: function(event) { - if(event.type == 'mousedown' || event.type == 'mouseup' || event.type == 'mousemove') { + if(!event.touches && event.pageX && event.pageY) { event.touches = [{ pageX: event.pageX, pageY: event.pageY @@ -259,12 +276,12 @@ ionic.views.Slider = ionic.views.View.inherit({ } switch (event.type) { - case 'mousedown': this.start(event); break; - case 'touchstart': this.start(event); break; - case 'touchmove': this.touchmove(event); break; - case 'mousemove': this.touchmove(event); break; - case 'touchend': offloadFn(this.end(event)); break; - case 'mouseup': offloadFn(this.end(event)); break; + case touchStartEvent: this.start(event); break; + case mouseStartEvent: this.start(event); break; + case touchMoveEvent: this.touchmove(event); break; + case mouseMoveEvent: this.touchmove(event); break; + case touchEndEvent: offloadFn(this.end(event)); break; + case mouseEndEvent: offloadFn(this.end(event)); break; case 'webkitTransitionEnd': case 'msTransitionEnd': case 'oTransitionEnd': @@ -299,14 +316,14 @@ ionic.views.Slider = ionic.views.View.inherit({ delta = {}; // attach touchmove and touchend listeners - if(browser.touch) { - element.addEventListener('touchmove', this, false); - element.addEventListener('touchend', this, false); - } else { - element.addEventListener('mousemove', this, false); - element.addEventListener('mouseup', this, false); - document.addEventListener('mouseup', this, false); - } + element.addEventListener(touchMoveEvent, this, false); + element.addEventListener(mouseMoveEvent, this, false); + + element.addEventListener(touchEndEvent, this, false); + element.addEventListener(mouseEndEvent, this, false); + + document.addEventListener(touchEndEvent, this, false); + document.addEventListener(mouseEndEvent, this, false); }, touchmove: function(event) { @@ -448,15 +465,15 @@ ionic.views.Slider = ionic.views.View.inherit({ } // kill touchmove and touchend event listeners until touchstart called again - if(browser.touch) { - element.removeEventListener('touchmove', events, false); - element.removeEventListener('touchend', events, false); - } else { - element.removeEventListener('mousemove', events, false); - element.removeEventListener('mouseup', events, false); - document.removeEventListener('mouseup', events, false); - } - + element.removeEventListener(touchMoveEvent, events, false); + element.removeEventListener(mouseMoveEvent, events, false); + + element.removeEventListener(touchEndEvent, events, false); + element.removeEventListener(mouseEndEvent, events, false); + + document.removeEventListener(touchEndEvent, events, false); + document.removeEventListener(mouseEndEvent, events, false); + options.onDragEnd && options.onDragEnd(); }, transitionEnd: function(event) { @@ -557,7 +574,8 @@ ionic.views.Slider = ionic.views.View.inherit({ if (browser.addEventListener) { // remove current event listeners - element.removeEventListener('touchstart', events, false); + element.removeEventListener(touchStartEvent, events, false); + element.removeEventListener(mouseStartEvent, events, false); element.removeEventListener('webkitTransitionEnd', events, false); element.removeEventListener('msTransitionEnd', events, false); element.removeEventListener('oTransitionEnd', events, false); @@ -585,11 +603,8 @@ ionic.views.Slider = ionic.views.View.inherit({ if (browser.addEventListener) { // set touchstart event on element - if (browser.touch) { - element.addEventListener('touchstart', events, false); - } else { - element.addEventListener('mousedown', events, false); - } + element.addEventListener(touchStartEvent, events, false); + element.addEventListener(mouseStartEvent, events, false); if (browser.transitions) { element.addEventListener('webkitTransitionEnd', events, false);