From 4480b3e8072d212a7b54f71a0c7d4450315892df Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Wed, 20 Apr 2011 17:00:56 +0000
Subject: [PATCH] add mouse events demo
---
build/js/ox.ui.js | 40 +++++++++++++++++------------
demos/mouse/index.html | 13 ++++++++++
demos/mouse/js/mouse.js | 56 +++++++++++++++++++++++++++++++++++++++++
3 files changed, 93 insertions(+), 16 deletions(-)
create mode 100644 demos/mouse/index.html
create mode 100644 demos/mouse/js/mouse.js
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 89721d38..7f2ae924 100644
--- a/build/js/ox.ui.js
+++ b/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({
- mouserepeat: e,
- dragstart: e
- });
- mouseInterval = setInterval(function() {
- that.triggerEvent('mouserepeat');
- }, 50);
+ clientX = e.clientX;
+ clientY = e.clientY;
+ that.triggerEvent('dragstart', e);
+ mouserepeat();
+ mouseInterval = setInterval(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({
- dragpause: e
- });
+ that.triggerEvent('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] || {});
diff --git a/demos/mouse/index.html b/demos/mouse/index.html
new file mode 100644
index 00000000..4b25b260
--- /dev/null
+++ b/demos/mouse/index.html
@@ -0,0 +1,13 @@
+
+
+
+ OxJS Mouse Events Demo
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/mouse/js/mouse.js b/demos/mouse/js/mouse.js
new file mode 100644
index 00000000..4eb376ce
--- /dev/null
+++ b/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();
+ $('')
+ .html(
+ Ox.formatDate(date, '%H:%M:%S') + '.' + (Ox.pad(date % 1000, 3)) +
+ ' ' + event + ' ' +
+ JSON.stringify(Ox.extend(e.clientX ? {
+ clientX: e.clientX,
+ clientY: e.clientY,
+ } : {}, e.clientDX ? {
+ clientDX: e.clientDX,
+ clientDY: e.clientDY
+ } : {}))
+ )
+ .prependTo($log.$element);
+ });
+ });
+});
\ No newline at end of file