first demo of auto-resizing textarea
This commit is contained in:
parent
67c154547c
commit
7f904cda1f
5 changed files with 175 additions and 50 deletions
|
@ -3,39 +3,53 @@ Ox.load('UI', {
|
|||
theme: 'modern'
|
||||
}, function() {
|
||||
|
||||
Ox.get('srt/0393109.srt', function(srt) {
|
||||
//var id = '0393109';
|
||||
var id = '0097514';
|
||||
|
||||
var subtitles = Ox.parseSRT(srt, 25);
|
||||
Ox.get('srt/' + id + '.srt', function(srt) {
|
||||
|
||||
var subtitles = Ox.parseSRT(srt, 25),
|
||||
layers = [
|
||||
{
|
||||
id: 'subtitles',
|
||||
items: subtitles.map(function(subtitle, i) {
|
||||
return {id: i, 'in': subtitle.in, out: subtitle.out, value: subtitle.text};
|
||||
}),
|
||||
title: 'Subtitles'
|
||||
}
|
||||
];
|
||||
|
||||
var $appPanel, $mainPanel;
|
||||
|
||||
var $videoEditor = Ox.VideoEditor({
|
||||
annotationsSize: 256,
|
||||
duration: 6336.08,
|
||||
duration: 3029.96,
|
||||
find: 'dode',
|
||||
getFrameURL: function(position, width) {
|
||||
return 'http://next.0xdb.org/0393109/frame/' + width + '/' + position + '.jpg'
|
||||
return 'http://next.0xdb.org/' + id + '/frame/' + width + '/' + position + '.jpg'
|
||||
},
|
||||
getLargeTimelineImageURL: function(i) {
|
||||
return 'http://next.0xdb.org/0393109/timelines/timeline.64.' + i + '.png';
|
||||
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
|
||||
},
|
||||
getSmallTimelineImageURL: function(i) {
|
||||
return 'http://next.0xdb.org/0393109/timelines/timeline.16.' + i + '.png';
|
||||
return 'http://next.0xdb.org/' + id + '/timelines/timeline.16.' + i + '.png';
|
||||
},
|
||||
height: window.innerHeight - 129,
|
||||
'in': 3128.76,
|
||||
out: 3130.72,
|
||||
position: 3168.04,
|
||||
posterFrame: 3168.04,
|
||||
'in': 0,
|
||||
layers: layers,
|
||||
out: 0,
|
||||
position: 0,
|
||||
posterFrame: 1515,
|
||||
showAnnotations: true,
|
||||
subtitles: subtitles,
|
||||
video: {
|
||||
96: 'http://next.0xdb.org/0393109/96p.webm',
|
||||
240: 'http://next.0xdb.org/0393109/96p.webm?240p',
|
||||
480: 'http://next.0xdb.org/0393109/96p.webm?480p'
|
||||
96: 'http://next.0xdb.org/' + id + '/96p.webm',
|
||||
240: 'http://next.0xdb.org/' + id + '/96p.webm?240p',
|
||||
480: 'http://next.0xdb.org/' + id + '/96p.webm?480p'
|
||||
},
|
||||
videoHeight: 96,
|
||||
videoSize: 'small',
|
||||
videoWidth: 180,
|
||||
videoWidth: 124,
|
||||
width: window.innerWidth - 257
|
||||
});
|
||||
|
||||
|
@ -89,7 +103,6 @@ Ox.load('UI', {
|
|||
|
||||
$videoEditor.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
Ox.print('RESIZE!!!!!!!!!')
|
||||
$videoEditor.options({
|
||||
height: size
|
||||
});
|
||||
|
|
|
@ -232,13 +232,13 @@ Ox.Input = function(options, self) {
|
|||
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
|
||||
});
|
||||
self.$input.css({
|
||||
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
|
||||
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' +
|
||||
self.colorstops[0] + ', ' + 'rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' +
|
||||
self.colorstops[1] + ', ' + 'rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' +
|
||||
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))'
|
||||
background: '-webkit-linear-gradient(top, rgb(' +
|
||||
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
|
||||
Math.round(self.colorstops[0] * 100) + '%, rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
|
||||
Math.round(self.colorstops[1] * 100) + '%, rgb(' +
|
||||
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -625,7 +625,7 @@ Ox.Input = function(options, self) {
|
|||
hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
|
||||
oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
|
||||
//Ox.print('keypress', event.keyCode)
|
||||
if (event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
|
||||
if (event.keyCode != 9 && (self.options.type == 'textarea' || event.keyCode != 13) && event.keyCode != 27) { // fixme: can't 13 and 27 return false?
|
||||
setTimeout(function() { // wait for val to be set
|
||||
var value = self.$input.val();
|
||||
if (self.options.autocompleteReplaceCorrect && hasDeletedSelectedEnd) {
|
||||
|
@ -723,6 +723,13 @@ Ox.Input = function(options, self) {
|
|||
self.$input.attr({
|
||||
disabled: value ? 'disabled' : ''
|
||||
});
|
||||
} else if (key == 'height') {
|
||||
that.css({
|
||||
height: value + 'px'
|
||||
});
|
||||
self.$input.css({
|
||||
height: value + 'px'
|
||||
});
|
||||
} else if (key == 'placeholder') {
|
||||
setPlaceholder();
|
||||
} else if (key == 'value') {
|
||||
|
|
|
@ -25,9 +25,110 @@ Ox.ItemInput = function(options, self) {
|
|||
height: 300,
|
||||
width: 100
|
||||
})
|
||||
.options(options || {}),
|
||||
$input;
|
||||
.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.print('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 = new Ox.Input({
|
||||
height: self.options.height,
|
||||
|
@ -67,5 +168,8 @@ Ox.ItemInput = function(options, self) {
|
|||
})
|
||||
);
|
||||
Ox.print($input);
|
||||
*/
|
||||
|
||||
return that;
|
||||
|
||||
}
|
||||
|
|
|
@ -8,8 +8,8 @@ Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
|
|||
options <o> Options object
|
||||
id <s> id
|
||||
items <a|[]> items
|
||||
titles <s> title
|
||||
type <s|text> panel type
|
||||
title <s> title
|
||||
type <s|'text'> panel type
|
||||
width <n|0>
|
||||
self <o> shared private variable
|
||||
@*/
|
||||
|
@ -35,7 +35,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
new Ox.Button({
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'Add',
|
||||
title: 'add',
|
||||
tooltip: 'Add',
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function(event, data) {
|
||||
|
@ -67,15 +68,17 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
cancel: function() {
|
||||
|
||||
},
|
||||
open: function(event, data) {
|
||||
if (data.ids.length == 1) {
|
||||
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
|
||||
self.$annotations.editItem(pos);
|
||||
|
||||
}
|
||||
},
|
||||
'delete': function(event, data) {
|
||||
that.triggerEvent('delete', data);
|
||||
'remove': function(event, data) {
|
||||
that.triggerEvent('remove', data);
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
|
@ -138,6 +141,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
if(self.$annotations.options('selected'))
|
||||
self.$annotations.options('selected',[]);
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
@ -72,13 +72,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
movePositionBy(self.sizes.timeline[0].width);
|
||||
},
|
||||
key_i: function() {
|
||||
setPoint('in');
|
||||
setPoint('in', self.options.position);
|
||||
},
|
||||
key_left: function() {
|
||||
movePositionBy(-0.04);
|
||||
},
|
||||
key_o: function() {
|
||||
setPoint('out');
|
||||
setPoint('out', self.options.position);
|
||||
},
|
||||
key_openbracket: function() {
|
||||
movePositionTo('subtitle', -1);
|
||||
|
@ -176,7 +176,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
goToPoint(type);
|
||||
},
|
||||
setpoint: function() {
|
||||
setPoint(type);
|
||||
setPoint(type, self.options.position);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$editor);
|
||||
|
@ -243,8 +243,8 @@ Ox.VideoEditor = function(options, self) {
|
|||
.bindEvent({
|
||||
add: function(event, data) {
|
||||
data.layer = layer.id;
|
||||
data['in'] = self.options.points[0];
|
||||
data.out = self.options.points[1];
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('addAnnotation', data);
|
||||
},
|
||||
'delete': function(event, data) {
|
||||
|
@ -440,24 +440,21 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function goToPoint(point) {
|
||||
self.options.position = self.options[point];
|
||||
setPosition();
|
||||
setPosition(self.options[point]);
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
||||
function movePositionBy(sec) {
|
||||
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
|
||||
setPosition();
|
||||
setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
}
|
||||
|
||||
function movePositionTo(type, direction) {
|
||||
self.options.position = getNextPosition(type, direction);
|
||||
setPosition();
|
||||
setPosition(getNextPosition(type, direction));
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
|
@ -497,10 +494,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(event, data) {
|
||||
self.options.position = data['in']
|
||||
self.options.points = [data['in'], data.out];
|
||||
setPosition();
|
||||
setPoints();
|
||||
setPosition(data['in']);
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
function updateAnnotation(event, data) {
|
||||
data['in'] = self.options.points[0];
|
||||
|
@ -513,9 +509,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
setPoints();
|
||||
}
|
||||
|
||||
function setPoint(point) {
|
||||
function setPoint(point, position) {
|
||||
var otherPoint = point == 'in' ? 'out' : 'in';
|
||||
self.options[point] = self.options.position;
|
||||
self.options[point] = position;
|
||||
self.$player.forEach(function($player) {
|
||||
$player.options(point, self.options[point]);
|
||||
});
|
||||
|
@ -526,11 +522,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
$timeline.options(point, self.options[point]);
|
||||
});
|
||||
if (self.options['in'] > self.options.out) {
|
||||
setPoint(point == 'in' ? 'out' : 'in');
|
||||
setPoint(point == 'in' ? 'out' : 'in', position);
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition() {
|
||||
function setPosition(position) {
|
||||
self.options.position = position;
|
||||
self.$player[0].options({
|
||||
position: self.options.position
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue