From 7da384d03a1ca1e59f7582e5f6d41a9597ee54b0 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 16 Jan 2012 23:21:53 +0530 Subject: [PATCH] update video editor --- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 48 ++++++++++---------- source/Ox.UI/js/Map/Ox.Map.js | 13 ++++-- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 31 +++++++++++-- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 24 ++++++++-- source/Ox.UI/themes/modern/css/modern.css | 20 +++++++- 5 files changed, 98 insertions(+), 38 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index df069fc1..1e305407 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -60,11 +60,13 @@ Ox.ArrayEditable = function(options, self) { if (!$target.is('.OxInput')) { Ox.print('BLURRED EDITING', self.blurred, self.editing) if ($parent.is('.OxEditableElement')) { - // select another item - selectItem( - e.metaKey && position == self.selected - ? '' : $parent.data('position') - ); + 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) { @@ -197,27 +199,21 @@ Ox.ArrayEditable = function(options, self) { } function selectItem(idOrPosition) { - 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 (Ox.isString(idOrPosition)) { + 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(); } function selectLast() { @@ -263,6 +259,8 @@ Ox.ArrayEditable = function(options, self) { that.triggerEvent('select', Ox.extend({ id: self.options.selected }, self.options.selected ? { + height: self.$items[self.selected].$element.height() + + (self.options.type == 'textarea' ? 8 : 0), top: self.$items[self.selected].offset().top } : {})); self.triggered = true; diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index dea7c46c..e216b059 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -850,7 +850,6 @@ Ox.Map = function(options, self) { if (isEmpty(mapBounds)) { self.map.setZoom(self.minZoom); } else { - Ox.print("FITTING BOUNDS") self.map.fitBounds(mapBounds); } } @@ -901,7 +900,7 @@ Ox.Map = function(options, self) { function mapChanged() { // gets called after panning or zooming - Ox.Log('Map', 'mapChanged'); + Ox.print('Map', 'mapChanged'); if (self.boundsChanged) { var bounds = self.map.getBounds(), southWest = bounds.getSouthWest(), @@ -1388,7 +1387,15 @@ Ox.Map = function(options, self) { Ox.print('MAP SET OPTIONS PLACES', value); addPlaces(); getMapBounds(function(mapBounds) { - self.map.fitBounds(mapBounds); + if (mapBounds) { + self.map.fitBounds(mapBounds); + } else { + self.map.setZoom(self.minZoom); + self.map.setCenter(new google.maps.LatLng(0, 0)); + } + // fixme: the following is just a guess + self.boundsChanged = true; + mapChanged(); }); if (self.options.selected) { if (getSelectedPlace()) { diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index e981e1bb..5136e5c0 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -42,6 +42,8 @@ Ox.AnnotationFolder = function(options, self) { }) .options(options || {}); + self.points = getPoints(); + self.position = self.options.position; self.sort = getSort(); self.widget = self.options.type == 'event' ? 'Calendar' : self.options.type == 'place' ? 'Map' : ''; @@ -143,6 +145,7 @@ Ox.AnnotationFolder = function(options, self) { .bindEvent({ // FIXME: should be select, not selectplace selectplace: function(data) { + Ox.print('ANNOTATION ID IS', data.annotationId) self.$annotations.options({selected: data.annotationId}); // selectAnnotation({id: data.annotationId}); } @@ -228,6 +231,15 @@ Ox.AnnotationFolder = function(options, self) { that.triggerEvent('change', item); } + function crossesPoint() { + var sort = [self.position, self.options.position].sort(), + positionA = sort[0], + positionB = sort[1]; + return self.points.some(function(point) { + return point > positionA && point < positionB; + }); + } + function dragstart() { if (self.options.showWidget) { self.drag = { @@ -279,6 +291,14 @@ Ox.AnnotationFolder = function(options, self) { }); } + function getPoints() { + return Ox.unique(Ox.flatten( + self.options.items.map(function(item) { + return [item['in'], item.out]; + }) + )); + } + function getEvents() { var events = []; getAnnotations().forEach(function(item) { @@ -388,7 +408,8 @@ Ox.AnnotationFolder = function(options, self) { if (['in', 'out'].indexOf(key) > -1 && self.editing) { var index = Ox.getIndexById(self.options.items, self.options.selected); self.options.items[index][key] = value; - self.options.items[index].duration = self.options.out - self.options['in']; + self.options.items[index].duration = self.options.out - self.options['in']; + self.points = getPoints(); } if (key == 'in') { //fixme: array editable should support item updates while editing @@ -403,9 +424,11 @@ Ox.AnnotationFolder = function(options, self) { } } else if (key == 'position') { if (self.options.range == 'position') { - Ox.print('POSITION CHANGED, UPDATING') - self.widget && updateWidget(); - updateAnnotations(); + if (crossesPoint()) { + self.widget && updateWidget(); + updateAnnotations(); + } + self.position = self.options.position; } } else if (key == 'range') { self.widget && updateWidget(); diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 4387cd0f..3b9f13ef 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -243,15 +243,33 @@ Ox.AnnotationPanel = function(options, self) { } function selectAnnotation(data, index) { - var height, scrollTop; + var height, scrollBottom, scrollTop, top; if (data.id) { self.$folder.forEach(function($folder, i) { i != index && $folder.options({selected: ''}); }); } if (data.top) { + data.bottom = data.top + data.height; height = self.$folders.height(); + top = self.$folders.offset().top; + Ox.print('top', top); scrollTop = self.$folders.scrollTop(); + Ox.print('data/self t/b/h', data.top, data.bottom, data.height, scrollTop, height) + if (data.top < top || data.bottom > height) { + if (data.top < top) { + Ox.print('top scrollTop', data.top, scrollTop) + scrollTop += data.top - top; + } else { + scrollTop += data.bottom - top - height; + } + self.$folders.animate({ + scrollTop: scrollTop + 'px' + }, 0); + + } + + /* data.top -= 60; // 20 + 24 + 16 Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top); if (data.top < 0 || data.top > height - 16) { @@ -260,10 +278,8 @@ Ox.AnnotationPanel = function(options, self) { } else if (data.top > height - 16) { scrollTop += data.top - height + 14; } - self.$folders.animate({ - scrollTop: scrollTop + 'px' - }, 0); } + */ } that.triggerEvent('select', data); } diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 68e519fe..0788d3fd 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -760,20 +760,36 @@ Video //display: none; } -.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxSelected { +/* FIXME: the first two should apply for every ArrayEditable */ +.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxSeparator { + color: rgb(160, 160, 160); +} +.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue { + color: rgb(96, 96, 96); +} +.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { background: rgb(64, 64, 192); +} +.OxThemeModern .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected { box-shadow: 0 0 1px rgb(255, 255, 255); } +.OxThemeModern .OxAnnotationFolder .OxArrayEditableTextarea .OxEditableElement.OxEditing { + background: rgb(64, 128, 64); +} +.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxInput.OxFocus { + box-shadow: none; +} .OxThemeModern .OxAnnotationFolder .OxEditableElement input { background: rgb(64, 128, 64); color: rgb(255, 255, 255); - box-shadow: 0 0 1px rgb(255, 255, 255); + //box-shadow: 0 0 1px rgb(64, 64, 64); } .OxThemeModern .OxAnnotationFolder .OxEditableElement textarea { background: rgb(64, 128, 64); color: rgb(255, 255, 255); } + /* ================================================================================ Miscellaneous