From e4dd39383430fda48f6bd8a1519b7a497c5450b1 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Wed, 11 Jan 2012 13:22:01 +0530 Subject: [PATCH] update video editor and css --- source/Ox.UI/js/Form/Ox.Editable.js | 1 - source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 6 ++- source/Ox.UI/js/Video/Ox.VideoEditor.js | 48 ++++++++++++++++++++- source/Ox.UI/themes/classic/css/classic.css | 8 ++-- source/Ox.UI/themes/modern/css/modern.css | 11 ++++- 5 files changed, 65 insertions(+), 9 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 3f4b9471..6f1fef77 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/source/Ox.UI/js/Form/Ox.Editable.js @@ -185,7 +185,6 @@ Ox.Editable = function(options, self) { return self.options.type == 'input' ? self.options.value.replace(/ /g, ' ') : Ox.encodeHTML(self.options.value || ' ') - //.replace(/ /g, ' ') .replace(/\n$/, '\n ') .replace(/\n/g, '
') /* diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index b5b59cbc..333ae1a5 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -22,6 +22,7 @@ Ox.AnnotationPanel = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ + collapsed: false, editable: false, id: '', items: [], @@ -50,7 +51,7 @@ Ox.AnnotationPanel = function(options, self) { that.setElement( Ox.CollapsePanel({ - collapsed: false, + collapsed: self.options.collapsed, extras: self.options.editable ? [ Ox.Button({ id: 'add', @@ -147,7 +148,8 @@ Ox.AnnotationPanel = function(options, self) { } function togglePanel() { - + self.options.collapsed = !self.options.collapsed; + that.triggerEvent('toggle', {collapsed: self.options.collapsed}); } self.setOption = function(key, value) { diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index e2de1bae..d0064c5e 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -43,6 +43,7 @@ Ox.VideoEditor = function(options, self) { selected: '', showAnnotations: false, showLargeTimeline: true, + showLayers: {}, subtitles: [], tooltips: false, videoRatio: 16/9, @@ -90,6 +91,9 @@ Ox.VideoEditor = function(options, self) { editAnnotation(); } }, + key_equal: function() { + self.options.videoSize == 'small' && toggleSize(); + }, key_escape: function() { if (self.editing) { blurAnnotation(); @@ -111,6 +115,9 @@ Ox.VideoEditor = function(options, self) { key_left: function() { movePositionBy(-0.04); }, + key_minus: function() { + self.options.videoSize == 'large' && toggleSize(); + }, key_o: function() { setPoint('out', self.options.position); }, @@ -347,6 +354,7 @@ Ox.VideoEditor = function(options, self) { selected = item ? item.id : ''; self.$annotationPanel[i] = Ox.AnnotationPanel( Ox.extend({ + collapsed: !self.options.showLayers[layer.id], font: self.options.annotationsFont, 'in': self.options['in'], out: self.options.out, @@ -393,7 +401,13 @@ Ox.VideoEditor = function(options, self) { // ... } }, - submit: submitAnnotation + submit: submitAnnotation, + toggle: function(data) { + that.triggerEvent('togglelayer', { + collapsed: data.collapsed, + layer: layer.id + }); + } }) .appendTo(self.$annotations); }); @@ -724,6 +738,31 @@ Ox.VideoEditor = function(options, self) { }) .appendTo(self.$annotationsbar); + self.$editMenuButton = Ox.MenuButton({ + items: [ + {id: 'edit', title: 'Edit Selected Annotation', disabled: !self.options.selected, keyboard: 'return'}, + {id: 'delete', title: 'Delete Selected Annotation', disabled: !self.options.selected, keyboard: 'delete'}, + {}, + {id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'}, + {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'} + ], + style: 'square', + title: 'edit', + tooltip: 'Editing Options', + type: 'image' + }) + .css({float: 'right'}) + .bindEvent({ + click: function(data) { + if (data.id == 'delete') { + + } else if (data.id == 'edit') { + editAnnotation(); + } + } + }) + .appendTo(self.$annotationsbar); + that.setElement( Ox.SplitPanel({ elements: [ @@ -1065,6 +1104,7 @@ Ox.VideoEditor = function(options, self) { getPanel(self.options.selected).options({selected: self.options.selected}); } setTimelineState(); + updateEditMenu(); that.triggerEvent('select', { id: self.options.selected }); @@ -1252,6 +1292,12 @@ Ox.VideoEditor = function(options, self) { }); } + function updateEditMenu() { + var action = self.options.selected ? 'enableItem' : 'disableItem'; + self.$editMenuButton[action]('edit'); + self.$editMenuButton[action]('delete'); + } + self.setOption = function(key, value) { if (key == 'width' || key == 'height') { Ox.Log('Video', 'XXXX setSizes', key, value, self.options.width, self.options.height) diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 495d9022..501ab142 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -740,15 +740,17 @@ Video } .OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected { - background: rgb(192, 192, 255); - box-shadow: 0 0 1px rgb(96, 96, 96); + background: rgb(128, 128, 255); + box-shadow: 0 0 1px rgb(64, 64, 64); } .OxThemeClassic .OxAnnotationPanel .OxEditableElement input { background: rgb(160, 224, 160); - box-shadow: 0 0 1px rgb(96, 96, 96); + color: rgb(0, 0, 0); + box-shadow: 0 0 1px rgb(64, 64, 64); } .OxThemeClassic .OxAnnotationPanel .OxEditableElement textarea { background: rgb(160, 224, 160); + color: rgb(0, 0, 0); } /* diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index acaef4b6..5299d67a 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -761,10 +761,17 @@ Video } .OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected { - background: rgb(0, 128, 0); + background: rgb(64, 64, 192); + box-shadow: 0 0 1px rgb(255, 255, 255); } .OxThemeModern .OxAnnotationPanel .OxEditableElement input { - background: rgb(64, 64, 192); + background: rgb(64, 128, 64); + color: rgb(255, 255, 255); + box-shadow: 0 0 1px rgb(255, 255, 255); +} +.OxThemeModern .OxAnnotationPanel .OxEditableElement textarea { + background: rgb(64, 128, 64); + color: rgb(255, 255, 255); } /*