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 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;
}
lastMinPageX = e.pageX - e.offsetX;
// console.log('mdown', lastMinPageX, e.pageX, e.offsetX);
lastUpdValue = minValue + e.offsetX / width * (maxValue - minValue);
else if (e.offsetX !== undefined) {
offsetX = e.offsetX;
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) {
$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);
});