update video editor (maps, calendars)

This commit is contained in:
rlx 2012-01-17 14:55:58 +05:30
parent 1445824ffd
commit dc47e901ad
9 changed files with 196 additions and 69 deletions

View file

@ -1214,7 +1214,21 @@ Ox.Calendar = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'date') { if (key == 'date') {
// ...
} else if (key == 'events') {
value.forEach(function(event) {
event = getEventData(event);
});
self.$lines = [];
getLines();
renderCalendar();
if (self.options.selected) {
if (getSelectedEvent()) {
selectEvent(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') {

View file

@ -256,13 +256,9 @@ Ox.ArrayEditable = function(options, self) {
function triggerSelectEvent() { function triggerSelectEvent() {
if (!self.triggered) { if (!self.triggered) {
that.triggerEvent('select', Ox.extend({ that.triggerEvent('select', {
id: self.options.selected 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; self.triggered = true;
setTimeout(function() { setTimeout(function() {
self.triggered = false; self.triggered = false;

View file

@ -108,6 +108,8 @@ Ox.CollapsePanel = function(options, self) {
@*/ @*/
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'collapsed') { if (key == 'collapsed') {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
self.$button.trigger('click'); self.$button.trigger('click');
} else if (key == 'title') { } else if (key == 'title') {
self.$title.html(self.options.title); self.$title.html(self.options.title);

View file

@ -82,8 +82,7 @@ Ox.AnnotationFolder = function(options, self) {
} }
}); });
that.setElement( self.$panel = Ox.CollapsePanel({
Ox.CollapsePanel({
collapsed: self.options.collapsed, collapsed: self.options.collapsed,
extras: Ox.merge( extras: Ox.merge(
self.widget ? [self.$defineButton] : [], self.widget ? [self.$defineButton] : [],
@ -95,8 +94,9 @@ Ox.AnnotationFolder = function(options, self) {
.addClass('OxAnnotationFolder') .addClass('OxAnnotationFolder')
.bindEvent({ .bindEvent({
toggle: toggleLayer toggle: toggleLayer
}) });
);
that.setElement(self.$panel);
that.$content = that.$element.$content; that.$content = that.$element.$content;
if (self.widget) { if (self.widget) {
@ -126,7 +126,11 @@ Ox.AnnotationFolder = function(options, self) {
}) })
.bindEvent({ .bindEvent({
select: function(data) { select: function(data) {
selectAnnotation({id: data.annotationId}); if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
self.$annotations.options({
selected: !data.id ? '' : data.annotationIds[0]
});
}
} }
}) })
.appendTo(self.$inner); .appendTo(self.$inner);
@ -145,9 +149,11 @@ Ox.AnnotationFolder = function(options, self) {
.bindEvent({ .bindEvent({
// FIXME: should be select, not selectplace // FIXME: should be select, not selectplace
selectplace: function(data) { selectplace: function(data) {
Ox.print('ANNOTATION ID IS', data.annotationId) if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
self.$annotations.options({selected: data.annotationId}); self.$annotations.options({
// selectAnnotation({id: data.annotationId}); selected: !data.id ? '' : data.annotationIds[0]
});
}
} }
}) })
.appendTo(self.$inner); .appendTo(self.$inner);
@ -217,8 +223,6 @@ Ox.AnnotationFolder = function(options, self) {
? self.$outer : that.$content ? self.$outer : that.$content
); );
Ox.print('SAH', self.$annotations.height())
self.options.selected && setTimeout(function() { self.options.selected && setTimeout(function() {
selectAnnotation({id: self.options.selected}); selectAnnotation({id: self.options.selected});
}, 0); }, 0);
@ -260,11 +264,9 @@ Ox.AnnotationFolder = function(options, self) {
self.$inner.css({height: self.options.widgetSize + 'px'}); self.$inner.css({height: self.options.widgetSize + 'px'});
self.$widget.options({height: self.options.widgetSize}); self.$widget.options({height: self.options.widgetSize});
} }
//self.options.type == 'place' && self.$map.resizeMap();
} }
function dragend(e) { function dragend(e) {
//self.options.type == 'place' && self.$map.resizeMap();
if (self.options.showWidget) { if (self.options.showWidget) {
that.triggerEvent('resizewidget', {size: self.options.widgetSize}); that.triggerEvent('resizewidget', {size: self.options.widgetSize});
} }
@ -301,26 +303,33 @@ Ox.AnnotationFolder = function(options, self) {
function getEvents() { function getEvents() {
var events = []; var events = [];
getAnnotations().forEach(function(item) { getAnnotations().filter(function(item) {
if (item.event && Ox.getIndexById(events, item.event.id) == -1) { return !!item.event;
}).forEach(function(item) {
var index = Ox.getIndexById(events, item.event.id);
if (index == -1) {
events.push(Ox.extend({ events.push(Ox.extend({
annotationId: item.id annotationIds: [item.id]
}, item.event)); }, item.event))
} else {
events[index].annotationIds.push(item.id);
} }
}); });
if (!events.length) {
events = [{id: 'FOO', name: '20th Century', type: 'date', start: '1900', end: '2000'}]
}
return events; return events;
} }
function getPlaces() { function getPlaces() {
var places = []; var places = [];
getAnnotations().forEach(function(item) { getAnnotations().filter(function(item) {
if (item.place && Ox.getIndexById(places, item.place.id) == -1) { return !!item.place;
}).forEach(function(item) {
var index = Ox.getIndexById(places, item.place.id);
if (index == -1) {
places.push(Ox.extend({ places.push(Ox.extend({
annotationId: item.id annotationIds: [item.id]
}, item.place)); }, item.place))
} else {
places[index].annotationIds.push(item.id);
} }
}); });
return places; return places;
@ -335,17 +344,22 @@ Ox.AnnotationFolder = function(options, self) {
} }
function selectAnnotation(data) { function selectAnnotation(data) {
Ox.print('SELECT annotation', data)
var item = Ox.getObjectById(self.options.items, data.id); var item = Ox.getObjectById(self.options.items, data.id);
self.options.selected = item ? data.id : ''; self.options.selected = item ? data.id : '';
self.widget && self.$defineButton.options({disabled: !self.options.selected}); if (self.widget) {
///* if (self.options.type == 'event') {
if (self.options.type == 'place') { self.$calendar.options({
self.$map.options({ selected: item && item.event ? item.event.id : ''
selected: item && item.place ? item.place.id : null })
}) .panToEvent();
.panToPlace(); } else {
self.$map.options({
selected: item && item.place ? item.place.id : ''
})
.panToPlace();
}
} }
//*/
that.triggerEvent('select', Ox.extend(data, item ? { that.triggerEvent('select', Ox.extend(data, item ? {
'in': item['in'], 'in': item['in'],
out: item.out, out: item.out,
@ -401,7 +415,7 @@ Ox.AnnotationFolder = function(options, self) {
function updateWidget() { function updateWidget() {
self.options.type == 'event' self.options.type == 'event'
? self.$calendar.options({events: getEvents()}) ? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()}); : self.$map.options({places: getPlaces()});
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
@ -437,6 +451,10 @@ Ox.AnnotationFolder = function(options, self) {
if (value === '') { if (value === '') {
self.editing = false; self.editing = false;
} }
if (value && self.options.collapsed) {
Ox.print('HELLO??')
self.$panel.options({collapsed: false});
}
self.$annotations.options({selected: value}); self.$annotations.options({selected: value});
} else if (key == 'sort') { } else if (key == 'sort') {
self.sort = getSort(); self.sort = getSort();
@ -499,7 +517,14 @@ 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;
self.widget && updateWidget(); 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();
return that; return that;
} }

View file

@ -242,20 +242,40 @@ Ox.AnnotationPanel = function(options, self) {
return folder; return folder;
} }
function scrollToSelected(type) {
var $item = that.find('.OxEditableElement.OxSelected'),
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
itemTop = $item.offset().top,
itemBottom = itemTop + itemHeight,
height = self.$folders.height(),
scrollTop = self.$folders.scrollTop(),
top = self.$folders.offset().top;
if (itemTop < top || itemBottom > top + height) {
if (itemTop < top) {
scrollTop += itemTop - top;
} else {
scrollTop += itemBottom - top - height;
}
self.$folders.animate({
scrollTop: scrollTop + 'px'
}, 0);
}
}
function selectAnnotation(data, index) { function selectAnnotation(data, index) {
var height, scrollBottom, scrollTop, top; self.options.selected = data.id;
if (data.id) { if (data.id) {
self.$folder.forEach(function($folder, i) { self.$folder.forEach(function($folder, i) {
i != index && $folder.options({selected: ''}); i != index && $folder.options({selected: ''});
}); });
scrollToSelected(self.options.layers[index].type);
} }
/*
if (data.top) { if (data.top) {
data.bottom = data.top + data.height; data.bottom = data.top + data.height;
height = self.$folders.height(); height = self.$folders.height();
top = self.$folders.offset().top; top = self.$folders.offset().top;
Ox.print('top', top);
scrollTop = self.$folders.scrollTop(); 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 || data.bottom > height) {
if (data.top < top) { if (data.top < top) {
Ox.print('top scrollTop', data.top, scrollTop) Ox.print('top scrollTop', data.top, scrollTop)
@ -266,21 +286,9 @@ Ox.AnnotationPanel = function(options, self) {
self.$folders.animate({ self.$folders.animate({
scrollTop: scrollTop + 'px' scrollTop: scrollTop + 'px'
}, 0); }, 0);
} }
/*
data.top -= 60; // 20 + 24 + 16
Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
if (data.top < 0 || data.top > height - 16) {
if (data.top < 0) {
scrollTop += data.top - 3;
} else if (data.top > height - 16) {
scrollTop += data.top - height + 14;
}
}
*/
} }
*/
that.triggerEvent('select', data); that.triggerEvent('select', data);
} }
@ -302,7 +310,7 @@ Ox.AnnotationPanel = function(options, self) {
} else { } else {
self.$folder.forEach(function($folder) { self.$folder.forEach(function($folder) {
$folder.options({selected: ''}); $folder.options({selected: ''});
}) });
} }
} else if (key == 'width') { } else if (key == 'width') {
self.$folder.forEach(function($folder) { self.$folder.forEach(function($folder) {

View file

@ -604,11 +604,11 @@ Ox.VideoEditor = function(options, self) {
position: self.options.position, position: self.options.position,
range: self.options.annotationsRange, range: self.options.annotationsRange,
selected: self.options.selected, selected: self.options.selected,
sort: self.options.annotationsSort,
showCalendar: self.options.showAnnotationsCalendar, showCalendar: self.options.showAnnotationsCalendar,
showLayers: self.options.showLayers, showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap, showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers, showUsers: self.options.showUsers,
sort: self.options.annotationsSort,
width: self.options.annotationsSize width: self.options.annotationsSize
}) })
.bindEvent({ .bindEvent({

View file

@ -164,28 +164,64 @@ Ox.VideoPanel = function(options, self) {
} }
], ],
orientation: 'vertical' orientation: 'vertical'
})
.bindEvent({
resize: resizePanel
}); });
self.$annotationPanel = Ox.AnnotationPanel({ self.$annotationPanel = Ox.AnnotationPanel({
calendarSize: self.options.annotationsCalendarSize,
editable: false,
font: self.options.annotationsFont, font: self.options.annotationsFont,
'in': self.options['in'], 'in': self.options['in'],
layers: self.options.layers, layers: self.options.layers,
mapSize: self.options.annotationsMapSize,
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
range: self.options.annotationsRange, range: self.options.annotationsRange,
selected: self.options.selected,
showCalendar: self.options.showAnnotationsCalendar,
showFonts: true, showFonts: true,
showLayers: self.options.showLayers, showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers, showUsers: self.options.showUsers,
sort: self.options.annotationsSort sort: self.options.annotationsSort,
width: self.options.annotationsSize
}) })
.bindEvent({ .bindEvent({
annotationsfont: function(data) {
self.options.annotationsFont = data.font;
that.triggerEvent('annotationsfont', data);
},
annotationsrange: function(data) {
self.options.annotationsRange = data.range;
that.triggerEvent('annotationsrange', data);
},
annotationssort: function(data) {
self.options.annotationsSort = data.sort;
that.triggerEvent('annotationssort', data);
},
resize: resizeAnnotations, resize: resizeAnnotations,
resizeend: resizeendAnnotations, resizeend: resizeendAnnotations,
resizecalendar: function(data) {
that.triggerEvent('resizecalendar', data);
},
resizemap: function(data) {
that.triggerEvent('resizemap', data);
},
select: selectAnnotation, select: selectAnnotation,
toggle: toggleAnnotations toggle: toggleAnnotations,
togglecalendar: function(data) {
self.options.showAnnotationsCalendar = !data.collapsed;
that.triggerEvent('togglecalendar', data);
},
togglelayer: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: data.layer
});
},
togglemap: function(data) {
self.options.showAnnotationsMap = !data.collapsed;
that.triggerEvent('togglemap', data);
}
}); });
that.$element = Ox.SplitPanel({ that.$element = Ox.SplitPanel({
@ -239,13 +275,11 @@ Ox.VideoPanel = function(options, self) {
self.$timeline.options({ self.$timeline.options({
width: getTimelineWidth() width: getTimelineWidth()
}); });
self.$annotationPanel.options({width: data.size});
} }
function resizeendAnnotations(data) { function resizeendAnnotations(data) {
self.options.annotationsSize = data.size; that.triggerEvent('annotationssize', data.size);
that.triggerEvent('resizeannotations', {
annotationsSize: self.options.annotationsSize
});
} }
function resizeElement(data) { function resizeElement(data) {
@ -256,8 +290,10 @@ Ox.VideoPanel = function(options, self) {
}); });
} }
/*
function resizePanel(data) { function resizePanel(data) {
// called on annotations toggle // called on annotations toggle <-- FIXME: NOT TRUE
Ox.print('RESIZEPANEL----------')
self.$video.options({ self.$video.options({
width: getPlayerWidth() width: getPlayerWidth()
}); });
@ -265,6 +301,7 @@ Ox.VideoPanel = function(options, self) {
width: getTimelineWidth() width: getTimelineWidth()
}); });
} }
*/
function selectAnnotation(data) { function selectAnnotation(data) {
self.options.selected = data.id; self.options.selected = data.id;
@ -292,7 +329,10 @@ Ox.VideoPanel = function(options, self) {
function toggleAnnotations(data) { function toggleAnnotations(data) {
self.options.showAnnotations = !data.collapsed; self.options.showAnnotations = !data.collapsed;
self.$video.options({ self.$video.options({
height: getPlayerHeight() width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
}); });
that.triggerEvent('toggleannotations', { that.triggerEvent('toggleannotations', {
showAnnotations: self.options.showAnnotations showAnnotations: self.options.showAnnotations

View file

@ -140,6 +140,27 @@ Calendar
inset 0 0 1px rgb(0, 0, 0), inset 0 0 1px rgb(0, 0, 0),
inset 0 0 1px rgb(0, 0, 0); inset 0 0 1px rgb(0, 0, 0);
} }
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxDate {
background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
background: -o-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
background: -webkit-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxPlace {
background: -moz-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
background: -o-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
background: -webkit-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxPerson {
background: -moz-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
background: -o-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
background: -webkit-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxOther {
background: -moz-linear-gradient(top, rgba(255, 128, 128, 0.9), rgba(224, 96, 96, 0.9));
background: -o-linear-gradient(top, rgba(255, 128, 128, 0.9), rgba(224, 96, 96, 0.9));
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.9), rgba(224, 32, 32, 0.9));
}
.OxThemeClassic .OxCalendar .OxOverlay div:nth-child(even) { .OxThemeClassic .OxCalendar .OxOverlay div:nth-child(even) {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);

View file

@ -139,6 +139,27 @@ Calendar
inset 0 0 1px rgb(255, 255, 255), inset 0 0 1px rgb(255, 255, 255),
inset 0 0 1px rgb(255, 255, 255); inset 0 0 1px rgb(255, 255, 255);
} }
.OxThemeModern .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));
}
.OxThemeModern .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));
}
.OxThemeModern .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));
}
.OxThemeModern .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));
}
.OxThemeModern .OxCalendar .OxOverlay div:nth-child(even) { .OxThemeModern .OxCalendar .OxOverlay div:nth-child(even) {
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.25);