oxjs/demos/mouse/js/mouse.js

64 lines
2.1 KiB
JavaScript

Ox.load('UI', {
debug: true
}, 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', 'mousedown', 'mouserepeat',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
].forEach(function(event) {
$target.bindEvent(event, function(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
} : {})
)
.replace(/"/g, '')
.replace(/:/g, ': ')
.replace(/,/g, ', ')
)
.prependTo($log.$element);
event == 'anyclick' && Ox.print(e);
});
});
});