AnnotationPanel: add methods addLayer, removeLayer, updateLayer
This commit is contained in:
rlx
parent
6c29a1c5cd
commit
a8c7239da6
1 changed files with 161 additions and 104 deletions
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue