From f5d587cf5b77951c2d4e67ffeabfb1436f9b5280 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 16 Jan 2012 19:32:30 +0530 Subject: [PATCH] update video editor (maps) --- source/Ox.UI/css/Ox.UI.css | 2 + source/Ox.UI/js/Form/Ox.ArrayEditable.js | 38 +++++++---- source/Ox.UI/js/Form/Ox.Input.js | 2 +- source/Ox.UI/js/Map/Ox.Map.js | 72 +++++++++++++------- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 11 +-- 5 files changed, 81 insertions(+), 44 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 779be344..a5746570 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1370,6 +1370,7 @@ Maps top: 0; right: 0; bottom: 0; + overflow: hidden; } .OxMap > * { position: absolute; @@ -1383,6 +1384,7 @@ Maps .OxMap .OxPlaceControl { position: absolute; border-width: 2px; + z-index: 1; } .OxMap .OxMapControl.OxButton, .OxMap .OxPlaceControl.OxButton { diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index 768590ac..df069fc1 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -61,7 +61,6 @@ Ox.ArrayEditable = function(options, self) { Ox.print('BLURRED EDITING', self.blurred, self.editing) if ($parent.is('.OxEditableElement')) { // select another item - Ox.print('AAAAA') selectItem( e.metaKey && position == self.selected ? '' : $parent.data('position') @@ -198,21 +197,27 @@ Ox.ArrayEditable = function(options, self) { } function selectItem(idOrPosition) { - if (Ox.isString(idOrPosition)) { - self.options.selected = idOrPosition; - self.selected = getSelectedPosition(); - } else { - self.selected = idOrPosition; - self.options.selected = getSelectedId(); + var isId = Ox.isString(idOrPosition); + if ( + (isId && idOrPosition != self.options.selected) + || (!isId && idOrPosition != self.selected) + ) { + if (isId) { + self.options.selected = idOrPosition; + self.selected = getSelectedPosition(); + } else { + self.selected = idOrPosition; + self.options.selected = getSelectedId(); + } + if (/*self.options.selected == '' && */self.editing) { + self.editing = false; + that.blurItem(); + } + Ox.print('SELECT ITEM', self.options.selected, self.selected); + that.find('.OxSelected').removeClass('OxSelected'); + self.selected > -1 && self.$items[self.selected].addClass('OxSelected'); + triggerSelectEvent(); } - if (/*self.options.selected == '' && */self.editing) { - self.editing = false; - that.blurItem(); - } - Ox.print('SELECT ITEM', self.options.selected, self.selected); - that.find('.OxSelected').removeClass('OxSelected'); - self.selected > -1 && self.$items[self.selected].addClass('OxSelected'); - triggerSelectEvent(); } function selectLast() { @@ -269,6 +274,9 @@ Ox.ArrayEditable = function(options, self) { self.setOption = function(key, value) { if (key == 'items') { + if (self.options.selected && getSelectedPosition() == -1) { + selectNone(); + } renderItems(true); } else if (key == 'selected') { selectItem(value); diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index 92733ea7..ef125afe 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -114,7 +114,7 @@ Ox.Input = function(options, self) { height: self.options.height + 'px' } : {}) ) - .bindEvent(Ox.extend(self.options.type == 'input' ? { + .bindEvent(Ox.extend(self.options.type != 'textarea' ? { key_enter: submit } : {}, { key_control_v: paste, diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index a1138666..dea7c46c 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -458,6 +458,23 @@ Ox.Map = function(options, self) { ); } + function addPlaces() { + Ox.forEach(self.$placeControls, function($placeControl) { + $placeControl.hide(); + }); + self.places && self.places.forEach(function(place) { + place.remove(); + }); + self.places = []; + if (!self.isAsync) { + self.options.places.forEach(function(place) { + self.places.push(new Ox.MapPlace(Ox.extend({ + map: that + }, place))); + }); + } + } + function addPlaceToMap(place) { // via find, click, shift-click, or new place button Ox.Log('Map', 'addPlaceToMap', place) @@ -790,6 +807,7 @@ Ox.Map = function(options, self) { disableDefaultUI: true, disableDoubleClickZoom: true, mapTypeId: google.maps.MapTypeId[getMapType()], + noClear: true, zoom: self.zoom }); google.maps.event.addListener(self.map, 'bounds_changed', boundsChanged); @@ -798,6 +816,7 @@ Ox.Map = function(options, self) { google.maps.event.addListener(self.map, 'idle', mapChanged); google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged); google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded); + google.maps.event.trigger(self.map, 'resize'); // needed to get mouse x/y coordinates on marker mouseover, // see http://code.google.com/p/gmaps-api-issues/issues/detail?id=2342 @@ -811,16 +830,27 @@ Ox.Map = function(options, self) { } that.overlayView.draw(); + addPlaces(); + + Ox.forEach(self.$controls, function($control) { + $control.appendTo(self.$map); + }); + Ox.forEach(self.$placeControls, function($placeControl) { + $placeControl.appendTo(self.$map); + }); + if (self.options.find) { self.$findInput.value(self.options.find) .triggerEvent('submit', {value: self.options.find}); - } else if (self.options.selected) { - selectPlace(self.options.selected, true); } else { + if (self.options.selected) { + selectPlace(self.options.selected, true); + } if (mapBounds) { if (isEmpty(mapBounds)) { self.map.setZoom(self.minZoom); } else { + Ox.print("FITTING BOUNDS") self.map.fitBounds(mapBounds); } } @@ -830,32 +860,16 @@ Ox.Map = function(options, self) { } updateFormElements(); - // fixme: this is just guessing - // setTimeout(updateFormElements, 2500); - - self.places = []; - if (!self.isAsync) { - self.options.places.forEach(function(place) { - self.places.push(new Ox.MapPlace(Ox.extend({ - map: that - }, place))); - }); - } - google.maps.event.trigger(self.map, 'resize'); //that.gainFocus(); + self.loaded = true; that.triggerEvent('load'); + function tilesLoaded() { + setTimeout(formatTerms, 250); + } + }); - function tilesLoaded() { - // fixme: can add earlier, use don't replace map contents option - Ox.forEach(self.$controls, function($control) { - $control.appendTo(self.$map); - }); - Ox.forEach(self.$placeControls, function($placeControl) { - $placeControl.appendTo(self.$map); - }); - } } function isEmpty(bounds) { @@ -1101,6 +1115,7 @@ Ox.Map = function(options, self) { } } + // fixme: removePlacefromMap? function removePlace() { var place = getSelectedPlace(); place.id = '_' + place.id; @@ -1369,12 +1384,21 @@ Ox.Map = function(options, self) { that.$element.css(key, value + 'px'); that.resizeMap(); } else if (key == 'places') { + // fixme: assumes !self.isAsync Ox.print('MAP SET OPTIONS PLACES', value); + addPlaces(); getMapBounds(function(mapBounds) { self.map.fitBounds(mapBounds); }); + if (self.options.selected) { + if (getSelectedPlace()) { + selectPlace(self.options.selected); + } else { + self.options.selected = ''; + } + } } else if (key == 'selected') { - selectPlace(value || null); + self.loaded && selectPlace(value || null); } else if (key == 'type') { } diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index 9ea39876..e981e1bb 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -246,14 +246,13 @@ Ox.AnnotationFolder = function(options, self) { } self.$resizebar.css({top: self.options.widgetSize + 'px'}); self.$inner.css({height: self.options.widgetSize + 'px'}); - self.$widget.css({ - height: self.options.widgetSize + 'px' - }); + self.$widget.options({height: self.options.widgetSize}); } //self.options.type == 'place' && self.$map.resizeMap(); } function dragend(e) { + //self.options.type == 'place' && self.$map.resizeMap(); if (self.options.showWidget) { that.triggerEvent('resizewidget', {size: self.options.widgetSize}); } @@ -404,11 +403,13 @@ Ox.AnnotationFolder = function(options, self) { } } else if (key == 'position') { if (self.options.range == 'position') { + Ox.print('POSITION CHANGED, UPDATING') self.widget && updateWidget(); updateAnnotations(); } } else if (key == 'range') { - self.$annotations.options({items: getAnnotations()}); + self.widget && updateWidget(); + updateAnnotations(); } else if (key == 'selected') { if (value === '') { self.editing = false; @@ -450,11 +451,13 @@ Ox.AnnotationFolder = function(options, self) { }; that.blurItem = function() { + self.editing = false; self.$annotations.blurItem(); return that; }; that.editItem = function() { + self.editing = true; self.$annotations.editItem(); return that; };