update video editor
This commit is contained in:
parent
e98696b93d
commit
b2e8b2ac82
9 changed files with 623 additions and 485 deletions
|
@ -806,10 +806,10 @@ OxEditable
|
||||||
}
|
}
|
||||||
.OxEditableElement div.OxInput {
|
.OxEditableElement div.OxInput {
|
||||||
padding: 0 1px 0 0;
|
padding: 0 1px 0 0;
|
||||||
//margin-bottom: -3px;
|
|
||||||
}
|
}
|
||||||
.OxEditableElement input.OxInput {
|
.OxEditableElement input.OxInput {
|
||||||
padding: 0 1px 0 0;
|
padding: 0 1px 0 0;
|
||||||
|
//padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
.OxEditableElement textarea.OxInput {
|
.OxEditableElement textarea.OxInput {
|
||||||
|
|
|
@ -28,7 +28,9 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
anyclick: anyclick,
|
anyclick: anyclick,
|
||||||
doubleclick: doubleclick,
|
doubleclick: doubleclick,
|
||||||
key_delete: deleteItem,
|
key_delete: deleteItem,
|
||||||
key_enter: editItem,
|
key_enter: function() {
|
||||||
|
that.editItem();
|
||||||
|
},
|
||||||
key_escape: selectNone,
|
key_escape: selectNone,
|
||||||
key_down: self.options.type == 'input' ? selectLast : selectNext,
|
key_down: self.options.type == 'input' ? selectLast : selectNext,
|
||||||
key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
|
key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
|
||||||
|
@ -81,23 +83,12 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
var $target = $(e.target),
|
var $target = $(e.target),
|
||||||
$parent = $target.parent();
|
$parent = $target.parent();
|
||||||
if ($parent.is('.OxEditableElement')) {
|
if ($parent.is('.OxEditableElement')) {
|
||||||
that.editItem(self.options.selected);
|
that.editItem();
|
||||||
} else if(!$target.is('.OxInput')) {
|
} else if(!$target.is('.OxInput')) {
|
||||||
that.triggerEvent('add');
|
that.triggerEvent('add');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function editItem() {
|
|
||||||
if (self.selected > -1) {
|
|
||||||
Ox.forEach(self.$items, function($item) {
|
|
||||||
if ($item.data('position') == self.selected) {
|
|
||||||
$item.triggerEvent('doubleclick');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSelectedId() {
|
function getSelectedId() {
|
||||||
return self.selected > -1 ? self.options.items[self.selected].id : '';
|
return self.selected > -1 ? self.options.items[self.selected].id : '';
|
||||||
}
|
}
|
||||||
|
@ -131,18 +122,21 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
.data({position: i})
|
.data({position: i})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
blur: function(data) {
|
blur: function(data) {
|
||||||
|
that.gainFocus();
|
||||||
that.triggerEvent('blur', data);
|
that.triggerEvent('blur', data);
|
||||||
},
|
},
|
||||||
cancel: function(data) {
|
cancel: function(data) {
|
||||||
|
that.gainFocus();
|
||||||
|
Ox.print("GAINING FOCUS!")
|
||||||
|
that.triggerEvent('blur', data);
|
||||||
},
|
},
|
||||||
edit: function(data) {
|
edit: function(data) {
|
||||||
self.editing = true;
|
self.editing = true;
|
||||||
that.triggerEvent('edit', data);
|
that.triggerEvent('edit', data);
|
||||||
},
|
},
|
||||||
submit: function(data) {
|
submit: function(data) {
|
||||||
Ox.Log("AE", "SUBMIT", data);
|
that.gainFocus();
|
||||||
submit(i, data.value);
|
submitItem(i, data.value);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
@ -161,6 +155,7 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
self.selected = idOrPosition;
|
self.selected = idOrPosition;
|
||||||
self.options.selected = getSelectedId();
|
self.options.selected = getSelectedId();
|
||||||
}
|
}
|
||||||
|
Ox.print('SELECT ITEM', self.options.selected, self.selected);
|
||||||
that.find('.OxSelected').removeClass('OxSelected');
|
that.find('.OxSelected').removeClass('OxSelected');
|
||||||
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
|
||||||
triggerSelectEvent();
|
triggerSelectEvent();
|
||||||
|
@ -191,14 +186,13 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function submit(position, value) {
|
function submitItem(position, value) {
|
||||||
var item = self.options.items[position];
|
var item = self.options.items[position];
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
|
|
||||||
deleteItem();
|
deleteItem();
|
||||||
} /*else if (item.value === value) {
|
} else if (item.value === value) {
|
||||||
that.triggerEvent('blur');
|
that.triggerEvent('blur');
|
||||||
} else*/ {
|
} else {
|
||||||
that.triggerEvent('submit', {
|
that.triggerEvent('submit', {
|
||||||
id: item.id,
|
id: item.id,
|
||||||
value: value
|
value: value
|
||||||
|
@ -246,15 +240,24 @@ Ox.ArrayEditable = function(options, self) {
|
||||||
};
|
};
|
||||||
|
|
||||||
that.blurItem = function() {
|
that.blurItem = function() {
|
||||||
Ox.Log('AE', 'bI', self.selected);
|
self.options.selected && self.$items[self.selected].options({
|
||||||
self.selected > -1 && self.$items[self.selected].options({editing: false});
|
editing: false
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
that.editItem = function(id) {
|
that.editItem = function() {
|
||||||
Ox.Log('AE', 'editItem', id);
|
if (self.options.selected) {
|
||||||
self.options.selected = id;
|
Ox.forEach(self.$items, function($item) {
|
||||||
self.selected = getSelectedPosition();
|
if ($item.data('position') == self.selected) {
|
||||||
editItem();
|
$item.triggerEvent('doubleclick');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
that.reloadItems = function() {
|
||||||
|
renderItems();
|
||||||
};
|
};
|
||||||
|
|
||||||
that.removeItem = function(position) {
|
that.removeItem = function(position) {
|
||||||
|
|
229
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
Normal file
229
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
Normal file
|
@ -0,0 +1,229 @@
|
||||||
|
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/*@
|
||||||
|
Ox.AnnotationFolder <f:Ox.Element> AnnotationFolder Object
|
||||||
|
() -> <f> AnnotationFolder Object
|
||||||
|
(options) -> <f> AnnotationFolder Object
|
||||||
|
(options, self) -> <f> AnnotationFolder Object
|
||||||
|
options <o> Options object
|
||||||
|
editable <b|false> If true, annotations can be added
|
||||||
|
id <s> id
|
||||||
|
items <a|[]> items
|
||||||
|
title <s> title
|
||||||
|
type <s|'text'> panel type
|
||||||
|
width <n|0>
|
||||||
|
self <o> shared private variable
|
||||||
|
@*/
|
||||||
|
|
||||||
|
Ox.AnnotationFolder = function(options, self) {
|
||||||
|
|
||||||
|
self = self || {};
|
||||||
|
var that = Ox.Element({}, self)
|
||||||
|
.defaults({
|
||||||
|
collapsed: false,
|
||||||
|
editable: false,
|
||||||
|
id: '',
|
||||||
|
'in': 0,
|
||||||
|
item: '',
|
||||||
|
items: [],
|
||||||
|
out: 0,
|
||||||
|
position: 0,
|
||||||
|
range: 'all',
|
||||||
|
selected: '',
|
||||||
|
sort: 'position',
|
||||||
|
title: '',
|
||||||
|
type: 'text',
|
||||||
|
users: 'all',
|
||||||
|
width: 0
|
||||||
|
})
|
||||||
|
.options(options || {});
|
||||||
|
|
||||||
|
self.sort = getSort();
|
||||||
|
|
||||||
|
that.setElement(
|
||||||
|
Ox.CollapsePanel({
|
||||||
|
collapsed: self.options.collapsed,
|
||||||
|
extras: self.options.editable ? [
|
||||||
|
Ox.Button({
|
||||||
|
id: 'add',
|
||||||
|
style: 'symbol',
|
||||||
|
title: 'add',
|
||||||
|
tooltip: 'Add ' + self.options.item,
|
||||||
|
type: 'image'
|
||||||
|
}).bindEvent({
|
||||||
|
click: function(data) {
|
||||||
|
that.triggerEvent('add', {value: ''});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
] : [],
|
||||||
|
size: 16,
|
||||||
|
title: self.options.title
|
||||||
|
})
|
||||||
|
.addClass('OxAnnotationFolder')
|
||||||
|
.bindEvent({
|
||||||
|
toggle: togglePanel
|
||||||
|
})
|
||||||
|
);
|
||||||
|
that.$content = that.$element.$content;
|
||||||
|
|
||||||
|
if (self.options.type == 'event') {
|
||||||
|
self.$annotations = Ox.Element();
|
||||||
|
} else if (self.options.type == 'place') {
|
||||||
|
self.$annotations = Ox.Element();
|
||||||
|
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
|
||||||
|
self.$annotations = Ox.ArrayEditable({
|
||||||
|
editable: self.options.editable,
|
||||||
|
items: getAnnotations(),
|
||||||
|
selected: self.options.selected,
|
||||||
|
sort: self.sort,
|
||||||
|
submitOnBlur: false,
|
||||||
|
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
|
||||||
|
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
add: function(data) {
|
||||||
|
that.triggerEvent('add', {value: data.value || ''});
|
||||||
|
},
|
||||||
|
blur: function() {
|
||||||
|
that.triggerEvent('blur');
|
||||||
|
},
|
||||||
|
'delete': function(data) {
|
||||||
|
that.triggerEvent('remove', {id: data.id});
|
||||||
|
},
|
||||||
|
edit: function() {
|
||||||
|
self.editing = true;
|
||||||
|
that.triggerEvent('edit');
|
||||||
|
},
|
||||||
|
select: selectAnnotation,
|
||||||
|
submit: submitAnnotation,
|
||||||
|
key_space: function() {
|
||||||
|
that.triggerEvent('paused');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
self.$annotations.appendTo(that.$content);
|
||||||
|
|
||||||
|
self.options.selected && setTimeout(function() {
|
||||||
|
selectAnnotation({id: self.options.selected});
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
function getAnnotations() {
|
||||||
|
return self.options.items.filter(function(item) {
|
||||||
|
return self.editing && item.id == self.options.selected || (
|
||||||
|
(
|
||||||
|
self.options.range == 'all' || (
|
||||||
|
self.options.range == 'selection'
|
||||||
|
&& item['in'] < self.options.out
|
||||||
|
&& item.out > self.options['in']
|
||||||
|
) || (
|
||||||
|
self.options.range == 'position'
|
||||||
|
&& item['in'] <= self.options.position
|
||||||
|
&& item.out >= self.options.position
|
||||||
|
)
|
||||||
|
) && (
|
||||||
|
self.options.users == 'all'
|
||||||
|
|| self.options.users.indexOf(item.user) > -1
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSort() {
|
||||||
|
return ({
|
||||||
|
duration: ['-duration', '+in', '+value'],
|
||||||
|
position: ['+in', '-duration', '+value'],
|
||||||
|
text: ['+value', '+in', '-duration']
|
||||||
|
})[self.options.sort];
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAnnotation(data) {
|
||||||
|
var item = Ox.getObjectById(self.options.items, data.id);
|
||||||
|
self.options.selected = item ? data.id : '';
|
||||||
|
that.triggerEvent('select', Ox.extend(data, item ? {
|
||||||
|
'in': item['in'],
|
||||||
|
out: item.out,
|
||||||
|
layer: self.options.id
|
||||||
|
} : {}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitAnnotation(data) {
|
||||||
|
var item = Ox.getObjectById(self.options.items, data.id);
|
||||||
|
item.value = data.value;
|
||||||
|
self.editing = false;
|
||||||
|
Ox.print('??:', self.options.items[0], self.$annotations.options('items')[0])
|
||||||
|
//self.$annotations.options({items: self.options.items});
|
||||||
|
self.options.sort == 'text' && self.$annotations.reloadItems();
|
||||||
|
that.triggerEvent('submit', item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePanel() {
|
||||||
|
self.options.collapsed = !self.options.collapsed;
|
||||||
|
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.setOption = function(key, value) {
|
||||||
|
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
|
||||||
|
var index = Ox.getIndexById(self.options.items, self.options.selected);
|
||||||
|
self.options.items[index][key] = value;
|
||||||
|
self.options.items[index].duration = self.options.out - self.options['in'];
|
||||||
|
}
|
||||||
|
if (key == 'in') {
|
||||||
|
//fixme: array editable should support item updates while editing
|
||||||
|
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||||||
|
items: getAnnotations()
|
||||||
|
});
|
||||||
|
} else if (key == 'out') {
|
||||||
|
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||||||
|
items: getAnnotations()
|
||||||
|
});
|
||||||
|
} else if (key == 'position') {
|
||||||
|
self.editing || self.options.range == 'position' && self.$annotations.options({
|
||||||
|
items: getAnnotations()
|
||||||
|
});
|
||||||
|
} else if (key == 'range') {
|
||||||
|
self.$annotations.options({items: getAnnotations()});
|
||||||
|
} else if (key == 'selected') {
|
||||||
|
self.$annotations.options({selected: value});
|
||||||
|
} else if (key == 'sort') {
|
||||||
|
self.sort = getSort();
|
||||||
|
self.$annotations.options({sort: self.sort});
|
||||||
|
} else if (key == 'users') {
|
||||||
|
Ox.print('USERS ->', value)
|
||||||
|
self.$annotations.options({items: getAnnotations()});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*@
|
||||||
|
addItem <f> addItem
|
||||||
|
@*/
|
||||||
|
that.addItem = function(item) {
|
||||||
|
var pos = 0;
|
||||||
|
self.options.items.splice(pos, 0, item);
|
||||||
|
self.$annotations.addItem(pos, item);
|
||||||
|
self.$annotations.editItem(item.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
that.blurItem = function() {
|
||||||
|
self.$annotations.blurItem();
|
||||||
|
};
|
||||||
|
|
||||||
|
that.editItem = function() {
|
||||||
|
self.$annotations.editItem();
|
||||||
|
};
|
||||||
|
|
||||||
|
/*@
|
||||||
|
removeItems <f> removeItems
|
||||||
|
@*/
|
||||||
|
/*
|
||||||
|
that.removeItem = function(id) {
|
||||||
|
var pos = Ox.getIndexById(self.options.items, id);
|
||||||
|
self.options.items.splice(pos, 1);
|
||||||
|
self.$annotations.removeItems && self.$annotations.removeItems([id]);
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
|
@ -1,20 +1,7 @@
|
||||||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
|
Ox.AnnotationPanel <f> Video Annotation Panel
|
||||||
() -> <f> AnnotationPanel Object
|
|
||||||
(options) -> <f> AnnotationPanel Object
|
|
||||||
(options, self) -> <f> AnnotationPanel Object
|
|
||||||
options <o> Options object
|
|
||||||
editable <b|false> If true, annotations can be added
|
|
||||||
id <s> id
|
|
||||||
items <a|[]> items
|
|
||||||
title <s> title
|
|
||||||
type <s|'text'> panel type
|
|
||||||
width <n|0>
|
|
||||||
self <o> shared private variable
|
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.AnnotationPanel = function(options, self) {
|
Ox.AnnotationPanel = function(options, self) {
|
||||||
|
@ -22,195 +9,287 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
collapsed: false,
|
|
||||||
editable: false,
|
editable: false,
|
||||||
id: '',
|
font: 'small',
|
||||||
'in': 0,
|
layers: [],
|
||||||
item: '',
|
|
||||||
items: [],
|
|
||||||
out: 0,
|
|
||||||
position: 0,
|
|
||||||
range: 'all',
|
range: 'all',
|
||||||
selected: '',
|
selected: '',
|
||||||
|
showFonts: false,
|
||||||
|
showLayers: {},
|
||||||
|
showUsers: false,
|
||||||
sort: 'position',
|
sort: 'position',
|
||||||
title: '',
|
width: 256
|
||||||
type: 'text',
|
|
||||||
width: 0
|
|
||||||
})
|
})
|
||||||
.options(options || {});
|
.options(options || {})
|
||||||
|
.addClass('OxAnnotationPanel');
|
||||||
|
|
||||||
self.sort = getSort();
|
if (self.options.showUsers) {
|
||||||
|
self.users = Ox.sort(Ox.unique(Ox.flatten(
|
||||||
that.setElement(
|
self.options.layers.map(function(layer) {
|
||||||
Ox.CollapsePanel({
|
return layer.items.map(function(item) {
|
||||||
collapsed: self.options.collapsed,
|
return item.user;
|
||||||
extras: self.options.editable ? [
|
});
|
||||||
Ox.Button({
|
|
||||||
id: 'add',
|
|
||||||
style: 'symbol',
|
|
||||||
title: 'add',
|
|
||||||
tooltip: 'Add ' + self.options.item,
|
|
||||||
type: 'image'
|
|
||||||
}).bindEvent({
|
|
||||||
click: function(data) {
|
|
||||||
that.triggerEvent('add', {value: ''});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
] : [],
|
|
||||||
size: 16,
|
|
||||||
title: self.options.title
|
|
||||||
})
|
|
||||||
.addClass('OxAnnotationPanel')
|
|
||||||
.bindEvent({
|
|
||||||
toggle: togglePanel
|
|
||||||
})
|
|
||||||
);
|
|
||||||
that.$content = that.$element.$content;
|
|
||||||
|
|
||||||
if (self.options.type == 'event') {
|
|
||||||
self.$annotations = Ox.Element();
|
|
||||||
} else if (self.options.type == 'place') {
|
|
||||||
self.$annotations = Ox.Element();
|
|
||||||
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
|
|
||||||
self.$annotations = Ox.ArrayEditable({
|
|
||||||
editable: self.options.editable,
|
|
||||||
items: getAnnotations(),
|
|
||||||
selected: self.options.selected,
|
|
||||||
sort: self.sort,
|
|
||||||
submitOnBlur: false,
|
|
||||||
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
|
|
||||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
|
||||||
})
|
})
|
||||||
|
)));
|
||||||
|
self.enabledUsers = 'all';
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$menubar = Ox.Bar({
|
||||||
|
size: 16
|
||||||
|
})
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.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'}
|
||||||
|
],
|
||||||
|
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 = [];
|
||||||
|
|
||||||
|
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({
|
||||||
|
collapsed: !self.options.showLayers[layer.id],
|
||||||
|
editable: self.options.editable,
|
||||||
|
font: self.options.font,
|
||||||
|
'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)
|
||||||
|
)
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
add: function(data) {
|
add: function(data) {
|
||||||
that.triggerEvent('add', {value: data.value || ''});
|
that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
|
||||||
},
|
},
|
||||||
blur: function() {
|
blur: function() {
|
||||||
that.triggerEvent('blur');
|
that.triggerEvent('blur');
|
||||||
},
|
},
|
||||||
'delete': function(data) {
|
|
||||||
that.triggerEvent('remove', {id: data.id});
|
|
||||||
},
|
|
||||||
edit: function() {
|
edit: function() {
|
||||||
self.editing = true;
|
that.triggerEvent('edit')
|
||||||
that.triggerEvent('edit');
|
|
||||||
},
|
},
|
||||||
select: selectAnnotation,
|
paused: function() {
|
||||||
submit: submitAnnotation,
|
that.triggerEvent('paused')
|
||||||
key_space: function() {
|
},
|
||||||
that.triggerEvent('paused');
|
'remove': function(data) {
|
||||||
|
that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
|
||||||
|
},
|
||||||
|
select: function(data) {
|
||||||
|
selectAnnotation(data, i);
|
||||||
|
},
|
||||||
|
submit: function(data) {
|
||||||
|
that.triggerEvent('submit', data);
|
||||||
|
},
|
||||||
|
toggle: function(data) {
|
||||||
|
that.triggerEvent('toggle', Ox.extend({layer: layer.id}, data));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo(self.$folders);
|
||||||
|
});
|
||||||
|
|
||||||
|
that.setElement(
|
||||||
|
Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: self.$menubar,
|
||||||
|
size: 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: self.$folders
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: 'vertical'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
resize: resizeAnnotations,
|
||||||
|
resizeend: resizeendAnnotations,
|
||||||
|
toggle: toggleAnnotations
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
function getFolder(annotationId) {
|
||||||
|
var found = false, folder;
|
||||||
|
Ox.forEach(self.options.layers, function(layer, i) {
|
||||||
|
Ox.forEach(layer.items, function(item) {
|
||||||
|
if (item.id == annotationId) {
|
||||||
|
folder = self.$folder[i];
|
||||||
|
found = true;
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
return !found;
|
||||||
self.$annotations.appendTo(that.$content);
|
|
||||||
|
|
||||||
self.options.selected && setTimeout(function() {
|
|
||||||
selectAnnotation({id: self.options.selected});
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
function getAnnotations() {
|
|
||||||
return self.options.items.filter(function(item) {
|
|
||||||
return self.options.range == 'all' || (
|
|
||||||
self.options.range == 'selection'
|
|
||||||
&& item['in'] < self.options.out
|
|
||||||
&& item.out > self.options['in']
|
|
||||||
) || (
|
|
||||||
self.options.range == 'position'
|
|
||||||
&& item['in'] <= self.options.position
|
|
||||||
&& item.out >= self.options.position
|
|
||||||
) || self.editing && item.id == self.options.selected
|
|
||||||
});
|
});
|
||||||
|
return folder;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSort() {
|
function selectAnnotation(data, index) {
|
||||||
return ({
|
var height, scrollTop;
|
||||||
duration: ['-duration', '+in', '+value'],
|
if (data.id) {
|
||||||
position: ['+in', '-duration', '+value'],
|
self.$folder.forEach(function($folder, i) {
|
||||||
text: ['+value', '+in', '-duration']
|
i != index && $folder.options({selected: ''});
|
||||||
})[self.options.sort];
|
});
|
||||||
|
}
|
||||||
|
if (data.top) {
|
||||||
|
height = self.$folders.height();
|
||||||
|
scrollTop = self.$folders.scrollTop();
|
||||||
|
data.top -= 60; // 20 + 24 + 16
|
||||||
|
Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
|
||||||
|
if (data.top < 0 || data.top > height - 16) {
|
||||||
|
if (data.top < 0) {
|
||||||
|
scrollTop += data.top - 3;
|
||||||
|
} else if (data.top > height - 16) {
|
||||||
|
scrollTop += data.top - height + 14;
|
||||||
|
}
|
||||||
|
self.$folders.animate({
|
||||||
|
scrollTop: scrollTop + 'px'
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
that.triggerEvent('select', data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectAnnotation(data) {
|
function resizeAnnotations() {
|
||||||
var item = Ox.getObjectById(self.options.items, data.id);
|
|
||||||
self.options.selected = item ? data.id : '';
|
|
||||||
that.triggerEvent('select', Ox.extend(data, item ? {
|
|
||||||
'in': item['in'],
|
|
||||||
out: item.out,
|
|
||||||
layer: self.options.id
|
|
||||||
} : {}));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitAnnotation(data) {
|
function resizeendAnnotations() {
|
||||||
var item = Ox.getObjectById(self.options.items, data.id);
|
|
||||||
item.value = data.value;
|
|
||||||
self.editing = false;
|
|
||||||
self.$annotations.options({items: self.options.items});
|
|
||||||
that.triggerEvent('submit', item);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function togglePanel() {
|
function toggleAnnotations() {
|
||||||
self.options.collapsed = !self.options.collapsed;
|
|
||||||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
}
|
||||||
|
|
||||||
|
function updateEditMenu() {
|
||||||
|
var action = self.options.selected ? 'enableItem' : 'disableItem';
|
||||||
|
self.$editMenuButton[action]('edit');
|
||||||
|
self.$editMenuButton[action]('delete');
|
||||||
}
|
}
|
||||||
|
|
||||||
self.setOption = function(key, value) {
|
self.setOption = function(key, value) {
|
||||||
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
|
if (['in', 'out', 'position'].indexOf(key) > -1) {
|
||||||
var index = Ox.getIndexById(self.options.items, self.options.selected);
|
self.$folder.forEach(function($folder) {
|
||||||
self.options.items[index][key] = value;
|
$folder.options(key, value);
|
||||||
self.options.items[index].duration = self.options.out - self.options['in'];
|
|
||||||
}
|
|
||||||
if (key == 'in') {
|
|
||||||
//fixme: array editable should support item updates while editing
|
|
||||||
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
|
||||||
items: getAnnotations()
|
|
||||||
});
|
|
||||||
} else if (key == 'out') {
|
|
||||||
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
|
||||||
items: getAnnotations()
|
|
||||||
});
|
|
||||||
} else if (key == 'position') {
|
|
||||||
self.editing || self.options.range == 'position' && self.$annotations.options({
|
|
||||||
items: getAnnotations()
|
|
||||||
});
|
|
||||||
} else if (key == 'range') {
|
|
||||||
self.$annotations.options({
|
|
||||||
items: getAnnotations()
|
|
||||||
});
|
});
|
||||||
} else if (key == 'selected') {
|
} else if (key == 'selected') {
|
||||||
self.$annotations.options({selected: value});
|
self.options.editable && updateEditMenu();
|
||||||
} else if (key == 'sort') {
|
if (value) {
|
||||||
self.sort = getSort();
|
getFolder(value).options({selected: value});
|
||||||
self.$annotations.options({sort: self.sort});
|
} else {
|
||||||
|
self.$folder.forEach(function($folder) {
|
||||||
|
$folder.options({selected: ''});
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
that.addItem = function(layer, item) {
|
||||||
addItem <f> addItem
|
var i = Ox.getIndexById(self.options.layers, layer);
|
||||||
@*/
|
self.$folder[i].addItem(item);
|
||||||
that.addItem = function(item) {
|
|
||||||
var pos = 0;
|
|
||||||
self.options.items.splice(pos, 0, item);
|
|
||||||
self.$annotations.addItem(pos, item);
|
|
||||||
self.$annotations.editItem(item.id);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
that.blurItem = function() {
|
that.blurItem = function() {
|
||||||
self.$annotations.blurItem();
|
getFolder(self.options.selected).blurItem();
|
||||||
};
|
};
|
||||||
|
|
||||||
that.editItem = function(id) {
|
that.editItem = function() {
|
||||||
self.$annotations.editItem(id);
|
getFolder(self.options.selected).editItem();
|
||||||
};
|
|
||||||
|
|
||||||
/*@
|
|
||||||
removeItems <f> removeItems
|
|
||||||
@*/
|
|
||||||
that.removeItem = function(id) {
|
|
||||||
var pos = Ox.getIndexById(self.options.items, id);
|
|
||||||
self.options.items.splice(pos, 1);
|
|
||||||
self.$annotations.removeItems && self.$annotations.removeItems([id]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
|
@ -20,7 +20,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.defaults({
|
.defaults({
|
||||||
annotationsFont: 'small',
|
annotationsFont: 'small',
|
||||||
annotationsRange: 'all',
|
annotationsRange: 'all',
|
||||||
annotationsSize: 0,
|
annotationsSize: 256,
|
||||||
annotationsSort: 'position',
|
annotationsSort: 'position',
|
||||||
censored: [],
|
censored: [],
|
||||||
cuts: [],
|
cuts: [],
|
||||||
|
@ -44,6 +44,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
showAnnotations: false,
|
showAnnotations: false,
|
||||||
showLargeTimeline: true,
|
showLargeTimeline: true,
|
||||||
showLayers: {},
|
showLayers: {},
|
||||||
|
showUsers: false,
|
||||||
subtitles: [],
|
subtitles: [],
|
||||||
tooltips: false,
|
tooltips: false,
|
||||||
videoRatio: 16/9,
|
videoRatio: 16/9,
|
||||||
|
@ -98,7 +99,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
if (self.editing) {
|
if (self.editing) {
|
||||||
blurAnnotation();
|
blurAnnotation();
|
||||||
} else if (self.options.selected) {
|
} else if (self.options.selected) {
|
||||||
deselectAnnotation();
|
selectAnnotation({id: ''});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
key_f: function() {
|
key_f: function() {
|
||||||
|
@ -343,87 +344,19 @@ Ox.VideoEditor = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$editor);
|
.appendTo(self.$editor);
|
||||||
|
|
||||||
self.$annotations = Ox.Element()
|
self.$menubar = Ox.Bar({
|
||||||
.css({
|
size: 16
|
||||||
overflowY: 'auto'
|
})
|
||||||
});
|
.addClass('OxVideoPlayer');
|
||||||
self.$annotationPanel = [];
|
|
||||||
|
|
||||||
self.options.layers.forEach(function(layer, i) {
|
|
||||||
var item = Ox.getObjectById(layer.items, self.options.selected),
|
|
||||||
selected = item ? item.id : '';
|
|
||||||
self.$annotationPanel[i] = Ox.AnnotationPanel(
|
|
||||||
Ox.extend({
|
|
||||||
collapsed: !self.options.showLayers[layer.id],
|
|
||||||
font: self.options.annotationsFont,
|
|
||||||
'in': self.options['in'],
|
|
||||||
out: self.options.out,
|
|
||||||
position: self.options.position,
|
|
||||||
range: self.options.annotationsRange,
|
|
||||||
selected: selected,
|
|
||||||
sort: self.options.annotationsSort,
|
|
||||||
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
|
|
||||||
}, layer)
|
|
||||||
)
|
|
||||||
.bindEvent({
|
|
||||||
add: function(data) {
|
|
||||||
addAnnotation(layer.id);
|
|
||||||
},
|
|
||||||
blur: function() {
|
|
||||||
//Ox.print('VIDEO EDITOR BLUR FOCUSED?', self.focused)
|
|
||||||
if (self.focused) {
|
|
||||||
// ...
|
|
||||||
} else {
|
|
||||||
self.editing = false;
|
|
||||||
setTimelineState();
|
|
||||||
this.blurItem();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
edit: function() {
|
|
||||||
self.editing = true;
|
|
||||||
setTimelineState();
|
|
||||||
},
|
|
||||||
paused: togglePaused,
|
|
||||||
remove: function(data) {
|
|
||||||
that.triggerEvent('removeannotation', {
|
|
||||||
id: data.id,
|
|
||||||
layer: layer.id
|
|
||||||
});
|
|
||||||
},
|
|
||||||
select: function(data) {
|
|
||||||
if (data.id) {
|
|
||||||
self.options.layers.forEach(function(layer_, i_) {
|
|
||||||
if (i_ != i) {
|
|
||||||
self.$annotationPanel[i_].options({selected: ''});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
that.gainFocus();
|
|
||||||
}
|
|
||||||
selectAnnotation(data);
|
|
||||||
},
|
|
||||||
submit: submitAnnotation,
|
|
||||||
toggle: function(data) {
|
|
||||||
that.triggerEvent('togglelayer', {
|
|
||||||
collapsed: data.collapsed,
|
|
||||||
layer: layer.id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.appendTo(self.$annotations);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.$videobar = Ox.Bar({
|
|
||||||
size: 16
|
|
||||||
}).addClass('OxVideoPlayer');
|
|
||||||
|
|
||||||
self.resolutions = [];
|
self.resolutions = [];
|
||||||
Ox.forEach(self.options.video, function(url, resolution) {
|
Ox.forEach(self.options.video, function(url, resolution) {
|
||||||
Ox.Log('Video', url, resolution);
|
Ox.Log('Video', url, resolution);
|
||||||
self.resolutions.push(
|
self.resolutions.push({
|
||||||
{id: resolution + '', title: resolution + 'p',
|
id: resolution + '',
|
||||||
checked: self.options.resolution == resolution}
|
title: resolution + 'p',
|
||||||
);
|
checked: self.options.resolution == resolution
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
|
self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
|
||||||
|
@ -526,32 +459,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$selectButton = Ox.Button({
|
|
||||||
style: 'symbol',
|
|
||||||
title: 'select',
|
|
||||||
type: 'image'
|
|
||||||
})
|
|
||||||
.css({float: 'left'})
|
|
||||||
.bindEvent({
|
|
||||||
click: function() {
|
|
||||||
self.$menuButton.find('input').trigger('click')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//.appendTo(self.$videobar);
|
|
||||||
|
|
||||||
|
|
||||||
self.$resolutionSelect = Ox.Select({
|
|
||||||
items: self.resolutions,
|
|
||||||
width: 48,
|
|
||||||
})
|
|
||||||
.css({float: 'left'})
|
|
||||||
.bindEvent({
|
|
||||||
change: function(data) {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//.appendTo(self.$videobar);
|
|
||||||
|
|
||||||
if (self.options.posterFrameControls) {
|
if (self.options.posterFrameControls) {
|
||||||
|
|
||||||
|
@ -567,7 +475,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
setPosition(self.options.posterFrame);
|
setPosition(self.options.posterFrame);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$setPosterButton = Ox.Button({
|
self.$setPosterButton = Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
@ -584,7 +492,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.$unlockPosterButton.toggle();
|
self.$unlockPosterButton.toggle();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$unlockPosterButton = Ox.Button({
|
self.$unlockPosterButton = Ox.Button({
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
|
@ -601,7 +509,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.$setPosterButton.toggleOption('disabled');
|
self.$setPosterButton.toggleOption('disabled');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -619,7 +527,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
submitFindInput('');
|
submitFindInput('');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$findInput = Ox.Input({
|
self.$findInput = Ox.Input({
|
||||||
autocomplete: self.words,
|
autocomplete: self.words,
|
||||||
|
@ -642,22 +550,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
submitFindInput(data.value, true);
|
submitFindInput(data.value, true);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$findButton = Ox.Button({
|
|
||||||
//disabled: true,
|
|
||||||
style: 'symbol',
|
|
||||||
title: 'find',
|
|
||||||
tooltip: 'Find',
|
|
||||||
type: 'image'
|
|
||||||
})
|
|
||||||
.css({float: 'right'})
|
|
||||||
.bindEvent({
|
|
||||||
click: function() {
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//.appendTo(self.$videobar);
|
|
||||||
|
|
||||||
self.$nextButton = Ox.Button({
|
self.$nextButton = Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
@ -672,7 +565,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
setPosition(getNextPosition('result', 1));
|
setPosition(getNextPosition('result', 1));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$previousButton = Ox.Button({
|
self.$previousButton = Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
|
@ -687,83 +580,68 @@ Ox.VideoEditor = function(options, self) {
|
||||||
setPosition(getNextPosition('result', -1));
|
setPosition(getNextPosition('result', -1));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$menubar);
|
||||||
|
|
||||||
self.$results = $('<div>')
|
self.$results = $('<div>')
|
||||||
.css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25})
|
.css({float: 'right', width: '36px', padding: '2px 4px 0 0', fontSize: '9px', textAlign: 'right', cursor: 'default', opacity: 0.25})
|
||||||
.html('0')
|
.html('0')
|
||||||
.appendTo(self.$videobar.$element);
|
.appendTo(self.$menubar.$element);
|
||||||
|
|
||||||
self.$annotationsbar = Ox.Bar({
|
self.$annotationPanel = Ox.AnnotationPanel({
|
||||||
size: 16
|
editable: true,
|
||||||
}).addClass('OxVideoPlayer');
|
font: self.options.annotationsFont,
|
||||||
|
'in': self.options['in'],
|
||||||
self.$annotationsMenuButton = Ox.MenuButton({
|
layers: self.options.layers,
|
||||||
items: [
|
out: self.options.out,
|
||||||
{id: 'showannotations', title: 'Show Annotations', disabled: true},
|
position: self.options.position,
|
||||||
{group: 'range', min: 1, max: 1, items: [
|
range: self.options.annotationsRange,
|
||||||
{id: 'position', title: 'At Current Position', checked: self.options.annotationsRange == 'position'},
|
selected: self.options.selected,
|
||||||
{id: 'selection', title: 'In Current Selection', checked: self.options.annotationsRange == 'selection'},
|
sort: self.options.annotationsSort,
|
||||||
{id: 'all', title: 'All', checked: self.options.annotationsRange == 'all'}
|
showLayers: self.options.showLayers,
|
||||||
]},
|
showUsers: self.options.showUsers,
|
||||||
{},
|
width: self.options.annotationsSize
|
||||||
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
|
||||||
{group: 'sort', min: 1, max: 1, items: [
|
|
||||||
{id: 'position', title: 'By Position', checked: self.options.annotationsSort == 'position'},
|
|
||||||
{id: 'duration', title: 'By Duration', checked: self.options.annotationsSort == 'duration'},
|
|
||||||
{id: 'text', title: 'By Text', checked: self.options.annotationsSort == 'text'}
|
|
||||||
]},
|
|
||||||
{},
|
|
||||||
{id: 'fontsize', title: 'Font Size', disabled: true},
|
|
||||||
{group: 'font', min: 1, max: 1, items: [
|
|
||||||
{id: 'small', title: 'Small', checked: self.options.annotationsFont == 'small'},
|
|
||||||
{id: 'medium', title: 'Medium', checked: self.options.annotationsFont == 'medium'},
|
|
||||||
{id: 'large', title: 'Large', checked: self.options.annotationsFont == 'large'}
|
|
||||||
]}
|
|
||||||
],
|
|
||||||
style: 'square',
|
|
||||||
title: 'set',
|
|
||||||
tooltip: 'Actions and Settings',
|
|
||||||
type: 'image'
|
|
||||||
})
|
})
|
||||||
.css({float: 'left'})
|
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
add: function(data) {
|
||||||
var set = {};
|
addAnnotation(data.layer);
|
||||||
set[data.id] = data.checked[0].id;
|
},
|
||||||
self.$annotationPanel.forEach(function($panel) {
|
annotationsfont: function(data) {
|
||||||
$panel.options(set);
|
that.triggerEvent('annotationsfont', data);
|
||||||
|
},
|
||||||
|
annotationsrange: function(data) {
|
||||||
|
that.triggerEvent('annotationsrange', data);
|
||||||
|
},
|
||||||
|
annotationssort: function(data) {
|
||||||
|
that.triggerEvent('annotationssort', data);
|
||||||
|
},
|
||||||
|
blur: function() {
|
||||||
|
Ox.print('VE-BLUR')
|
||||||
|
self.editing = false;
|
||||||
|
setTimelineState();
|
||||||
|
},
|
||||||
|
edit: function() {
|
||||||
|
self.editing = true;
|
||||||
|
setTimelineState();
|
||||||
|
},
|
||||||
|
paused: togglePaused,
|
||||||
|
remove: function(data) {
|
||||||
|
that.triggerEvent('removeannotation', {
|
||||||
|
id: data.id,
|
||||||
|
layer: data.layer
|
||||||
|
});
|
||||||
|
},
|
||||||
|
select: function(data) {
|
||||||
|
!data.id && that.gainFocus();
|
||||||
|
selectAnnotation(data);
|
||||||
|
},
|
||||||
|
submit: submitAnnotation,
|
||||||
|
toggle: function(data) {
|
||||||
|
that.triggerEvent('togglelayer', {
|
||||||
|
collapsed: data.collapsed,
|
||||||
|
layer: data.layer
|
||||||
});
|
});
|
||||||
that.triggerEvent('annotations' + Ox.toTitleCase(data.id), set);
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
.appendTo(self.$annotationsbar);
|
|
||||||
|
|
||||||
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'}
|
|
||||||
],
|
|
||||||
style: 'square',
|
|
||||||
title: 'edit',
|
|
||||||
tooltip: 'Editing Options',
|
|
||||||
type: 'image'
|
|
||||||
})
|
|
||||||
.css({float: 'right'})
|
|
||||||
.bindEvent({
|
|
||||||
click: function(data) {
|
|
||||||
if (data.id == 'delete') {
|
|
||||||
|
|
||||||
} else if (data.id == 'edit') {
|
|
||||||
editAnnotation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.appendTo(self.$annotationsbar);
|
|
||||||
|
|
||||||
that.setElement(
|
that.setElement(
|
||||||
Ox.SplitPanel({
|
Ox.SplitPanel({
|
||||||
|
@ -772,7 +650,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
element: Ox.SplitPanel({
|
element: Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: self.$videobar,
|
element: self.$menubar,
|
||||||
size: 16
|
size: 16
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -785,23 +663,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
{
|
{
|
||||||
collapsed: !self.options.showAnnotations,
|
collapsed: !self.options.showAnnotations,
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
element: Ox.SplitPanel({
|
element: self.$annotationPanel,
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: self.$annotationsbar,
|
|
||||||
size: 16
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: self.$annotations,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: 'vertical'
|
|
||||||
})
|
|
||||||
.bindEvent({
|
|
||||||
resize: resizeAnnotations,
|
|
||||||
resizeend: resizeendAnnotations,
|
|
||||||
toggle: toggleAnnotations
|
|
||||||
}),
|
|
||||||
resizable: true,
|
resizable: true,
|
||||||
resize: [192, 256, 320, 384],
|
resize: [192, 256, 320, 384],
|
||||||
size: self.options.annotationsSize,
|
size: self.options.annotationsSize,
|
||||||
|
@ -830,19 +692,13 @@ Ox.VideoEditor = function(options, self) {
|
||||||
function blurAnnotation() {
|
function blurAnnotation() {
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
getPanel(self.options.selected).blurItem(self.options.selected);
|
self.$annotationPanel.blurItem();
|
||||||
}
|
|
||||||
|
|
||||||
function deselectAnnotation() {
|
|
||||||
// FIXME: there is selectAnnotation({id: ''})
|
|
||||||
self.options.selected = '';
|
|
||||||
setTimelineState();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function editAnnotation() {
|
function editAnnotation() {
|
||||||
self.editing = true;
|
self.editing = true;
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
getPanel(self.options.selected).editItem(self.options.selected);
|
self.$annotationPanel.editItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
function find(query) {
|
function find(query) {
|
||||||
|
@ -929,21 +785,6 @@ Ox.VideoEditor = function(options, self) {
|
||||||
return position;
|
return position;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPanel(annotationId) {
|
|
||||||
var found = false, panel;
|
|
||||||
Ox.forEach(self.options.layers, function(layer, i) {
|
|
||||||
Ox.forEach(layer.items, function(item) {
|
|
||||||
if (item.id == annotationId) {
|
|
||||||
panel = self.$annotationPanel[i];
|
|
||||||
found = true;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return !found;
|
|
||||||
});
|
|
||||||
return panel;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
function getPoints(type) {
|
function getPoints(type) {
|
||||||
var found = false,
|
var found = false,
|
||||||
|
@ -1092,36 +933,21 @@ Ox.VideoEditor = function(options, self) {
|
||||||
function selectAnnotation(data) {
|
function selectAnnotation(data) {
|
||||||
//Ox.print('VE.sA')
|
//Ox.print('VE.sA')
|
||||||
if (Ox.isUndefined(data)) {
|
if (Ox.isUndefined(data)) {
|
||||||
|
// doubleclick on small timeline
|
||||||
data = getAnnotation();
|
data = getAnnotation();
|
||||||
}
|
}
|
||||||
self.editing = false;
|
self.editing = false;
|
||||||
self.options.selected = data.id;
|
self.options.selected = data.id;
|
||||||
|
// fixme: what is the following supposed to do?
|
||||||
if (self.options.selected && self.options.annotationsRange != 'position') {
|
if (self.options.selected && self.options.annotationsRange != 'position') {
|
||||||
setPosition(data['in']);
|
setPosition(data['in']);
|
||||||
}
|
}
|
||||||
if (self.options.selected) {
|
if (self.options.selected) {
|
||||||
setPoint('in', data['in']);
|
setPoint('in', data['in']);
|
||||||
setPoint('out', data.out);
|
setPoint('out', data.out);
|
||||||
getPanel(self.options.selected).options({selected: self.options.selected});
|
|
||||||
}
|
}
|
||||||
|
self.$annotationPanel.options({selected: self.options.selected});
|
||||||
setTimelineState();
|
setTimelineState();
|
||||||
updateEditMenu();
|
|
||||||
if (data.top) {
|
|
||||||
var height = self.$annotations.height(),
|
|
||||||
scrollTop = self.$annotations.scrollTop();
|
|
||||||
data.top -= 60; // 20 + 24 + 16
|
|
||||||
Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
|
|
||||||
if (data.top < 0 || data.top > height - 16) {
|
|
||||||
if (data.top < 0) {
|
|
||||||
scrollTop += data.top - 3;
|
|
||||||
} else if (data.top > height - 16) {
|
|
||||||
scrollTop += data.top - height + 14;
|
|
||||||
}
|
|
||||||
self.$annotations.animate({
|
|
||||||
scrollTop: scrollTop + 'px'
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
that.triggerEvent('select', {
|
that.triggerEvent('select', {
|
||||||
id: self.options.selected
|
id: self.options.selected
|
||||||
});
|
});
|
||||||
|
@ -1169,11 +995,9 @@ Ox.VideoEditor = function(options, self) {
|
||||||
if (self.options['in'] > self.options.out) {
|
if (self.options['in'] > self.options.out) {
|
||||||
setPoint(point == 'in' ? 'out' : 'in', position);
|
setPoint(point == 'in' ? 'out' : 'in', position);
|
||||||
}
|
}
|
||||||
self.$annotationPanel.forEach(function($panel) {
|
self.$annotationPanel.options({
|
||||||
$panel.options({
|
'in': self.options['in'],
|
||||||
'in': self.options['in'],
|
out: self.options.out
|
||||||
out: self.options.out
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
that.triggerEvent('points', {
|
that.triggerEvent('points', {
|
||||||
'in': self.options['in'],
|
'in': self.options['in'],
|
||||||
|
@ -1198,10 +1022,8 @@ Ox.VideoEditor = function(options, self) {
|
||||||
position: self.options.position
|
position: self.options.position
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
self.$annotationPanel.forEach(function($panel) {
|
self.$annotationPanel.options({
|
||||||
$panel.options({
|
position: self.options.position
|
||||||
position: self.options.position
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
!playing && that.triggerEvent('position', {
|
!playing && that.triggerEvent('position', {
|
||||||
position: self.options.position
|
position: self.options.position
|
||||||
|
@ -1307,15 +1129,8 @@ Ox.VideoEditor = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateEditMenu() {
|
|
||||||
var action = self.options.selected ? 'enableItem' : 'disableItem';
|
|
||||||
self.$editMenuButton[action]('edit');
|
|
||||||
self.$editMenuButton[action]('delete');
|
|
||||||
}
|
|
||||||
|
|
||||||
self.setOption = function(key, value) {
|
self.setOption = function(key, value) {
|
||||||
if (key == 'width' || key == 'height') {
|
if (key == 'width' || key == 'height') {
|
||||||
Ox.Log('Video', 'XXXX setSizes', key, value, self.options.width, self.options.height)
|
|
||||||
setSizes();
|
setSizes();
|
||||||
} else if (key == 'position') {
|
} else if (key == 'position') {
|
||||||
setPosition(value);
|
setPosition(value);
|
||||||
|
@ -1328,11 +1143,10 @@ Ox.VideoEditor = function(options, self) {
|
||||||
addAnnotation <f> add annotation
|
addAnnotation <f> add annotation
|
||||||
(layer, item) -> <o> add annotation to layer
|
(layer, item) -> <o> add annotation to layer
|
||||||
layer <s> layer id
|
layer <s> layer id
|
||||||
item <o> annotation to add
|
annotation <o> annotation to add
|
||||||
@*/
|
@*/
|
||||||
that.addAnnotation = function(layer, item) {
|
that.addAnnotation = function(layer, annotation) {
|
||||||
var i = Ox.getIndexById(self.options.layers, layer);
|
self.$annotationPanel.addItem(layer, annotation);
|
||||||
self.$annotationPanel[i].addItem(item);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
@ -1341,10 +1155,12 @@ Ox.VideoEditor = function(options, self) {
|
||||||
layer <s> layer id
|
layer <s> layer id
|
||||||
ids <a> array of item ids to remove
|
ids <a> array of item ids to remove
|
||||||
@*/
|
@*/
|
||||||
|
/*
|
||||||
that.removeAnnotation = function(layer, id) {
|
that.removeAnnotation = function(layer, id) {
|
||||||
var i = Ox.getIndexById(self.options.layers, layer);
|
var i = Ox.getIndexById(self.options.layers, layer);
|
||||||
self.$annotationPanel[i].removeItem(id);
|
self.$annotationPanel[i].removeItem(id);
|
||||||
};
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -11,20 +11,25 @@ Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
|
||||||
self <o> shared private variable
|
self <o> shared private variable
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.VideoPanelPlayer = function(options, self) {
|
Ox.VideoPanel = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
annotationsFont: 'small',
|
||||||
|
annotationsRange: 'all',
|
||||||
annotationsSize: 256,
|
annotationsSize: 256,
|
||||||
|
annotationsSort: 'position',
|
||||||
censored: [],
|
censored: [],
|
||||||
|
cuts: [],
|
||||||
duration: 0,
|
duration: 0,
|
||||||
enableSubtitles: false,
|
enableSubtitles: false,
|
||||||
find: '',
|
find: '',
|
||||||
fullscreen: false,
|
fullscreen: false,
|
||||||
height: 0,
|
height: 0,
|
||||||
'in': 0,
|
'in': 0,
|
||||||
loop: false,
|
layers: [],
|
||||||
|
loop: false, // fixme: used?
|
||||||
muted: false,
|
muted: false,
|
||||||
out: 0,
|
out: 0,
|
||||||
paused: false,
|
paused: false,
|
||||||
|
@ -33,7 +38,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
poster: '',
|
poster: '',
|
||||||
resolution: 0,
|
resolution: 0,
|
||||||
scaleToFill: false,
|
scaleToFill: false,
|
||||||
showAnnotations: true,
|
showAnnotations: false,
|
||||||
showTimeline: true,
|
showTimeline: true,
|
||||||
subtitles: [],
|
subtitles: [],
|
||||||
tooltips: false,
|
tooltips: false,
|
||||||
|
@ -54,7 +59,6 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
self.fullscreen = false;
|
self.fullscreen = false;
|
||||||
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
|
|
||||||
|
|
||||||
self.$player = Ox.Element()
|
self.$player = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
|
@ -142,7 +146,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
|
|
||||||
self.$panel = Ox.SplitPanel({
|
self.$videoPanel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: self.$player
|
element: self.$player
|
||||||
|
@ -161,7 +165,14 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
resize: resizePanel
|
resize: resizePanel
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$annotations = Ox.Element()
|
self.$annotationPanel = Ox.AnnotationPanel({
|
||||||
|
font: self.options.annotationsFont,
|
||||||
|
layers: self.options.layers,
|
||||||
|
range: self.options.annotationsRange,
|
||||||
|
showFonts: true,
|
||||||
|
showLayers: self.options.showLayers,
|
||||||
|
sort: self.options.annotationsSort
|
||||||
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
resize: resizeAnnotations,
|
resize: resizeAnnotations,
|
||||||
resizeend: resizeendAnnotations,
|
resizeend: resizeendAnnotations,
|
||||||
|
@ -171,12 +182,12 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
that.$element = Ox.SplitPanel({
|
that.$element = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: self.$panel
|
element: self.$videoPanel
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
collapsed: !self.options.showAnnotations,
|
collapsed: !self.options.showAnnotations,
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
element: self.$annotations,
|
element: self.$annotationPanel,
|
||||||
resizable: true,
|
resizable: true,
|
||||||
resize: [192, 256, 320, 384],
|
resize: [192, 256, 320, 384],
|
||||||
size: self.options.annotationsSize,
|
size: self.options.annotationsSize,
|
||||||
|
@ -292,7 +303,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
} else if (key == 'showAnnotations') {
|
} else if (key == 'showAnnotations') {
|
||||||
that.$element.toggle(1);
|
that.$element.toggle(1);
|
||||||
} else if (key == 'showTimeline') {
|
} else if (key == 'showTimeline') {
|
||||||
self.$panel.toggle(1);
|
self.$videoPanel.toggle(1);
|
||||||
} else if (key == 'width') {
|
} else if (key == 'width') {
|
||||||
self.$video.options({
|
self.$video.options({
|
||||||
width: getPlayerWidth()
|
width: getPlayerWidth()
|
||||||
|
@ -318,7 +329,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
() -> <o> toggle visibility of timeline
|
() -> <o> toggle visibility of timeline
|
||||||
@*/
|
@*/
|
||||||
that.toggleTimeline = function() {
|
that.toggleTimeline = function() {
|
||||||
self.$panel.toggle(1);
|
self.$videoPanel.toggle(1);
|
||||||
};
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
|
@ -739,16 +739,16 @@ Video
|
||||||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
|
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
|
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
|
||||||
background: rgb(192, 192, 255);
|
background: rgb(192, 192, 255);
|
||||||
box-shadow: 0 0 1px rgb(64, 64, 64);
|
box-shadow: 0 0 1px rgb(64, 64, 64);
|
||||||
}
|
}
|
||||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
|
.OxThemeClassic .OxAnnotationFolder .OxEditableElement input {
|
||||||
background: rgb(160, 224, 160);
|
background: rgb(160, 224, 160);
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
box-shadow: 0 0 1px rgb(64, 64, 64);
|
box-shadow: 0 0 1px rgb(64, 64, 64);
|
||||||
}
|
}
|
||||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement textarea {
|
.OxThemeClassic .OxAnnotationFolder .OxEditableElement textarea {
|
||||||
background: rgb(160, 224, 160);
|
background: rgb(160, 224, 160);
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
|
@ -760,16 +760,16 @@ Video
|
||||||
//display: none;
|
//display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
|
.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxSelected {
|
||||||
background: rgb(64, 64, 192);
|
background: rgb(64, 64, 192);
|
||||||
box-shadow: 0 0 1px rgb(255, 255, 255);
|
box-shadow: 0 0 1px rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
|
.OxThemeModern .OxAnnotationFolder .OxEditableElement input {
|
||||||
background: rgb(64, 128, 64);
|
background: rgb(64, 128, 64);
|
||||||
color: rgb(255, 255, 255);
|
color: rgb(255, 255, 255);
|
||||||
box-shadow: 0 0 1px rgb(255, 255, 255);
|
box-shadow: 0 0 1px rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement textarea {
|
.OxThemeModern .OxAnnotationFolder .OxEditableElement textarea {
|
||||||
background: rgb(64, 128, 64);
|
background: rgb(64, 128, 64);
|
||||||
color: rgb(255, 255, 255);
|
color: rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
|
|
|
@ -103,7 +103,7 @@ Ox.range = function() {
|
||||||
? Ox.pad(matches[val], len)
|
? Ox.pad(matches[val], len)
|
||||||
+ val.toString().substr(matches[val].length)
|
+ val.toString().substr(matches[val].length)
|
||||||
: val
|
: val
|
||||||
).toLowerCase();
|
).toLowerCase().replace(/^\W+/, '');
|
||||||
});
|
});
|
||||||
return sort;
|
return sort;
|
||||||
}
|
}
|
||||||
|
@ -114,8 +114,8 @@ Ox.range = function() {
|
||||||
(arr, fn) -> Sorted array
|
(arr, fn) -> Sorted array
|
||||||
arr <a> Array
|
arr <a> Array
|
||||||
fn <f|u> Optional map function that returns the value for the array element
|
fn <f|u> Optional map function that returns the value for the array element
|
||||||
> Ox.sort(['10', '9', 'B', 'a'])
|
> Ox.sort(['"z"', '10', '9', 'B', 'a'])
|
||||||
['9', '10', 'a', 'B']
|
['9', '10', 'a', 'B', '"z"']
|
||||||
> Ox.sort([{id: 0, name: '80 Days'}, {id: 1, name: '8 Women'}], function(v) {return v.name})
|
> Ox.sort([{id: 0, name: '80 Days'}, {id: 1, name: '8 Women'}], function(v) {return v.name})
|
||||||
[{id: 1, name: '8 Women'}, {id: 0, name: '80 Days'}]
|
[{id: 1, name: '8 Women'}, {id: 0, name: '80 Days'}]
|
||||||
@*/
|
@*/
|
||||||
|
@ -153,7 +153,7 @@ Ox.range = function() {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
by.map(function(v) {
|
by.map(function(v) {
|
||||||
return v.key
|
return v.key;
|
||||||
}).forEach(function(key) {
|
}).forEach(function(key) {
|
||||||
values[key] = getSortValues(arr.map(function(v) {
|
values[key] = getSortValues(arr.map(function(v) {
|
||||||
return v[key];
|
return v[key];
|
||||||
|
|
Loading…
Reference in a new issue