- remove editItem from Ox.List
- use ArrayEditable for text too
This commit is contained in:
parent
66934d22a9
commit
093edd57d0
12 changed files with 180 additions and 403 deletions
|
@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
items: [],
|
||||
position: -1,
|
||||
selected: '',
|
||||
type: 'input',
|
||||
width: 256
|
||||
})
|
||||
.options(options || {})
|
||||
|
@ -40,10 +41,14 @@ Ox.ArrayEditable = function(options, self) {
|
|||
|
||||
function anyclick(e) {
|
||||
var $target = $(e.target),
|
||||
$parent = $target.parent();
|
||||
$target.is(':not(input)') && that.gainFocus();
|
||||
$parent = $target.parent(),
|
||||
position = $parent.data('position');
|
||||
!$target.is('.OxInput') && that.gainFocus();
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
selectItem($parent.data('position'));
|
||||
selectItem(
|
||||
e.metaKey && position == self.selected
|
||||
? -1 : $parent.data('position')
|
||||
);
|
||||
} else {
|
||||
selectNone();
|
||||
}
|
||||
|
@ -58,10 +63,11 @@ Ox.ArrayEditable = function(options, self) {
|
|||
}
|
||||
|
||||
function doubleclick(e) {
|
||||
var $parent = $(e.target).parent();
|
||||
var $target = $(e.target),
|
||||
$parent = $target.parent();
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
that.editItem(self.options.selected);
|
||||
} else {
|
||||
} else if(!$target.is('.OxInput')) {
|
||||
that.triggerEvent('add');
|
||||
}
|
||||
}
|
||||
|
@ -88,9 +94,10 @@ Ox.ArrayEditable = function(options, self) {
|
|||
function renderItems() {
|
||||
that.empty();
|
||||
self.options.items.forEach(function(item, i) {
|
||||
i && $('<span>')
|
||||
.html(', ')
|
||||
.appendTo(that);
|
||||
i && self.options.type == 'input'
|
||||
&& $('<span>')
|
||||
.html(', ')
|
||||
.appendTo(that);
|
||||
self.$items[i] = Ox.Editable({
|
||||
editable: item.editable,
|
||||
format: function(value) {
|
||||
|
@ -99,13 +106,18 @@ Ox.ArrayEditable = function(options, self) {
|
|||
tooltip: 'Click to select' + (
|
||||
item.editable ? ', doubleclick to edit' : ''
|
||||
),
|
||||
value: item.value
|
||||
type: self.options.type,
|
||||
value: item.value,
|
||||
width: self.options.type == 'input' ? 0 : self.options.width
|
||||
})
|
||||
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
|
||||
.data({position: i})
|
||||
.bindEvent({
|
||||
cancel: function(data) {
|
||||
|
||||
},
|
||||
edit: function(data) {
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
submit: function(data) {
|
||||
submit(i, data.value);
|
||||
|
@ -159,6 +171,8 @@ Ox.ArrayEditable = function(options, self) {
|
|||
self.setOption = function(key, value) {
|
||||
if (key == 'items') {
|
||||
renderItems();
|
||||
} else if (key == 'selected') {
|
||||
that.selectItem(value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -63,6 +63,7 @@ Ox.Editable = function(options, self) {
|
|||
|
||||
if (self.options.editing) {
|
||||
self.options.editing = false;
|
||||
// edit will toggle self.options.editing
|
||||
edit();
|
||||
}
|
||||
|
||||
|
@ -159,7 +160,7 @@ Ox.Editable = function(options, self) {
|
|||
}
|
||||
// fixme: why can't this be chained?
|
||||
setTimeout(function() {
|
||||
self.$input.focusInput(true);
|
||||
self.$input.focusInput(self.options.type == 'input');
|
||||
}, 0);
|
||||
that.$tooltip && that.$tooltip.options({title: ''});
|
||||
that.triggerEvent('edit', {editing: true});
|
||||
|
@ -224,4 +225,4 @@ Ox.Editable = function(options, self) {
|
|||
|
||||
return that;
|
||||
|
||||
};
|
||||
};
|
||||
|
|
|
@ -885,7 +885,7 @@ Ox.Input = function(options, self) {
|
|||
var length = self.$input.val().length,
|
||||
start = Ox.isNumber(arguments[0])
|
||||
? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
|
||||
: 0,
|
||||
: arguments[0] ? 0 : length,
|
||||
stop = Ox.isNumber(arguments[1])
|
||||
? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
|
||||
: Ox.isNumber(arguments[0]) ? arguments[0]
|
||||
|
|
|
@ -1,176 +0,0 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.ItemInput <f:Ox.Element> ItemInput Object
|
||||
() -> <f> ItemInput Object
|
||||
(options) -> <f> ItemInput Object
|
||||
(options, self) -> <f> ItemInput Object
|
||||
options <o> Options object
|
||||
type <s|textarea> can be textarea
|
||||
value <s> default value
|
||||
height <n|300> height
|
||||
width <n|100> width
|
||||
self <o> shared private variable
|
||||
cancel <!> triggered if cancel button is pressed
|
||||
save <!> triggered if save button is pressed
|
||||
@*/
|
||||
|
||||
Ox.ItemInput = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
type: 'textarea',
|
||||
value: '',
|
||||
height: 300,
|
||||
width: 100
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.$input = Ox.Input({
|
||||
changeOnKeypress: true,
|
||||
height: self.options.height,
|
||||
style: 'square',
|
||||
type: self.options.type,
|
||||
value: self.options.value,
|
||||
width: self.options.width + 6
|
||||
})
|
||||
.bind({
|
||||
mousedown: function(e) {
|
||||
// keep mousedown from reaching list
|
||||
e.stopPropagation();
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.options.height = data.value.split('\n').length * 13;
|
||||
Ox.Log('List', 'HEIGHT', self.options.height)
|
||||
self.$input.options({
|
||||
height: self.options.height
|
||||
});
|
||||
that.css({
|
||||
height: self.options.height + 16 + 'px'
|
||||
});
|
||||
that.parent().css({
|
||||
height: self.options.height + 24 + 'px'
|
||||
});
|
||||
self.$bar.css({
|
||||
marginTop: 8 + 'px'
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$bar = Ox.Bar({
|
||||
size: 16
|
||||
})
|
||||
.css({
|
||||
marginTop: self.options.height - 8 + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'delete',
|
||||
tooltip: 'Remove',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('remove');
|
||||
}
|
||||
})
|
||||
.appendTo(self.$bar);
|
||||
|
||||
Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'check',
|
||||
tooltip: 'Save',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('save', {
|
||||
value: self.$input.value()
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$bar);
|
||||
|
||||
Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'view',
|
||||
tooltip: 'Preview',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('preview');
|
||||
}
|
||||
})
|
||||
.appendTo(self.$bar);
|
||||
|
||||
Ox.Button({
|
||||
style: 'symbol',
|
||||
title: 'close',
|
||||
tooltip: 'Cancel',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
})
|
||||
.appendTo(self.$bar);
|
||||
|
||||
/*
|
||||
that.append(
|
||||
$input = Ox.Input({
|
||||
height: self.options.height,
|
||||
style: 'square',
|
||||
type: self.options.type,
|
||||
value: self.options.value,
|
||||
width: self.options.width + 6
|
||||
})
|
||||
.bind({
|
||||
mousedown: function(e) {
|
||||
// keep mousedown from reaching list
|
||||
e.stopPropagation();
|
||||
}
|
||||
})
|
||||
)
|
||||
.append(Ox.Element()
|
||||
.append(Ox.Button({type: 'text', title: 'Cancel'})
|
||||
.css('width', '42%')
|
||||
.bindEvent({
|
||||
'click': function() {
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
}))
|
||||
.append(Ox.Button({type: 'text', title: 'Save'})
|
||||
.css('width', '42%')
|
||||
.bindEvent({
|
||||
'click': function() {
|
||||
that.triggerEvent('save', {
|
||||
value: $input.value()
|
||||
});
|
||||
}
|
||||
}))
|
||||
.css({
|
||||
'margin-top': self.options.height-8,
|
||||
'height': '16px',
|
||||
'text-align': 'right',
|
||||
})
|
||||
);
|
||||
Ox.Log('List', $input);
|
||||
*/
|
||||
|
||||
return that;
|
||||
|
||||
};
|
|
@ -1538,56 +1538,6 @@ Ox.List = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
editItem <f> turn item into edit form
|
||||
(pos) -> <u> edit item at position
|
||||
pos <n> position of item to edit
|
||||
@*/
|
||||
that.editItem = function(pos) {
|
||||
var $input,
|
||||
item = self.options.items[pos],
|
||||
$item = self.$items[pos],
|
||||
width = $item.width(), // fixme: don't lookup in DOM
|
||||
height = $item.height();
|
||||
$item
|
||||
.height(height + 8 + 16)
|
||||
.empty()
|
||||
.addClass('OxEdit');
|
||||
|
||||
$input = Ox.ItemInput({
|
||||
type: 'textarea',
|
||||
value: item.value,
|
||||
height: height,
|
||||
width: width
|
||||
}).bindEvent({
|
||||
cancel: cancel,
|
||||
remove: remove,
|
||||
save: submit
|
||||
}).appendTo($item.$element);
|
||||
/*
|
||||
setTimeout(function() {
|
||||
$input.gainFocus();
|
||||
$input.focus();
|
||||
});
|
||||
*/
|
||||
function cancel() {
|
||||
$item.options('data', item);
|
||||
that.triggerEvent('cancel', item);
|
||||
loadItems();
|
||||
}
|
||||
function remove() {
|
||||
that.triggerEvent('remove', item.id);
|
||||
}
|
||||
function submit(data) {
|
||||
item.value = data.value;
|
||||
//$input.loseFocus().remove();
|
||||
// fixme: leaky, inputs remain in focus stack
|
||||
$item.options('data', item);
|
||||
that.triggerEvent('submit', item);
|
||||
loadItems();
|
||||
}
|
||||
}
|
||||
|
||||
/*@
|
||||
paste <f> paste data
|
||||
(data) -> <o> the list
|
||||
|
|
|
@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
id: '',
|
||||
items: [],
|
||||
range: 'all',
|
||||
selected: -1,
|
||||
selected: '',
|
||||
sort: 'position',
|
||||
title: '',
|
||||
type: 'text',
|
||||
|
@ -78,12 +78,13 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'place') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'string') {
|
||||
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
|
||||
self.$annotations = Ox.ArrayEditable({
|
||||
editable: self.options.editable,
|
||||
items: getAnnotations(),
|
||||
sort: self.sort,
|
||||
width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
|
||||
width: self.options.width,
|
||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||
})
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
|
@ -94,63 +95,11 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
select: function(data) {
|
||||
selectAnnotation({ids: [data.id]});
|
||||
},
|
||||
submit: updateAnnotation
|
||||
});
|
||||
} else if (self.options.type == 'text') {
|
||||
self.$annotations = Ox.List({
|
||||
construct: function(data) {
|
||||
var $item = Ox.Element()
|
||||
.addClass('OxAnnotation OxTarget')
|
||||
.css({padding: '4px 4px 0 4px'})
|
||||
.append(
|
||||
Ox.Editable({
|
||||
type: 'textarea',
|
||||
width: self.options.width - 8,
|
||||
value: data.value
|
||||
})
|
||||
.bindEvent({
|
||||
edit: function() {
|
||||
$item.removeClass('OxTarget');
|
||||
},
|
||||
submit: function(newData) {
|
||||
$item.addClass('OxTarget');
|
||||
updateAnnotation({
|
||||
id: data.id,
|
||||
value: newData.value
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
.append($('<div>').css({height: '4px'}));
|
||||
return $item;
|
||||
},
|
||||
items: getAnnotations(),
|
||||
max: 1,
|
||||
min: 0,
|
||||
sort: self.sort,
|
||||
type: 'none', // fixme
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
cancel: function(item) {
|
||||
//reset in/out points
|
||||
selectAnnotation({ids: [item.id]});
|
||||
},
|
||||
open: function(data) {
|
||||
return;
|
||||
if (data.ids.length == 1) {
|
||||
var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]);
|
||||
self.$annotations.editItem(pos);
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.ids[0]});
|
||||
edit: function(data) {
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
submit: editAnnotation
|
||||
});
|
||||
}
|
||||
self.$annotations.appendTo(that.$content);
|
||||
|
@ -185,15 +134,17 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.ids[0]);
|
||||
item && that.triggerEvent('select', {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
that.triggerEvent('select', Ox.extend({
|
||||
id: data.id
|
||||
}, item ? {
|
||||
'in': item['in'],
|
||||
'out': item.out,
|
||||
'layer': self.options.id
|
||||
});
|
||||
out: item.out,
|
||||
layer: self.options.id
|
||||
} : {}));
|
||||
}
|
||||
|
||||
function updateAnnotation(data) {
|
||||
function editAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
that.triggerEvent('submit', item);
|
||||
|
@ -221,7 +172,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'sort') {
|
||||
self.$annotations.options({sort: value});
|
||||
self.$annotations.options('sort', value);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -231,11 +182,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
that.addItem = function(item) {
|
||||
var pos = 0;
|
||||
self.options.items.splice(pos, 0, item);
|
||||
if (self.$annotations.addItem) {
|
||||
self.$annotations.addItem(pos, item);
|
||||
} else {
|
||||
self.$annotations.addItems(pos, [item]);
|
||||
}
|
||||
self.$annotations.addItem(pos, item);
|
||||
self.$annotations.editItem(pos);
|
||||
};
|
||||
|
||||
|
@ -243,7 +190,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
deselectItems <f> deselectItems
|
||||
@*/
|
||||
that.deselectItems = function() {
|
||||
self.$annotations.options('selected', []);
|
||||
self.$annotations.options('selected', '');
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
|
@ -16,6 +16,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
results: [],
|
||||
showPointMarkers: false,
|
||||
showSubtitles: false,
|
||||
state: 'default',
|
||||
subtitles: [],
|
||||
width: 0
|
||||
})
|
||||
|
@ -50,16 +51,16 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
setCSS();
|
||||
|
||||
self.$image = Ox.SmallVideoTimelineImage({
|
||||
duration: self.options.duration,
|
||||
editing: self.options.editing,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
results: self.options.results,
|
||||
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
|
||||
timeline: self.options.getImageURL,
|
||||
width: Math.round(self.options.duration),
|
||||
type: self.options.type
|
||||
});
|
||||
duration: self.options.duration,
|
||||
editing: self.options.editing,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
results: self.options.results,
|
||||
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
|
||||
timeline: self.options.getImageURL,
|
||||
width: Math.round(self.options.duration),
|
||||
type: 'editor'
|
||||
});
|
||||
|
||||
Ox.loop(self.lines, function(i) {
|
||||
addLine(i);
|
||||
|
@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
updateTimelines();
|
||||
}
|
||||
|
||||
function setState() {
|
||||
self.$image.options({state: self.options.state});
|
||||
updateTimelines();
|
||||
}
|
||||
|
||||
function setWidth() {
|
||||
self.lines = getLines();
|
||||
setCSS();
|
||||
|
@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
setPositionMarker();
|
||||
} else if (key == 'results') {
|
||||
setResults();
|
||||
} else if (key == 'state') {
|
||||
setState();
|
||||
} else if (key == 'width') {
|
||||
setWidth();
|
||||
}
|
||||
|
|
|
@ -6,11 +6,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
duration: 0,
|
||||
editing: false,
|
||||
'in': 0,
|
||||
out: 0,
|
||||
results: [],
|
||||
selected: false,
|
||||
state: 'default',
|
||||
subtitles: [],
|
||||
timeline: '',
|
||||
width: 256,
|
||||
|
@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
.appendTo(that.$element);
|
||||
|
||||
function getImageURL(image, callback) {
|
||||
var width = image == 'results' || image == 'selection' ?
|
||||
self.options.width : self.imageWidth,
|
||||
var width = image == 'results' || image == 'selection'
|
||||
? self.options.width : self.imageWidth,
|
||||
height = self.imageHeight,
|
||||
canvas = $('<canvas>')
|
||||
.attr({
|
||||
|
@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
) + 1;
|
||||
Ox.loop(left, right, function(x) {
|
||||
Ox.loop(top, bottom, function(y) {
|
||||
var alpha = self.options.type == 'player' ? 128
|
||||
: (y == top || y == bottom - 1) ? 255 : 64,
|
||||
color = Ox.Theme[self.theme].timeline.result,
|
||||
var alpha = self.options.type == 'editor'
|
||||
&& (y == top || y == bottom - 1) ? 192 : 64,
|
||||
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
|
||||
? [0, 0, 0] : [255, 255, 0],
|
||||
index = x * 4 + y * 4 * width;
|
||||
data[index] = color[0];
|
||||
data[index + 1] = color[1];
|
||||
|
@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
) + 1,
|
||||
top = 0,
|
||||
bottom = height,
|
||||
rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
|
||||
rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]]
|
||||
: self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]]
|
||||
: [[0, 0, 0], [255, 255, 255]];
|
||||
Ox.loop(left, right, function(x) {
|
||||
Ox.loop(top, bottom, function(y) {
|
||||
var alpha = self.options.type == 'player' ? 128
|
||||
: (y == top || y == bottom - 1) ? 255 : 64,
|
||||
color = Ox.Theme[self.theme].timeline[
|
||||
self.options.editing ? 'editing'
|
||||
: self.options.selected ? 'selected' : 'default'
|
||||
],
|
||||
var alpha = self.options.type == 'editor'
|
||||
&& (y == top || y == bottom - 1) ? 192 : 64,
|
||||
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
|
||||
index = x * 4 + y * 4 * width;
|
||||
data[index] = color[0];
|
||||
data[index + 1] = color[1];
|
||||
|
@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
self.$subtitles.attr({
|
||||
src: getImageURL('subtitles')
|
||||
});
|
||||
} else if (key == 'state') {
|
||||
self.$selection.attr({
|
||||
src: getImageURL('selection')
|
||||
});
|
||||
} else if (key == 'width') {
|
||||
that.css({width: value + 'px'});
|
||||
self.$results
|
||||
|
|
|
@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) {
|
|||
posterFrame: 0,
|
||||
posterFrameControls: false,
|
||||
resolution: 0,
|
||||
selected: '',
|
||||
showAnnotations: false,
|
||||
showLargeTimeline: true,
|
||||
state: 'default',
|
||||
subtitles: [],
|
||||
tooltips: false,
|
||||
videoRatio: 16/9,
|
||||
|
@ -284,6 +286,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
results: find(self.options.find),
|
||||
showPointMarkers: true,
|
||||
showSubtitles: true,
|
||||
state: self.options.state,
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
width: self.sizes.timeline[1].width
|
||||
|
@ -313,6 +316,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
range: self.options.annotationsRange,
|
||||
// selected: self.options.selected,
|
||||
sort: self.options.annotationsSort,
|
||||
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
|
||||
}, layer)
|
||||
|
@ -324,6 +328,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
data.out = self.options.out;
|
||||
that.triggerEvent('addannotation', data);
|
||||
},
|
||||
edit: function(data) {
|
||||
setState(data.editing ? 'editing' : 'selected');
|
||||
},
|
||||
remove: function(data) {
|
||||
that.triggerEvent('removeannotation', {
|
||||
id: data.id,
|
||||
|
@ -331,14 +338,14 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
},
|
||||
select: function(data) {
|
||||
self.options.layers.forEach(function(layer_, i_) {
|
||||
if (i_ != i) {
|
||||
// FIXME: the way AnnotationPanel is set up,
|
||||
// it does not actually have that method
|
||||
// self.$annotationPanel[i_].deselectItems();
|
||||
}
|
||||
});
|
||||
selectAnnotation(data);
|
||||
if(data.id) {
|
||||
self.options.layers.forEach(function(layer_, i_) {
|
||||
if (i_ != i) {
|
||||
self.$annotationPanel[i_].deselectItems();
|
||||
}
|
||||
});
|
||||
selectAnnotation(data);
|
||||
}
|
||||
},
|
||||
submit: editAnnotation
|
||||
})
|
||||
|
@ -671,50 +678,52 @@ Ox.VideoEditor = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$annotationsbar);
|
||||
|
||||
that.$element = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$videobar,
|
||||
size: 16
|
||||
},
|
||||
{
|
||||
element: self.$editor
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
collapsed: !self.options.showAnnotations,
|
||||
collapsible: true,
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$annotationsbar,
|
||||
size: 16
|
||||
},
|
||||
{
|
||||
element: self.$annotations,
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: resizeAnnotations,
|
||||
resizeend: resizeendAnnotations,
|
||||
toggle: toggleAnnotations
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
size: self.options.annotationsSize,
|
||||
tooltip: self.options.tooltips ? 'annotations' : false
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$videobar,
|
||||
size: 16
|
||||
},
|
||||
{
|
||||
element: self.$editor
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
},
|
||||
{
|
||||
collapsed: !self.options.showAnnotations,
|
||||
collapsible: true,
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$annotationsbar,
|
||||
size: 16
|
||||
},
|
||||
{
|
||||
element: self.$annotations,
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: resizeAnnotations,
|
||||
resizeend: resizeendAnnotations,
|
||||
toggle: toggleAnnotations
|
||||
}),
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
size: self.options.annotationsSize,
|
||||
tooltip: self.options.tooltips ? 'annotations' : false
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
);
|
||||
|
||||
// we need a timeout so that a chained bindEvent
|
||||
// actually catches the event
|
||||
|
@ -920,9 +929,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
//setPosition(data['in']);
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
self.options.annotationsRange != 'position' && setPosition(data['in']);
|
||||
if (data.id) {
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
setState(data.id ? 'selected' : 'default');
|
||||
}
|
||||
|
||||
function select(type) {
|
||||
|
@ -933,6 +945,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
function setPoint(point, position) {
|
||||
var otherPoint = point == 'in' ? 'out' : 'in';
|
||||
self.options[point] = position;
|
||||
if (self.options.state == 'selected') {
|
||||
setState('default');
|
||||
}
|
||||
self.$player.forEach(function($player) {
|
||||
$player.options(point, self.options[point]);
|
||||
});
|
||||
|
@ -1000,6 +1015,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setState(state) {
|
||||
self.options.state = state;
|
||||
self.$timeline[1].options({state: state});
|
||||
}
|
||||
|
||||
function submitFindInput(value, hasPressedEnter) {
|
||||
self.options.find = value;
|
||||
self.results = find(self.options.find);
|
||||
|
|
|
@ -340,10 +340,6 @@ Forms
|
|||
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxEditableElement.OxSelected {
|
||||
background: rgb(208, 208, 208);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Images
|
||||
|
@ -743,6 +739,13 @@ Video
|
|||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
|
||||
background: rgb(192, 255, 192);
|
||||
}
|
||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
|
||||
background: rgb(192, 192, 255);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
Miscellaneous
|
||||
|
@ -775,7 +778,10 @@ Miscellaneous
|
|||
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.OxThemeClassic ::selection {
|
||||
.OxThemeClassic ::selection,
|
||||
.OxThemeClassic ::-moz-selection,
|
||||
.OxThemeClassic ::-o-selection,
|
||||
.OxThemeClassic ::-webkit-selection {
|
||||
background: rgb(192, 192, 192);
|
||||
//color: rgb(255, 255, 255);
|
||||
}
|
||||
|
|
|
@ -760,6 +760,12 @@ Video
|
|||
//display: none;
|
||||
}
|
||||
|
||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
|
||||
background: rgb(0, 128, 0);
|
||||
}
|
||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
|
||||
background: rgb(64, 64, 192);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
|
@ -104,8 +104,8 @@ Ox.filter <f> Filters a collection by a given condition
|
|||
objects and strings.
|
||||
> Ox.filter([2, 1, 0], function(v, i) { return v == i; })
|
||||
[1]
|
||||
> Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; }))
|
||||
['b']
|
||||
> Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })
|
||||
{b: 'b'}
|
||||
> Ox.filter(' foo bar ', function(v) { return v != ' '; })
|
||||
'foobar'
|
||||
@*/
|
||||
|
@ -113,14 +113,14 @@ Ox.filter <f> Filters a collection by a given condition
|
|||
Ox.filter = function(col, fn) {
|
||||
var type = Ox.typeOf(col),
|
||||
ret = type == 'array' ? [] : type == 'object' ? {} : '';
|
||||
Ox.forEach(col, function(v, k) {
|
||||
if (fn(v, k)) {
|
||||
Ox.forEach(col, function(val, key) {
|
||||
if (fn(val, key)) {
|
||||
if (type == 'array') {
|
||||
ret.push(v);
|
||||
ret.push(val);
|
||||
} else if (type == 'object') {
|
||||
ret[k] = v;
|
||||
ret[key] = val;
|
||||
} else {
|
||||
ret += v;
|
||||
ret += val;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -384,7 +384,7 @@ Ox.last = function(arr, val) {
|
|||
Ox.len <f> Returns the length of an array, function, object or string
|
||||
Not to be confused with <code>Ox.length</code>, which is the
|
||||
<code>length</code> property of the <code>Ox</code> function
|
||||
(<code>1</code>).
|
||||
(<code>1</code>). // FIXME: 1 becomes 67 in DocPanel
|
||||
> Ox.len([1, 2, 3])
|
||||
3
|
||||
> Ox.len([,])
|
||||
|
@ -455,7 +455,6 @@ Ox.makeArray <f> Takes an array-like object and returns a true array
|
|||
> Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3})
|
||||
["f", "o", "o"]
|
||||
@*/
|
||||
|
||||
Ox.makeArray = /MSIE/.test(navigator.userAgent)
|
||||
? function(col) {
|
||||
var i, len, ret = [];
|
||||
|
@ -632,7 +631,6 @@ Ox.shuffle <f> Randomizes the order of values within a collection
|
|||
> Ox.shuffle('123').length
|
||||
3
|
||||
@*/
|
||||
|
||||
Ox.shuffle = function(col) {
|
||||
var keys, ret, type = Ox.typeOf(col), values;
|
||||
function sort() {
|
||||
|
|
Loading…
Reference in a new issue