r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

Supported touch events in slider

Browse Source 
Closes #559
This commit is contained in:
Igor Zhukov 2014-11-14 17:49:14 +03:00
parent c40e5d08c6
commit d0e815a394
1 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/js/directives.js
View File

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