update video editor (maps, calendars)
This commit is contained in:
parent
1445824ffd
commit
dc47e901ad
9 changed files with 196 additions and 69 deletions
|
@ -1214,7 +1214,21 @@ Ox.Calendar = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
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') {
|
||||
that.css({height: self.options.height + 'px'});
|
||||
} else if (key == 'selected') {
|
||||
|
|
|
@ -256,13 +256,9 @@ Ox.ArrayEditable = function(options, self) {
|
|||
|
||||
function triggerSelectEvent() {
|
||||
if (!self.triggered) {
|
||||
that.triggerEvent('select', Ox.extend({
|
||||
that.triggerEvent('select', {
|
||||
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;
|
||||
setTimeout(function() {
|
||||
self.triggered = false;
|
||||
|
|
|
@ -108,6 +108,8 @@ Ox.CollapsePanel = function(options, self) {
|
|||
@*/
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'collapsed') {
|
||||
// will be toggled again in toggleCollapsed
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
self.$button.trigger('click');
|
||||
} else if (key == 'title') {
|
||||
self.$title.html(self.options.title);
|
||||
|
|
|
@ -82,8 +82,7 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
}
|
||||
});
|
||||
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
self.$panel = Ox.CollapsePanel({
|
||||
collapsed: self.options.collapsed,
|
||||
extras: Ox.merge(
|
||||
self.widget ? [self.$defineButton] : [],
|
||||
|
@ -95,8 +94,9 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
.addClass('OxAnnotationFolder')
|
||||
.bindEvent({
|
||||
toggle: toggleLayer
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
that.setElement(self.$panel);
|
||||
that.$content = that.$element.$content;
|
||||
|
||||
if (self.widget) {
|
||||
|
@ -126,7 +126,11 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
})
|
||||
.bindEvent({
|
||||
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);
|
||||
|
@ -145,9 +149,11 @@ 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});
|
||||
if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
|
||||
self.$annotations.options({
|
||||
selected: !data.id ? '' : data.annotationIds[0]
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$inner);
|
||||
|
@ -217,8 +223,6 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
? self.$outer : that.$content
|
||||
);
|
||||
|
||||
Ox.print('SAH', self.$annotations.height())
|
||||
|
||||
self.options.selected && setTimeout(function() {
|
||||
selectAnnotation({id: self.options.selected});
|
||||
}, 0);
|
||||
|
@ -260,11 +264,9 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
self.$inner.css({height: self.options.widgetSize + 'px'});
|
||||
self.$widget.options({height: self.options.widgetSize});
|
||||
}
|
||||
//self.options.type == 'place' && self.$map.resizeMap();
|
||||
}
|
||||
|
||||
function dragend(e) {
|
||||
//self.options.type == 'place' && self.$map.resizeMap();
|
||||
if (self.options.showWidget) {
|
||||
that.triggerEvent('resizewidget', {size: self.options.widgetSize});
|
||||
}
|
||||
|
@ -301,26 +303,33 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
|
||||
function getEvents() {
|
||||
var events = [];
|
||||
getAnnotations().forEach(function(item) {
|
||||
if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
|
||||
getAnnotations().filter(function(item) {
|
||||
return !!item.event;
|
||||
}).forEach(function(item) {
|
||||
var index = Ox.getIndexById(events, item.event.id);
|
||||
if (index == -1) {
|
||||
events.push(Ox.extend({
|
||||
annotationId: item.id
|
||||
}, item.event));
|
||||
annotationIds: [item.id]
|
||||
}, 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;
|
||||
}
|
||||
|
||||
function getPlaces() {
|
||||
var places = [];
|
||||
getAnnotations().forEach(function(item) {
|
||||
if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
|
||||
getAnnotations().filter(function(item) {
|
||||
return !!item.place;
|
||||
}).forEach(function(item) {
|
||||
var index = Ox.getIndexById(places, item.place.id);
|
||||
if (index == -1) {
|
||||
places.push(Ox.extend({
|
||||
annotationId: item.id
|
||||
}, item.place));
|
||||
annotationIds: [item.id]
|
||||
}, item.place))
|
||||
} else {
|
||||
places[index].annotationIds.push(item.id);
|
||||
}
|
||||
});
|
||||
return places;
|
||||
|
@ -335,17 +344,22 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
Ox.print('SELECT annotation', data)
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
self.options.selected = item ? data.id : '';
|
||||
self.widget && self.$defineButton.options({disabled: !self.options.selected});
|
||||
///*
|
||||
if (self.options.type == 'place') {
|
||||
if (self.widget) {
|
||||
if (self.options.type == 'event') {
|
||||
self.$calendar.options({
|
||||
selected: item && item.event ? item.event.id : ''
|
||||
})
|
||||
.panToEvent();
|
||||
} else {
|
||||
self.$map.options({
|
||||
selected: item && item.place ? item.place.id : null
|
||||
selected: item && item.place ? item.place.id : ''
|
||||
})
|
||||
.panToPlace();
|
||||
}
|
||||
//*/
|
||||
}
|
||||
that.triggerEvent('select', Ox.extend(data, item ? {
|
||||
'in': item['in'],
|
||||
out: item.out,
|
||||
|
@ -437,6 +451,10 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
if (value === '') {
|
||||
self.editing = false;
|
||||
}
|
||||
if (value && self.options.collapsed) {
|
||||
Ox.print('HELLO??')
|
||||
self.$panel.options({collapsed: false});
|
||||
}
|
||||
self.$annotations.options({selected: value});
|
||||
} else if (key == 'sort') {
|
||||
self.sort = getSort();
|
||||
|
@ -499,7 +517,14 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
that.updateItem = function(item) {
|
||||
var index = Ox.getIndexById(self.options.items, item.id);
|
||||
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();
|
||||
return that;
|
||||
}
|
||||
|
|
|
@ -242,20 +242,40 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
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) {
|
||||
var height, scrollBottom, scrollTop, top;
|
||||
self.options.selected = data.id;
|
||||
if (data.id) {
|
||||
self.$folder.forEach(function($folder, i) {
|
||||
i != index && $folder.options({selected: ''});
|
||||
});
|
||||
scrollToSelected(self.options.layers[index].type);
|
||||
}
|
||||
/*
|
||||
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)
|
||||
|
@ -266,21 +286,9 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
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) {
|
||||
if (data.top < 0) {
|
||||
scrollTop += data.top - 3;
|
||||
} else if (data.top > height - 16) {
|
||||
scrollTop += data.top - height + 14;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
that.triggerEvent('select', data);
|
||||
}
|
||||
|
||||
|
@ -302,7 +310,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
} else {
|
||||
self.$folder.forEach(function($folder) {
|
||||
$folder.options({selected: ''});
|
||||
})
|
||||
});
|
||||
}
|
||||
} else if (key == 'width') {
|
||||
self.$folder.forEach(function($folder) {
|
||||
|
|
|
@ -604,11 +604,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
position: self.options.position,
|
||||
range: self.options.annotationsRange,
|
||||
selected: self.options.selected,
|
||||
sort: self.options.annotationsSort,
|
||||
showCalendar: self.options.showAnnotationsCalendar,
|
||||
showLayers: self.options.showLayers,
|
||||
showMap: self.options.showAnnotationsMap,
|
||||
showUsers: self.options.showUsers,
|
||||
sort: self.options.annotationsSort,
|
||||
width: self.options.annotationsSize
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
|
@ -164,28 +164,64 @@ Ox.VideoPanel = function(options, self) {
|
|||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: resizePanel
|
||||
});
|
||||
|
||||
self.$annotationPanel = Ox.AnnotationPanel({
|
||||
calendarSize: self.options.annotationsCalendarSize,
|
||||
editable: false,
|
||||
font: self.options.annotationsFont,
|
||||
'in': self.options['in'],
|
||||
layers: self.options.layers,
|
||||
mapSize: self.options.annotationsMapSize,
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
range: self.options.annotationsRange,
|
||||
selected: self.options.selected,
|
||||
showCalendar: self.options.showAnnotationsCalendar,
|
||||
showFonts: true,
|
||||
showLayers: self.options.showLayers,
|
||||
showMap: self.options.showAnnotationsMap,
|
||||
showUsers: self.options.showUsers,
|
||||
sort: self.options.annotationsSort
|
||||
sort: self.options.annotationsSort,
|
||||
width: self.options.annotationsSize
|
||||
})
|
||||
.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,
|
||||
resizeend: resizeendAnnotations,
|
||||
resizecalendar: function(data) {
|
||||
that.triggerEvent('resizecalendar', data);
|
||||
},
|
||||
resizemap: function(data) {
|
||||
that.triggerEvent('resizemap', data);
|
||||
},
|
||||
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({
|
||||
|
@ -239,13 +275,11 @@ Ox.VideoPanel = function(options, self) {
|
|||
self.$timeline.options({
|
||||
width: getTimelineWidth()
|
||||
});
|
||||
self.$annotationPanel.options({width: data.size});
|
||||
}
|
||||
|
||||
function resizeendAnnotations(data) {
|
||||
self.options.annotationsSize = data.size;
|
||||
that.triggerEvent('resizeannotations', {
|
||||
annotationsSize: self.options.annotationsSize
|
||||
});
|
||||
that.triggerEvent('annotationssize', data.size);
|
||||
}
|
||||
|
||||
function resizeElement(data) {
|
||||
|
@ -256,8 +290,10 @@ Ox.VideoPanel = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
/*
|
||||
function resizePanel(data) {
|
||||
// called on annotations toggle
|
||||
// called on annotations toggle <-- FIXME: NOT TRUE
|
||||
Ox.print('RESIZEPANEL----------')
|
||||
self.$video.options({
|
||||
width: getPlayerWidth()
|
||||
});
|
||||
|
@ -265,6 +301,7 @@ Ox.VideoPanel = function(options, self) {
|
|||
width: getTimelineWidth()
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
function selectAnnotation(data) {
|
||||
self.options.selected = data.id;
|
||||
|
@ -292,7 +329,10 @@ Ox.VideoPanel = function(options, self) {
|
|||
function toggleAnnotations(data) {
|
||||
self.options.showAnnotations = !data.collapsed;
|
||||
self.$video.options({
|
||||
height: getPlayerHeight()
|
||||
width: getPlayerWidth()
|
||||
});
|
||||
self.$timeline.options({
|
||||
width: getTimelineWidth()
|
||||
});
|
||||
that.triggerEvent('toggleannotations', {
|
||||
showAnnotations: self.options.showAnnotations
|
||||
|
|
|
@ -140,6 +140,27 @@ Calendar
|
|||
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) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
|
|
|
@ -139,6 +139,27 @@ Calendar
|
|||
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) {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
|
|
Loading…
Reference in a new issue