oxjs/source/Ox.UI/js/Video/Ox.AnnotationFolder.js

638 lines
22 KiB
JavaScript
Raw Normal View History

2012-01-12 10:39:05 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.AnnotationFolder <f:Ox.Element> AnnotationFolder Object
() -> <f> AnnotationFolder Object
(options) -> <f> AnnotationFolder Object
(options, self) -> <f> AnnotationFolder Object
options <o> Options object
editable <b|false> If true, annotations can be added
id <s> id
items <a|[]> items
title <s> title
type <s|'text'> panel type
width <n|0>
self <o> shared private variable
@*/
Ox.AnnotationFolder = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2012-01-17 15:43:46 +00:00
clickLink: null,
2012-01-12 10:39:05 +00:00
collapsed: false,
editable: false,
highlight: '',
2012-01-12 10:39:05 +00:00
id: '',
'in': 0,
item: '',
items: [],
out: 0,
position: 0,
range: 'all',
selected: '',
showInfo: false,
2012-01-13 16:25:47 +00:00
showWidget: false,
2012-01-12 10:39:05 +00:00
sort: 'position',
title: '',
type: 'text',
users: 'all',
2012-01-13 16:25:47 +00:00
widgetSize: 256,
2012-01-12 10:39:05 +00:00
width: 0
})
.options(options || {});
2012-01-17 11:50:31 +00:00
self.annotations = getAnnotations();
2012-01-16 17:51:53 +00:00
self.points = getPoints();
self.position = self.options.position;
2012-01-12 10:39:05 +00:00
self.sort = getSort();
2012-01-13 16:25:47 +00:00
self.widget = self.options.type == 'event' ? 'Calendar'
: self.options.type == 'place' ? 'Map' : '';
2012-01-12 10:39:05 +00:00
if (self.widget) {
self.$defineButton = Ox.Button({
disabled: !self.options.selected,
id: 'define',
style: 'symbol',
title: 'click',
tooltip: 'Define ' + Ox.toTitleCase(self.options.type),
type: 'image'
})
.bindEvent({
click: function() {
2012-01-15 15:05:17 +00:00
var item = Ox.getObjectById(self.options.items, self.options.selected);
that.triggerEvent('define', item.place ? {
id: item.place.id
} : {
name: item.value
});
}
});
}
self.$addButton = Ox.Button({
2012-01-27 14:29:11 +00:00
id: 'add',
style: 'symbol',
title: 'add',
tooltip: 'Add ' + self.options.item,
type: 'image'
})
.bindEvent({
click: function() {
that.triggerEvent('add', {value: ''});
}
});
self.$infoButton = Ox.Button({
style: 'symbol',
title: 'info',
type: 'image'
})
.bindEvent({
click: function() {
that.triggerEvent('info');
}
});
2012-01-17 09:25:58 +00:00
self.$panel = Ox.CollapsePanel({
2012-01-12 10:39:05 +00:00
collapsed: self.options.collapsed,
2012-01-13 16:25:47 +00:00
extras: Ox.merge(
self.widget ? [self.$defineButton] : [],
2012-01-27 14:29:11 +00:00
[self.options.editable ? self.$addButton : self.$infoButton]
2012-01-13 16:25:47 +00:00
),
2012-01-12 10:39:05 +00:00
size: 16,
title: self.options.title
})
.addClass('OxAnnotationFolder')
.bindEvent({
toggle: toggleLayer
2012-01-17 09:25:58 +00:00
});
that.setElement(self.$panel);
2012-01-12 10:39:05 +00:00
that.$content = that.$element.$content;
2012-01-13 16:25:47 +00:00
if (self.widget) {
self.widgetSize = self.options.showWidget * self.options.widgetSize;
self.$outer = Ox.Element()
2012-01-12 19:04:32 +00:00
.css({
2012-01-13 16:25:47 +00:00
display: 'table-cell',
width: self.options.width + 'px'
2012-01-13 16:25:47 +00:00
})
.appendTo(that.$content);
self.$inner = Ox.Element()
.css({
height: self.widgetSize + 'px',
overflow: 'hidden'
2012-01-12 19:04:32 +00:00
})
.appendTo(self.$outer);
if (options.type == 'event') {
self.$widget = self.$calendar = Ox.Calendar({
events: getEvents(),
height: self.widgetSize,
showZoombar: true,
2012-01-27 14:29:11 +00:00
width: self.options.width,
zoomOnlyWhenFocused: true
})
.css({
width: self.options.width + 'px',
height: self.widgetSize + 'px'
})
.bindEvent({
select: function(data) {
if (
!data.id && self.options.selected
&& isDefined(Ox.getObjectById(self.options.items, self.options.selected))
) {
2012-01-17 12:10:50 +00:00
// only deselect annotation if the event deselect was not
// caused by switching to an annotation without event
self.$annotations.options({selected: ''});
} else if (
data.annotationIds
&& data.annotationIds.indexOf(self.options.selected) == -1
) {
2012-01-17 12:10:50 +00:00
// only select a new annotation if the currently selected
// annotation does not match the selected event
self.$annotations.options({selected: data.annotationIds[0]});
2012-01-17 09:25:58 +00:00
}
}
})
.appendTo(self.$inner);
} else { // place
self.$widget = self.$map = Ox.Map({
places: getPlaces(),
2012-01-15 15:05:17 +00:00
showTypes: true,
// FIXME: should be showZoombar
2012-01-27 14:29:11 +00:00
zoombar: true,
zoomOnlyWhenFocused: true
// showLabels: true
})
.css({
width: self.options.width + 'px',
height: self.widgetSize + 'px'
})
.bindEvent({
// FIXME: should be select, not selectplace
selectplace: function(data) {
if (
!data.id && self.options.selected
&& isDefined(Ox.getObjectById(self.options.items, self.options.selected))
) {
2012-01-17 12:10:50 +00:00
// only deselect annotation if the place deselect was not
// caused by switching to an annotation without place
self.$annotations.options({selected: ''});
} else if (
data.annotationIds
&& data.annotationIds.indexOf(self.options.selected) == -1
) {
2012-01-17 12:10:50 +00:00
// only select a new annotation if the currently selected
// annotation does not match the selected place
self.$annotations.options({selected: data.annotationIds[0]});
2012-01-17 09:25:58 +00:00
}
}
})
.appendTo(self.$inner);
}
2012-01-13 16:25:47 +00:00
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.widgetSize + 'px',
2012-01-13 16:25:47 +00:00
cursor: 'ns-resize'
2012-01-12 10:39:05 +00:00
})
2012-01-13 16:25:47 +00:00
.append($('<div>').addClass('OxSpace'))
.append($('<div>').addClass('OxLine'))
.append($('<div>').addClass('OxSpace'))
2012-01-12 10:39:05 +00:00
.bindEvent({
2012-01-13 16:25:47 +00:00
anyclick: toggleWidget,
dragstart: dragstart,
drag: drag,
dragend: dragend
})
.appendTo(self.$outer);
2012-01-12 10:39:05 +00:00
}
2012-01-13 16:25:47 +00:00
self.$annotations = Ox.ArrayEditable({
2012-01-17 15:43:46 +00:00
clickLink: self.options.clickLink,
2012-01-13 16:25:47 +00:00
editable: self.options.editable,
highlight: self.options.highlight,
2012-01-17 11:50:31 +00:00
items: self.annotations,
2012-01-15 15:05:17 +00:00
placeholder: 'No ' + self.options.title,
2012-01-13 16:25:47 +00:00
selected: self.options.selected,
2012-01-15 15:05:17 +00:00
separator: ';',
2012-01-13 16:25:47 +00:00
sort: self.sort,
submitOnBlur: false,
tooltipText: self.options.showInfo ? '<b>{user}</b>, {modified}' : '',
2012-01-16 11:22:34 +00:00
width: self.options.width,
maxHeight: self.options.type == 'text' ? Infinity : void 0,
2012-01-13 16:25:47 +00:00
type: self.options.type == 'text' ? 'textarea' : 'input'
})
//.css({marginTop: '256px'})
.bindEvent({
add: function(data) {
2012-01-15 15:05:17 +00:00
if (self.editing) {
// FIXME: changed value will not be saved!
}
that.triggerEvent('add', {value: data.value || ''});
2012-01-13 16:25:47 +00:00
},
blur: function() {
2012-01-15 15:05:17 +00:00
// the video editor will, if it has not received focus,
// call blurItem
2012-01-13 16:25:47 +00:00
that.triggerEvent('blur');
},
2012-01-15 15:05:17 +00:00
change: changeAnnotation,
2012-01-17 11:50:31 +00:00
'delete': removeAnnotation,
2012-01-13 16:25:47 +00:00
edit: function() {
self.editing = true;
that.triggerEvent('edit');
},
select: selectAnnotation,
selectafter: function() {
that.triggerEvent('selectafter');
},
selectbefore: function() {
that.triggerEvent('selectbefore');
},
selectnone: function() {
that.triggerEvent('selectnone');
},
2012-01-13 16:25:47 +00:00
submit: submitAnnotation,
key_space: function() {
that.triggerEvent('paused');
}
})
.appendTo(
['event', 'place'].indexOf(self.options.type) > -1
? self.$outer : that.$content
);
2012-01-12 10:39:05 +00:00
self.options.selected && setTimeout(function() {
2012-01-27 18:28:44 +00:00
// need timeout in order to trigger events
if (self.options.collapsed) {
self.$panel.options({collapsed: false});
}
2012-01-12 10:39:05 +00:00
selectAnnotation({id: self.options.selected});
}, 0);
showWarnings();
2012-01-13 16:25:47 +00:00
2012-01-15 15:05:17 +00:00
function changeAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('change', item);
}
2012-01-16 17:51:53 +00:00
function crossesPoint() {
2012-02-04 11:44:19 +00:00
var sort = [self.position, self.options.position].sort(function(a, b) {
return a - b
}),
2012-01-16 17:51:53 +00:00
positionA = sort[0],
positionB = sort[1];
return self.points.some(function(point) {
2012-02-01 18:04:42 +00:00
return point >= positionA && point <= positionB;
2012-01-16 17:51:53 +00:00
});
}
2012-01-13 16:25:47 +00:00
function dragstart() {
if (self.options.showWidget) {
self.drag = {
startSize: self.options.widgetSize
};
}
2012-01-13 16:25:47 +00:00
}
function drag(e) {
if (self.options.showWidget) {
self.options.widgetSize = Ox.limit(
self.drag.startSize + e.clientDY, 128, 384
);
if (self.options.widgetSize >= 248 && self.options.widgetSize <= 264) {
self.options.widgetSize = 256;
}
self.$resizebar.css({top: self.options.widgetSize + 'px'});
self.$inner.css({height: self.options.widgetSize + 'px'});
2012-01-16 14:02:30 +00:00
self.$widget.options({height: self.options.widgetSize});
}
2012-01-13 16:25:47 +00:00
}
function dragend(e) {
if (self.options.showWidget) {
self.options.type == 'event'
? self.$calendar.resizeCalendar()
: self.$map.resizeMap();
that.triggerEvent('resizewidget', {size: self.options.widgetSize});
}
2012-01-13 16:25:47 +00:00
}
2012-01-12 10:39:05 +00:00
function getAnnotations() {
return Ox.map(self.options.items, function(item) {
2012-01-12 10:39:05 +00:00
return self.editing && item.id == self.options.selected || (
(
self.options.range == 'all' || (
self.options.range == 'selection'
2012-02-01 18:04:42 +00:00
&& item['in'] <= self.options.out
&& item.out >= self.options['in']
2012-01-12 10:39:05 +00:00
) || (
self.options.range == 'position'
&& item['in'] <= self.options.position
&& item.out >= self.options.position
)
) && (
self.options.users == 'all'
|| self.options.users.indexOf(item.user) > -1
)
) ? Ox.extend({
date: Ox.formatDate(item.modified.substr(0, 10), '%B %e, %Y')
}, item) : null;
2012-01-12 10:39:05 +00:00
});
}
2012-01-13 16:25:47 +00:00
function getEvents() {
var events = [];
2012-01-17 11:50:31 +00:00
self.annotations.filter(function(item) {
return isDefined(item);
2012-01-17 09:25:58 +00:00
}).forEach(function(item) {
var index = Ox.getIndexById(events, item.event.id);
if (index == -1) {
2012-01-13 16:25:47 +00:00
events.push(Ox.extend({
2012-01-17 09:25:58 +00:00
annotationIds: [item.id]
}, item.event))
} else {
events[index].annotationIds.push(item.id);
2012-01-13 16:25:47 +00:00
}
});
return events;
}
2012-01-12 19:04:32 +00:00
function getPlaces() {
var places = [];
2012-01-17 11:50:31 +00:00
self.annotations.filter(function(item) {
return isDefined(item);
2012-01-17 09:25:58 +00:00
}).forEach(function(item) {
var index = Ox.getIndexById(places, item.place.id);
if (index == -1) {
2012-01-12 19:04:32 +00:00
places.push(Ox.extend({
2012-01-17 09:25:58 +00:00
annotationIds: [item.id]
2012-01-24 09:59:29 +00:00
}, item.place));
2012-01-17 09:25:58 +00:00
} else {
places[index].annotationIds.push(item.id);
2012-01-12 19:04:32 +00:00
}
});
return places;
}
2012-02-01 18:04:42 +00:00
function getPoints() {
return Ox.unique(Ox.flatten(
self.options.items.map(function(item) {
return [item['in'], item.out];
})
));
}
2012-01-12 10:39:05 +00:00
function getSort() {
return ({
2012-02-04 11:44:19 +00:00
duration: ['+duration', '+in', '+value'],
position: ['+in', '+duration', '+value'],
text: ['+value', '+in', '+duration']
2012-01-12 10:39:05 +00:00
})[self.options.sort];
}
function isDefined(item) {
return !!item[self.options.type]
&& !!item[self.options.type].type;
}
2012-01-17 11:50:31 +00:00
function removeAnnotation(data) {
var item;
self.editing = false;
if (self.widget) {
item = Ox.getObjectById(self.options.items, data.id);
if (isDefined(item)) {
2012-01-17 11:50:31 +00:00
if (self.options.type == 'event') {
self.$calendar.removeEvent(data.id);
} else {
self.$map.removePlace(data.id)
.options({selected: ''}) // deselect resultPlace
.triggerEvent('key_escape'); // remove resultPlace
}
}
}
that.triggerEvent('remove', {id: data.id});
}
2012-01-12 10:39:05 +00:00
function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
self.options.selected = item ? data.id : '';
2012-01-17 09:25:58 +00:00
if (self.widget) {
if (self.options.type == 'event') {
self.$calendar.options({
selected: item && isDefined(item) ? item.event.id : ''
2012-01-17 09:25:58 +00:00
})
.panToEvent();
} else {
self.$map.options({
selected: item && isDefined(item) ? item.place.id : ''
2012-01-17 09:25:58 +00:00
})
.panToPlace();
}
2012-01-13 16:25:47 +00:00
}
2012-01-12 10:39:05 +00:00
that.triggerEvent('select', Ox.extend(data, item ? {
'in': item['in'],
out: item.out,
layer: self.options.id
} : {}));
}
function showWarnings() {
2012-01-15 15:05:17 +00:00
if (self.widget && self.options.items.length) {
2012-01-17 11:50:31 +00:00
self.$annotations.find('.OxEditableElement').each(function() {
var $element = $(this);
// We don't want to catch an eventual placeholder,
// which is an EditableElement without .data('id')
if (
$element.data('id')
&& !isDefined(
Ox.getObjectById(self.options.items, $element.data('id'))
)
) {
2012-01-17 11:50:31 +00:00
$element.addClass('OxWarning');
}
});
}
}
2012-01-12 10:39:05 +00:00
function submitAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
self.editing = false;
//self.$annotations.options({items: self.options.items});
self.options.sort == 'text' && self.$annotations.reloadItems();
that.triggerEvent('submit', item);
}
function toggleLayer() {
2012-01-12 10:39:05 +00:00
self.options.collapsed = !self.options.collapsed;
if (
!self.options.collapsed
&& self.options.type == 'place'
&& self.options.showWidget
) {
self.$map.resizeMap();
}
2012-01-27 18:28:44 +00:00
if (self.options.collapsed) {
self.editing && that.blurItem();
self.$annotations.loseFocus();
}
that.triggerEvent('togglelayer', {collapsed: self.options.collapsed});
2012-01-12 10:39:05 +00:00
}
2012-01-13 16:25:47 +00:00
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.$widget.animate({height: self.widgetSize + 'px'}, 250, function() {
self.$widget.options({height: self.widgetSize});
2012-01-13 16:25:47 +00:00
});
that.triggerEvent('togglewidget', {collapsed: !self.options.showWidget});
2012-01-13 16:25:47 +00:00
}
2012-01-15 15:05:17 +00:00
function updateAnnotations() {
2012-01-17 11:50:31 +00:00
self.annotations = getAnnotations();
self.$annotations.options({items: self.annotations});
2012-01-15 15:05:17 +00:00
showWarnings();
2012-01-17 11:50:31 +00:00
if (self.widget) {
self.options.type == 'event'
? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()});
}
2012-01-15 15:05:17 +00:00
}
2012-01-12 10:39:05 +00:00
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
2012-01-12 10:39:05 +00:00
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
2012-01-24 09:59:29 +00:00
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
2012-01-16 17:51:53 +00:00
self.points = getPoints();
2012-01-12 10:39:05 +00:00
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
2012-01-17 11:50:31 +00:00
self.options.range == 'selection' && updateAnnotations();
2012-01-12 10:39:05 +00:00
} else if (key == 'out') {
2012-01-17 11:50:31 +00:00
self.options.range == 'selection' && updateAnnotations();
2012-01-12 10:39:05 +00:00
} else if (key == 'position') {
2012-01-15 15:05:17 +00:00
if (self.options.range == 'position') {
2012-01-17 11:50:31 +00:00
crossesPoint() && updateAnnotations();
2012-01-16 17:51:53 +00:00
self.position = self.options.position;
2012-01-12 19:04:32 +00:00
}
2012-01-12 10:39:05 +00:00
} else if (key == 'range') {
2012-01-16 14:02:30 +00:00
updateAnnotations();
2012-01-12 10:39:05 +00:00
} else if (key == 'selected') {
2012-01-12 19:04:32 +00:00
if (value === '') {
self.editing = false;
}
2012-01-17 09:25:58 +00:00
if (value && self.options.collapsed) {
self.$panel.options({collapsed: false});
}
2012-01-12 10:39:05 +00:00
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
2012-01-12 10:39:05 +00:00
} else if (key == 'users') {
2012-01-15 15:05:17 +00:00
updateAnnotations();
2012-01-12 19:04:32 +00:00
} else if (key == 'width') {
Ox.print('RESIZE!!!!')
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
2012-01-12 19:04:32 +00:00
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
2012-01-12 10:39:05 +00:00
}
};
/*@
addItem <f> addItem
@*/
that.addItem = function(item) {
Ox.Log('AF', 'FOLDER ADD ITEM', item)
2012-01-12 10:39:05 +00:00
var pos = 0;
self.options.items.splice(pos, 0, item);
2012-01-27 18:28:44 +00:00
self.$panel.options({collapsed: false});
2012-01-15 15:05:17 +00:00
self.$annotations
.addItem(pos, item)
.options({selected: item.id})
.editItem();
2012-01-17 11:50:31 +00:00
showWarnings();
2012-01-15 15:05:17 +00:00
//selectAnnotation(item);
//that.triggerEvent('edit');
return that;
2012-01-12 10:39:05 +00:00
};
that.blurItem = function() {
2012-01-16 14:02:30 +00:00
self.editing = false;
2012-01-12 10:39:05 +00:00
self.$annotations.blurItem();
2012-01-15 15:05:17 +00:00
return that;
2012-01-12 10:39:05 +00:00
};
that.editItem = function() {
2012-01-16 14:02:30 +00:00
self.editing = true;
2012-01-27 18:28:44 +00:00
self.$panel.options({collapsed: false});
2012-01-12 10:39:05 +00:00
self.$annotations.editItem();
2012-01-15 15:05:17 +00:00
return that;
2012-01-12 10:39:05 +00:00
};
that.selectItem = function(position) {
// selects the first (0) or last (-1) visible annotation
if (self.annotations.length) {
that.options({selected: self.annotations[
position == 0 ? 0 : self.annotations.length - 1
].id});
self.$annotations.gainFocus();
} else {
that.triggerEvent(
position == 0 ? 'selectafter' : 'selectbefore'
);
}
};
2012-01-12 10:39:05 +00:00
/*@
removeItems <f> removeItems
@*/
/*
that.removeItem = function(id) {
var pos = Ox.getIndexById(self.options.items, id);
self.options.items.splice(pos, 1);
self.$annotations.removeItems && self.$annotations.removeItems([id]);
};
*/
that.updateItem = function(id, data) {
var item = Ox.getObjectById(self.options.items, id);
2012-01-24 09:59:29 +00:00
Ox.forEach(data, function(value, key) {
item[key] = value;
});
self.options.selected = item.id;
self.$annotations.options({selected: self.options.selected});
if (self.widget && isDefined(item)) {
2012-01-17 11:50:31 +00:00
// if updating has made the item match
2012-01-17 12:10:50 +00:00
// an event or place, then select it
2012-01-17 11:50:31 +00:00
self.$widget.options({selected: item[self.options.type].id});
}
2012-01-15 15:05:17 +00:00
return that;
2012-01-24 09:59:29 +00:00
};
2012-01-15 15:05:17 +00:00
2012-01-12 10:39:05 +00:00
return that;
};