sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

blur editing

Browse source
This commit is contained in:
j 2012-01-10 01:55:38 +05:30
commit ba9423462f
8 changed files with 180 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

81
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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) {