diff --git a/app/js/directives.js b/app/js/directives.js index ffeac1df..2cb8d990 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -2274,10 +2274,12 @@ angular.module('myApp.directives', ['myApp.filters']) }); } - var onMouseMove = function (e) { - var offsetX = e.pageX - lastMinPageX; + var onSliderMove = function (e) { + e = e.originalEvent || e; + + var offsetX = (e.touches && e.touches[0] ? e.touches[0].pageX : e.pageX) - lastMinPageX; offsetX = Math.min(width, Math.max(0 , offsetX)); - // console.log('mmove', lastMinPageX, e.pageX, offsetX); + // console.log(e.type, lastMinPageX, e.pageX, offsetX); lastUpdValue = minValue + offsetX / width * (maxValue - minValue); if (sliderCallback) { $scope.$eval(sliderCallback, {value: lastUpdValue}); @@ -2290,9 +2292,9 @@ angular.module('myApp.directives', ['myApp.filters']) return cancelEvent(e); }; - var stopMouseTrack = function () { - $($window).off('mousemove', onMouseMove); - $($window).off('mouseup', stopMouseTrack); + var stopSliderTrack = function () { + $($window).off('mousemove touchmove', onSliderMove); + $($window).off('mouseup touchend touchcancel touchleave', stopSliderTrack); }; $scope.$watch(model, function (newVal) { @@ -2313,7 +2315,7 @@ angular.module('myApp.directives', ['myApp.filters']) element.on('dragstart selectstart', cancelEvent); - element.on('mousedown', function (e) { + element.on('mousedown touchstart', function (e) { if (!width) { width = wrap.width(); if (!width) { @@ -2321,27 +2323,40 @@ angular.module('myApp.directives', ['myApp.filters']) return cancelEvent(e); } } - stopMouseTrack(); + stopSliderTrack(); e = e.originalEvent || e; - if (e.offsetX == undefined) { - e.offsetX = e.layerX; + var offsetX; + if (e.touches && e.touches[0]) { + lastMinPageX = element.position().left; + offsetX = e.touches[0].pageX - lastMinPageX; + } + else if (e.offsetX !== undefined) { + offsetX = e.offsetX; + lastMinPageX = e.pageX - offsetX; } - lastMinPageX = e.pageX - e.offsetX; - // console.log('mdown', lastMinPageX, e.pageX, e.offsetX); - lastUpdValue = minValue + e.offsetX / width * (maxValue - minValue); + else if (e.layerX !== undefined) { + offsetX = e.layerX; + lastMinPageX = e.pageX - offsetX; + } + else { + return cancelEvent(e); + } + + // console.log(e.type, e, lastMinPageX, e.pageX, offsetX); + lastUpdValue = minValue + offsetX / width * (maxValue - minValue); if (sliderCallback) { $scope.$eval(sliderCallback, {value: lastUpdValue}); } else { $scope.$eval(model + '=' + lastUpdValue); } - thumb.css('left', Math.max(0, e.offsetX - thumbWidth)); - fill.css('width', e.offsetX); + thumb.css('left', Math.max(0, offsetX - thumbWidth)); + fill.css('width', offsetX); - $($window).on('mousemove', onMouseMove); - $($window).on('mouseup', stopMouseTrack); + $($window).on('mousemove touchmove', onSliderMove); + $($window).on('mouseup touchend touchcancel touchleave', stopSliderTrack); return cancelEvent(e); });