Skip to content

Commit

Permalink
Fix sliderview on Windows Phone devices
Browse files Browse the repository at this point in the history
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?
  • Loading branch information
sbatezat committed Nov 27, 2015
1 parent 89c47c2 commit 80f8b2d
Showing 1 changed file with 48 additions and 33 deletions.
81 changes: 48 additions & 33 deletions js/views/sliderView.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*
* Brad Birdsall
* Copyright 2013, MIT License
*
*/

(function(ionic) {
Expand All @@ -12,15 +11,33 @@
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

// 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;
Expand Down Expand Up @@ -251,20 +268,20 @@ 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
}];
}

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':
Expand Down Expand Up @@ -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) {

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 80f8b2d

Please sign in to comment.