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:
j 2016-07-27 21:13:09 +02:00
parent 72a7d54025
commit f043242640
7 changed files with 81 additions and 6 deletions

View file

@ -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

View file

@ -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 = [];

View file

@ -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 = [];

View file

@ -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
}); });
} }

View file

@ -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);

View file

@ -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;
}; };

View file

@ -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});