0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update video editor (maps, calendars)

Browse source
This commit is contained in:
rlx 2012-01-17 17:20:31 +05:30
parent dc47e901ad
commit 961f4f959a
6 changed files with 62 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
source/Ox.UI/css/Ox.UI.css
View file

@ -244,26 +244,6 @@ Calendar
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-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 { .OxCalendar .OxTimeline {
position: absolute; position: absolute;

11
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -1223,15 +1223,14 @@ Ox.Calendar = function(options, self) {
getLines(); getLines();
renderCalendar(); renderCalendar();
if (self.options.selected) { if (self.options.selected) {
if (getSelectedEvent()) { selectEvent(
selectEvent(self.options.selected); getSelectedEvent() ? self.options.selected : ''
} else { );
self.options.selected = '';
}
} }
} else if (key == 'height') { } else if (key == 'height') {
that.css({height: self.options.height + 'px'}); that.css({height: self.options.height + 'px'});
} else if (key == 'selected') { } else if (key == 'selected') {
self.options.selected = 'FIXME: THIS IS A VERY UGLY HACK';
selectEvent(value); selectEvent(value);
} else if (key == 'width') { } else if (key == 'width') {
that.css({width: self.options.width + 'px'}); that.css({width: self.options.width + 'px'});
@ -1304,8 +1303,10 @@ Ox.Calendar = function(options, self) {
Ox.Log('Calendar', 'REMOVE ... SELF.OPTIONS', self.options) Ox.Log('Calendar', 'REMOVE ... SELF.OPTIONS', self.options)
var index = Ox.getIndexById(self.options.events, self.options.selected); var index = Ox.getIndexById(self.options.events, self.options.selected);
self.options.events.splice(index, 1); self.options.events.splice(index, 1);
self.options.selected = '';
getLines(); getLines();
renderCalendar(); renderCalendar();
setEventControls('');
return that; return that;
}; };

2
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -153,7 +153,7 @@ Ox.ArrayEditable = function(options, self) {
}) })
.addClass(item.id == self.options.selected ? 'OxSelected' : '') .addClass(item.id == self.options.selected ? 'OxSelected' : '')
//.css(self.options.type == 'textarea' ? {padding: '4px'} : {}) //.css(self.options.type == 'textarea' ? {padding: '4px'} : {})
.data({position: i}) .data({id: item.id, position: i})
.bindEvent({ .bindEvent({
blur: function(data) { blur: function(data) {
// fixme: remove data // fixme: remove data

90
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -42,6 +42,7 @@ Ox.AnnotationFolder = function(options, self) {
}) })
.options(options || {}); .options(options || {});
self.annotations = getAnnotations();
self.points = getPoints(); self.points = getPoints();
self.position = self.options.position; self.position = self.options.position;
self.sort = getSort(); self.sort = getSort();
@ -181,7 +182,7 @@ Ox.AnnotationFolder = function(options, self) {
self.$annotations = Ox.ArrayEditable({ self.$annotations = Ox.ArrayEditable({
editable: self.options.editable, editable: self.options.editable,
items: getAnnotations(), items: self.annotations,
placeholder: 'No ' + self.options.title, placeholder: 'No ' + self.options.title,
selected: self.options.selected, selected: self.options.selected,
separator: ';', separator: ';',
@ -204,10 +205,7 @@ Ox.AnnotationFolder = function(options, self) {
that.triggerEvent('blur'); that.triggerEvent('blur');
}, },
change: changeAnnotation, change: changeAnnotation,
'delete': function(data) { 'delete': removeAnnotation,
self.editing = false;
that.triggerEvent('remove', {id: data.id});
},
edit: function() { edit: function() {
self.editing = true; self.editing = true;
that.triggerEvent('edit'); that.triggerEvent('edit');
@ -303,7 +301,7 @@ Ox.AnnotationFolder = function(options, self) {
function getEvents() { function getEvents() {
var events = []; var events = [];
getAnnotations().filter(function(item) { self.annotations.filter(function(item) {
return !!item.event; return !!item.event;
}).forEach(function(item) { }).forEach(function(item) {
var index = Ox.getIndexById(events, item.event.id); var index = Ox.getIndexById(events, item.event.id);
@ -320,7 +318,7 @@ Ox.AnnotationFolder = function(options, self) {
function getPlaces() { function getPlaces() {
var places = []; var places = [];
getAnnotations().filter(function(item) { self.annotations.filter(function(item) {
return !!item.place; return !!item.place;
}).forEach(function(item) { }).forEach(function(item) {
var index = Ox.getIndexById(places, item.place.id); var index = Ox.getIndexById(places, item.place.id);
@ -343,6 +341,25 @@ Ox.AnnotationFolder = function(options, self) {
})[self.options.sort]; })[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) { function selectAnnotation(data) {
Ox.print('SELECT annotation', data) Ox.print('SELECT annotation', data)
var item = Ox.getObjectById(self.options.items, data.id); var item = Ox.getObjectById(self.options.items, data.id);
@ -369,15 +386,13 @@ Ox.AnnotationFolder = function(options, self) {
function showWarnings() { function showWarnings() {
if (self.widget && self.options.items.length) { if (self.widget && self.options.items.length) {
self.$annotations.find('.OxValue').each(function() { self.$annotations.find('.OxEditableElement').each(function() {
var $element = $(this); var $element = $(this);
try { // FIXME: bad data, remove later!! if (!Ox.getObjectById(
if (!Ox.getObject( self.options.items, $element.data('id')
self.options.items, 'value', $element.html() )[self.options.type]) {
)[self.options.type]) { $element.addClass('OxWarning');
$element.css({color: 'rgb(192, 64, 64)'}); }
}
} catch(e) {}
}); });
} }
} }
@ -408,14 +423,14 @@ Ox.AnnotationFolder = function(options, self) {
} }
function updateAnnotations() { function updateAnnotations() {
self.$annotations.options({items: getAnnotations()}); self.annotations = getAnnotations();
self.$annotations.options({items: self.annotations});
showWarnings(); showWarnings();
} if (self.widget) {
self.options.type == 'event'
function updateWidget() { ? self.$calendar.options({events: getEvents()})
self.options.type == 'event' : self.$map.options({places: getPlaces()});
? self.$calendar.options({events: getEvents()}) }
: self.$map.options({places: getPlaces()});
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
@ -427,25 +442,15 @@ Ox.AnnotationFolder = function(options, self) {
} }
if (key == 'in') { if (key == 'in') {
//fixme: array editable should support item updates while editing //fixme: array editable should support item updates while editing
if (self.options.range == 'selection') { self.options.range == 'selection' && updateAnnotations();
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'out') { } else if (key == 'out') {
if (self.options.range == 'selection') { self.options.range == 'selection' && updateAnnotations();
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'position') { } else if (key == 'position') {
if (self.options.range == 'position') { if (self.options.range == 'position') {
if (crossesPoint()) { crossesPoint() && updateAnnotations();
self.widget && updateWidget();
updateAnnotations();
}
self.position = self.options.position; self.position = self.options.position;
} }
} else if (key == 'range') { } else if (key == 'range') {
self.widget && updateWidget();
updateAnnotations(); updateAnnotations();
} else if (key == 'selected') { } else if (key == 'selected') {
if (value === '') { if (value === '') {
@ -486,6 +491,7 @@ Ox.AnnotationFolder = function(options, self) {
.addItem(pos, item) .addItem(pos, item)
.options({selected: item.id}) .options({selected: item.id})
.editItem(); .editItem();
showWarnings();
//selectAnnotation(item); //selectAnnotation(item);
//that.triggerEvent('edit'); //that.triggerEvent('edit');
return that; return that;
@ -517,15 +523,13 @@ Ox.AnnotationFolder = function(options, self) {
that.updateItem = function(item) { that.updateItem = function(item) {
var index = Ox.getIndexById(self.options.items, item.id); var index = Ox.getIndexById(self.options.items, item.id);
self.options.items[index] = item; 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(); 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; return that;
} }

5
source/Ox.UI/themes/classic/css/classic.css
View file

@ -761,13 +761,16 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1)); 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 { .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxSeparator {
color: rgb(96, 96, 96); color: rgb(96, 96, 96);
} }
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue { .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
color: rgb(160, 160, 160); color: rgb(160, 160, 160);
} }
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue {
color: rgb(192, 64, 64);
}
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
background: rgb(192, 192, 255); background: rgb(192, 192, 255);
} }

5
source/Ox.UI/themes/modern/css/modern.css
View file

@ -781,13 +781,16 @@ Video
//display: none; //display: none;
} }
/* FIXME: the first two should apply for every ArrayEditable */ /* FIXME: the first three should apply for every ArrayEditable */
.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxSeparator { .OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxSeparator {
color: rgb(160, 160, 160); color: rgb(160, 160, 160);
} }
.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue { .OxThemeModern .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
color: rgb(96, 96, 96); color: rgb(96, 96, 96);
} }
.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxWarning .OxValue {
color: rgb(255, 64, 64);
}
.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { .OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
background: rgb(64, 64, 192); background: rgb(64, 64, 192);
} }