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-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;

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

@ -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;
};

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' : '')
//.css(self.options.type == 'textarea' ? {padding: '4px'} : {})
.data({position: i})
.data({id: item.id, position: i})
.bindEvent({
blur: function(data) {
// fixme: remove data

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

@ -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()
if (!Ox.getObjectById(
self.options.items, $element.data('id')
)[self.options.type]) {
$element.css({color: 'rgb(192, 64, 64)'});
$element.addClass('OxWarning');
}
} catch(e) {}
});
}
}
@ -408,15 +423,15 @@ Ox.AnnotationFolder = function(options, self) {
}
function updateAnnotations() {
self.$annotations.options({items: getAnnotations()});
self.annotations = getAnnotations();
self.$annotations.options({items: self.annotations});
showWarnings();
}
function updateWidget() {
if (self.widget) {
self.options.type == 'event'
? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()});
}
}
self.setOption = function(key, value) {
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
@ -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]) {
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});
}
}
updateAnnotations();
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));
}
/* 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);
}

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

@ -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);
}