add mouse events demo

build/js/ox.ui.js

@@ -922,7 +922,8 @@ requires
                                     trigger dragpause
                                 mouseup: trigger dragend
                 */
-                var dragTimeout = 0,
+                var clientX, clientY,
+                    dragTimeout = 0,
                     mouseInterval = 0;
                 if (!self.mouseTimeout) {
                     // first mousedown
@@ -935,20 +936,18 @@ requires
                             that.triggerEvent('singleclick', e);
                         } else {
                             // mouserepeat, drag
-                            that.triggerEvent({
+                            clientX = e.clientX;
-                                mouserepeat: e,
+                            clientY = e.clientY;
-                                dragstart: e
+                            that.triggerEvent('dragstart', e);
-                            });
+                            mouserepeat();
-                            mouseInterval = setInterval(function() {
+                            mouseInterval = setInterval(mouserepeat, 50);
-                                that.triggerEvent('mouserepeat');
-                            }, 50);
                             Ox.UI.$window.unbind('mouseup', mouseup)
                                 .mousemove(mousemove)
                                 .one('mouseup', function(e) {
                                     clearInterval(mouseInterval);
                                     clearTimeout(dragTimeout);  
                                     Ox.UI.$window.unbind('mousemove', mousemove);
-                                    that.triggerEvent('dragend', e);
+                                    that.triggerEvent('dragend', extend(e));
                                 });
                             that.one('mouseleave', function() {
                                 clearInterval(mouseInterval);
@@ -959,20 +958,29 @@ requires
                     // second mousedown
                     clearTimeout(self.mouseTimeout);
                     self.mouseTimeout = 0;
-                    that.triggerEvent('doubleclick');
+                    that.triggerEvent('doubleclick', e);
                 }
                 Ox.UI.$window.one('mouseup', mouseup);
+                function extend(e) {
+                    return Ox.extend({
+                        clientDX: e.clientX - clientX,
+                        clientDY: e.clientY - clientY
+                    }, e);
+                }
                 function mousemove(e) {
+                    e = extend(e);
                     clearTimeout(dragTimeout);  
                     dragTimeout = setTimeout(function() {
-                        that.triggerEvent({
+                        that.triggerEvent('dragpause', e);
-                            dragpause: e
-                        });
                     }, 250);
                     that.triggerEvent('drag', e);
                 }
+                function mouserepeat() {
+                    that.triggerEvent('mouserepeat');
+                }
                 function mouseup(e) {
-                    if (!self.mouseup) { // fixme: shouldn't be necessary, bound only once
+                    // only trigger on firse mouseup
+                    if (!self.mouseup) {
                         that.triggerEvent('anyclick', e);
                         self.mouseup = true;
                     }
@@ -1115,13 +1123,13 @@ requires
                 ***/
                 if (Ox.isObject(arguments[0])) {
                     Ox.forEach(arguments[0], function(data, event) {
-                        if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(event) == -1) {
+                        if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(event) == -1) {
                             Ox.print(that.id, self.options.id, 'trigger', event, data);
                         }
                         self.$eventHandler.trigger('ox_' + event, data);
                     });
                 } else {
-                    if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
+                    if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragpause', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
                         Ox.print(that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
                     }
                     self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {});

demos/mouse/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>OxJS Mouse Events Demo</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.5.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
+        <script type="text/javascript" src="js/mouse.js"></script>
+    </head>
+    <body></body>
+</html>

demos/mouse/js/mouse.js

@@ -0,0 +1,56 @@
+$(function() {
+    var $target = Ox.Element()
+            .css({
+                position: 'absolute',
+                width: '256px',
+                top: 0,
+                bottom: 0,
+                background: 'rgb(255, 0, 0)'
+            })
+            .html('Click here')
+            .appendTo(Ox.UI.$body),
+        $clear = Ox.Element()
+            .css({
+                position: 'absolute',
+                left: '256px',
+                right: 0,
+                height: '16px',
+                background: 'rgb(192, 192, 192)'
+            })
+            .html('Clear log')
+            .click(function() {
+                $log.empty();
+            })
+            .appendTo(Ox.UI.$body);
+        $log = Ox.Element()
+            .css({
+                position: 'absolute',
+                left: '256px',
+                right: 0,
+                top: '16px',
+                bottom: 0,
+                overflowY: 'auto'
+            })
+            .appendTo(Ox.UI.$body);
+    [
+        'anyclick', 'singleclick', 'doubleclick', 'mouserepeat',
+        'dragstart', 'drag', 'dragpause', 'dragend'
+    ].forEach(function(event) {
+        $target.bindEvent(event, function(foo, e) {
+            var date = new Date();
+            $('<div>')
+                .html(
+                    Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(date % 1000, 3)) +
+                    ' <span style="font-weight: bold">' + event + '</span> ' +
+                    JSON.stringify(Ox.extend(e.clientX ? {
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                    } : {}, e.clientDX ? {
+                        clientDX: e.clientDX,
+                        clientDY: e.clientDY
+                    } : {}))
+                )
+                .prependTo($log.$element);
+        });
+    });
+});