From 7f904cda1f844fb0cfab90eaef9530dfc4d36dd9 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 19 May 2011 12:18:39 +0200 Subject: [PATCH] first demo of auto-resizing textarea --- demos/videoeditor/js/videoeditor.js | 43 +++++--- source/Ox.UI/js/Form/Ox.Input.js | 23 +++-- source/Ox.UI/js/List/Ox.ItemInput.js | 108 +++++++++++++++++++- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 16 +-- source/Ox.UI/js/Video/Ox.VideoEditor.js | 35 +++---- 5 files changed, 175 insertions(+), 50 deletions(-) diff --git a/demos/videoeditor/js/videoeditor.js b/demos/videoeditor/js/videoeditor.js index 99430503..a365add2 100644 --- a/demos/videoeditor/js/videoeditor.js +++ b/demos/videoeditor/js/videoeditor.js @@ -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 }); diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index cba68b5e..beced278 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -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') { diff --git a/source/Ox.UI/js/List/Ox.ItemInput.js b/source/Ox.UI/js/List/Ox.ItemInput.js index cdca8c91..46864240 100644 --- a/source/Ox.UI/js/List/Ox.ItemInput.js +++ b/source/Ox.UI/js/List/Ox.ItemInput.js @@ -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; + } diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index b36f6594..4072a919 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -8,8 +8,8 @@ Ox.AnnotationPanel AnnotationPanel Object options Options object id id items items - titles title - type panel type + title title + type panel type width self 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; }; diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index ebee29d1..d9f787fd 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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 });