From f0432426403eb0b8d7f30982aa8e11adde34ca2d Mon Sep 17 00:00:00 2001 From: j Date: Wed, 27 Jul 2016 21:13:09 +0200 Subject: [PATCH] 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 --- source/UI/js/Core/Element.js | 41 ++++++++++++++++++++++- source/UI/js/Form/ArrayEditable.js | 3 +- source/UI/js/Video/BlockVideoTimeline.js | 4 ++- source/UI/js/Video/LargeVideoTimeline.js | 5 ++- source/UI/js/Video/SmallVideoTimeline.js | 8 ++++- source/UI/js/Video/VideoPreview.js | 18 ++++++++++ source/UI/js/Video/VideoTimelinePlayer.js | 8 ++++- 7 files changed, 81 insertions(+), 6 deletions(-) diff --git a/source/UI/js/Core/Element.js b/source/UI/js/Core/Element.js index db09ea16..f7f8446e 100644 --- a/source/UI/js/Core/Element.js +++ b/source/UI/js/Core/Element.js @@ -83,6 +83,15 @@ singleclicks and doubleclicks, since it will not fire for doubleclicks) * <*> 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) { @@ -118,7 +127,10 @@ .data({oxid: that.oxid}) .on({ mousedown: onMousedown, - mousewheel: onMousewheel + mousewheel: onMousewheel, + touchend: onTouchend, + touchmove: onTouchmove, + touchstart: onTouchstart }); that[0] = that.$element[0]; 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) { /* 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, // rather than some self.$tooltip that // will not get garbage collected diff --git a/source/UI/js/Form/ArrayEditable.js b/source/UI/js/Form/ArrayEditable.js index ec9a9c5f..3fa5af39 100644 --- a/source/UI/js/Form/ArrayEditable.js +++ b/source/UI/js/Form/ArrayEditable.js @@ -94,7 +94,8 @@ Ox.ArrayEditable = function(options, self) { key_left: self.options.type == 'input' ? selectPrevious : selectFirst, key_right: self.options.type == 'input' ? selectNext : selectLast, key_up: self.options.type == 'input' ? selectFirst : selectPrevious, - singleclick: singleclick + singleclick: singleclick, + touchstart: singleclick }); self.$items = []; diff --git a/source/UI/js/Video/BlockVideoTimeline.js b/source/UI/js/Video/BlockVideoTimeline.js index 5cafbd36..1f0945ce 100644 --- a/source/UI/js/Video/BlockVideoTimeline.js +++ b/source/UI/js/Video/BlockVideoTimeline.js @@ -55,7 +55,9 @@ Ox.BlockVideoTimeline = function(options, self) { doubleclick: doubleclick, drag: function(data) { mousedown(data); - } + }, + touchmove: mousedown, + touchstart: mousedown }); self.$images = []; diff --git a/source/UI/js/Video/LargeVideoTimeline.js b/source/UI/js/Video/LargeVideoTimeline.js index c264ec27..2c9532f9 100644 --- a/source/UI/js/Video/LargeVideoTimeline.js +++ b/source/UI/js/Video/LargeVideoTimeline.js @@ -53,7 +53,10 @@ Ox.LargeVideoTimeline = function(options, self) { anyclick: click, dragstart: dragstart, drag: drag, - dragend: dragend + dragend: dragend, + touchstart: dragstart, + touchmove: drag, + touchend: dragend }); } diff --git a/source/UI/js/Video/SmallVideoTimeline.js b/source/UI/js/Video/SmallVideoTimeline.js index 11367f0b..c6756dc5 100644 --- a/source/UI/js/Video/SmallVideoTimeline.js +++ b/source/UI/js/Video/SmallVideoTimeline.js @@ -110,7 +110,13 @@ Ox.SmallVideoTimeline = function(options, self) { self.triggered = false; mousedown(data); }, - mousedown: mousedown + mousedown: mousedown, + touchend: function(data) { + self.triggered = false; + mousedown(data); + }, + touchmove: mousedown, + touchstart: mousedown }) .appendTo(that); diff --git a/source/UI/js/Video/VideoPreview.js b/source/UI/js/Video/VideoPreview.js index bad8b195..63db6259 100644 --- a/source/UI/js/Video/VideoPreview.js +++ b/source/UI/js/Video/VideoPreview.js @@ -92,6 +92,11 @@ Ox.VideoPreview = function(options, self) { self.$frame.attr({src: self.options.getFrame(self.options.position)}); } }) + .bindEvent({ + touchend: touchend, + touchmove: touchmove, + touchstart: startLoading + }) .appendTo(that); function click(e) { @@ -174,6 +179,19 @@ Ox.VideoPreview = function(options, self) { 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; }; diff --git a/source/UI/js/Video/VideoTimelinePlayer.js b/source/UI/js/Video/VideoTimelinePlayer.js index e6d9d6bc..aca17467 100644 --- a/source/UI/js/Video/VideoTimelinePlayer.js +++ b/source/UI/js/Video/VideoTimelinePlayer.js @@ -215,7 +215,13 @@ Ox.VideoTimelinePlayer = function(options, self) { key_up: function() { self.options.position -= self.contentWidth / self.fps; setPosition(); - } + }, + touchend: function (e) { + mousedown(e); + mouseleave(); + }, + touchmove: mousedown, + touchstart: mousedown }); self.$playerbar = Ox.Bar({size: 16});