forked from 0x2620/oxjs
update video editor (places, events)
This commit is contained in:
rlx
parent
8de69b3173
commit
8384fcc913
13 changed files with 346 additions and 144 deletions
|
|
@ -32,32 +32,55 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
position: 0,
|
||||
range: 'all',
|
||||
selected: '',
|
||||
showWidget: false,
|
||||
sort: 'position',
|
||||
title: '',
|
||||
type: 'text',
|
||||
users: 'all',
|
||||
widgetSize: 256,
|
||||
width: 0
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
Ox.print('SO', self.options)
|
||||
|
||||
self.sort = getSort();
|
||||
self.widget = self.options.type == 'event' ? 'Calendar'
|
||||
: self.options.type == 'place' ? 'Map' : '';
|
||||
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
collapsed: self.options.collapsed,
|
||||
extras: self.options.editable ? [
|
||||
Ox.Button({
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'add',
|
||||
tooltip: 'Add ' + self.options.item,
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('add', {value: ''});
|
||||
}
|
||||
})
|
||||
] : [],
|
||||
extras: Ox.merge(
|
||||
self.widget ? [
|
||||
Ox.MenuButton({
|
||||
items: [
|
||||
{id: 'show', title: 'Show ' + self.widget, checked: true}
|
||||
],
|
||||
style: 'square',
|
||||
title: 'set',
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
|
||||
}
|
||||
})
|
||||
] : [],
|
||||
self.options.editable ? [
|
||||
Ox.Button({
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'add',
|
||||
tooltip: 'Add ' + self.options.item,
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('add', {value: ''});
|
||||
}
|
||||
})
|
||||
] : []
|
||||
),
|
||||
size: 16,
|
||||
title: self.options.title
|
||||
})
|
||||
|
|
@ -68,62 +91,152 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
);
|
||||
that.$content = that.$element.$content;
|
||||
|
||||
if (self.widget) {
|
||||
self.widgetSize = self.options.showWidget * self.options.widgetSize;
|
||||
}
|
||||
|
||||
if (self.options.type == 'event') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'place') {
|
||||
self.$annotations = Ox.Element()
|
||||
self.$outer = Ox.Element()
|
||||
.css({
|
||||
display: 'table-cell',
|
||||
width: self.options.width + 'px',
|
||||
//height: '256px'
|
||||
});
|
||||
self.$calendar = Ox.Calendar({
|
||||
events: getEvents(),
|
||||
height: self.widgetSize,
|
||||
width: self.options.width
|
||||
})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: '256px'
|
||||
});
|
||||
Ox.print('PLACES::', self.places)
|
||||
height: self.widgetSize + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
selectAnnotation({id: data.annotationId});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$outer);
|
||||
} else if (self.options.type == 'place') {
|
||||
Ox.print('SWS', self.widgetSize)
|
||||
self.$outer = Ox.Element()
|
||||
.css({
|
||||
display: 'table-cell',
|
||||
width: self.widgetSize + 'px',
|
||||
})
|
||||
.appendTo(that.$content);
|
||||
self.$inner = Ox.Element()
|
||||
.css({height: self.widgetSize + 'px', overflow: 'hidden'})
|
||||
.appendTo(self.$outer);
|
||||
self.$map = Ox.Map({
|
||||
places: getPlaces()
|
||||
// showLabels: true
|
||||
})
|
||||
.css({height: self.widgetSize + 'px'})
|
||||
.bindEvent({
|
||||
// FIXME: should be select, not selectplace
|
||||
selectplace: function(data) {
|
||||
selectAnnotation({id: data.annotationId});
|
||||
self.$annotations.options({selected: data.annotationId});
|
||||
// selectAnnotation({id: data.annotationId});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$annotations);
|
||||
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
|
||||
self.$annotations = Ox.ArrayEditable({
|
||||
editable: self.options.editable,
|
||||
items: getAnnotations(),
|
||||
selected: self.options.selected,
|
||||
sort: self.sort,
|
||||
submitOnBlur: false,
|
||||
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
|
||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||
})
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
that.triggerEvent('add', {value: data.value || ''});
|
||||
},
|
||||
blur: function() {
|
||||
that.triggerEvent('blur');
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit');
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: submitAnnotation,
|
||||
key_space: function() {
|
||||
that.triggerEvent('paused');
|
||||
}
|
||||
});
|
||||
.appendTo(self.$inner);
|
||||
}
|
||||
self.$annotations.appendTo(that.$content);
|
||||
|
||||
if (self.widget) {
|
||||
|
||||
self.$resizebar = Ox.Element({
|
||||
tooltip: 'Drag to resize or click to toggle map' // fixme: update as w/ splitpanels
|
||||
})
|
||||
.addClass('OxResizebar OxHorizontal')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: self.options.widgetSize + 'px',
|
||||
cursor: 'ns-resize'
|
||||
})
|
||||
.append($('<div>').addClass('OxSpace'))
|
||||
.append($('<div>').addClass('OxLine'))
|
||||
.append($('<div>').addClass('OxSpace'))
|
||||
.bindEvent({
|
||||
anyclick: toggleWidget,
|
||||
dragstart: dragstart,
|
||||
drag: drag,
|
||||
dragend: dragend
|
||||
})
|
||||
.appendTo(self.$outer);
|
||||
|
||||
}
|
||||
|
||||
self.$annotations = Ox.ArrayEditable({
|
||||
editable: self.options.editable,
|
||||
items: getAnnotations(),
|
||||
selected: self.options.selected,
|
||||
sort: self.sort,
|
||||
submitOnBlur: false,
|
||||
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
|
||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||
})
|
||||
//.css({marginTop: '256px'})
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
that.triggerEvent('add', {value: data.value || ''});
|
||||
},
|
||||
blur: function() {
|
||||
that.triggerEvent('blur');
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit');
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: submitAnnotation,
|
||||
key_space: function() {
|
||||
that.triggerEvent('paused');
|
||||
}
|
||||
})
|
||||
.appendTo(
|
||||
['event', 'place'].indexOf(self.options.type) > -1
|
||||
? self.$outer : that.$content
|
||||
);
|
||||
|
||||
Ox.print('SAH', self.$annotations.height())
|
||||
|
||||
self.options.selected && setTimeout(function() {
|
||||
selectAnnotation({id: self.options.selected});
|
||||
}, 0);
|
||||
|
||||
if (self.options.type == 'place') {
|
||||
self.$annotations.find('.OxValue').each(function() {
|
||||
var $element = $(this);
|
||||
if (!Ox.getObject(self.options.items, 'value', $element.html()).place) {
|
||||
$element.css({color: 'rgb(192, 64, 64)'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dragstart() {
|
||||
self.drag = {
|
||||
startSize: self.options.widgetSize
|
||||
};
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
self.options.widgetSize = Ox.limit(
|
||||
self.drag.startSize + e.clientDY, 128, 384
|
||||
);
|
||||
Ox.print('DRAG', self.options.widgetSize, e.clientDY);
|
||||
self.$resizebar.css({top: self.options.widgetSize + 'px'});
|
||||
self.$inner.css({height: self.options.widgetSize + 'px'});
|
||||
self.$map.css({height: self.options.widgetSize + 'px'}).resizeMap();
|
||||
}
|
||||
|
||||
function dragend(e) {
|
||||
|
||||
}
|
||||
|
||||
function getAnnotations() {
|
||||
return self.options.items.filter(function(item) {
|
||||
return self.editing && item.id == self.options.selected || (
|
||||
|
|
@ -145,6 +258,21 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function getEvents() {
|
||||
var events = [];
|
||||
getAnnotations().forEach(function(item) {
|
||||
if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
|
||||
events.push(Ox.extend({
|
||||
annotationId: item.id
|
||||
}, item.event));
|
||||
}
|
||||
});
|
||||
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) {
|
||||
|
|
@ -168,6 +296,14 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
function selectAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
self.options.selected = item ? data.id : '';
|
||||
///*
|
||||
if (self.options.type == 'place') {
|
||||
self.$map.options({
|
||||
selected: item && item.place ? item.place.id : null
|
||||
})
|
||||
.panToPlace();
|
||||
}
|
||||
//*/
|
||||
that.triggerEvent('select', Ox.extend(data, item ? {
|
||||
'in': item['in'],
|
||||
out: item.out,
|
||||
|
|
@ -190,6 +326,16 @@ Ox.AnnotationFolder = function(options, self) {
|
|||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||
}
|
||||
|
||||
function toggleWidget() {
|
||||
self.options.showWidget = !self.options.showWidget;
|
||||
self.widgetSize = self.options.showWidget * self.options.widgetSize;
|
||||
self.$resizebar.animate({top: self.widgetSize + 'px'}, 250);
|
||||
self.$inner.animate({height: self.widgetSize + 'px'}, 250);
|
||||
self.$map.animate({height: self.widgetSize + 'px'}, 250, function() {
|
||||
self.$map.resizeMap();
|
||||
});
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
|
||||
var index = Ox.getIndexById(self.options.items, self.options.selected);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue