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

691 lines
23 KiB
JavaScript
Raw Normal View History

2012-01-12 10:39:05 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.AnnotationFolder <f> AnnotationFolder Object
([options[, self]]) -> <o:Ox.CollapsePanel> AnnotationFolder Object
2012-01-12 10:39:05 +00:00
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
})
2012-05-28 19:35:41 +00:00
.options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
self.points = getPoints();
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'out') {
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'position') {
if (self.options.range == 'position') {
crossesPoint() && updateAnnotations();
self.position = self.options.position;
}
} else if (key == 'range') {
updateAnnotations();
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
self.$panel.options({animate: false});
self.$panel.options({collapsed: false});
self.$panel.options({animate: true});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
updateAnnotations();
} else if (key == 'width') {
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
});
2012-01-12 10:39:05 +00:00
if (self.options.selected) {
self.options.collapsed = false;
}
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
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,
extras: [self.options.editable ? self.$addButton : self.$infoButton],
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,
getSortValue: self.options.type == 'text'
? function(value) {
return Ox.stripTags(value);
}
: null,
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 ? function(item) {
return Ox.formatString('<b>{user}</b> {date}', {
user: Ox.encodeHTMLEntities(item.user),
date: item.date
});
} : '',
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');
},
2012-02-16 16:35:59 +00:00
insert: function(data) {
that.triggerEvent('insert', data);
},
open: function() {
that.triggerEvent('open');
},
2012-01-13 16:25:47 +00:00
select: selectAnnotation,
selectafter: function() {
that.triggerEvent('selectafter');
},
selectbefore: function() {
that.triggerEvent('selectbefore');
},
selectnone: function() {
that.triggerEvent('selectnone');
},
submit: submitAnnotation
2012-01-13 16:25:47 +00:00
})
.appendTo(
['event', 'place'].indexOf(self.options.type) > -1
? self.$outer : that.$content
);
[
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'b', 'backslash', 'closebracket', 'comma', 'dot',
'equal', 'f', 'g', 'h', 'i', 'minus', 'n', 'o',
'openbracket', 'p', 'shift_0', 'shift_equal',
'shift_g', 'shift_i', 'shift_minus', 'shift_o',
'slash', 'space'
].forEach(function(key) {
key = 'key_' + key;
self.$annotations.bindEvent(key, function() {
that.triggerEvent(key);
});
});
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-05-19 13:14:04 +00:00
var positions = [self.position, self.options.position].sort();
2012-01-16 17:51:53 +00:00
return self.points.some(function(point) {
return point >= positions[0] && point <= positions[1];
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() {
2012-05-22 14:29:37 +00:00
return Ox.filter(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
)
2012-05-22 14:29:37 +00:00
);
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 ({
duration: ['-duration', '+in', '+value'],
2012-02-04 11:44:19 +00:00
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.options({selected: ''})
.options({events: getEvents()});
2012-01-17 11:50:31 +00:00
} else {
self.$map.options({selected: ''})
.options({places: getPlaces()});
2012-01-17 11:50:31 +00:00
}
}
}
showWarnings();
2012-01-17 11:50:31 +00:00
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');
} else {
$element.removeClass('OxWarning');
2012-01-17 11:50:31 +00:00
}
});
}
}
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.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
/*@
addItem <f> addItem
@*/
that.addItem = function(item) {
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();
self.points = getPoints();
2012-01-15 15:05:17 +00:00
//selectAnnotation(item);
//that.triggerEvent('edit');
return that;
2012-01-12 10:39:05 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
blurItem <f> blur item
() -> <o> blur selected item
@*/
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
};
2012-05-21 10:38:18 +00:00
/*@
editItem <f> edit item
() -> <o> edit selected item
@*/
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
};
2012-05-21 10:38:18 +00:00
/*@
gainFocus <f> gain focus
() -> <o> gain focus
@*/
that.gainFocus = function() {
self.$annotations.gainFocus();
return that;
};
2012-05-21 10:38:18 +00:00
/*@
removeItem <f> remove item
() -> <o> remove selected item
@*/
that.removeItem = function() {
self.$annotations.removeItem();
};
2012-05-21 10:38:18 +00:00
/*@
selectItem <f> select item
(position) -> <o> select item at position
@*/
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-05-21 10:38:18 +00:00
/*@
updateItem <f> update item
(id, data) -> <o> update item
@*/
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;
});
if (id != item.id) {
self.$annotations.find('.OxEditableElement').each(function() {
var $element = $(this);
if ($element.data('id') == self.options.selected) {
$element.data({id: item.id});
}
});
self.options.selected = item.id;
2012-01-17 11:50:31 +00:00
}
if (self.$widget) {
// update may have made the item match,
// or no longer match, an event or place
if (isDefined(item)) {
self.$widget.options(
self.options.type == 'event'
? {events: getEvents()}
: {places: getPlaces()}
)
.options({
selected: item[self.options.type].id
});
self.$widget[
self.options.type == 'event' ? 'panToEvent' : 'panToPlace'
]();
} else {
self.$widget.options({
selected: ''
})
.options(
self.options.type == 'event'
? {events: getEvents()}
: {places: getPlaces()}
);
}
}
if (id != item.id) {
self.$annotations.options({selected: self.options.selected});
}
showWarnings();
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;
};