From 80f8b2dbcb71496a7b0cecf48cacb7113c62b073 Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 20:55:59 +0100 Subject: [PATCH 1/8] 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); From d2075f6d1f0f95c80f2a0f53174ede45b9804a2d Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:14:14 +0100 Subject: [PATCH 2/8] Update sliderView.js Typo --- js/views/sliderView.js | 83 +++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index ae6cdded34f..2eeae039d70 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -3,6 +3,7 @@ * * Brad Birdsall * Copyright 2013, MIT License + * */ (function(ionic) { @@ -11,25 +12,25 @@ 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'; + + 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 @@ -277,11 +278,11 @@ ionic.views.Slider = ionic.views.View.inherit({ switch (event.type) { case touchStartEvent: this.start(event); break; - case mouseStartEvent: this.start(event); break; + case mouseStartEvent: this.start(event); break; case touchMoveEvent: this.touchmove(event); break; - case mouseMoveEvent: 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 mouseEndEvent: offloadFn(this.end(event)); break; case 'webkitTransitionEnd': case 'msTransitionEnd': case 'oTransitionEnd': @@ -316,14 +317,14 @@ ionic.views.Slider = ionic.views.View.inherit({ delta = {}; // attach touchmove and touchend listeners - 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); + 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) { @@ -465,15 +466,15 @@ ionic.views.Slider = ionic.views.View.inherit({ } // kill touchmove and touchend event listeners until touchstart called again - 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); - + 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) { @@ -603,8 +604,8 @@ ionic.views.Slider = ionic.views.View.inherit({ if (browser.addEventListener) { // set touchstart event on element - element.addEventListener(touchStartEvent, events, false); - element.addEventListener(mouseStartEvent, events, false); + element.addEventListener(touchStartEvent, events, false); + element.addEventListener(mouseStartEvent, events, false); if (browser.transitions) { element.addEventListener('webkitTransitionEnd', events, false); From 3345d6bff37ce93a5c09cb7d36653bd2c1ff06ec Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:17:55 +0100 Subject: [PATCH 3/8] Update sliderView.js Typo... again --- js/views/sliderView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index 2eeae039d70..c48dd6ee8a0 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -278,11 +278,11 @@ ionic.views.Slider = ionic.views.View.inherit({ switch (event.type) { case touchStartEvent: this.start(event); break; - case mouseStartEvent: this.start(event); break; + case mouseStartEvent: this.start(event); break; case touchMoveEvent: this.touchmove(event); break; - case mouseMoveEvent: 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 mouseEndEvent: offloadFn(this.end(event)); break; case 'webkitTransitionEnd': case 'msTransitionEnd': case 'oTransitionEnd': From 424eeb208178f7128916e465c00781a3d79c53f3 Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:24:49 +0100 Subject: [PATCH 4/8] Update sliderView.js Type, third round. Sorry for the inconvenience, I definitly should not work directly on the GitHub web page --- js/views/sliderView.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index c48dd6ee8a0..c0eb9b79f52 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -13,24 +13,24 @@ 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 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'; + var mouseStartEvent = 'mousedown'; + var mouseMoveEvent = 'mousemove'; + var mouseEndEvent = 'mouseup'; // utilities var noop = function() {}; // simple no operation function From 8b61b14eef8ee9aca483384edd2b751b4c93e1d1 Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:26:02 +0100 Subject: [PATCH 5/8] Update sliderView.js --- js/views/sliderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index c0eb9b79f52..723bf504985 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -26,7 +26,7 @@ ionic.views.Slider = ionic.views.View.inherit({ touchStartEvent = 'touchstart'; touchMoveEvent = 'touchmove'; touchEndEvent = 'touchend'; - } + } var mouseStartEvent = 'mousedown'; var mouseMoveEvent = 'mousemove'; From bb08c451ab5d44a4e8dd47ce127f1a48df310e5f Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:39:08 +0100 Subject: [PATCH 6/8] Update sliderView.js --- js/views/sliderView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index 723bf504985..8d1015aef4f 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -14,7 +14,7 @@ ionic.views.Slider = ionic.views.View.inherit({ var slider = this; var touchStartEvent, touchMoveEvent, touchEndEvent; - if (window.navigator.pointerEnabled) { + if (window.navigator.pointerEnabled) { touchStartEvent = 'pointerdown'; touchMoveEvent = 'pointermove'; touchEndEvent = 'pointerup'; From 100571e77097ecb4b443e862f034b886901de82c Mon Sep 17 00:00:00 2001 From: sbatezat Date: Fri, 27 Nov 2015 21:44:02 +0100 Subject: [PATCH 7/8] Update sliderView.js --- js/views/sliderView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index 8d1015aef4f..ee63b0807d2 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -27,11 +27,11 @@ ionic.views.Slider = ionic.views.View.inherit({ 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 From e9dfd5a10ae55a5c6e5d566752d761b725f63541 Mon Sep 17 00:00:00 2001 From: sbatezat Date: Sat, 28 Nov 2015 13:58:32 +0100 Subject: [PATCH 8/8] Update sliderView.js Adding some robustness --- js/views/sliderView.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/views/sliderView.js b/js/views/sliderView.js index ee63b0807d2..f34436152fe 100644 --- a/js/views/sliderView.js +++ b/js/views/sliderView.js @@ -296,6 +296,11 @@ ionic.views.Slider = ionic.views.View.inherit({ }, start: function(event) { + // prevent to start if there is no valid event + if (!event.touches) { + return; + } + var touches = event.touches[0]; // measure start values @@ -328,9 +333,11 @@ ionic.views.Slider = ionic.views.View.inherit({ }, touchmove: function(event) { + // ensure there is a valid event // ensure swiping with one touch and not pinching // ensure sliding is enabled - if (event.touches.length > 1 || + if (!event.touches || + event.touches.length > 1 || event.scale && event.scale !== 1 || slider.slideIsDisabled) { return;