230 lines
7.5 KiB
JavaScript
230 lines
7.5 KiB
JavaScript
|
// 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({
|
||
|
|
collapsed: false,
|
||
|
|
editable: false,
|
||
|
|
id: '',
|
||
|
|
'in': 0,
|
||
|
|
item: '',
|
||
|
|
items: [],
|
||
|
|
out: 0,
|
||
|
|
position: 0,
|
||
|
|
range: 'all',
|
||
|
|
selected: '',
|
||
|
|
sort: 'position',
|
||
|
|
title: '',
|
||
|
|
type: 'text',
|
||
|
|
users: 'all',
|
||
|
|
width: 0
|
||
|
|
})
|
||
|
|
.options(options || {});
|
||
|
|
|
||
|
|
self.sort = getSort();
|
||
|
|
|
||
|
|
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: ''});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
] : [],
|
||
|
|
size: 16,
|
||
|
|
title: self.options.title
|
||
|
|
})
|
||
|
|
.addClass('OxAnnotationFolder')
|
||
|
|
.bindEvent({
|
||
|
|
toggle: togglePanel
|
||
|
|
})
|
||
|
|
);
|
||
|
|
that.$content = that.$element.$content;
|
||
|
|
|
||
|
|
if (self.options.type == 'event') {
|
||
|
|
self.$annotations = Ox.Element();
|
||
|
|
} else if (self.options.type == 'place') {
|
||
|
|
self.$annotations = Ox.Element();
|
||
|
|
} 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');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
self.$annotations.appendTo(that.$content);
|
||
|
|
|
||
|
|
self.options.selected && setTimeout(function() {
|
||
|
|
selectAnnotation({id: self.options.selected});
|
||
|
|
}, 0);
|
||
|
|
|
||
|
|
function getAnnotations() {
|
||
|
|
return self.options.items.filter(function(item) {
|
||
|
|
return self.editing && item.id == self.options.selected || (
|
||
|
|
(
|
||
|
|
self.options.range == 'all' || (
|
||
|
|
self.options.range == 'selection'
|
||
|
|
&& item['in'] < self.options.out
|
||
|
|
&& item.out > self.options['in']
|
||
|
|
) || (
|
||
|
|
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
|
||
|
|
)
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getSort() {
|
||
|
|
return ({
|
||
|
|
duration: ['-duration', '+in', '+value'],
|
||
|
|
position: ['+in', '-duration', '+value'],
|
||
|
|
text: ['+value', '+in', '-duration']
|
||
|
|
})[self.options.sort];
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectAnnotation(data) {
|
||
|
|
var item = Ox.getObjectById(self.options.items, data.id);
|
||
|
|
self.options.selected = item ? data.id : '';
|
||
|
|
that.triggerEvent('select', Ox.extend(data, item ? {
|
||
|
|
'in': item['in'],
|
||
|
|
out: item.out,
|
||
|
|
layer: self.options.id
|
||
|
|
} : {}));
|
||
|
|
}
|
||
|
|
|
||
|
|
function submitAnnotation(data) {
|
||
|
|
var item = Ox.getObjectById(self.options.items, data.id);
|
||
|
|
item.value = data.value;
|
||
|
|
self.editing = false;
|
||
|
|
Ox.print('??:', self.options.items[0], self.$annotations.options('items')[0])
|
||
|
|
//self.$annotations.options({items: self.options.items});
|
||
|
|
self.options.sort == 'text' && self.$annotations.reloadItems();
|
||
|
|
that.triggerEvent('submit', item);
|
||
|
|
}
|
||
|
|
|
||
|
|
function togglePanel() {
|
||
|
|
self.options.collapsed = !self.options.collapsed;
|
||
|
|
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||
|
|
}
|
||
|
|
|
||
|
|
self.setOption = function(key, value) {
|
||
|
|
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
|
||
|
|
var index = Ox.getIndexById(self.options.items, self.options.selected);
|
||
|
|
self.options.items[index][key] = value;
|
||
|
|
self.options.items[index].duration = self.options.out - self.options['in'];
|
||
|
|
}
|
||
|
|
if (key == 'in') {
|
||
|
|
//fixme: array editable should support item updates while editing
|
||
|
|
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||
|
|
items: getAnnotations()
|
||
|
|
});
|
||
|
|
} else if (key == 'out') {
|
||
|
|
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||
|
|
items: getAnnotations()
|
||
|
|
});
|
||
|
|
} else if (key == 'position') {
|
||
|
|
self.editing || self.options.range == 'position' && self.$annotations.options({
|
||
|
|
items: getAnnotations()
|
||
|
|
});
|
||
|
|
} else if (key == 'range') {
|
||
|
|
self.$annotations.options({items: getAnnotations()});
|
||
|
|
} else if (key == 'selected') {
|
||
|
|
self.$annotations.options({selected: value});
|
||
|
|
} else if (key == 'sort') {
|
||
|
|
self.sort = getSort();
|
||
|
|
self.$annotations.options({sort: self.sort});
|
||
|
|
} else if (key == 'users') {
|
||
|
|
Ox.print('USERS ->', value)
|
||
|
|
self.$annotations.options({items: getAnnotations()});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/*@
|
||
|
|
addItem <f> addItem
|
||
|
|
@*/
|
||
|
|
that.addItem = function(item) {
|
||
|
|
var pos = 0;
|
||
|
|
self.options.items.splice(pos, 0, item);
|
||
|
|
self.$annotations.addItem(pos, item);
|
||
|
|
self.$annotations.editItem(item.id);
|
||
|
|
};
|
||
|
|
|
||
|
|
that.blurItem = function() {
|
||
|
|
self.$annotations.blurItem();
|
||
|
|
};
|
||
|
|
|
||
|
|
that.editItem = function() {
|
||
|
|
self.$annotations.editItem();
|
||
|
|
};
|
||
|
|
|
||
|
|
/*@
|
||
|
|
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]);
|
||
|
|
};
|
||
|
|
*/
|
||
|
|
|
||
|
|
return that;
|
||
|
|
|
||
|
|
};
|