From a7a3f167c9d67f2594e3c93e0795196713117365 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 27 Jan 2012 19:59:11 +0530 Subject: [PATCH] various annotation-related bugfixes --- source/Ox.UI/js/Calendar/Ox.Calendar.js | 13 +++- source/Ox.UI/js/Core/Ox.Focus.js | 24 +++++-- source/Ox.UI/js/Core/Ox.LoadingIcon.js | 9 +++ source/Ox.UI/js/Core/Ox.Request.js | 16 ++++- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 72 ++++++++++---------- source/Ox.UI/js/Form/Ox.Editable.js | 10 +-- source/Ox.UI/js/Map/Ox.Map.js | 19 ++++-- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 41 +++++++---- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 3 + source/Ox.UI/js/Video/Ox.VideoEditor.js | 3 + 10 files changed, 135 insertions(+), 75 deletions(-) diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index cc1bc86d..dce0431a 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/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) { diff --git a/source/Ox.UI/js/Core/Ox.Focus.js b/source/Ox.UI/js/Core/Ox.Focus.js index b1e18e00..e3c385c5 100644 --- a/source/Ox.UI/js/Core/Ox.Focus.js +++ b/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'); - $('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work - stack.length && Ox.UI.elements[stack[stack.length - 1]] - .addClass('OxFocus')/*.triggerEvent('focus')*/; + Ox.UI.elements[id] + .removeClass('OxFocus') + .triggerEvent('losefocus'); + 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 - Ox.Log('Core', 'focus', id, stack); + if (stack.length > 1) { + 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); } }, /*@ diff --git a/source/Ox.UI/js/Core/Ox.LoadingIcon.js b/source/Ox.UI/js/Core/Ox.LoadingIcon.js index 444423e1..eee9982a 100644 --- a/source/Ox.UI/js/Core/Ox.LoadingIcon.js +++ b/source/Ox.UI/js/Core/Ox.LoadingIcon.js @@ -11,6 +11,7 @@ Ox.LoadingIcon Loading Icon Element @*/ Ox.LoadingIcon = function(options, self) { + self = self || {}; var that = Ox.Element('', 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 Start loading animation () -> Loading Icon Element @@ -36,6 +42,7 @@ Ox.LoadingIcon = function(options, self) { }, 250); return that; }; + /*@ stop Stop loading animation () -> Loading Icon Element @@ -50,5 +57,7 @@ Ox.LoadingIcon = function(options, self) { }); return that; }; + return that; + }; diff --git a/source/Ox.UI/js/Core/Ox.Request.js b/source/Ox.UI/js/Core/Ox.Request.js index 85fa8e2b..712dd350 100644 --- a/source/Ox.UI/js/Core/Ox.Request.js +++ b/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 clear cached results @@ -60,11 +63,12 @@ Ox.Request = (function() { }); } }, + /*@ - bindEvent bindEvent to error/authrize requests + bindEvent 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 unbindEvent for error/authrize requests + unbindEvent Unbind event @*/ unbindEvent: function() { $element && $element.unbindEvent.apply(this, arguments); diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index cb854050..b8d9ee99 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -7,9 +7,7 @@ Ox.ArrayEditable Array Editable Object Ox.ArrayEditable = function(options, self) { self = self || {}; - var that = Ox.Element(options.editable === false ? {} : { - tooltip: 'Doubleclick to add ' + (options.itemName || 'item') - }, self) + var that = Ox.Element({}, 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); diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 181748f3..9e0ceb52 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/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), - $parent = $target.parent(); - while(!$target.is('a') && !$parent.is('.OxEditableElement')) { - $target = $parent; - $parent = $target.parent(); - } - if($target.is('a')) { + var $target = $(e.target); + if ($target.is('a') || ($target = $target.parents('a')).length) { 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; diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index e216b059..3cf7dbe6 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -40,6 +40,7 @@ Ox.Map Basic map object statusbar If true, the map has a statusbar toolbar If true, the map has a toolbar zoombar If true, the map has a zoombar + zoomOnlyWhenFocused If true, scroll-zoom only when focused self 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); diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index ca1245b6..2ce48fa1 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/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', - style: 'symbol', - title: 'add', - tooltip: 'Add ' + self.options.item, - type: 'image' - }).bindEvent({ - click: function() { - that.triggerEvent('add', {value: ''}); - } - }); + id: 'add', + style: 'symbol', + title: 'add', + tooltip: 'Add ' + self.options.item, + type: 'image' + }) + .bindEvent({ + click: function() { + 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({ diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index e29c428a..132c8391 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/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') }, diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 102c97dc..eda749b7 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/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)