various annotation-related bugfixes

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -42,7 +42,8 @@ Ox.Calendar = function(options, self) {
             showTypes: ['date', 'place', 'person', 'other'],
             showZoombar: false,
             width: 256,
-            zoom: 8
+            zoom: 8,
+            zoomOnlyWhenFocused: false
         })
         .options(options || {})
         .addClass('OxCalendar')
@@ -833,6 +834,9 @@ Ox.Calendar = function(options, self) {
     }
 
     function getMouseDate(e) {
+        Ox.print('mousedate', e.clientX, that.offset().left, self.options.width, new Date(+self.options.date + (
+            e.clientX - that.offset().left - self.options.width / 2 - 1
+        ) * getSecondsPerPixel() * 1000))
         return new Date(+self.options.date + (
             e.clientX - that.offset().left - self.options.width / 2 - 1
         ) * getSecondsPerPixel() * 1000);
@@ -945,7 +949,11 @@ Ox.Calendar = function(options, self) {
     function mousewheel(e, delta, deltaX, deltaY) {
         //Ox.Log('Calendar', 'mousewheel', delta, deltaX, deltaY);
         var deltaZ = 0;
-        if (!self.mousewheel && Math.abs(deltaY) > Math.abs(deltaX)) {
+        if (
+            (!self.options.zoomOnlyWhenFocused || that.hasFocus())
+            && !self.mousewheel
+            && Math.abs(deltaY) > Math.abs(deltaX)
+        ) {
             if (deltaY < 0 && self.options.zoom > 0) {
                 deltaZ = -1;
             } else if (deltaY > 0 && self.options.zoom < self.maxZoom) {
@@ -962,6 +970,7 @@ Ox.Calendar = function(options, self) {
                 self.mousewheel = false;
             }, 250);
         }
+        that.hasFocus() && e.preventDefault();
     }
 
     function overlaps(eventA, eventB) {

source/Ox.UI/js/Core/Ox.Focus.js

@@ -24,10 +24,14 @@ Ox.Focus = (function() {
                 stack.length == 1
                     ? stack.pop()
                     : stack.splice(stack.length - 2, 0, stack.pop());
-                //$elements[id].removeClass('OxFocus');
+                Ox.UI.elements[id]
-                $('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
+                    .removeClass('OxFocus')
-                stack.length && Ox.UI.elements[stack[stack.length - 1]]
+                    .triggerEvent('losefocus');
-                    .addClass('OxFocus')/*.triggerEvent('focus')*/;
+                if (stack.length) {
+                    Ox.UI.elements[stack[stack.length - 1]]
+                        .addClass('OxFocus')
+                        .triggerEvent('gainfocus')
+                }
                 Ox.Log('Core', 'blur', id, stack);
             }
         },
@@ -40,10 +44,16 @@ Ox.Focus = (function() {
             if (index == -1 || index < stack.length - 1) {
                 index > -1 && stack.splice(index, 1);
                 stack.push(id);
-                $('.OxFocus').removeClass('OxFocus'); // fixme: see above
+                if (stack.length > 1) {
-                Ox.Log('Core', 'focus', id, stack);
+                    Ox.print('...', Object.keys(Ox.UI.elements[stack[stack.length - 2]]))
+                    Ox.UI.elements[stack[stack.length - 2]]
+                        .removeClass('OxFocus')
+                        .triggerEvent('losefocus')
+                }
                 Ox.UI.elements[id]
-                    .addClass('OxFocus')/*.triggerEvent('focus')*/;
+                    .addClass('OxFocus')
+                    .triggerEvent('gainfocus');
+                Ox.Log('Core', 'focus', id, stack);
             }
         },
         /*@

source/Ox.UI/js/Core/Ox.LoadingIcon.js

@@ -11,6 +11,7 @@ Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
 @*/
 
 Ox.LoadingIcon = function(options, self) {
+
     self = self || {};
     var that = Ox.Element('<img>', self)
         .defaults({
@@ -23,6 +24,11 @@ Ox.LoadingIcon = function(options, self) {
         .addClass(
             'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
         );
+
+    self.setOption = function(key, value) {
+        
+    };
+
     /*@
     start <f> Start loading animation
         ()  -> <f> Loading Icon Element
@@ -36,6 +42,7 @@ Ox.LoadingIcon = function(options, self) {
         }, 250);
         return that;
     };
+
     /*@
     stop <f> Stop loading animation
         ()  -> <f> Loading Icon Element
@@ -50,5 +57,7 @@ Ox.LoadingIcon = function(options, self) {
         });        
         return that;
     };
+
     return that;
+
 };

source/Ox.UI/js/Core/Ox.Request.js

@@ -46,6 +46,9 @@ Ox.Request = (function() {
                 // cancel by id
                 delete requests[arguments[0]];
             }
+            $element && $element.triggerEvent('request', {
+                requests: Ox.len(requests)
+            });
         },
         /*@
         clearCache <f> clear cached results
@@ -60,11 +63,12 @@ Ox.Request = (function() {
                 });
             }
         },
+
         /*@
-        bindEvent <f> bindEvent to error/authrize requests
+        bindEvent <f> Unbind event
         @*/
         bindEvent: function() {
-            if(!$element) {
+            if (!$element) {
                 $element = Ox.Element();
             }
             $element.bindEvent.apply(this, arguments);
@@ -146,12 +150,18 @@ Ox.Request = (function() {
                         url: options.url
                     });
                 }
+                $element && $element.triggerEvent('request', {
+                    requests: Ox.len(requests)
+                });
             }
 
             function callback(data) {
                 if (requests[options.id]) {
                     delete requests[options.id];
                     options.callback && options.callback(data);
+                    $element && $element.triggerEvent('request', {
+                        requests: Ox.len(requests)
+                    });
                 }
             }
 
@@ -197,7 +207,7 @@ Ox.Request = (function() {
         },
 
         /*@
-        unbindEvent <f> unbindEvent for error/authrize requests
+        unbindEvent <f> Unbind event
         @*/
         unbindEvent: function() {
             $element && $element.unbindEvent.apply(this, arguments);

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -7,9 +7,7 @@ Ox.ArrayEditable <f> Array Editable Object
 Ox.ArrayEditable = function(options, self) {
 
     self = self || {};
-    var that = Ox.Element(options.editable === false ? {} : {
+    var that = Ox.Element({}, self)
-            tooltip: 'Doubleclick to add ' + (options.itemName || 'item')
-        }, self)
         .defaults({
             clickLink: null,
             editable: true,
@@ -29,8 +27,6 @@ Ox.ArrayEditable = function(options, self) {
         .addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
         .css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
         .bindEvent({
-            anyclick: anyclick,
-            doubleclick: doubleclick,
             key_delete: deleteItem,
             key_enter: function() {
                 // make sure the newline does
@@ -43,7 +39,8 @@ Ox.ArrayEditable = function(options, self) {
             key_down: self.options.type == 'input' ? selectLast : selectNext,
             key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
             key_right: self.options.type == 'input' ? selectNext : selectLast,
-            key_up: self.options.type == 'input' ? selectFirst : selectPrevious
+            key_up: self.options.type == 'input' ? selectFirst : selectPrevious,
+            singleclick: singleclick
         });
 
     self.$items = [];
@@ -53,35 +50,6 @@ Ox.ArrayEditable = function(options, self) {
 
     self.selected = getSelectedPosition();
 
-    function anyclick(e) {
-        Ox.print('SELF EDITING', self.editing)
-        var $target = $(e.target),
-            $parent = $target.parent(),
-            position = $parent.data('position');
-        if (!$target.is('.OxInput')) {
-            Ox.print('BLURRED EDITING', self.blurred, self.editing)
-            if ($parent.is('.OxEditableElement')) {
-                if (!$parent.is('.OxSelected')) {
-                    // select another item
-                    selectItem(
-                        e.metaKey && position == self.selected
-                        ? '' : $parent.data('position')
-                    );
-                }
-            } else if (!self.blurred) {
-                // if there wasn't an active input element
-                if (self.editing) {
-                    // blur if still in editing mode
-                    that.blurItem();
-                } else {
-                    // othewise deselect selected
-                    selectNone();
-                }
-            }
-            that.gainFocus();
-        }
-    }
-
     function deleteItem() {
         if (self.options.editable) {
             self.options.items.splice(self.selected, 1);
@@ -95,6 +63,7 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function doubleclick(e) {
+        // fixme: unused
         var $target = $(e.target),
             $parent = $target.parent();
         if ($parent.is('.OxEditableElement')) {
@@ -119,9 +88,8 @@ Ox.ArrayEditable = function(options, self) {
         that.empty();
         if (self.options.items.length == 0) {
             Ox.Editable({
-                clickLink: self.options.clickLink,
                 editable: false,
-                type: 'text',
+                type: self.options.type,
                 value: self.options.placeholder
             })
             .addClass('OxPlaceholder')
@@ -182,6 +150,9 @@ Ox.ArrayEditable = function(options, self) {
                             });
                         },
                         edit: function(data) {
+                            if (item.id != self.options.selected) {
+                                selectItem(item.id);
+                            }
                             self.editing = true;
                             that.triggerEvent('edit', data);
                         },
@@ -237,6 +208,33 @@ Ox.ArrayEditable = function(options, self) {
         self.selected > 0 && selectItem(self.selected - 1);
     }
 
+    function singleclick(e) {
+        var $target = $(e.target),
+            $element = $target.parents('.OxEditableElement'),
+            position = $element.data('position');
+        if (!$target.is('.OxInput')) {
+            if ($element.length) {
+                if (!$element.is('.OxSelected')) {
+                    // select another item
+                    selectItem(
+                        e.metaKey && position == self.selected
+                        ? '' : position
+                    );
+                }
+            } else if (!self.blurred) {
+                // if there wasn't an active input element
+                if (self.editing) {
+                    // blur if still in editing mode
+                    that.blurItem();
+                } else {
+                    // othewise deselect selected
+                    selectNone();
+                }
+            }
+            that.gainFocus();
+        }
+    }
+
     function sortItems() {
         if (!Ox.isEmpty(self.options.sort)) {
             self.options.items = Ox.sortBy(self.options.items, self.options.sort);

source/Ox.UI/js/Form/Ox.Editable.js

@@ -43,13 +43,8 @@ Ox.Editable = function(options, self) {
         .bindEvent({
             doubleclick: edit,
             singleclick: function(e) {
-                var $target = $(e.target),
+                var $target = $(e.target);
-                    $parent = $target.parent();
+                if ($target.is('a') || ($target = $target.parents('a')).length) {
-                while(!$target.is('a') && !$parent.is('.OxEditableElement')) {
-                    $target = $parent;
-                    $parent = $target.parent();
-                }
-                if($target.is('a')) {
                     if (self.options.clickLink) {
                         e.target = $target[0];
                         self.options.clickLink(e);
@@ -107,6 +102,7 @@ Ox.Editable = function(options, self) {
     function edit() {
         var height, width;
         if (self.options.editable && !self.options.editing) {
+            Ox.print('EDIT???')
             self.options.editing = true;
             that.addClass('OxEditing');
             self.originalValue = self.options.value;

source/Ox.UI/js/Map/Ox.Map.js

@@ -40,6 +40,7 @@ Ox.Map <function> Basic map object
         statusbar       <b|false> If true, the map has a statusbar
         toolbar         <b|false> If true, the map has a toolbar
         zoombar         <b|false> If true, the map has a zoombar
+        zoomOnlyWhenFocused <b|false> If true, scroll-zoom only when focused
     self <o|{}> Shared private variable
     # EVENTS -------------------------------------------------------------------
     addplace <!> Fires when a place has been added
@@ -110,15 +111,19 @@ Ox.Map = function(options, self) {
             showTypes: false,
             statusbar: false, // FIXME: showStatusbar
             toolbar: false, // FIXME: showToolbar
-            zoombar: false // FIXME: showZoombar
+            zoombar: false, // FIXME: showZoombar
+            zoomOnlyWhenFocused: false
             // fixme: width, height
         })
         .options(options || {})
         .addClass('OxMap')
-        .click(function(e) {
-            !$(e.target).is('input') && that.gainFocus();
-        })
 		.bindEvent({
+		    gainfocus: function() {
+		        self.options.zoomOnlyWhenFocused && self.map.setOptions({scrollwheel: true});
+		    },
+		    losefocus: function() {
+		        self.options.zoomOnlyWhenFocused && self.map.setOptions({scrollwheel: false});
+		    },
 			key_0: function() {
 			    panToPlace()
 			},
@@ -181,7 +186,10 @@ Ox.Map = function(options, self) {
             key_up: function() {
 				pan(0, -1);
 			},
-			key_z: undo
+			key_z: undo,
+			mousedown: function(e) {
+                !$(e.target).is('input') && that.gainFocus();
+            }
         });
 
     self.isAsync = Ox.isFunction(self.options.places);
@@ -808,6 +816,7 @@ Ox.Map = function(options, self) {
                 disableDoubleClickZoom: true,
                 mapTypeId: google.maps.MapTypeId[getMapType()],
                 noClear: true,
+                scrollwheel: !self.options.zoomOnlyWhenFocused,
                 zoom: self.zoom
             });
             google.maps.event.addListener(self.map, 'bounds_changed', boundsChanged);

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -72,23 +72,34 @@ Ox.AnnotationFolder = function(options, self) {
     }
 
     self.$addButton = Ox.Button({
-        disabled: !self.options.editable,
+            id: 'add',
-        id: 'add',
+            style: 'symbol',
-        style: 'symbol',
+            title: 'add',
-        title: 'add',
+            tooltip: 'Add ' + self.options.item,
-        tooltip: 'Add ' + self.options.item,
+            type: 'image'
-        type: 'image'
+        })
-    }).bindEvent({
+        .bindEvent({
-        click: function() {
+            click: function() {
-            that.triggerEvent('add', {value: ''});
+                that.triggerEvent('add', {value: ''});
-        }
+            }
-    });    
+        });    
+
+    self.$infoButton = Ox.Button({
+            style: 'symbol',
+            title: 'info',
+            type: 'image'
+        })
+        .bindEvent({
+            click: function() {
+                that.triggerEvent('info');
+            }
+        });
 
     self.$panel = Ox.CollapsePanel({
             collapsed: self.options.collapsed,
             extras: Ox.merge(
                 self.widget ? [self.$defineButton] : [],
-                [self.$addButton]
+                [self.options.editable ? self.$addButton : self.$infoButton]
             ),
             size: 16,
             title: self.options.title
@@ -120,7 +131,8 @@ Ox.AnnotationFolder = function(options, self) {
                     events: getEvents(),
                     height: self.widgetSize,
                     showZoombar: true,
-                    width: self.options.width
+                    width: self.options.width,
+                    zoomOnlyWhenFocused: true
                 })
                 .css({
                     width: self.options.width + 'px',
@@ -146,7 +158,8 @@ Ox.AnnotationFolder = function(options, self) {
                     places: getPlaces(),
                     showTypes: true,
                     // FIXME: should be showZoombar
-                    zoombar: true
+                    zoombar: true,
+                    zoomOnlyWhenFocused: true
                     // showLabels: true
                 })
                 .css({

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -185,6 +185,9 @@ Ox.AnnotationPanel = function(options, self) {
                 edit: function() {
                     that.triggerEvent('edit');
                 },
+                info: function(data) {
+                    that.triggerEvent('info', {layer: layer.id});
+                },
                 paused: function() {
                     that.triggerEvent('paused')
                 },

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -643,6 +643,9 @@ Ox.VideoEditor = function(options, self) {
                 self.editing = true;
                 setTimelineState();
             },
+            info: function(data) {
+                that.triggerEvent('info', data);
+            },
             paused: togglePaused,
             remove: function(data) {
                 Ox.print('?>???', data)