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

first demo of auto-resizing textarea

Browse source
This commit is contained in:
rolux 2011-05-19 12:18:39 +02:00
commit 7f904cda1f
5 changed files with 175 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

43
demos/videoeditor/js/videoeditor.js
View file

@ -3,39 +3,53 @@ Ox.load('UI', {
theme: 'modern' theme: 'modern'
}, function() { }, 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 $appPanel, $mainPanel;
var $videoEditor = Ox.VideoEditor({ var $videoEditor = Ox.VideoEditor({
annotationsSize: 256, annotationsSize: 256,
duration: 6336.08, duration: 3029.96,
find: 'dode', find: 'dode',
getFrameURL: function(position, width) { 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) { 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) { 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, height: window.innerHeight - 129,
'in': 3128.76, 'in': 0,
out: 3130.72, layers: layers,
position: 3168.04, out: 0,
posterFrame: 3168.04, position: 0,
posterFrame: 1515,
showAnnotations: true,
subtitles: subtitles, subtitles: subtitles,
video: { video: {
96: 'http://next.0xdb.org/0393109/96p.webm', 96: 'http://next.0xdb.org/' + id + '/96p.webm',
240: 'http://next.0xdb.org/0393109/96p.webm?240p', 240: 'http://next.0xdb.org/' + id + '/96p.webm?240p',
480: 'http://next.0xdb.org/0393109/96p.webm?480p' 480: 'http://next.0xdb.org/' + id + '/96p.webm?480p'
}, },
videoHeight: 96, videoHeight: 96,
videoSize: 'small', videoSize: 'small',
videoWidth: 180, videoWidth: 124,
width: window.innerWidth - 257 width: window.innerWidth - 257
}); });
@ -89,7 +103,6 @@ Ox.load('UI', {
$videoEditor.bindEvent({ $videoEditor.bindEvent({
resize: function(foo, size) { resize: function(foo, size) {
Ox.print('RESIZE!!!!!!!!!')
$videoEditor.options({ $videoEditor.options({
height: size height: size
}); });

23
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -232,13 +232,13 @@ Ox.Input = function(options, self) {
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))' [self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
}); });
self.$input.css({ self.$input.css({
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' + background: '-webkit-linear-gradient(top, rgb(' +
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' + [self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
self.colorstops[0] + ', ' + 'rgb(' + [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' + Math.round(self.colorstops[0] * 100) + '%, rgb(' +
self.colorstops[1] + ', ' + 'rgb(' + [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' + Math.round(self.colorstops[1] * 100) + '%, rgb(' +
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))' [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) && hasDeletedSelectedEnd = (event.keyCode == 8 || event.keyCode == 46) &&
oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length; oldCursor[0] < oldCursor[1] && oldCursor[1] == oldValue.length;
//Ox.print('keypress', event.keyCode) //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 setTimeout(function() { // wait for val to be set
var value = self.$input.val(); var value = self.$input.val();
if (self.options.autocompleteReplaceCorrect && hasDeletedSelectedEnd) { if (self.options.autocompleteReplaceCorrect && hasDeletedSelectedEnd) {
@ -723,6 +723,13 @@ Ox.Input = function(options, self) {
self.$input.attr({ self.$input.attr({
disabled: value ? 'disabled' : '' disabled: value ? 'disabled' : ''
}); });
} else if (key == 'height') {
that.css({
height: value + 'px'
});
self.$input.css({
height: value + 'px'
});
} else if (key == 'placeholder') { } else if (key == 'placeholder') {
setPlaceholder(); setPlaceholder();
} else if (key == 'value') { } else if (key == 'value') {

108
source/Ox.UI/js/List/Ox.ItemInput.js
View file

@ -25,9 +25,110 @@ Ox.ItemInput = function(options, self) {
height: 300, height: 300,
width: 100 width: 100
}) })
.options(options || {}), .options(options || {});
$input;
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( that.append(
$input = new Ox.Input({ $input = new Ox.Input({
height: self.options.height, height: self.options.height,
@ -67,5 +168,8 @@ Ox.ItemInput = function(options, self) {
}) })
); );
Ox.print($input); Ox.print($input);
*/
return that; return that;
} }

16
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -8,8 +8,8 @@ Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
options <o> Options object options <o> Options object
id <s> id id <s> id
items <a|[]> items items <a|[]> items
titles <s> title title <s> title
type <s|text> panel type type <s|'text'> panel type
width <n|0> width <n|0>
self <o> shared private variable self <o> shared private variable
@*/ @*/
@ -35,7 +35,8 @@ Ox.AnnotationPanel = function(options, self) {
new Ox.Button({ new Ox.Button({
id: 'add', id: 'add',
style: 'symbol', style: 'symbol',
title: 'Add', title: 'add',
tooltip: 'Add',
type: 'image' type: 'image'
}).bindEvent({ }).bindEvent({
click: function(event, data) { click: function(event, data) {
@ -67,15 +68,17 @@ Ox.AnnotationPanel = function(options, self) {
unique: 'id' unique: 'id'
}) })
.bindEvent({ .bindEvent({
cancel: function() {
},
open: function(event, data) { open: function(event, data) {
if (data.ids.length == 1) { if (data.ids.length == 1) {
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]); var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos); self.$annotations.editItem(pos);
} }
}, },
'delete': function(event, data) { 'remove': function(event, data) {
that.triggerEvent('delete', data); that.triggerEvent('remove', data);
}, },
select: selectAnnotation, select: selectAnnotation,
submit: updateAnnotation submit: updateAnnotation
@ -138,6 +141,7 @@ Ox.AnnotationPanel = function(options, self) {
if(self.$annotations.options('selected')) if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]); self.$annotations.options('selected',[]);
} }
return that; return that;
}; };

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

@ -72,13 +72,13 @@ Ox.VideoEditor = function(options, self) {
movePositionBy(self.sizes.timeline[0].width); movePositionBy(self.sizes.timeline[0].width);
}, },
key_i: function() { key_i: function() {
setPoint('in'); setPoint('in', self.options.position);
}, },
key_left: function() { key_left: function() {
movePositionBy(-0.04); movePositionBy(-0.04);
}, },
key_o: function() { key_o: function() {
setPoint('out'); setPoint('out', self.options.position);
}, },
key_openbracket: function() { key_openbracket: function() {
movePositionTo('subtitle', -1); movePositionTo('subtitle', -1);
@ -176,7 +176,7 @@ Ox.VideoEditor = function(options, self) {
goToPoint(type); goToPoint(type);
}, },
setpoint: function() { setpoint: function() {
setPoint(type); setPoint(type, self.options.position);
} }
}) })
.appendTo(self.$editor); .appendTo(self.$editor);
@ -243,8 +243,8 @@ Ox.VideoEditor = function(options, self) {
.bindEvent({ .bindEvent({
add: function(event, data) { add: function(event, data) {
data.layer = layer.id; data.layer = layer.id;
data['in'] = self.options.points[0]; data['in'] = self.options['in'];
data.out = self.options.points[1]; data.out = self.options.out;
that.triggerEvent('addAnnotation', data); that.triggerEvent('addAnnotation', data);
}, },
'delete': function(event, data) { 'delete': function(event, data) {
@ -440,24 +440,21 @@ Ox.VideoEditor = function(options, self) {
} }
function goToPoint(point) { function goToPoint(point) {
self.options.position = self.options[point]; setPosition(self.options[point]);
setPosition();
that.triggerEvent('position', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
} }
function movePositionBy(sec) { function movePositionBy(sec) {
self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration); setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
setPosition();
that.triggerEvent('position', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
} }
function movePositionTo(type, direction) { function movePositionTo(type, direction) {
self.options.position = getNextPosition(type, direction); setPosition(getNextPosition(type, direction));
setPosition();
that.triggerEvent('position', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
}); });
@ -497,10 +494,9 @@ Ox.VideoEditor = function(options, self) {
} }
function selectAnnotation(event, data) { function selectAnnotation(event, data) {
self.options.position = data['in'] setPosition(data['in']);
self.options.points = [data['in'], data.out]; setPoint('in', data['in']);
setPosition(); setPoint('out', data.out);
setPoints();
} }
function updateAnnotation(event, data) { function updateAnnotation(event, data) {
data['in'] = self.options.points[0]; data['in'] = self.options.points[0];
@ -513,9 +509,9 @@ Ox.VideoEditor = function(options, self) {
setPoints(); setPoints();
} }
function setPoint(point) { function setPoint(point, position) {
var otherPoint = point == 'in' ? 'out' : 'in'; var otherPoint = point == 'in' ? 'out' : 'in';
self.options[point] = self.options.position; self.options[point] = position;
self.$player.forEach(function($player) { self.$player.forEach(function($player) {
$player.options(point, self.options[point]); $player.options(point, self.options[point]);
}); });
@ -526,11 +522,12 @@ Ox.VideoEditor = function(options, self) {
$timeline.options(point, self.options[point]); $timeline.options(point, self.options[point]);
}); });
if (self.options['in'] > self.options.out) { 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({ self.$player[0].options({
position: self.options.position position: self.options.position
}); });