porting more widgets to new mouse events, fix bug where one could click-through-to-edit on a selected item in a non-focused list
This commit is contained in:
rlx
parent
24263a3e17
commit
e81400dfc3
1 changed files with 188 additions and 102 deletions
|
|
@ -959,10 +959,13 @@ requires
|
|||
mouseup + mousedown: trigger doubleclick
|
||||
after 250 msec:
|
||||
mouseup + no mousedown within 250 msec: trigger singleclick
|
||||
no mouseup within 250 msec: trigger dragstart
|
||||
no mouseup within 250 msec:
|
||||
trigger mouserepeat every 50 msec
|
||||
trigger dragstart
|
||||
mousemove: trigger drag
|
||||
mouseup: trigger dragend
|
||||
*/
|
||||
var mouseInterval = 0;
|
||||
if (!self.mouseTimeout) {
|
||||
// first mousedown
|
||||
that.triggerEvent('mousedown', e);
|
||||
|
|
@ -973,14 +976,24 @@ requires
|
|||
// singleclick
|
||||
that.triggerEvent('singleclick', e);
|
||||
} else {
|
||||
// drag
|
||||
that.triggerEvent('dragstart', e);
|
||||
// mouserepeat, drag
|
||||
that.triggerEvent({
|
||||
mouserepeat: e,
|
||||
dragstart: e
|
||||
});
|
||||
mouseInterval = setInterval(function() {
|
||||
that.triggerEvent('mouserepeat');
|
||||
}, 50);
|
||||
$window.unbind('mouseup', mouseup)
|
||||
.mousemove(mousemove)
|
||||
.one('mouseup', function(e) {
|
||||
clearInterval(mouseInterval);
|
||||
$window.unbind('mousemove', mousemove);
|
||||
that.triggerEvent('dragend', e);
|
||||
});
|
||||
that.one('mouseleave', function() {
|
||||
clearInterval(mouseInterval);
|
||||
});
|
||||
}
|
||||
}, 250);
|
||||
} else {
|
||||
|
|
@ -1162,15 +1175,15 @@ requires
|
|||
*/
|
||||
if (Ox.isObject(arguments[0])) {
|
||||
$.each(arguments[0], function(event, data) {
|
||||
if (['mousedown', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].indexOf(event) == -1) {
|
||||
//if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].indexOf(event) == -1) {
|
||||
Ox.print(that.id, self.options.id, 'trigger', event, data);
|
||||
}
|
||||
//}
|
||||
self.$eventHandler.trigger('ox_' + event, data);
|
||||
});
|
||||
} else {
|
||||
if (['mousedown', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].indexOf(arguments[0]) == -1) {
|
||||
//if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].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] || {});
|
||||
}
|
||||
return that;
|
||||
|
|
@ -2313,18 +2326,18 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function mousedown(event) {
|
||||
function mousedown(e) {
|
||||
if (self.options.type == 'image' && $.browser.safari) {
|
||||
// keep image from being draggable
|
||||
event.preventDefault();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function mouseenter(event) {
|
||||
self.$tooltip.show(event.clientX, event.clientY);
|
||||
function mouseenter(e) {
|
||||
self.$tooltip.show(e.clientX, e.clientY);
|
||||
}
|
||||
|
||||
function mouseleave(event) {
|
||||
function mouseleave() {
|
||||
self.$tooltip.hide();
|
||||
}
|
||||
|
||||
|
|
@ -4216,27 +4229,35 @@ requires
|
|||
if (self.options.arrows) {
|
||||
self.$arrows = [];
|
||||
$.each(Ox.range(0, 2), function(i) {
|
||||
self.$arrows[i] = Ox.Button({
|
||||
self.$arrows[i] = new Ox.Button({
|
||||
overlap: i == 0 ? 'right' : 'left',
|
||||
title: self.options.arrowSymbols[i],
|
||||
type: 'image'
|
||||
})
|
||||
.addClass('OxArrow')
|
||||
.mousedown(function(e) {
|
||||
clickArrow(e, i);
|
||||
.bindEvent({
|
||||
mousedown: function(event, e) {
|
||||
clickArrow(e, i, true);
|
||||
},
|
||||
mouserepeat: function(event, e) {
|
||||
clickArrow(e, i, false);
|
||||
}
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
});
|
||||
}
|
||||
|
||||
self.$track = $('<div>')
|
||||
self.$track = new Ox.Element()
|
||||
.addClass('OxTrack')
|
||||
.css($.extend({
|
||||
width: (self.trackSize - 2) + 'px'
|
||||
}, self.trackImages == 1 ? {
|
||||
background: 'rgb(0, 0, 0)'
|
||||
} : {}))
|
||||
.mousedown(clickTrack)
|
||||
.bindEvent({
|
||||
mousedown: clickTrack,
|
||||
drag: dragTrack
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
|
||||
self.trackColors && setTrackColors();
|
||||
|
|
@ -4247,7 +4268,7 @@ requires
|
|||
width: self.trackSize + 'px',
|
||||
marginRight: (-self.trackSize - 1) + 'px'
|
||||
})
|
||||
.appendTo(self.$track);
|
||||
.appendTo(self.$track.$element);
|
||||
$.each(self.options.trackImages, function(i, v) {
|
||||
//Ox.print(self.trackImageWidths[i])
|
||||
$('<img>')
|
||||
|
|
@ -4285,36 +4306,23 @@ requires
|
|||
|
||||
setThumb();
|
||||
|
||||
function clickArrow(e, i) {
|
||||
function clickArrow(e, i, animate) {
|
||||
// fixme: shift doesn't work, see menu scrolling
|
||||
var interval,
|
||||
timeout = setTimeout(function() {
|
||||
interval = setInterval(function() {
|
||||
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1));
|
||||
}, 50);
|
||||
}, 500);
|
||||
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), true);
|
||||
$window.one('mouseup', function() {
|
||||
clearInterval(interval);
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), animate);
|
||||
}
|
||||
|
||||
function clickTrack(e) {
|
||||
//Ox.Focus.focus();
|
||||
var isThumb = $(e.target).hasClass('OxThumb'),
|
||||
left = self.$track.offset().left,
|
||||
offset = isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0;
|
||||
setValue(val(e), !isThumb);
|
||||
$window.mousemove(function(e) {
|
||||
setValue(val(e));
|
||||
});
|
||||
$window.one('mouseup', function() {
|
||||
$window.unbind('mousemove');
|
||||
});
|
||||
function val(e) {
|
||||
return getVal(e.clientX - left - offset);
|
||||
function clickTrack(event, e) {
|
||||
// fixme: thumb ends up a bit too far on the right
|
||||
var isThumb = $(e.target).hasClass('OxThumb');
|
||||
self.drag = {
|
||||
left: self.$track.offset().left,
|
||||
offset: isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0
|
||||
};
|
||||
setValue(getVal(e.clientX - self.drag.left - self.drag.offset), !isThumb);
|
||||
}
|
||||
|
||||
function dragTrack(event, e) {
|
||||
setValue(getVal(e.clientX - self.drag.left - self.drag.offset))
|
||||
}
|
||||
|
||||
function getPx(val) {
|
||||
|
|
@ -6265,7 +6273,18 @@ requires
|
|||
.options(options || {})
|
||||
.scroll(scroll);
|
||||
|
||||
that.$content.mousedown(mousedown);
|
||||
that.$content.mousedown(_mousedown);
|
||||
//that.bindEvent('doubleclick', function() {alert('d')})
|
||||
/*
|
||||
that.$content.bindEvent({ // fixme: port to new Ox mouse events
|
||||
mousedown: mousedown,
|
||||
singleclick: singleclick,
|
||||
doubleclick: doubleclick,
|
||||
dragstart: dragstart,
|
||||
drag: drag,
|
||||
dragend: dragend
|
||||
});
|
||||
*/
|
||||
|
||||
$.extend(self, {
|
||||
$items: [],
|
||||
|
|
@ -6499,6 +6518,50 @@ requires
|
|||
}
|
||||
}
|
||||
|
||||
function dragstart(event, e) { // fixme: doesn't work yet
|
||||
self.drag = {
|
||||
pos: findItemPosition(e)
|
||||
};
|
||||
$.extend(self.drag, {
|
||||
id: self.ids[self.drag.pos],
|
||||
startPos: self.drag.pos,
|
||||
startY: e.clientY,
|
||||
stopPos: self.drag.pos
|
||||
});
|
||||
self.$items[pos].addClass('OxDrag') // fixme: why does the class not work?
|
||||
.css({
|
||||
cursor: 'move',
|
||||
});
|
||||
}
|
||||
|
||||
function drag(event, e) { // fixme: doesn't work yet
|
||||
var clientY = e.clientY - that.offset()['top'],
|
||||
offset = clientY % 16,
|
||||
position = Ox.limit(parseInt(clientY / 16), 0, self.$items.length - 1);
|
||||
if (position < self.drag.pos) {
|
||||
self.drag.stopPos = position + (offset > 8 ? 1 : 0);
|
||||
} else if (position > self.drag.pos) {
|
||||
self.drag.stopPos = position - (offset <= 8 ? 1 : 0);
|
||||
}
|
||||
if (self.drag.stopPos != self.drag.pos) {
|
||||
moveItem(self.drag.pos, self.drag.stopPos);
|
||||
self.drag.pos = self.drag.stopPos;
|
||||
}
|
||||
}
|
||||
|
||||
function dragend(event, e) { // fixme: doesn't work yet
|
||||
var $item = self.$items[self.drag.pos];
|
||||
$item.removeClass('OxDrag')
|
||||
.css({
|
||||
cursor: 'default',
|
||||
});
|
||||
that.triggerEvent('move', {
|
||||
//id: id,
|
||||
ids: self.ids
|
||||
//position: pos
|
||||
});
|
||||
}
|
||||
|
||||
function dragItem(pos, e) {
|
||||
var $item = self.$items[pos],
|
||||
id = self.ids[pos],
|
||||
|
|
@ -6583,10 +6646,10 @@ requires
|
|||
return $element.hasClass('OxCell') ? $element : null;
|
||||
}
|
||||
|
||||
function findItem(e) {
|
||||
function findItemPosition(e) {
|
||||
//Ox.print('---- findItem', e.target)
|
||||
var $element = $(e.target),
|
||||
$item = null;
|
||||
position = -1;
|
||||
while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) {
|
||||
$element = $element.parent();
|
||||
}
|
||||
|
|
@ -6595,10 +6658,10 @@ requires
|
|||
$element = $element.parent();
|
||||
}
|
||||
if ($element.hasClass('OxItem')) {
|
||||
$item = $element;
|
||||
position = $element.data('position');
|
||||
}
|
||||
}
|
||||
return $item;
|
||||
return position;
|
||||
}
|
||||
|
||||
function getAbove() {
|
||||
|
|
@ -6845,19 +6908,79 @@ requires
|
|||
loadPage(page + 1, fn);
|
||||
}
|
||||
|
||||
function mousedown(e) {
|
||||
//Ox.print('mousedown')
|
||||
var $cell,
|
||||
$item = findItem(e),
|
||||
pos,
|
||||
clickable, editable,
|
||||
clickTimeout = false;
|
||||
selectTimeout = false;
|
||||
function mousedown(event, e) { // fixme: doesn't work yet
|
||||
var pos = findItemPosition(e);
|
||||
self.hadFocus = that.hasFocus();
|
||||
that.gainFocus();
|
||||
if ($item) {
|
||||
if (pos > -1) {
|
||||
if (e.metaKey) {
|
||||
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
|
||||
// meta-click on unselected item
|
||||
addToSelection(pos);
|
||||
} else if (isSelected(pos) && self.options.min < self.selected.length) {
|
||||
// meta-click on selected item
|
||||
deselect(pos);
|
||||
}
|
||||
} else if (e.shiftKey) {
|
||||
if (self.options.max == -1) {
|
||||
// shift-click on item
|
||||
addAllToSelection(pos);
|
||||
}
|
||||
} else if (!isSelected(pos)) {
|
||||
// click on unselected item
|
||||
select(pos);
|
||||
}
|
||||
} else if (self.options.min == 0) {
|
||||
// click on empty area
|
||||
selectNone();
|
||||
}
|
||||
}
|
||||
|
||||
function singleclick(event, e) { // fixme: doesn't work yet
|
||||
// these can't trigger on mousedown,
|
||||
// since it could be a doubleclick
|
||||
var pos = findItemPosition(e),
|
||||
clickable, editable;
|
||||
alert('singleclick')
|
||||
if (pos > -1) {
|
||||
if (!e.metaKey && !e.shiftKey && isSelected(pos)) {
|
||||
alert('??')
|
||||
if (self.selected.length > 1) {
|
||||
// click on one of multiple selected items
|
||||
alert('!!')
|
||||
select(pos);
|
||||
} else if (self.options.type == 'text' && self.hadFocus) {
|
||||
$cell = findCell(e);
|
||||
if ($cell) {
|
||||
clickable = $cell.hasClass('OxClickable');
|
||||
editable = $cell.hasClass('OxEditable') && !$cell.hasClass('OxEdit');
|
||||
if (clickable || editable) {
|
||||
// click on a clickable or editable cell
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function doubleclick(event, e) { // fixme: doesn't work yet
|
||||
alert('doubleclick')
|
||||
open();
|
||||
}
|
||||
|
||||
function _mousedown(e) {
|
||||
Ox.print('mousedown')
|
||||
var pos = findItemPosition(e),
|
||||
clickable, editable,
|
||||
clickTimeout = false,
|
||||
selectTimeout = false,
|
||||
$cell,
|
||||
hadFocus = that.hasFocus();
|
||||
that.gainFocus();
|
||||
if (pos > -1) {
|
||||
if (!self.clickTimeout) {
|
||||
// click
|
||||
pos = $item.data('position');
|
||||
//Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
|
||||
if (e.metaKey) {
|
||||
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
|
||||
|
|
@ -6875,7 +6998,7 @@ requires
|
|||
// this could be the first click
|
||||
// of a double click on multiple items
|
||||
selectTimeout = true;
|
||||
} else if (self.options.type == 'text') {
|
||||
} else if (self.options.type == 'text' && hadFocus) {
|
||||
$cell = findCell(e);
|
||||
if ($cell) {
|
||||
clickable = $cell.hasClass('OxClickable');
|
||||
|
|
@ -6884,7 +7007,7 @@ requires
|
|||
if (self.options.sortable && self.listLength > 1) {
|
||||
clickTimeout = true;
|
||||
} else {
|
||||
triggerCellEvent($item, $cell, clickable ? 'click' : 'edit');
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6907,7 +7030,7 @@ requires
|
|||
clearTimeout(self.dragTimeout);
|
||||
self.dragTimeout = 0;
|
||||
if (clickTimeout) {
|
||||
triggerCellEvent($item, $cell, clickable ? 'click' : 'edit');
|
||||
triggerCellEvent(self.$items[pos], $cell, clickable ? 'click' : 'edit');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -7712,43 +7835,6 @@ requires
|
|||
dragendResize(v.id, e);
|
||||
}
|
||||
});
|
||||
/*
|
||||
// fixme: make these their own named functions
|
||||
.mousedown(function(e) {
|
||||
var startWidth = self.columnWidths[i],
|
||||
startX = e.clientX;
|
||||
$window.mousemove(function(e) {
|
||||
var width = getWidth(e);
|
||||
resizeColumn(v.id, width);
|
||||
});
|
||||
$window.one('mouseup', function(e) {
|
||||
var width = getWidth(e);
|
||||
resizeColumn(v.id, width);
|
||||
that.triggerEvent('columnresize', {
|
||||
id: v.id,
|
||||
width: width
|
||||
});
|
||||
$window.unbind('mousemove');
|
||||
});
|
||||
function getWidth(e) {
|
||||
return Ox.limit(
|
||||
startWidth - startX + e.clientX,
|
||||
self.options.columnWidth[0],
|
||||
self.options.columnWidth[1]
|
||||
);
|
||||
}
|
||||
})
|
||||
// fixme: never use doubleclick, mousedown will fire too
|
||||
// make working click dblclick and drag Ox.Element events
|
||||
.dblclick(function() {
|
||||
var width = self.defaultColumnWidths[getColumnIndexById(v.id)];
|
||||
resizeColumn(v.id, width);
|
||||
that.triggerEvent('columnresize', {
|
||||
id: v.id,
|
||||
width: width
|
||||
});
|
||||
});
|
||||
*/
|
||||
}
|
||||
$left = $('<div>').addClass('OxLeft').appendTo($resize.$element);
|
||||
$center = $('<div>').addClass('OxCenter').appendTo($resize.$element);
|
||||
|
|
|
|||
Loading…
Reference in a new issue