0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

first demo of auto-resizing textarea

Browse source
This commit is contained in:
rolux 2011-05-19 12:18:39 +02:00
parent 67c154547c
commit 7f904cda1f
5 changed files with 175 additions and 50 deletions
Show stats 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'
}, 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
});

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.$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') {

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

@ -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;
}

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
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;
};

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);
},
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
});