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

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
+                        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
+                            // mouserepeat, drag
-                            that.triggerEvent('dragstart', e);
+                            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) {
+        function mouseenter(e) {
-            self.$tooltip.show(event.clientX, event.clientY);
+            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) {
+                .bindEvent({
-                    clickArrow(e, i);
+                    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,
+            setValue(self.options.value + self.options.arrowStep * (i == 0 ? -1 : 1) * (e.shiftKey ? 2 : 1), animate);
-                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);
-            });
         }
 
-        function clickTrack(e) {
+        function clickTrack(event, e) {
-            //Ox.Focus.focus();
+            // fixme: thumb ends up a bit too far on the right
-            var isThumb = $(e.target).hasClass('OxThumb'),
+            var isThumb = $(e.target).hasClass('OxThumb');
-                left = self.$track.offset().left,
+            self.drag = {
-                offset = isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0;
+                left: self.$track.offset().left,
-            setValue(val(e), !isThumb);
+                offset: isThumb ? e.clientX - self.$thumb.offset().left - 8 /*self.thumbSize / 2*/ : 0
-            $window.mousemove(function(e) {
+            };
-                setValue(val(e));
+            setValue(getVal(e.clientX - self.drag.left - self.drag.offset), !isThumb);
-            });
-            $window.one('mouseup', function() {
-                $window.unbind('mousemove');
-            });
-            function val(e) {
-                return getVal(e.clientX - left - offset);
         }
+
+        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) {
+        function mousedown(event, e) { // fixme: doesn't work yet
-            //Ox.print('mousedown')
+            var pos = findItemPosition(e);
-            var $cell,
+            self.hadFocus = that.hasFocus();
-                $item = findItem(e),
-                pos,
-                clickable, editable,
-                clickTimeout = false;
-                selectTimeout = false;
             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);