forked from 0x2620/oxjs
blur editing
This commit is contained in:
j
parent
b4139a7388
commit
ba9423462f
8 changed files with 180 additions and 91 deletions
|
|
@ -84,6 +84,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
items: getAnnotations(),
|
||||
selected: self.options.selected,
|
||||
sort: self.sort,
|
||||
submitOnBlur: false,
|
||||
width: self.options.width,
|
||||
type: self.options.type == 'text' ? 'textarea' : 'input'
|
||||
})
|
||||
|
|
@ -93,29 +94,27 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
value: data.value || ''
|
||||
});
|
||||
},
|
||||
blur: function() {
|
||||
that.triggerEvent('blur');
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
edit: function(data) {
|
||||
that.triggerEvent('edit', data);
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit');
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: editAnnotation
|
||||
submit: submitAnnotation
|
||||
});
|
||||
}
|
||||
self.$annotations.appendTo(that.$content);
|
||||
|
||||
Ox.print('SOS', self.options.selected);
|
||||
//Ox.print('SOS', self.options.selected);
|
||||
self.options.selected && setTimeout(function() {
|
||||
selectAnnotation({id: self.options.selected});
|
||||
}, 0);
|
||||
|
||||
function editAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
that.triggerEvent('submit', item);
|
||||
}
|
||||
|
||||
function getAnnotations() {
|
||||
return self.options.items.filter(function(item) {
|
||||
return self.options.range == 'all' || (
|
||||
|
|
@ -126,12 +125,13 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.options.range == 'position'
|
||||
&& item['in'] <= self.options.position
|
||||
&& item.out >= self.options.position
|
||||
)
|
||||
) || self.editing && item.id == self.options.selected
|
||||
});
|
||||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
self.options.selected = item ? data.id : '';
|
||||
that.triggerEvent('select', Ox.extend({
|
||||
id: data.id
|
||||
}, item ? {
|
||||
|
|
@ -141,27 +141,42 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
} : {}));
|
||||
}
|
||||
|
||||
function submitAnnotation(data) {
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
self.editing = false;
|
||||
that.triggerEvent('submit', item);
|
||||
}
|
||||
|
||||
function togglePanel() {
|
||||
|
||||
}
|
||||
|
||||
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') {
|
||||
self.options.range == 'selection' && self.$annotations.options({
|
||||
//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.options.range == 'selection' && self.$annotations.options({
|
||||
self.editing || self.options.range == 'selection' && self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'position') {
|
||||
self.options.range == 'position' && self.$annotations.options({
|
||||
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.$annotations.options('sort', value);
|
||||
}
|
||||
|
|
@ -174,14 +189,11 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
var pos = 0;
|
||||
self.options.items.splice(pos, 0, item);
|
||||
self.$annotations.addItem(pos, item);
|
||||
self.$annotations.editItem(pos);
|
||||
self.$annotations.editItem(item.id);
|
||||
};
|
||||
|
||||
/*@
|
||||
deselectItems <f> deselectItems
|
||||
@*/
|
||||
that.deselectItems = function() {
|
||||
self.$annotations.options('selected', '');
|
||||
that.blurItem = function() {
|
||||
self.$annotations.blurItem();
|
||||
};
|
||||
|
||||
/*@
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
_offset: 0, // hack for cases where all these position: absolute elements have to go into a float: left
|
||||
disabled: false,
|
||||
duration: 0,
|
||||
editing: false,
|
||||
find: '',
|
||||
'in': 0,
|
||||
out: 0,
|
||||
paused: false,
|
||||
results: [],
|
||||
showMilliseconds: 0,
|
||||
state: 'default',
|
||||
timeline: '',
|
||||
type: 'player',
|
||||
width: 256
|
||||
|
|
@ -122,11 +122,11 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
function getTimelineImage() {
|
||||
return 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.subtitles,
|
||||
state: self.options.state,
|
||||
timeline: self.options.timeline,
|
||||
width: self.imageWidth,
|
||||
type: self.options.type
|
||||
|
|
@ -206,18 +206,12 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'duration') {
|
||||
self.$image.options({
|
||||
duration: value
|
||||
});
|
||||
self.$image.options({duration: value});
|
||||
} else if (key == 'in') {
|
||||
self.$image.options({
|
||||
'in': value
|
||||
});
|
||||
self.$image.options({'in': value});
|
||||
self.options.type == 'editor' && setPointMarker('in');
|
||||
} else if (key == 'out') {
|
||||
self.$image.options({
|
||||
out: value
|
||||
});
|
||||
self.$image.options({out: value});
|
||||
self.options.type == 'editor' && setPointMarker('out');
|
||||
} else if (key == 'paused') {
|
||||
self.$positionMarker[
|
||||
|
|
@ -226,13 +220,11 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
} else if (key == 'position') {
|
||||
setPositionMarker();
|
||||
} else if (key == 'results') {
|
||||
self.$image.options({
|
||||
results: value
|
||||
});
|
||||
self.$image.options({results: value});
|
||||
} else if (key == 'state') {
|
||||
self.$image.options({state: value});
|
||||
} else if (key == 'subtitles') {
|
||||
self.$image.options({
|
||||
subtitles: value
|
||||
});
|
||||
self.$image.options({subtitles: value});
|
||||
} else if (key == 'width') {
|
||||
setWidth();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,8 +145,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
) + 1,
|
||||
top = 0,
|
||||
bottom = height,
|
||||
rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]]
|
||||
: self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]]
|
||||
rgb = self.options.state == 'editing' ? [[0, 128, 0], [128, 255, 128]]
|
||||
: self.options.state == 'selected' ? [[0, 0, 128], [128, 128, 255]]
|
||||
: [[0, 0, 0], [255, 255, 255]];
|
||||
Ox.loop(left, right, function(x) {
|
||||
Ox.loop(top, bottom, function(y) {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
selected: '',
|
||||
showAnnotations: false,
|
||||
showLargeTimeline: true,
|
||||
state: 'default',
|
||||
subtitles: [],
|
||||
tooltips: false,
|
||||
videoRatio: 16/9,
|
||||
|
|
@ -154,10 +153,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
$player: [],
|
||||
$timeline: [],
|
||||
controlsHeight: 16,
|
||||
editing: false,
|
||||
margin: 8,
|
||||
});
|
||||
|
||||
Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
||||
//Ox.print('VIDEO EDITOR OPTIONS', self.options)
|
||||
|
||||
self.words = [];
|
||||
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
|
||||
|
|
@ -173,9 +173,17 @@ Ox.VideoEditor = function(options, self) {
|
|||
|
||||
self.$editor = Ox.Element()
|
||||
.addClass('OxVideoEditor')
|
||||
.click(function(e) {
|
||||
.mousedown(function(e) {
|
||||
var $target = $(e.target);
|
||||
!$target.is('.OxPosition') && !$target.is('input') && that.gainFocus();
|
||||
// the following is needed to determine
|
||||
// how to handle annotation input blur
|
||||
if (self.editing) {
|
||||
self.focused = true;
|
||||
setTimeout(function() {
|
||||
self.focused = false;
|
||||
}, 25);
|
||||
}
|
||||
});
|
||||
|
||||
self.sizes = getSizes();
|
||||
|
|
@ -288,7 +296,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
results: find(self.options.find),
|
||||
showPointMarkers: true,
|
||||
showSubtitles: true,
|
||||
state: self.options.state,
|
||||
state: self.options.selected ? 'selected' : 'default',
|
||||
subtitles: self.options.subtitles,
|
||||
videoId: self.options.videoId,
|
||||
width: self.sizes.timeline[1].width
|
||||
|
|
@ -332,8 +340,19 @@ Ox.VideoEditor = function(options, self) {
|
|||
data.out = self.options.out;
|
||||
that.triggerEvent('addannotation', data);
|
||||
},
|
||||
edit: function(data) {
|
||||
setState(data.editing ? 'editing' : 'selected');
|
||||
blur: function() {
|
||||
//Ox.print('VIDEO EDITOR BLUR FOCUSED?', self.focused)
|
||||
if (self.focused) {
|
||||
// ...
|
||||
} else {
|
||||
self.editing = false;
|
||||
setState();
|
||||
this.blurItem();
|
||||
}
|
||||
},
|
||||
edit: function() {
|
||||
self.editing = true;
|
||||
setState();
|
||||
},
|
||||
remove: function(data) {
|
||||
that.triggerEvent('removeannotation', {
|
||||
|
|
@ -345,7 +364,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
if (data.id) {
|
||||
self.options.layers.forEach(function(layer_, i_) {
|
||||
if (i_ != i) {
|
||||
self.$annotationPanel[i_].deselectItems();
|
||||
self.$annotationPanel[i_].options({selected: ''});
|
||||
}
|
||||
});
|
||||
selectAnnotation(data);
|
||||
|
|
@ -738,6 +757,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
}, 0);
|
||||
|
||||
function editAnnotation(data) {
|
||||
self.editing = false;
|
||||
setState();
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('editannotation', data);
|
||||
|
|
@ -816,7 +837,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function getSizes(scrollbarIsVisible) {
|
||||
//Ox.Log('Video', 'getSizes', scrollbarIsVisible)
|
||||
var scrollbarWidth = Ox.UI.SCROLLBAR_SIZE,
|
||||
contentWidth = self.options.width
|
||||
- (self.options.showAnnotations * self.options.annotationsSize) - 1
|
||||
|
|
@ -828,6 +848,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
timeline: []
|
||||
},
|
||||
width, widths;
|
||||
function getHeight() {
|
||||
return size.player[0].height + self.controlsHeight
|
||||
+ size.timeline[0].height + lines * 16
|
||||
+ (lines + 3) * self.margin;
|
||||
}
|
||||
if (self.options.videoSize == 'small') {
|
||||
width = 0;
|
||||
widths = Ox.divideInt(contentWidth - 4 * self.margin, 3);
|
||||
|
|
@ -876,13 +901,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
self.$editor.css({
|
||||
overflowY: (scrollbarIsVisible && height <= self.options.height - 16) ? 'scroll' : 'auto'
|
||||
});
|
||||
//Ox.Log('Video', 'getSizes', scrollbarIsVisible, height, self.options.height, size)
|
||||
return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
|
||||
function getHeight() {
|
||||
return size.player[0].height + self.controlsHeight
|
||||
+ size.timeline[0].height + lines * 16
|
||||
+ (lines + 3) * self.margin;
|
||||
}
|
||||
}
|
||||
|
||||
function goToPoint(point) {
|
||||
|
|
@ -935,12 +954,15 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
//Ox.print('VE.sA')
|
||||
self.editing = false;
|
||||
self.options.selected = data.id || '';
|
||||
self.options.annotationsRange != 'position' && setPosition(data['in']);
|
||||
setState(data.id ? 'selected' : 'default');
|
||||
setState();
|
||||
that.triggerEvent('select', {
|
||||
id: data.id || ''
|
||||
id: self.options.selected
|
||||
});
|
||||
if (data.id) {
|
||||
if (self.options.selected) {
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
|
|
@ -954,9 +976,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
function setPoint(point, position, annotation) {
|
||||
var otherPoint = point == 'in' ? 'out' : 'in';
|
||||
self.options[point] = position;
|
||||
if (self.options.state == 'selected') {
|
||||
setState('default');
|
||||
/*
|
||||
// should only happen through interaction
|
||||
if (self.options.selected && !self.editing) {
|
||||
self.options.selected = '';
|
||||
setState();
|
||||
}
|
||||
*/
|
||||
self.$player.forEach(function($player) {
|
||||
$player.options(point, self.options[point]);
|
||||
});
|
||||
|
|
@ -979,6 +1005,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
if (self.editing) {
|
||||
that.triggerEvent('editannotation', {
|
||||
id: self.options.selected,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition(position, playing) {
|
||||
|
|
@ -1024,9 +1057,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setState(state) {
|
||||
self.options.state = state;
|
||||
self.$timeline[1].options({state: state});
|
||||
function setState() {
|
||||
self.$timeline[1].options({
|
||||
state: self.editing ? 'editing'
|
||||
: self.options.selected ? 'selected'
|
||||
: 'default'
|
||||
});
|
||||
//Ox.print('SET STATE', self.$timeline[1].options('state'))
|
||||
}
|
||||
|
||||
function submitFindInput(value, hasPressedEnter) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue