diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index d433968e..de3f9754 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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 - mousemove: trigger drag - mouseup: trigger dragend + 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 = $('
') + 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]) $('') @@ -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 = $('
').addClass('OxLeft').appendTo($resize.$element); $center = $('
').addClass('OxCenter').appendTo($resize.$element);