381 lines
14 KiB
JavaScript
381 lines
14 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.AnnotationPanel <f> Video Annotation Panel
|
|
@*/
|
|
|
|
Ox.AnnotationPanel = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
calendarSize: 256,
|
|
clickLink: null,
|
|
editable: false,
|
|
font: 'small',
|
|
highlight: '',
|
|
layers: [],
|
|
mapSize: 256,
|
|
range: 'all',
|
|
selected: '',
|
|
showCalendar: false,
|
|
showFonts: false,
|
|
showLayers: {},
|
|
showMap: false,
|
|
showUsers: false,
|
|
sort: 'position',
|
|
width: 256
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxAnnotationPanel');
|
|
|
|
if (self.options.showUsers) {
|
|
self.users = Ox.sort(Ox.unique(Ox.flatten(
|
|
self.options.layers.map(function(layer) {
|
|
return layer.items.map(function(item) {
|
|
return item.user;
|
|
});
|
|
})
|
|
)));
|
|
self.enabledUsers = 'all';
|
|
}
|
|
|
|
self.$menubar = Ox.Bar({
|
|
size: 16
|
|
})
|
|
.addClass('OxVideoPlayer');
|
|
|
|
self.$optionsMenuButton = Ox.MenuButton({
|
|
items: Ox.merge(
|
|
[
|
|
{id: 'showannotations', title: 'Show Annotations', disabled: true},
|
|
{group: 'range', min: 1, max: 1, items: [
|
|
{id: 'all', title: 'All', checked: self.options.range == 'all'},
|
|
{id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'},
|
|
{id: 'position', title: 'At Current Position', checked: self.options.range == 'position'}
|
|
]},
|
|
{},
|
|
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
|
{group: 'sort', min: 1, max: 1, items: [
|
|
{id: 'position', title: 'By Position', checked: self.options.sort == 'position'},
|
|
{id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'},
|
|
{id: 'text', title: 'By Text', checked: self.options.sort == 'text'}
|
|
]}
|
|
],
|
|
self.options.showFonts ? [
|
|
{},
|
|
{id: 'fontsize', title: 'Font Size', disabled: true},
|
|
{group: 'font', min: 1, max: 1, items: [
|
|
{id: 'small', title: 'Small', checked: self.options.font == 'small'},
|
|
{id: 'medium', title: 'Medium', checked: self.options.font == 'medium'},
|
|
{id: 'large', title: 'Large', checked: self.options.font == 'large'}
|
|
]}
|
|
] : [],
|
|
self.options.showUsers ? [
|
|
{},
|
|
{id: 'users', title: 'Show Users', disabled: true},
|
|
{group: 'users', min: 1, max: -1, items: self.users.map(function(user) {
|
|
return {id: user, title: user, checked: true};
|
|
})}
|
|
] : []
|
|
),
|
|
style: 'square',
|
|
title: 'set',
|
|
tooltip: 'Actions and Settings',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'left'})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
var set = {};
|
|
if (data.id == 'users') {
|
|
self.enabledUsers = data.checked.length == self.users.length
|
|
? 'all'
|
|
: data.checked.map(function(checked) {
|
|
return checked.id;
|
|
});
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options({users: self.enabledUsers});
|
|
});
|
|
} else {
|
|
set[data.id] = data.checked[0].id;
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options(set);
|
|
});
|
|
that.triggerEvent('annotations' + data.id, set);
|
|
}
|
|
// FIXME: this does not work
|
|
self.options.selected && getFolder(self.options.selected).gainFocus();
|
|
}
|
|
})
|
|
.appendTo(self.$menubar);
|
|
|
|
if (self.options.editable) {
|
|
self.$editMenuButton = Ox.MenuButton({
|
|
items: [
|
|
{id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected, keyboard: 'return'},
|
|
{id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected, keyboard: 'delete'},
|
|
{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: 'find', title: 'Find Annotation', disabled: true},
|
|
{id: 'manage', title: 'Edit Place/Event', disabled: true}
|
|
],
|
|
style: 'square',
|
|
title: 'edit',
|
|
tooltip: 'Editing Options',
|
|
type: 'image'
|
|
})
|
|
.css({float: 'right'})
|
|
.bindEvent({
|
|
click: function(data) {
|
|
if (data.id == 'delete') {
|
|
|
|
} else if (data.id == 'deselect') {
|
|
|
|
} else if (data.id == 'edit') {
|
|
|
|
}
|
|
}
|
|
})
|
|
.appendTo(self.$menubar);
|
|
}
|
|
|
|
self.$folders = Ox.Element().css({overflowY: 'auto'});
|
|
self.$folder = [];
|
|
|
|
self.options.layers.forEach(function(layer, i) {
|
|
var item = Ox.getObjectById(layer.items, self.options.selected),
|
|
selected = item ? item.id : '';
|
|
self.$folder[i] = Ox.AnnotationFolder(
|
|
Ox.extend({
|
|
clickLink: self.options.clickLink,
|
|
collapsed: !self.options.showLayers[layer.id],
|
|
editable: self.options.editable,
|
|
font: self.options.font,
|
|
highlight: self.options.highlight,
|
|
'in': self.options['in'],
|
|
out: self.options.out,
|
|
position: self.options.position,
|
|
range: self.options.range,
|
|
selected: selected,
|
|
sort: self.options.sort,
|
|
width: self.options.width - Ox.UI.SCROLLBAR_SIZE
|
|
}, 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) {
|
|
that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
|
|
},
|
|
blur: function() {
|
|
that.triggerEvent('blur');
|
|
},
|
|
change: function(data) {
|
|
that.triggerEvent('change', Ox.extend({layer: layer.id}, data));
|
|
},
|
|
define: function(data) {
|
|
that.triggerEvent('define', data);
|
|
},
|
|
edit: function() {
|
|
that.triggerEvent('edit');
|
|
},
|
|
info: function(data) {
|
|
that.triggerEvent('info', {layer: layer.id});
|
|
},
|
|
paused: function() {
|
|
that.triggerEvent('paused')
|
|
},
|
|
remove: function(data) {
|
|
that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
|
|
},
|
|
resizewidget: function(data) {
|
|
that.triggerEvent('resize' + (
|
|
layer.type == 'event' ? 'calendar' : 'map'
|
|
), data);
|
|
},
|
|
select: function(data) {
|
|
selectAnnotation(data, i);
|
|
},
|
|
selectafter: function() {
|
|
selectNext(layer.id, 1);
|
|
},
|
|
selectbefore: function() {
|
|
selectNext(layer.id, -1);
|
|
},
|
|
selectnone: selectNone,
|
|
submit: function(data) {
|
|
that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
|
|
},
|
|
togglelayer: function(data) {
|
|
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
|
|
},
|
|
togglewidget: function(data) {
|
|
that.triggerEvent('toggle' + (
|
|
layer.type == 'event' ? 'calendar' : 'map'
|
|
), data);
|
|
}
|
|
})
|
|
.appendTo(self.$folders);
|
|
});
|
|
|
|
that.setElement(
|
|
Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$menubar,
|
|
size: 16
|
|
},
|
|
{
|
|
element: self.$folders
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
);
|
|
|
|
self.options.selected && scrollToSelected(
|
|
getFolder(self.options.selected).options('type')
|
|
);
|
|
|
|
function getFolder(annotationId) {
|
|
var found = false, folder;
|
|
Ox.forEach(self.options.layers, function(layer, i) {
|
|
Ox.forEach(layer.items, function(item) {
|
|
if (item.id == annotationId) {
|
|
folder = self.$folder[i];
|
|
found = true;
|
|
return false;
|
|
}
|
|
});
|
|
return !found;
|
|
});
|
|
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) {
|
|
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;
|
|
scrollTop = self.$folders.scrollTop();
|
|
if (data.top < top || data.bottom > height) {
|
|
if (data.top < top) {
|
|
Ox.print('top scrollTop', data.top, scrollTop)
|
|
scrollTop += data.top - top;
|
|
} else {
|
|
scrollTop += data.bottom - top - height;
|
|
}
|
|
self.$folders.animate({
|
|
scrollTop: scrollTop + 'px'
|
|
}, 0);
|
|
}
|
|
}
|
|
*/
|
|
that.triggerEvent('select', data);
|
|
}
|
|
|
|
function selectNone() {
|
|
if (self.options.selected) {
|
|
getFolder(self.options.selected).options({selected: ''});
|
|
}
|
|
}
|
|
|
|
function selectNext(layer, direction) {
|
|
var index = Ox.mod(
|
|
Ox.getIndexById(self.options.layers, layer) + direction,
|
|
self.options.layers.length
|
|
);
|
|
Ox.print('index', index)
|
|
self.$folder[index].selectItem(direction == 1 ? 0 : -1);
|
|
}
|
|
|
|
function updateEditMenu() {
|
|
var action = self.options.selected ? 'enableItem' : 'disableItem';
|
|
self.$editMenuButton[action]('edit');
|
|
self.$editMenuButton[action]('delete');
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'highlight') {
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options({highlight: value});
|
|
});
|
|
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options(key, value);
|
|
});
|
|
} else if (key == 'selected') {
|
|
self.options.editable && updateEditMenu();
|
|
if (value) {
|
|
getFolder(value).options({selected: value});
|
|
} else {
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options({selected: ''});
|
|
});
|
|
}
|
|
} else if (key == 'width') {
|
|
self.$folder.forEach(function($folder) {
|
|
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
|
|
});
|
|
}
|
|
};
|
|
|
|
that.addItem = function(layer, item) {
|
|
Ox.Log('AP', 'ADD ITEM', layer, item);
|
|
var i = Ox.getIndexById(self.options.layers, layer);
|
|
self.$folder[i].addItem(item);
|
|
};
|
|
|
|
that.blurItem = function() {
|
|
getFolder(self.options.selected).blurItem();
|
|
};
|
|
|
|
that.editItem = function() {
|
|
getFolder(self.options.selected).editItem();
|
|
};
|
|
|
|
that.updateItem = function(id, item) {
|
|
Ox.Log('AP', 'UPDATE ITEM', id, item);
|
|
self.options.selected = item.id;
|
|
getFolder(id).updateItem(id, item);
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|