forked from 0x2620/oxjs
some work towards making the edit annotations menu functional
This commit is contained in:
rlx
parent
1ea9524cb1
commit
8ab8d8d67a
5 changed files with 135 additions and 74 deletions
|
|
@ -29,6 +29,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
.options(options || {})
|
||||
.addClass('OxAnnotationPanel');
|
||||
|
||||
self.editing = false;
|
||||
|
||||
if (self.options.showUsers) {
|
||||
self.users = Ox.sort(Ox.unique(Ox.flatten(
|
||||
self.options.layers.map(function(layer) {
|
||||
|
|
@ -110,39 +112,6 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
if (self.options.editable) {
|
||||
self.$editMenuButton = Ox.MenuButton({
|
||||
items: [
|
||||
{id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected, keyboard: 'return'},
|
||||
{id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected, keyboard: 'delete'},
|
||||
{id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
|
||||
{},
|
||||
{id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
|
||||
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'},
|
||||
{},
|
||||
{id: 'find', title: 'Find Annotation', disabled: true},
|
||||
{id: 'manage', title: 'Edit Place/Event', disabled: true}
|
||||
],
|
||||
style: 'square',
|
||||
title: 'edit',
|
||||
tooltip: 'Editing Options',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'delete') {
|
||||
|
||||
} else if (data.id == 'deselect') {
|
||||
|
||||
} else if (data.id == 'edit') {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
}
|
||||
|
||||
self.$folders = Ox.Element().css({overflowY: 'auto'});
|
||||
self.$folder = [];
|
||||
|
||||
|
|
@ -176,15 +145,16 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
|
||||
},
|
||||
blur: function() {
|
||||
self.editing = false;
|
||||
renderEditMenu();
|
||||
that.triggerEvent('blur');
|
||||
},
|
||||
change: function(data) {
|
||||
that.triggerEvent('change', Ox.extend({layer: layer.id}, data));
|
||||
},
|
||||
define: function(data) {
|
||||
that.triggerEvent('define', data);
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
renderEditMenu();
|
||||
that.triggerEvent('edit');
|
||||
},
|
||||
info: function(data) {
|
||||
|
|
@ -249,10 +219,27 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
})
|
||||
);
|
||||
|
||||
self.options.editable && renderEditMenu();
|
||||
|
||||
self.options.selected && scrollToSelected(
|
||||
getFolder(self.options.selected).options('type')
|
||||
);
|
||||
|
||||
function getAnnotation(annotationId) {
|
||||
var found = false, annotation;
|
||||
Ox.forEach(self.options.layers, function(layer, i) {
|
||||
Ox.forEach(layer.items, function(item) {
|
||||
if (item.id == annotationId) {
|
||||
annotation = item;
|
||||
found = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return !found;
|
||||
});
|
||||
return annotation;
|
||||
}
|
||||
|
||||
function getFolder(annotationId) {
|
||||
var found = false, folder;
|
||||
Ox.forEach(self.options.layers, function(layer, i) {
|
||||
|
|
@ -268,6 +255,74 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
return folder;
|
||||
}
|
||||
|
||||
function renderEditMenu() {
|
||||
Ox.print('RENDER EDIT MENU')
|
||||
var annotation, findTitle, folder,
|
||||
isDefined, isEditable, isEvent, isEventOrPlace, isPlace, isString,
|
||||
key, manageTitle, type, value
|
||||
if (self.options.selected) {
|
||||
annotation = getAnnotation(self.options.selected);
|
||||
folder = getFolder(self.options.selected);
|
||||
key = folder.options('id');
|
||||
type = folder.options('type');
|
||||
value = annotation.value;
|
||||
isEditable = annotation.editable;
|
||||
isEvent = type == 'event';
|
||||
isPlace = type == 'place';
|
||||
isEventOrPlace = isEvent || isPlace;
|
||||
isString = type != 'text';
|
||||
// fixme: absence of annotation[type] may be an error
|
||||
isDefined = isEventOrPlace && !!annotation[type] && !!annotation[type].type;
|
||||
}
|
||||
findTitle = 'Find ' + (isString ? '"' + value + '"' : 'Annotation');
|
||||
manageTitle = (isDefined ? 'Edit' : 'Define') + ' '
|
||||
+ (isPlace ? 'Place' : isEvent ? 'Event' : 'Place or Event') + '...'
|
||||
self.$editMenuButton && self.$editMenuButton.remove();
|
||||
self.$editMenuButton = Ox.MenuButton({
|
||||
items: [
|
||||
{id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected || self.editing, keyboard: 'escape'},
|
||||
{id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected || !isEditable || self.editing, keyboard: 'return'},
|
||||
{id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected || !isEditable, keyboard: 'delete'},
|
||||
{},
|
||||
{id: 'insert', title: 'Insert...', disabled: isString || !self.editing},
|
||||
{id: 'undo', title: 'Undo Changes', disabled: !self.editing, keyboard: 'escape'},
|
||||
{id: 'save', title: 'Save Changes', disabled: !self.editing, keyboard: isString ? 'return' : 'shift return'},
|
||||
{},
|
||||
{id: 'manage', title: manageTitle, disabled: !self.options.selected || !isEventOrPlace},
|
||||
{id: 'find', title: findTitle, disabled: !self.options.selected || !isString}
|
||||
],
|
||||
maxWidth: 256,
|
||||
style: 'square',
|
||||
title: 'edit',
|
||||
tooltip: 'Editing Options',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'delete') {
|
||||
getFolder(self.options.selected).removeItem();
|
||||
} else if (data.id == 'deselect') {
|
||||
getFolder(self.options.selected).options({selected: ''});
|
||||
} else if (data.id == 'edit') {
|
||||
getFolder(self.options.selected).editItem();
|
||||
} else if (data.id == 'find') {
|
||||
that.triggerEvent('find', {key: key, value: value});
|
||||
} else if (data.id == 'manage') {
|
||||
that.triggerEvent('define', {
|
||||
id: self.options.selected,
|
||||
type: type
|
||||
});
|
||||
} else if (data.id == 'save') {
|
||||
// ...
|
||||
} else if (data.id == 'undo') {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
}
|
||||
|
||||
function scrollToSelected(type) {
|
||||
var $item = that.find('.OxEditableElement.OxSelected'),
|
||||
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
|
||||
|
|
@ -289,15 +344,23 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data, index) {
|
||||
Ox.print('selectAnnotation', index)
|
||||
self.options.selected = data.id;
|
||||
if (data.id) {
|
||||
self.$folder.forEach(function($folder, i) {
|
||||
i != index && $folder.options({selected: ''});
|
||||
Ox.forEach(self.$folder, function($folder, i) {
|
||||
if (i != index && $folder.options('selected')) {
|
||||
self.deselecting = true;
|
||||
$folder.options({selected: ''});
|
||||
self.deselecting = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
scrollToSelected(self.options.layers[index].type);
|
||||
}
|
||||
that.triggerEvent('select', data);
|
||||
if (!self.deselecting) {
|
||||
self.options.selected = data.id;
|
||||
Ox.print('selectAnnotation', index, data.id)
|
||||
self.options.editable && renderEditMenu();
|
||||
that.triggerEvent('select', data);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNone() {
|
||||
|
|
@ -347,22 +410,28 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
};
|
||||
|
||||
that.addItem = function(layer, item) {
|
||||
Ox.Log('AP', 'ADD ITEM', layer, item);
|
||||
// called from addannotation callback
|
||||
var i = Ox.getIndexById(self.options.layers, layer);
|
||||
renderEditMenu();
|
||||
self.$folder[i].addItem(item);
|
||||
};
|
||||
|
||||
that.blurItem = function() {
|
||||
self.editing = false;
|
||||
renderEditMenu();
|
||||
getFolder(self.options.selected).blurItem();
|
||||
};
|
||||
|
||||
that.editItem = function() {
|
||||
self.editing = true;
|
||||
renderEditMenu();
|
||||
getFolder(self.options.selected).editItem();
|
||||
};
|
||||
|
||||
that.updateItem = function(id, item) {
|
||||
Ox.Log('AP', 'UPDATE ITEM', id, item);
|
||||
// called from editannotation callback
|
||||
self.options.selected = item.id;
|
||||
renderEditMenu();
|
||||
getFolder(id).updateItem(id, item);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue