0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

some work towards making the edit annotations menu functional

Browse source
This commit is contained in:
rlx 2012-02-16 11:35:03 +00:00
parent 1ea9524cb1
commit 8ab8d8d67a
5 changed files with 135 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -59,6 +59,7 @@ Ox.ArrayEditable = function(options, self) {
that.triggerEvent('delete', {
id: self.options.selected
});
self.editing = false;
self.selected = -1;
self.options.selected = '';
}
@ -367,9 +368,9 @@ Ox.ArrayEditable = function(options, self) {
return that;
};
that.removeItem = function(position) {
if (self.options.editable) {
that.removeItem = function() {
if (self.options.editable && self.options.selected) {
deleteItem();
}
return that;
};

2
source/Ox.UI/js/Menu/Ox.MenuButton.js
View file

@ -91,6 +91,7 @@ Ox.MenuButton = function(options, self) {
function hideMenu(data) {
that.loseFocus();
that.removeClass('OxSelected');
that.triggerEvent('hide');
}
function showMenu() {
@ -98,6 +99,7 @@ Ox.MenuButton = function(options, self) {
that.addClass('OxSelected');
self.options.tooltip && that.$tooltip.hide();
self.$menu.showMenu();
that.triggerEvent('show');
}
self.setOption = function(key, value) {

32
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -52,27 +52,6 @@ Ox.AnnotationFolder = function(options, self) {
self.widget = self.options.type == 'event' ? 'Calendar'
: self.options.type == 'place' ? 'Map' : '';
if (self.widget) {
self.$defineButton = Ox.Button({
disabled: !self.options.selected,
id: 'define',
style: 'symbol',
title: 'click',
tooltip: 'Define ' + Ox.toTitleCase(self.options.type),
type: 'image'
})
.bindEvent({
click: function() {
var item = Ox.getObjectById(self.options.items, self.options.selected);
that.triggerEvent('define', item.place ? {
id: item.place.id
} : {
name: item.value
});
}
});
}
self.$addButton = Ox.Button({
id: 'add',
style: 'symbol',
@ -99,10 +78,7 @@ Ox.AnnotationFolder = function(options, self) {
self.$panel = Ox.CollapsePanel({
collapsed: self.options.collapsed,
extras: Ox.merge(
self.widget ? [self.$defineButton] : [],
[self.options.editable ? self.$addButton : self.$infoButton]
),
extras: [self.options.editable ? self.$addButton : self.$infoButton],
size: 16,
title: self.options.title
})
@ -404,7 +380,7 @@ Ox.AnnotationFolder = function(options, self) {
function getSort() {
return ({
duration: ['+duration', '+in', '+value'],
duration: ['-duration', '+in', '+value'],
position: ['+in', '+duration', '+value'],
text: ['+value', '+in', '+duration']
})[self.options.sort];
@ -602,6 +578,10 @@ Ox.AnnotationFolder = function(options, self) {
return that;
};
that.removeItem = function() {
self.$annotations.removeItem();
};
that.selectItem = function(position) {
// selects the first (0) or last (-1) visible annotation
if (self.annotations.length) {

155
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -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);
};

13
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -603,7 +603,11 @@ Ox.VideoEditor = function(options, self) {
},
blur: function(data) {
Ox.print('VIDEO EDITOR BLUR')
!self.focused && blurAnnotation();
// Only blur if neither the video editor
// nor an active menu layer received the click
if (!self.focused && !$('.OxMenuLayer').length) {
blurAnnotation();
}
},
change: function(data) {
that.triggerEvent('editannotation', data);
@ -617,6 +621,9 @@ Ox.VideoEditor = function(options, self) {
self.editing = true;
setTimelineState();
},
find: function(data) {
that.triggerEvent('findannotation', data);
},
info: function(data) {
that.triggerEvent('info', data);
},
@ -723,7 +730,7 @@ Ox.VideoEditor = function(options, self) {
}
// setPosition causes a folder redraw
// so blur once that's done
setTimeout(self.$annotationPanel.blurItem, 0);
setTimeout(self.$annotationPanel.blurItem);
}
function editAnnotation() {
@ -1232,7 +1239,9 @@ Ox.VideoEditor = function(options, self) {
}
function updateWords(action) {
// action can be 'add' or 'remove'
var words = [];
Ox.print('#^#$^#$^#$^#$', self.options.selected, getAnnotationValue(self.options.selected))
Ox.forEach(Ox.count(Ox.words(
getAnnotationValue(self.options.selected)
)), function(count, value) {