From 9b2766bc178c1fc5d882a82f875d375e19ef4780 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Wed, 1 Feb 2012 05:21:29 +0000 Subject: [PATCH] make find next/previous select the annotation --- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 3 +- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 4 +- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 2 +- .../js/Video/Ox.SmallVideoTimelineImage.js | 2 +- source/Ox.UI/js/Video/Ox.VideoEditor.js | 123 ++++++++++++++++-- source/Ox.UI/themes/classic/css/classic.css | 22 ++++ 6 files changed, 137 insertions(+), 19 deletions(-) diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index 153f9dd0..a2778f92 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -11,7 +11,7 @@ Ox.ArrayEditable = function(options, self) { .defaults({ clickLink: null, editable: true, - highlight: null, + highlight: '', itemName: 'item', items: [], maxHeight: void 0, @@ -114,6 +114,7 @@ Ox.ArrayEditable = function(options, self) { return value || ' ' }, */ + highlight: self.options.highlight, maxHeight: self.options.maxHeight, submitOnBlur: self.options.submitOnBlur, tooltip: 'Click to select' + ( diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index 307fb273..179ea0a9 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -25,7 +25,7 @@ Ox.AnnotationFolder = function(options, self) { clickLink: null, collapsed: false, editable: false, - highlight: null, + highlight: '', id: '', 'in': 0, item: '', @@ -206,7 +206,7 @@ Ox.AnnotationFolder = function(options, self) { self.$annotations = Ox.ArrayEditable({ clickLink: self.options.clickLink, editable: self.options.editable, - highlight: self.highlight, + highlight: self.options.highlight, items: self.annotations, placeholder: 'No ' + self.options.title, selected: self.options.selected, diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 3c17bffc..db68d6d0 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -13,7 +13,7 @@ Ox.AnnotationPanel = function(options, self) { clickLink: null, editable: false, font: 'small', - highlight: null, + highlight: '', layers: [], mapSize: 256, range: 'all', diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 714f2b43..edad13b1 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -125,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) { Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { var alpha = self.options.type == 'editor' - && (y == top || y == bottom - 1) ? 192 : 64, + && (y == top || y == bottom - 1) ? 255 : 128, color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? [0, 0, 0] : [255, 255, 0], index = x * 4 + y * 4 * width; diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 8c321075..2c3a6105 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -112,7 +112,7 @@ Ox.VideoEditor = function(options, self) { }); }, key_g: function() { - self.results.length && setPosition(getNextPosition('result', 1)); + self.results.length && selectAnnotation(getNextResult(1)); }, key_i: function() { setPoint('in', self.options.position); @@ -146,7 +146,7 @@ Ox.VideoEditor = function(options, self) { movePositionBy(self.options.duration); }, key_shift_g: function() { - self.results.length && setPosition(getNextPosition('result', -1)); + self.results.length && selectAnnotation(getNextResult(-1)); }, key_shift_left: function() { movePositionBy(-1); @@ -570,7 +570,7 @@ Ox.VideoEditor = function(options, self) { .css({float: 'right'}) .bindEvent({ click: function() { - setPosition(getNextPosition('result', 1)); + selectAnnotation(getNextResult(1)); } }) .appendTo(self.$menubar); @@ -585,7 +585,7 @@ Ox.VideoEditor = function(options, self) { .css({float: 'right'}) .bindEvent({ click: function() { - setPosition(getNextPosition('result', -1)); + selectAnnotation(getNextResult(-1)); } }) .appendTo(self.$menubar); @@ -600,6 +600,7 @@ Ox.VideoEditor = function(options, self) { clickLink: self.options.clickLink, editable: true, font: self.options.annotationsFont, + highlight: self.options.find, 'in': self.options['in'], layers: self.options.layers, mapSize: self.options.annotationsMapSize, @@ -643,6 +644,7 @@ Ox.VideoEditor = function(options, self) { }, edit: function(data) { Ox.print('EDIT EVENT REACHED EDITOR', data) + updateWords('remove'); self.editing = true; setTimelineState(); }, @@ -655,6 +657,7 @@ Ox.VideoEditor = function(options, self) { var layer = Ox.getObjectById(self.options.layers, data.layer), index = Ox.getIndexById(layer.items, data.id); layer.items.splice(index, 1); + updateWords('remove'); self.editing = false; self.options.selected = ''; setTimelineState(); @@ -734,6 +737,7 @@ Ox.VideoEditor = function(options, self) { } function blurAnnotation() { + updateWords('add'); self.editing = false; setTimelineState(); if ( @@ -750,6 +754,7 @@ Ox.VideoEditor = function(options, self) { } function editAnnotation() { + updateWords('remove'); self.editing = true; setTimelineState(); self.$annotationPanel.editItem(); @@ -764,12 +769,25 @@ Ox.VideoEditor = function(options, self) { return Ox.decodeHTML(Ox.stripTags( item.value.toLowerCase() )).indexOf(query) > -1 ? { + id: item.id, 'in': item['in'], out: item.out } : null; }); - }))); - //Ox.print('RESULTS:', results) + }))).sort(function(a, b) { + var ret = 0; + if (a['in'] < b['in']) { + ret = -1; + } else if (a['in'] > b['in']) { + ret = 1; + } else if (a.out > b.out) { + ret = -1; + } else if (a.out < b.out) { + ret = 1; + } + return ret; + }); + Ox.print('RESULTS:', results) /* results = Ox.map(self.options.subtitles, function(subtitle) { return subtitle.text.toLowerCase().indexOf(query) > -1 ? { @@ -817,6 +835,21 @@ Ox.VideoEditor = function(options, self) { return annotations.length ? annotations[0] : {id: ''}; } + function getAnnotationValue(annotationId) { + var found = false, value; + Ox.forEach(self.options.layers, function(layer, i) { + Ox.forEach(layer.items, function(item) { + if (item.id == annotationId) { + value = item.value; + found = true; + return false; + } + }); + return !found; + }); + return value; + } + // fixme: why not goToNextPosition()? function getNextPosition(type, direction) { var found = false, @@ -832,14 +865,18 @@ Ox.VideoEditor = function(options, self) { ))); } else if (type == 'cut') { positions = Ox.merge(0, self.options.cuts, self.options.duration); - } else if (type == 'result') { + }/* else if (type == 'result') { positions = self.results.map(function(v) { return v['in']; }); - } + }*/ direction == -1 && positions.reverse(); Ox.forEach(positions, function(v) { - if (direction == 1 ? v > self.options.position : v < self.options.position) { + if ( + direction == 1 + ? v > self.options.position + : v < self.options.position + ) { position = v; found = true; return false; @@ -852,6 +889,29 @@ Ox.VideoEditor = function(options, self) { return position; } + function getNextResult(direction) { + var found = false, + result, + results = Ox.clone(self.results); + direction == -1 && results.reverse(); + Ox.forEach(results, function(v) { + if ( + direction == 1 + ? v['in'] > self.options.position + : v['in'] < self.options.position + ) { + result = v; + found = true; + return false; + } + }); + direction == -1 && results.reverse(); + if (!found) { + result = results[direction == 1 ? 0 : results.length - 1]; + } + return result; + } + /* function getPoints(type) { var found = false, @@ -957,7 +1017,7 @@ Ox.VideoEditor = function(options, self) { Ox.forEach(Ox.count(Ox.words( Ox.merge(self.options.layers.map(function(layer) { return layer.items.map(function(item) { - return item.value; + return Ox.decodeHTML(Ox.stripTags(item.value.toLowerCase())); }); })).join(' ') )), function(count, value) { @@ -1001,8 +1061,10 @@ Ox.VideoEditor = function(options, self) { } else if (!data.id) { that.gainFocus(); } - self.editing = false; + // FIXME + // self.editing = false; self.options.selected = data.id; + Ox.print('SOS???', self.options.selected); if (self.options.selected) { self.options.annotationsRange != 'position' && setPosition(data['in']); setPoint('in', data['in'], true); @@ -1121,13 +1183,12 @@ Ox.VideoEditor = function(options, self) { } function submitAnnotation(data) { + updateWords('add'); self.editing = false; setTimelineState(); - /* Ox.print('....', self.options.annotationsRange == 'position', self.options.position < self.options['in'], self.options.position > self.options.out) - */ if ( self.options.annotationsRange == 'position' && ( self.options.position < self.options['in'] @@ -1166,7 +1227,8 @@ Ox.VideoEditor = function(options, self) { if (hasPressedEnter) { that.triggerEvent('find', {find: self.options.find}); if (self.results.length) { - setPosition(getNextPosition('result', 1)); + Ox.print('HELLO?>??', getNextResult(1)) + selectAnnotation(getNextResult(1)); } else { self.$findInput.focusInput(true); } @@ -1201,6 +1263,39 @@ Ox.VideoEditor = function(options, self) { }); } + function updateWords(action) { + var words = []; + Ox.forEach(Ox.count(Ox.words( + getAnnotationValue(self.options.selected) + )), function(count, value) { + words.push({count: count, value: value}); + }); + words.forEach(function(word) { + var index = Ox.getIndex(self.words, 'value', word.value); + if (action == 'add') { + if (index == -1) { + self.words.push({count: 1, value: word.value}); + } else { + self.words[index].count++; + } + } else { + if (self.words[index].count == 1) { + self.words.splice(index, 1); + } else { + self.words[index].count--; + } + } + }); + self.words.sort(function(a, b) { + return b.count - a.count; + }); + self.$findInput.options({ + autocomplete: self.words.map(function(word) { + return word.value; + }) + }); + } + self.setOption = function(key, value) { if (key == 'width' || key == 'height') { setSizes(); diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 62ae5d98..089b90ca 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -774,6 +774,28 @@ Video .OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected { background: rgb(192, 192, 255); } +.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected .OxHighlight { + background-color: transparent; + background-image: -moz-repeating-linear-gradient( + -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%, + rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%, + rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%, + rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100% + ); + background-image: -o-repeating-linear-gradient( + -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%, + rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%, + rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%, + rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100% + ); + background-image: -webkit-repeating-linear-gradient( + -45deg, rgb(192, 192, 255) 0, rgb(192, 192, 255) 25%, + rgb(255, 255, 0) 25%, rgb(255, 255, 0) 50%, + rgb(192, 192, 255) 50%, rgb(192, 192, 255) 75%, + rgb(255, 255, 0) 75%, rgb(255, 255, 0) 100% + ); + background-size: 4px 4px; +} .OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected { box-shadow: 0 0 1px rgb(64, 64, 64); }