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

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

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

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

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

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

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

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