add some touch support
- fire touch(start|move|end) events after adding clinetX/Y - use touch events in video and timeline widgets - use touchstart to select item in ArrayEditable
This commit is contained in:
parent
72a7d54025
commit
f043242640
7 changed files with 81 additions and 6 deletions
|
@ -83,6 +83,15 @@
|
||||||
singleclicks and doubleclicks, since it will not fire for
|
singleclicks and doubleclicks, since it will not fire for
|
||||||
doubleclicks)
|
doubleclicks)
|
||||||
* <*> Original event properties
|
* <*> Original event properties
|
||||||
|
touchend <!> tochend
|
||||||
|
normalized version of touchend event
|
||||||
|
* <*> Original event properties
|
||||||
|
touchmove <!> tochmove
|
||||||
|
normalized version of touchmove event
|
||||||
|
* <*> Original event properties
|
||||||
|
touchstart <!> touchstart
|
||||||
|
normalized version of touchstart event
|
||||||
|
* <*> Original event properties
|
||||||
*/
|
*/
|
||||||
|
|
||||||
Ox.Element = function Element(options, self) {
|
Ox.Element = function Element(options, self) {
|
||||||
|
@ -118,7 +127,10 @@
|
||||||
.data({oxid: that.oxid})
|
.data({oxid: that.oxid})
|
||||||
.on({
|
.on({
|
||||||
mousedown: onMousedown,
|
mousedown: onMousedown,
|
||||||
mousewheel: onMousewheel
|
mousewheel: onMousewheel,
|
||||||
|
touchend: onTouchend,
|
||||||
|
touchmove: onTouchmove,
|
||||||
|
touchstart: onTouchstart
|
||||||
});
|
});
|
||||||
that[0] = that.$element[0];
|
that[0] = that.$element[0];
|
||||||
that.length = 1;
|
that.length = 1;
|
||||||
|
@ -166,6 +178,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTouchData(e) {
|
||||||
|
var data = {};
|
||||||
|
if (e.changedTouches && e.changedTouches.length) {
|
||||||
|
data.clientX = e.changedTouches[0].clientX;
|
||||||
|
data.clientY = e.changedTouches[0].clientY;
|
||||||
|
} else {
|
||||||
|
data.clientX = e.pageX;
|
||||||
|
data.clientY = e.pageY;
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
function onMousedown(e) {
|
function onMousedown(e) {
|
||||||
/*
|
/*
|
||||||
better mouse events
|
better mouse events
|
||||||
|
@ -325,6 +349,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onTouchend(e) {
|
||||||
|
var data = getTouchData(e.originalEvent);
|
||||||
|
that.triggerEvent('touchend', Ox.extend(e, data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTouchmove(e) {
|
||||||
|
var data = getTouchData(e.originalEvent);
|
||||||
|
that.triggerEvent('touchmove', Ox.extend(e, data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTouchstart(e) {
|
||||||
|
var data = getTouchData(e.originalEvent);
|
||||||
|
that.triggerEvent('touchstart', Ox.extend(e, data));
|
||||||
|
}
|
||||||
|
|
||||||
// TODO: in other widgets, use this,
|
// TODO: in other widgets, use this,
|
||||||
// rather than some self.$tooltip that
|
// rather than some self.$tooltip that
|
||||||
// will not get garbage collected
|
// will not get garbage collected
|
||||||
|
|
|
@ -94,7 +94,8 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
|
key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
|
||||||
key_right: self.options.type == 'input' ? selectNext : selectLast,
|
key_right: self.options.type == 'input' ? selectNext : selectLast,
|
||||||
key_up: self.options.type == 'input' ? selectFirst : selectPrevious,
|
key_up: self.options.type == 'input' ? selectFirst : selectPrevious,
|
||||||
singleclick: singleclick
|
singleclick: singleclick,
|
||||||
|
touchstart: singleclick
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$items = [];
|
self.$items = [];
|
||||||
|
|
|
@ -55,7 +55,9 @@ Ox.BlockVideoTimeline = function(options, self) {
|
||||||
doubleclick: doubleclick,
|
doubleclick: doubleclick,
|
||||||
drag: function(data) {
|
drag: function(data) {
|
||||||
mousedown(data);
|
mousedown(data);
|
||||||
}
|
},
|
||||||
|
touchmove: mousedown,
|
||||||
|
touchstart: mousedown
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$images = [];
|
self.$images = [];
|
||||||
|
|
|
@ -53,7 +53,10 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
anyclick: click,
|
anyclick: click,
|
||||||
dragstart: dragstart,
|
dragstart: dragstart,
|
||||||
drag: drag,
|
drag: drag,
|
||||||
dragend: dragend
|
dragend: dragend,
|
||||||
|
touchstart: dragstart,
|
||||||
|
touchmove: drag,
|
||||||
|
touchend: dragend
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -110,7 +110,13 @@ Ox.SmallVideoTimeline = function(options, self) {
|
||||||
self.triggered = false;
|
self.triggered = false;
|
||||||
mousedown(data);
|
mousedown(data);
|
||||||
},
|
},
|
||||||
mousedown: mousedown
|
mousedown: mousedown,
|
||||||
|
touchend: function(data) {
|
||||||
|
self.triggered = false;
|
||||||
|
mousedown(data);
|
||||||
|
},
|
||||||
|
touchmove: mousedown,
|
||||||
|
touchstart: mousedown
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
|
|
|
@ -92,6 +92,11 @@ Ox.VideoPreview = function(options, self) {
|
||||||
self.$frame.attr({src: self.options.getFrame(self.options.position)});
|
self.$frame.attr({src: self.options.getFrame(self.options.position)});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
.bindEvent({
|
||||||
|
touchend: touchend,
|
||||||
|
touchmove: touchmove,
|
||||||
|
touchstart: startLoading
|
||||||
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
function click(e) {
|
function click(e) {
|
||||||
|
@ -174,6 +179,19 @@ Ox.VideoPreview = function(options, self) {
|
||||||
self.timeout && clearTimeout(self.timeout);
|
self.timeout && clearTimeout(self.timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function touchend(e) {
|
||||||
|
var position = getPosition(e.clientX - that.offset().left);
|
||||||
|
stopLoading();
|
||||||
|
self.$frame.attr({src: getClosestFrame(position)});
|
||||||
|
that.triggerEvent('click', {
|
||||||
|
position: position
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function touchmove(e) {
|
||||||
|
var position = getPosition(e.clientX - that.offset().left);
|
||||||
|
self.$frame.attr({src: getClosestFrame(position)});
|
||||||
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -215,7 +215,13 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
||||||
key_up: function() {
|
key_up: function() {
|
||||||
self.options.position -= self.contentWidth / self.fps;
|
self.options.position -= self.contentWidth / self.fps;
|
||||||
setPosition();
|
setPosition();
|
||||||
}
|
},
|
||||||
|
touchend: function (e) {
|
||||||
|
mousedown(e);
|
||||||
|
mouseleave();
|
||||||
|
},
|
||||||
|
touchmove: mousedown,
|
||||||
|
touchstart: mousedown
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$playerbar = Ox.Bar({size: 16});
|
self.$playerbar = Ox.Bar({size: 16});
|
||||||
|
|
Loading…
Reference in a new issue