sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

update video editor (places, events)

Browse source
This commit is contained in:
rlx 2012-01-13 21:55:47 +05:30
commit 8384fcc913
13 changed files with 346 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

25
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -9,13 +9,17 @@ Ox.AnnotationPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
calendarSize: 256,
editable: false,
font: 'small',
layers: [],
mapSize: 256,
range: 'all',
selected: '',
showCalendar: false,
showFonts: false,
showLayers: {},
showMap: false,
showUsers: false,
sort: 'position',
width: 256
@ -112,7 +116,10 @@ Ox.AnnotationPanel = function(options, self) {
{id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
{},
{id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'}
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'},
{},
{id: 'find', title: 'Find Annotation', disabled: true},
{id: 'manage', title: 'Edit Place/Event', disabled: true}
],
style: 'square',
title: 'edit',
@ -152,7 +159,13 @@ Ox.AnnotationPanel = function(options, self) {
selected: selected,
sort: self.options.sort,
width: self.options.width - Ox.UI.SCROLLBAR_SIZE
}, layer)
}, layer, layer.type == 'event' ? {
showWidget: self.options.showCalendar,
widgetSize: self.options.calendarSize
} : layer.type == 'place' ? {
showWidget: self.options.showMap,
widgetSize: self.options.mapSize
} : {})
)
.bindEvent({
add: function(data) {
@ -271,6 +284,7 @@ Ox.AnnotationPanel = function(options, self) {
self.$folder[i].addItem(item);
};
that.blurItem = function() {
getFolder(self.options.selected).blurItem();
};
@ -279,6 +293,11 @@ Ox.AnnotationPanel = function(options, self) {
getFolder(self.options.selected).editItem();
};
that.updateItem = function(layer, item) {
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].updateItem(item);
};
return that;
};
};

8
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -18,7 +18,9 @@ Ox.VideoEditor = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
annotationsCalendarSize: 256,
annotationsFont: 'small',
annotationsMapSize: 256,
annotationsRange: 'all',
annotationsSize: 256,
annotationsSort: 'position',
@ -42,6 +44,8 @@ Ox.VideoEditor = function(options, self) {
resolution: 0,
selected: '',
showAnnotations: false,
showAnnotationsCalendar: false,
showAnnotationsMap: false,
showLargeTimeline: true,
showLayers: {},
showUsers: false,
@ -588,16 +592,20 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$menubar.$element);
self.$annotationPanel = Ox.AnnotationPanel({
calendarSize: self.options.annotationsCalendarSize,
editable: true,
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,
sort: self.options.annotationsSort,
showCalendar: self.options.showAnnotationsCalendar,
showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers,
width: self.options.annotationsSize
})