update list of users on edit annotation (fixes #382)
This commit is contained in:
rlx
parent
0883bc7127
commit
9558070d8f
2 changed files with 101 additions and 79 deletions
|
|
@ -32,14 +32,8 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
|
|
||||||
if (self.options.showUsers) {
|
if (self.options.showUsers) {
|
||||||
self.users = Ox.sort(Ox.unique(Ox.flatten(
|
self.users = getUsers();
|
||||||
self.options.layers.map(function(layer) {
|
self.enabledUsers = self.users;
|
||||||
return layer.items.map(function(item) {
|
|
||||||
return item.user;
|
|
||||||
});
|
|
||||||
})
|
|
||||||
)));
|
|
||||||
self.enabledUsers = 'all';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$menubar = Ox.Bar({
|
self.$menubar = Ox.Bar({
|
||||||
|
|
@ -47,74 +41,6 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
})
|
})
|
||||||
.addClass('OxVideoPlayer');
|
.addClass('OxVideoPlayer');
|
||||||
|
|
||||||
self.$optionsMenuButton = Ox.MenuButton({
|
|
||||||
items: Ox.merge(
|
|
||||||
[
|
|
||||||
{id: 'showannotations', title: 'Show Annotations', disabled: true},
|
|
||||||
{group: 'range', min: 1, max: 1, items: [
|
|
||||||
{id: 'all', title: 'All', checked: self.options.range == 'all'},
|
|
||||||
{id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'},
|
|
||||||
{id: 'position', title: 'At Current Position', checked: self.options.range == 'position'}
|
|
||||||
]},
|
|
||||||
{},
|
|
||||||
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
|
||||||
{group: 'sort', min: 1, max: 1, items: [
|
|
||||||
{id: 'position', title: 'By Position', checked: self.options.sort == 'position'},
|
|
||||||
{id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'},
|
|
||||||
{id: 'text', title: 'By Text', checked: self.options.sort == 'text'}
|
|
||||||
]}
|
|
||||||
],
|
|
||||||
self.options.showFonts ? [
|
|
||||||
{},
|
|
||||||
{id: 'fontsize', title: 'Font Size', disabled: true},
|
|
||||||
{group: 'font', min: 1, max: 1, items: [
|
|
||||||
{id: 'small', title: 'Small', checked: self.options.font == 'small'},
|
|
||||||
{id: 'medium', title: 'Medium', checked: self.options.font == 'medium'},
|
|
||||||
{id: 'large', title: 'Large', checked: self.options.font == 'large'}
|
|
||||||
]}
|
|
||||||
] : [],
|
|
||||||
self.options.showUsers ? [
|
|
||||||
{},
|
|
||||||
{id: 'users', title: 'Show Users', disabled: true},
|
|
||||||
{group: 'users', min: 1, max: -1, items: self.users.map(function(user) {
|
|
||||||
return {id: user, title: user, checked: true};
|
|
||||||
})}
|
|
||||||
] : []
|
|
||||||
),
|
|
||||||
style: 'square',
|
|
||||||
title: 'set',
|
|
||||||
tooltip: 'Actions and Settings',
|
|
||||||
type: 'image'
|
|
||||||
})
|
|
||||||
.css({float: 'left'})
|
|
||||||
.bindEvent({
|
|
||||||
change: function(data) {
|
|
||||||
var set = {};
|
|
||||||
if (data.id == 'users') {
|
|
||||||
self.enabledUsers = data.checked.length == self.users.length
|
|
||||||
? 'all'
|
|
||||||
: data.checked.map(function(checked) {
|
|
||||||
return checked.id;
|
|
||||||
});
|
|
||||||
self.$folder.forEach(function($folder) {
|
|
||||||
$folder.options({users: self.enabledUsers});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
set[data.id] = data.checked[0].id;
|
|
||||||
self.$folder.forEach(function($folder) {
|
|
||||||
$folder.options(set);
|
|
||||||
});
|
|
||||||
that.triggerEvent('annotations' + data.id, set);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hide: function() {
|
|
||||||
self.options.selected
|
|
||||||
? getFolder(self.options.selected).gainFocus()
|
|
||||||
: that.triggerEvent('focus');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.appendTo(self.$menubar);
|
|
||||||
|
|
||||||
self.$folders = Ox.Element().css({overflowY: 'auto'});
|
self.$folders = Ox.Element().css({overflowY: 'auto'});
|
||||||
self.$folder = [];
|
self.$folder = [];
|
||||||
|
|
||||||
|
|
@ -206,6 +132,9 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
renderOptionsMenu();
|
||||||
|
self.options.editable && renderEditMenu();
|
||||||
|
|
||||||
that.setElement(
|
that.setElement(
|
||||||
Ox.SplitPanel({
|
Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
|
|
@ -221,8 +150,6 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
self.options.editable && renderEditMenu();
|
|
||||||
|
|
||||||
self.options.selected && scrollToSelected(
|
self.options.selected && scrollToSelected(
|
||||||
getFolder(self.options.selected).options('type')
|
getFolder(self.options.selected).options('type')
|
||||||
);
|
);
|
||||||
|
|
@ -257,6 +184,16 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
return folder;
|
return folder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getUsers() {
|
||||||
|
return Ox.sort(Ox.unique(Ox.flatten(
|
||||||
|
self.options.layers.map(function(layer) {
|
||||||
|
return layer.items.map(function(item) {
|
||||||
|
return item.user;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
)));
|
||||||
|
}
|
||||||
|
|
||||||
function insert(data) {
|
function insert(data) {
|
||||||
var id = data.id;
|
var id = data.id;
|
||||||
Ox.InsertHTMLDialog(Ox.extend({
|
Ox.InsertHTMLDialog(Ox.extend({
|
||||||
|
|
@ -363,6 +300,77 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
.appendTo(self.$menubar);
|
.appendTo(self.$menubar);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderOptionsMenu() {
|
||||||
|
self.$optionsMenuButton && self.$optionsMenuButton.remove();
|
||||||
|
self.$optionsMenuButton = Ox.MenuButton({
|
||||||
|
items: Ox.merge(
|
||||||
|
[
|
||||||
|
{id: 'showannotations', title: 'Show Annotations', disabled: true},
|
||||||
|
{group: 'range', min: 1, max: 1, items: [
|
||||||
|
{id: 'all', title: 'All', checked: self.options.range == 'all'},
|
||||||
|
{id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'},
|
||||||
|
{id: 'position', title: 'At Current Position', checked: self.options.range == 'position'}
|
||||||
|
]},
|
||||||
|
{},
|
||||||
|
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
||||||
|
{group: 'sort', min: 1, max: 1, items: [
|
||||||
|
{id: 'position', title: 'By Position', checked: self.options.sort == 'position'},
|
||||||
|
{id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'},
|
||||||
|
{id: 'text', title: 'By Text', checked: self.options.sort == 'text'}
|
||||||
|
]}
|
||||||
|
],
|
||||||
|
self.options.showFonts ? [
|
||||||
|
{},
|
||||||
|
{id: 'fontsize', title: 'Font Size', disabled: true},
|
||||||
|
{group: 'font', min: 1, max: 1, items: [
|
||||||
|
{id: 'small', title: 'Small', checked: self.options.font == 'small'},
|
||||||
|
{id: 'medium', title: 'Medium', checked: self.options.font == 'medium'},
|
||||||
|
{id: 'large', title: 'Large', checked: self.options.font == 'large'}
|
||||||
|
]}
|
||||||
|
] : [],
|
||||||
|
self.options.showUsers ? [
|
||||||
|
{},
|
||||||
|
{id: 'users', title: 'Show Users', disabled: true},
|
||||||
|
{group: 'users', min: 1, max: -1, items: self.users.map(function(user) {
|
||||||
|
return {id: user, title: user, checked:
|
||||||
|
self.enabledUsers == 'all' || self.enabledUsers.indexOf(user) > -1
|
||||||
|
};
|
||||||
|
})}
|
||||||
|
] : []
|
||||||
|
),
|
||||||
|
style: 'square',
|
||||||
|
title: 'set',
|
||||||
|
tooltip: 'Actions and Settings',
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
.css({float: 'left'})
|
||||||
|
.bindEvent({
|
||||||
|
change: function(data) {
|
||||||
|
var set = {};
|
||||||
|
if (data.id == 'users') {
|
||||||
|
self.enabledUsers = data.checked.map(function(checked) {
|
||||||
|
return checked.id;
|
||||||
|
});
|
||||||
|
self.$folder.forEach(function($folder) {
|
||||||
|
$folder.options({users: self.enabledUsers});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
set[data.id] = data.checked[0].id;
|
||||||
|
self.$folder.forEach(function($folder) {
|
||||||
|
$folder.options(set);
|
||||||
|
});
|
||||||
|
that.triggerEvent('annotations' + data.id, set);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide: function() {
|
||||||
|
self.options.selected
|
||||||
|
? getFolder(self.options.selected).gainFocus()
|
||||||
|
: that.triggerEvent('focus');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo(self.$menubar);
|
||||||
|
}
|
||||||
|
|
||||||
function scrollToSelected(type) {
|
function scrollToSelected(type) {
|
||||||
var $item = that.find('.OxEditableElement.OxSelected'),
|
var $item = that.find('.OxEditableElement.OxSelected'),
|
||||||
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
|
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
|
||||||
|
|
@ -451,6 +459,12 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
// called from addannotation callback
|
// called from addannotation callback
|
||||||
var i = Ox.getIndexById(self.options.layers, layer);
|
var i = Ox.getIndexById(self.options.layers, layer);
|
||||||
self.$folder[i].addItem(item);
|
self.$folder[i].addItem(item);
|
||||||
|
self.users = getUsers();
|
||||||
|
if (self.enabledUsers != 'all' && self.enabledUsers.indexOf(item.user) == -1) {
|
||||||
|
self.enabledUsers.push(item.user);
|
||||||
|
self.$folder[i].options({users: self.enabledUsers});
|
||||||
|
}
|
||||||
|
renderOptionsMenu();
|
||||||
renderEditMenu();
|
renderEditMenu();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -466,6 +480,13 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
renderEditMenu();
|
renderEditMenu();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
that.removeItem = function() {
|
||||||
|
self.options.selected = '';
|
||||||
|
self.users = getUsers();
|
||||||
|
renderOptionsMenu();
|
||||||
|
renderEditMenu();
|
||||||
|
};
|
||||||
|
|
||||||
that.updateItem = function(id, item) {
|
that.updateItem = function(id, item) {
|
||||||
// called from editannotation callback
|
// called from editannotation callback
|
||||||
// on the first update of a new annotation, the id will change
|
// on the first update of a new annotation, the id will change
|
||||||
|
|
|
||||||
|
|
@ -192,7 +192,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.results = [];
|
self.results = [];
|
||||||
self.words = getWords();
|
self.words = getWords();
|
||||||
|
|
||||||
Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
//Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
||||||
|
|
||||||
self.$editor = Ox.Element()
|
self.$editor = Ox.Element()
|
||||||
.addClass('OxVideoEditor')
|
.addClass('OxVideoEditor')
|
||||||
|
|
@ -997,6 +997,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.options.find && submitFindInput(self.options.find);
|
self.options.find && submitFindInput(self.options.find);
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
|
self.$annotationPanel.removeItem();
|
||||||
that.triggerEvent('removeannotation', data);
|
that.triggerEvent('removeannotation', data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue