forked from 0x2620/oxjs
- remove editItem from Ox.List
- use ArrayEditable for text too
This commit is contained in:
j
parent
66934d22a9
commit
093edd57d0
12 changed files with 180 additions and 403 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue