From 80f8b2dbcb71496a7b0cecf48cacb7113c62b073 Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 20:55:59 +0100 Subject: [PATCH] Fix sliderview on Windows Phone devices Successfully tested on browser, Windows Phone and Android. Still need to be tested on iOS. Could someone tell me if it's stil working fine on iOS? --- js/views/sliderView.js | 81 +++++++++++++++++++++++++----------------- 1 file changed, 48 insertions(+), 33 deletions(-) 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);