AnnotationPanel: add methods addLayer, removeLayer, updateLayer

This commit is contained in:
rlx 2013-03-07 12:49:20 +00:00
parent 6c29a1c5cd
commit a8c7239da6

View file

@ -102,103 +102,10 @@ Ox.AnnotationPanel = function(options, self) {
})
.addClass('OxVideoPlayer');
self.$folders = Ox.Element().css({overflowY: 'auto'});
self.$folders = Ox.Element().css({overflowY: 'scroll'});
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));
},
edit: function() {
self.editing = true;
renderEditMenu();
that.triggerEvent('edit');
},
info: function(data) {
that.triggerEvent('info', {layer: layer.id});
},
insert: insert,
open: function() {
that.triggerEvent('open');
},
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) {
self.options.showLayers[layer.id] = !data.collapsed;
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
},
togglewidget: function(data) {
that.triggerEvent('toggle' + (
layer.type == 'event' ? 'calendar' : 'map'
), data);
}
})
.appendTo(self.$folders);
[
'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.$folder[i].bindEvent(key, function() {
that.triggerEvent(key);
});
});
});
renderFolders();
renderOptionsMenu();
self.options.editable && renderEditMenu();
@ -374,6 +281,108 @@ Ox.AnnotationPanel = function(options, self) {
.appendTo(self.$menubar);
}
function renderFolder(layer) {
var index = Ox.getIndexById(self.options.layers, layer.id),
item = Ox.getObjectById(layer.items, self.options.selected),
selected = item ? item.id : '';
self.$folder[index] = 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));
},
edit: function() {
self.editing = true;
renderEditMenu();
that.triggerEvent('edit');
},
info: function(data) {
that.triggerEvent('info', {layer: layer.id});
},
insert: insert,
open: function() {
that.triggerEvent('open');
},
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, index);
},
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) {
self.options.showLayers[layer.id] = !data.collapsed;
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
},
togglewidget: function(data) {
that.triggerEvent('toggle' + (
layer.type == 'event' ? 'calendar' : 'map'
), data);
}
});
[
'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.$folder[index].bindEvent(key, function() {
that.triggerEvent(key);
});
});
self.$folder[index].appendTo(self.$folders);
}
function renderFolders() {
self.$folders.empty();
self.options.layers.forEach(function(layer, index) {
renderFolder(layer);
});
}
function renderOptionsMenu() {
self.$optionsMenuButton && self.$optionsMenuButton.remove();
self.$optionsMenuButton = Ox.MenuButton({
@ -506,7 +515,7 @@ Ox.AnnotationPanel = function(options, self) {
/*@
addItem <f> add item
(layer, item) -> <o> add item to layer
(layer, item) -> <o> AnnotationPanel
@*/
that.addItem = function(layer, item) {
// called from addannotation callback
@ -519,31 +528,46 @@ Ox.AnnotationPanel = function(options, self) {
}
renderOptionsMenu();
renderEditMenu();
return that;
};
/*@
blurItem <f> blur item
() -> <o> blur selected item
addLayer <f> Add a layer
(layer[, index]) -> <o> AnnotationPanel
@*/
that.addLayer = function(layer, index) {
// FIXME: add/remove/updateLayer don't update users yet
index = index || self.options.layers.length;
self.options.layers.splice(index, 0, layer);
renderFolders();
return that;
};
/*@
blurItem <f> Blur selected item
() -> <o> AnnotationPanel
@*/
that.blurItem = function() {
self.editing = false;
getFolder(self.options.selected).blurItem();
renderEditMenu();
return that;
};
/*@
editItem <f> editItem
() -> <o> put selected item into edit mode
editItem <f> Put selected item into edit mode
() -> <o> AnnotationPanel
@*/
that.editItem = function() {
self.editing = true;
getFolder(self.options.selected).editItem();
renderEditMenu();
return that;
};
/*@
removeItem <f> removeItem
(remove) -> <o> remove item
removeItem <f> Remove selected item
() -> <o> AnnotationPanel
@*/
that.removeItem = function(remove) {
if (remove) {
@ -556,11 +580,27 @@ Ox.AnnotationPanel = function(options, self) {
renderOptionsMenu();
renderEditMenu();
}
return that;
};
/*@
updateItem <f> updateItem
(id, item) -> <o> update item
removeLayer <f> Remove a layer
(id) -> <o> AnnotationPanel
@*/
that.removeLayer = function(id) {
var $folder = getFolder(self.options.selected),
index = Ox.getIndexById(self.options.layers, id);
if (self.$folder[index] == $folder) {
$folder.blurItem();
}
self.options.layers.splice(index, 1);
renderFolders();
return that;
};
/*@
updateItem <f> Update an item
(id, item) -> <o> AnnotationPanel
@*/
that.updateItem = function(id, item) {
// called from editannotation callback
@ -570,6 +610,23 @@ Ox.AnnotationPanel = function(options, self) {
renderEditMenu();
};
/*@
updateLayer <f> Update a layer
(id, items) -> <o> AnnotationPanel
@*/
that.updateLayer = function(id, items) {
var $folder = getFolder(self.options.selected),
index = Ox.getIndexById(self.options.layers, id);
if (self.$folder[index] == $folder) {
$folder.blurItem();
}
self.options.layers[index].items = items;
self.$folders[index].replaceWith(
self.$folders[index] = renderFolder(self.options.layers['index'])
);
return that;
};
return that;
};