From 961f4f959aedfe456cba8327164b57a1d8d1981f Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 17 Jan 2012 17:20:31 +0530 Subject: [PATCH] update video editor (maps, calendars) --- source/Ox.UI/css/Ox.UI.css | 20 ----- source/Ox.UI/js/Calendar/Ox.Calendar.js | 11 +-- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 2 +- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 90 ++++++++++---------- source/Ox.UI/themes/classic/css/classic.css | 5 +- source/Ox.UI/themes/modern/css/modern.css | 5 +- 6 files changed, 62 insertions(+), 71 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index a5746570..89901013 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -244,26 +244,6 @@ Calendar border-top-right-radius: 0; border-bottom-right-radius: 0; } -.OxCalendar .OxLine > .OxEvent.OxDate { - background: -moz-linear-gradient(top, rgba(96, 96, 192, 0.9), rgba(64, 64, 160, 0.9)); - background: -o-linear-gradient(top, rgba(96, 96, 192, 0.9), rgba(64, 64, 160, 0.9)); - background: -webkit-linear-gradient(top, rgba(96, 96, 255, 0.9), rgba(64, 64, 224, 0.9)); -} -.OxCalendar .OxLine > .OxEvent.OxPlace { - background: -moz-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9)); - background: -o-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9)); - background: -webkit-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9)); -} -.OxCalendar .OxLine > .OxEvent.OxPerson { - background: -moz-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9)); - background: -o-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9)); - background: -webkit-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9)); -} -.OxCalendar .OxLine > .OxEvent.OxOther { - background: -moz-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9)); - background: -o-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9)); - background: -webkit-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9)); -} .OxCalendar .OxTimeline { position: absolute; diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 52f22e90..cc1bc86d 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -1223,15 +1223,14 @@ Ox.Calendar = function(options, self) { getLines(); renderCalendar(); if (self.options.selected) { - if (getSelectedEvent()) { - selectEvent(self.options.selected); - } else { - self.options.selected = ''; - } + selectEvent( + getSelectedEvent() ? self.options.selected : '' + ); } } else if (key == 'height') { that.css({height: self.options.height + 'px'}); } else if (key == 'selected') { + self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK'; selectEvent(value); } else if (key == 'width') { that.css({width: self.options.width + 'px'}); @@ -1304,8 +1303,10 @@ Ox.Calendar = function(options, self) { Ox.Log('Calendar', 'REMOVE ... SELF.OPTIONS', self.options) var index = Ox.getIndexById(self.options.events, self.options.selected); self.options.events.splice(index, 1); + self.options.selected = ''; getLines(); renderCalendar(); + setEventControls(''); return that; }; diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index 2b3f3187..d312764b 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -153,7 +153,7 @@ Ox.ArrayEditable = function(options, self) { }) .addClass(item.id == self.options.selected ? 'OxSelected' : '') //.css(self.options.type == 'textarea' ? {padding: '4px'} : {}) - .data({position: i}) + .data({id: item.id, position: i}) .bindEvent({ blur: function(data) { // fixme: remove data diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index a367939f..e3b67af9 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -42,6 +42,7 @@ Ox.AnnotationFolder = function(options, self) { }) .options(options || {}); + self.annotations = getAnnotations(); self.points = getPoints(); self.position = self.options.position; self.sort = getSort(); @@ -181,7 +182,7 @@ Ox.AnnotationFolder = function(options, self) { self.$annotations = Ox.ArrayEditable({ editable: self.options.editable, - items: getAnnotations(), + items: self.annotations, placeholder: 'No ' + self.options.title, selected: self.options.selected, separator: ';', @@ -204,10 +205,7 @@ Ox.AnnotationFolder = function(options, self) { that.triggerEvent('blur'); }, change: changeAnnotation, - 'delete': function(data) { - self.editing = false; - that.triggerEvent('remove', {id: data.id}); - }, + 'delete': removeAnnotation, edit: function() { self.editing = true; that.triggerEvent('edit'); @@ -303,7 +301,7 @@ Ox.AnnotationFolder = function(options, self) { function getEvents() { var events = []; - getAnnotations().filter(function(item) { + self.annotations.filter(function(item) { return !!item.event; }).forEach(function(item) { var index = Ox.getIndexById(events, item.event.id); @@ -320,7 +318,7 @@ Ox.AnnotationFolder = function(options, self) { function getPlaces() { var places = []; - getAnnotations().filter(function(item) { + self.annotations.filter(function(item) { return !!item.place; }).forEach(function(item) { var index = Ox.getIndexById(places, item.place.id); @@ -343,6 +341,25 @@ Ox.AnnotationFolder = function(options, self) { })[self.options.sort]; } + function removeAnnotation(data) { + var item; + Ox.print('REMOVE:::::::::', data) + self.editing = false; + if (self.widget) { + item = Ox.getObjectById(self.options.items, data.id); + if (item[self.options.type]) { + if (self.options.type == 'event') { + self.$calendar.removeEvent(data.id); + } else { + self.$map.removePlace(data.id) + .options({selected: ''}) // deselect resultPlace + .triggerEvent('key_escape'); // remove resultPlace + } + } + } + that.triggerEvent('remove', {id: data.id}); + } + function selectAnnotation(data) { Ox.print('SELECT annotation', data) var item = Ox.getObjectById(self.options.items, data.id); @@ -369,15 +386,13 @@ Ox.AnnotationFolder = function(options, self) { function showWarnings() { if (self.widget && self.options.items.length) { - self.$annotations.find('.OxValue').each(function() { + self.$annotations.find('.OxEditableElement').each(function() { var $element = $(this); - try { // FIXME: bad data, remove later!! - if (!Ox.getObject( - self.options.items, 'value', $element.html() - )[self.options.type]) { - $element.css({color: 'rgb(192, 64, 64)'}); - } - } catch(e) {} + if (!Ox.getObjectById( + self.options.items, $element.data('id') + )[self.options.type]) { + $element.addClass('OxWarning'); + } }); } } @@ -408,14 +423,14 @@ Ox.AnnotationFolder = function(options, self) { } function updateAnnotations() { - self.$annotations.options({items: getAnnotations()}); + self.annotations = getAnnotations(); + self.$annotations.options({items: self.annotations}); showWarnings(); - } - - function updateWidget() { - self.options.type == 'event' - ? self.$calendar.options({events: getEvents()}) - : self.$map.options({places: getPlaces()}); + if (self.widget) { + self.options.type == 'event' + ? self.$calendar.options({events: getEvents()}) + : self.$map.options({places: getPlaces()}); + } } self.setOption = function(key, value) { @@ -427,25 +442,15 @@ Ox.AnnotationFolder = function(options, self) { } if (key == 'in') { //fixme: array editable should support item updates while editing - if (self.options.range == 'selection') { - self.widget && updateWidget(); - updateAnnotations(); - } + self.options.range == 'selection' && updateAnnotations(); } else if (key == 'out') { - if (self.options.range == 'selection') { - self.widget && updateWidget(); - updateAnnotations(); - } + self.options.range == 'selection' && updateAnnotations(); } else if (key == 'position') { if (self.options.range == 'position') { - if (crossesPoint()) { - self.widget && updateWidget(); - updateAnnotations(); - } + crossesPoint() && updateAnnotations(); self.position = self.options.position; } } else if (key == 'range') { - self.widget && updateWidget(); updateAnnotations(); } else if (key == 'selected') { if (value === '') { @@ -486,6 +491,7 @@ Ox.AnnotationFolder = function(options, self) { .addItem(pos, item) .options({selected: item.id}) .editItem(); + showWarnings(); //selectAnnotation(item); //that.triggerEvent('edit'); return that; @@ -517,15 +523,13 @@ Ox.AnnotationFolder = function(options, self) { that.updateItem = function(item) { var index = Ox.getIndexById(self.options.items, item.id); self.options.items[index] = item; - if (self.widget) { - updateWidget(); - if (item[self.options.type]) { - // if updating has made the item match - // an event / a place, then select it - self.$widget.options({selected: item[self.options.type].id}); - } - } updateAnnotations(); + Ox.print('updating.......', item[self.options.type]) + if (self.widget && item[self.options.type]) { + // if updating has made the item match + // an event / a place, then select it + self.$widget.options({selected: item[self.options.type].id}); + } return that; } diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 3ad3ac78..62ae5d98 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -761,13 +761,16 @@ Video background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1)); } -/* FIXME: the first two should apply for every ArrayEditable */ +/* FIXME: the first three should apply for every ArrayEditable */ .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxSeparator { color: rgb(96, 96, 96); } .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue { color: rgb(160, 160, 160); } +.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue { + color: rgb(192, 64, 64); +} .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { background: rgb(192, 192, 255); } diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 045e4d25..efa2bdd1 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -781,13 +781,16 @@ Video //display: none; } -/* FIXME: the first two should apply for every ArrayEditable */ +/* FIXME: the first three 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 .OxEditableElement.OxWarning .OxValue { + color: rgb(255, 64, 64); +} .OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { background: rgb(64, 64, 192); }