From 093edd57d0a9f7546a6530e3592d1d8e60737e33 Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Wed, 4 Jan 2012 22:57:32 +0530 Subject: [PATCH 1/2] - remove editItem from Ox.List - use ArrayEditable for text too --- source/Ox.UI/js/Form/Ox.ArrayEditable.js | 32 +++- source/Ox.UI/js/Form/Ox.Editable.js | 5 +- source/Ox.UI/js/Form/Ox.Input.js | 2 +- source/Ox.UI/js/List/Ox.ItemInput.js | 176 ------------------ source/Ox.UI/js/List/Ox.List.js | 50 ----- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 89 ++------- .../Ox.UI/js/Video/Ox.BlockVideoTimeline.js | 28 ++- .../js/Video/Ox.SmallVideoTimelineImage.js | 31 +-- source/Ox.UI/js/Video/Ox.VideoEditor.js | 130 +++++++------ source/Ox.UI/themes/classic/css/classic.css | 16 +- source/Ox.UI/themes/modern/css/modern.css | 6 + source/Ox/js/Collection.js | 18 +- 12 files changed, 180 insertions(+), 403 deletions(-) delete mode 100644 source/Ox.UI/js/List/Ox.ItemInput.js diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index d0c7711f..b20e084d 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) { items: [], position: -1, selected: '', + type: 'input', width: 256 }) .options(options || {}) @@ -40,10 +41,14 @@ Ox.ArrayEditable = function(options, self) { function anyclick(e) { var $target = $(e.target), - $parent = $target.parent(); - $target.is(':not(input)') && that.gainFocus(); + $parent = $target.parent(), + position = $parent.data('position'); + !$target.is('.OxInput') && that.gainFocus(); if ($parent.is('.OxEditableElement')) { - selectItem($parent.data('position')); + selectItem( + e.metaKey && position == self.selected + ? -1 : $parent.data('position') + ); } else { selectNone(); } @@ -58,10 +63,11 @@ Ox.ArrayEditable = function(options, self) { } function doubleclick(e) { - var $parent = $(e.target).parent(); + var $target = $(e.target), + $parent = $target.parent(); if ($parent.is('.OxEditableElement')) { that.editItem(self.options.selected); - } else { + } else if(!$target.is('.OxInput')) { that.triggerEvent('add'); } } @@ -88,9 +94,10 @@ Ox.ArrayEditable = function(options, self) { function renderItems() { that.empty(); self.options.items.forEach(function(item, i) { - i && $('') - .html(', ') - .appendTo(that); + i && self.options.type == 'input' + && $('') + .html(', ') + .appendTo(that); self.$items[i] = Ox.Editable({ editable: item.editable, format: function(value) { @@ -99,13 +106,18 @@ Ox.ArrayEditable = function(options, self) { tooltip: 'Click to select' + ( item.editable ? ', doubleclick to edit' : '' ), - value: item.value + type: self.options.type, + value: item.value, + width: self.options.type == 'input' ? 0 : self.options.width }) .addClass(item.id == self.options.selected ? 'OxSelected' : '') .data({position: i}) .bindEvent({ cancel: function(data) { + }, + edit: function(data) { + that.triggerEvent('edit', data); }, submit: function(data) { submit(i, data.value); @@ -159,6 +171,8 @@ Ox.ArrayEditable = function(options, self) { self.setOption = function(key, value) { if (key == 'items') { renderItems(); + } else if (key == 'selected') { + that.selectItem(value); } } diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 8b7e3cce..71410771 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/source/Ox.UI/js/Form/Ox.Editable.js @@ -63,6 +63,7 @@ Ox.Editable = function(options, self) { if (self.options.editing) { self.options.editing = false; + // edit will toggle self.options.editing edit(); } @@ -159,7 +160,7 @@ Ox.Editable = function(options, self) { } // fixme: why can't this be chained? setTimeout(function() { - self.$input.focusInput(true); + self.$input.focusInput(self.options.type == 'input'); }, 0); that.$tooltip && that.$tooltip.options({title: ''}); that.triggerEvent('edit', {editing: true}); @@ -224,4 +225,4 @@ Ox.Editable = function(options, self) { return that; -}; \ No newline at end of file +}; diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index 83fd869f..bb191680 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -885,7 +885,7 @@ Ox.Input = function(options, self) { var length = self.$input.val().length, start = Ox.isNumber(arguments[0]) ? (arguments[0] < 0 ? length + arguments[0] : arguments[0]) - : 0, + : arguments[0] ? 0 : length, stop = Ox.isNumber(arguments[1]) ? (arguments[1] < 0 ? length + arguments[1] : arguments[1]) : Ox.isNumber(arguments[0]) ? arguments[0] diff --git a/source/Ox.UI/js/List/Ox.ItemInput.js b/source/Ox.UI/js/List/Ox.ItemInput.js deleted file mode 100644 index 44c74b68..00000000 --- a/source/Ox.UI/js/List/Ox.ItemInput.js +++ /dev/null @@ -1,176 +0,0 @@ -// vim: et:ts=4:sw=4:sts=4:ft=javascript - -'use strict'; - -/*@ -Ox.ItemInput ItemInput Object - () -> ItemInput Object - (options) -> ItemInput Object - (options, self) -> ItemInput Object - options Options object - type can be textarea - value default value - height height - width width - self shared private variable - cancel triggered if cancel button is pressed - save triggered if save button is pressed -@*/ - -Ox.ItemInput = function(options, self) { - - self = self || {}; - var that = Ox.Element({}, self) - .defaults({ - type: 'textarea', - value: '', - height: 300, - width: 100 - }) - .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.Log('List', '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 = Ox.Input({ - 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(); - } - }) - ) - .append(Ox.Element() - .append(Ox.Button({type: 'text', title: 'Cancel'}) - .css('width', '42%') - .bindEvent({ - 'click': function() { - that.triggerEvent('cancel'); - } - })) - .append(Ox.Button({type: 'text', title: 'Save'}) - .css('width', '42%') - .bindEvent({ - 'click': function() { - that.triggerEvent('save', { - value: $input.value() - }); - } - })) - .css({ - 'margin-top': self.options.height-8, - 'height': '16px', - 'text-align': 'right', - }) - ); - Ox.Log('List', $input); - */ - - return that; - -}; diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index a5fcc687..b6983db4 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -1538,56 +1538,6 @@ Ox.List = function(options, self) { return that; }; - /*@ - editItem turn item into edit form - (pos) -> edit item at position - pos position of item to edit - @*/ - that.editItem = function(pos) { - var $input, - item = self.options.items[pos], - $item = self.$items[pos], - width = $item.width(), // fixme: don't lookup in DOM - height = $item.height(); - $item - .height(height + 8 + 16) - .empty() - .addClass('OxEdit'); - - $input = Ox.ItemInput({ - type: 'textarea', - value: item.value, - height: height, - width: width - }).bindEvent({ - cancel: cancel, - remove: remove, - save: submit - }).appendTo($item.$element); - /* - setTimeout(function() { - $input.gainFocus(); - $input.focus(); - }); - */ - function cancel() { - $item.options('data', item); - that.triggerEvent('cancel', item); - loadItems(); - } - function remove() { - that.triggerEvent('remove', item.id); - } - function submit(data) { - item.value = data.value; - //$input.loseFocus().remove(); - // fixme: leaky, inputs remain in focus stack - $item.options('data', item); - that.triggerEvent('submit', item); - loadItems(); - } - } - /*@ paste paste data (data) -> the list diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 04b35fb5..81d899bd 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) { id: '', items: [], range: 'all', - selected: -1, + selected: '', sort: 'position', title: '', type: 'text', @@ -78,12 +78,13 @@ Ox.AnnotationPanel = function(options, self) { self.$annotations = Ox.Element(); } else if (self.options.type == 'place') { self.$annotations = Ox.Element(); - } else if (self.options.type == 'string') { + } else if (['string', 'text'].indexOf(self.options.type) > -1) { self.$annotations = Ox.ArrayEditable({ editable: self.options.editable, items: getAnnotations(), sort: self.sort, - width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE + width: self.options.width, + type: self.options.type == 'text' ? 'textarea' : 'input' }) .bindEvent({ add: function(data) { @@ -94,63 +95,11 @@ Ox.AnnotationPanel = function(options, self) { 'delete': function(data) { that.triggerEvent('remove', {id: data.id}); }, - select: function(data) { - selectAnnotation({ids: [data.id]}); - }, - submit: updateAnnotation - }); - } else if (self.options.type == 'text') { - self.$annotations = Ox.List({ - construct: function(data) { - var $item = Ox.Element() - .addClass('OxAnnotation OxTarget') - .css({padding: '4px 4px 0 4px'}) - .append( - Ox.Editable({ - type: 'textarea', - width: self.options.width - 8, - value: data.value - }) - .bindEvent({ - edit: function() { - $item.removeClass('OxTarget'); - }, - submit: function(newData) { - $item.addClass('OxTarget'); - updateAnnotation({ - id: data.id, - value: newData.value - }); - } - }) - ) - .append($('
').css({height: '4px'})); - return $item; - }, - items: getAnnotations(), - max: 1, - min: 0, - sort: self.sort, - type: 'none', // fixme - unique: 'id' - }) - .bindEvent({ - cancel: function(item) { - //reset in/out points - selectAnnotation({ids: [item.id]}); - }, - open: function(data) { - return; - if (data.ids.length == 1) { - var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]); - self.$annotations.editItem(pos); - } - }, - 'delete': function(data) { - that.triggerEvent('remove', {id: data.ids[0]}); + edit: function(data) { + that.triggerEvent('edit', data); }, select: selectAnnotation, - submit: updateAnnotation + submit: editAnnotation }); } self.$annotations.appendTo(that.$content); @@ -185,15 +134,17 @@ Ox.AnnotationPanel = function(options, self) { } function selectAnnotation(data) { - var item = Ox.getObjectById(self.options.items, data.ids[0]); - item && that.triggerEvent('select', { + var item = Ox.getObjectById(self.options.items, data.id); + that.triggerEvent('select', Ox.extend({ + id: data.id + }, item ? { 'in': item['in'], - 'out': item.out, - 'layer': self.options.id - }); + out: item.out, + layer: self.options.id + } : {})); } - function updateAnnotation(data) { + function editAnnotation(data) { var item = Ox.getObjectById(self.options.items, data.id); item.value = data.value; that.triggerEvent('submit', item); @@ -221,7 +172,7 @@ Ox.AnnotationPanel = function(options, self) { items: getAnnotations() }); } else if (key == 'sort') { - self.$annotations.options({sort: value}); + self.$annotations.options('sort', value); } }; @@ -231,11 +182,7 @@ Ox.AnnotationPanel = function(options, self) { that.addItem = function(item) { var pos = 0; self.options.items.splice(pos, 0, item); - if (self.$annotations.addItem) { - self.$annotations.addItem(pos, item); - } else { - self.$annotations.addItems(pos, [item]); - } + self.$annotations.addItem(pos, item); self.$annotations.editItem(pos); }; @@ -243,7 +190,7 @@ Ox.AnnotationPanel = function(options, self) { deselectItems deselectItems @*/ that.deselectItems = function() { - self.$annotations.options('selected', []); + self.$annotations.options('selected', ''); }; /*@ diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index 4607738b..97860c85 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -16,6 +16,7 @@ Ox.BlockVideoTimeline = function(options, self) { results: [], showPointMarkers: false, showSubtitles: false, + state: 'default', subtitles: [], width: 0 }) @@ -50,16 +51,16 @@ Ox.BlockVideoTimeline = function(options, self) { setCSS(); self.$image = Ox.SmallVideoTimelineImage({ - duration: self.options.duration, - editing: self.options.editing, - 'in': self.options['in'], - out: self.options.out, - results: self.options.results, - subtitles: self.options.showSubtitles ? self.options.subtitles : [], - timeline: self.options.getImageURL, - width: Math.round(self.options.duration), - type: self.options.type - }); + duration: self.options.duration, + editing: self.options.editing, + 'in': self.options['in'], + out: self.options.out, + results: self.options.results, + subtitles: self.options.showSubtitles ? self.options.subtitles : [], + timeline: self.options.getImageURL, + width: Math.round(self.options.duration), + type: 'editor' + }); Ox.loop(self.lines, function(i) { addLine(i); @@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) { updateTimelines(); } + function setState() { + self.$image.options({state: self.options.state}); + updateTimelines(); + } + function setWidth() { self.lines = getLines(); setCSS(); @@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) { setPositionMarker(); } else if (key == 'results') { setResults(); + } else if (key == 'state') { + setState(); } else if (key == 'width') { setWidth(); } diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js index 020aa987..8894c91c 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js @@ -6,11 +6,10 @@ Ox.SmallVideoTimelineImage = function(options, self) { var that = Ox.Element({}, self) .defaults({ duration: 0, - editing: false, 'in': 0, out: 0, results: [], - selected: false, + state: 'default', subtitles: [], timeline: '', width: 256, @@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) { .appendTo(that.$element); function getImageURL(image, callback) { - var width = image == 'results' || image == 'selection' ? - self.options.width : self.imageWidth, + var width = image == 'results' || image == 'selection' + ? self.options.width : self.imageWidth, height = self.imageHeight, canvas = $('') .attr({ @@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) { ) + 1; Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { - var alpha = self.options.type == 'player' ? 128 - : (y == top || y == bottom - 1) ? 255 : 64, - color = Ox.Theme[self.theme].timeline.result, + var alpha = self.options.type == 'editor' + && (y == top || y == bottom - 1) ? 192 : 64, + color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1 + ? [0, 0, 0] : [255, 255, 0], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; @@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) { ) + 1, top = 0, bottom = height, - rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255]; + rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]] + : self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]] + : [[0, 0, 0], [255, 255, 255]]; Ox.loop(left, right, function(x) { Ox.loop(top, bottom, function(y) { - var alpha = self.options.type == 'player' ? 128 - : (y == top || y == bottom - 1) ? 255 : 64, - color = Ox.Theme[self.theme].timeline[ - self.options.editing ? 'editing' - : self.options.selected ? 'selected' : 'default' - ], + var alpha = self.options.type == 'editor' + && (y == top || y == bottom - 1) ? 192 : 64, + color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1], index = x * 4 + y * 4 * width; data[index] = color[0]; data[index + 1] = color[1]; @@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) { self.$subtitles.attr({ src: getImageURL('subtitles') }); + } else if (key == 'state') { + self.$selection.attr({ + src: getImageURL('selection') + }); } else if (key == 'width') { that.css({width: value + 'px'}); self.$results diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index badefb99..42f1c5e3 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) { posterFrame: 0, posterFrameControls: false, resolution: 0, + selected: '', showAnnotations: false, showLargeTimeline: true, + state: 'default', subtitles: [], tooltips: false, videoRatio: 16/9, @@ -284,6 +286,7 @@ Ox.VideoEditor = function(options, self) { results: find(self.options.find), showPointMarkers: true, showSubtitles: true, + state: self.options.state, subtitles: self.options.subtitles, videoId: self.options.videoId, width: self.sizes.timeline[1].width @@ -313,6 +316,7 @@ Ox.VideoEditor = function(options, self) { out: self.options.out, position: self.options.position, range: self.options.annotationsRange, + // selected: self.options.selected, sort: self.options.annotationsSort, width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE }, layer) @@ -324,6 +328,9 @@ Ox.VideoEditor = function(options, self) { data.out = self.options.out; that.triggerEvent('addannotation', data); }, + edit: function(data) { + setState(data.editing ? 'editing' : 'selected'); + }, remove: function(data) { that.triggerEvent('removeannotation', { id: data.id, @@ -331,14 +338,14 @@ Ox.VideoEditor = function(options, self) { }); }, select: function(data) { - self.options.layers.forEach(function(layer_, i_) { - if (i_ != i) { - // FIXME: the way AnnotationPanel is set up, - // it does not actually have that method - // self.$annotationPanel[i_].deselectItems(); - } - }); - selectAnnotation(data); + if(data.id) { + self.options.layers.forEach(function(layer_, i_) { + if (i_ != i) { + self.$annotationPanel[i_].deselectItems(); + } + }); + selectAnnotation(data); + } }, submit: editAnnotation }) @@ -671,50 +678,52 @@ Ox.VideoEditor = function(options, self) { }) .appendTo(self.$annotationsbar); - that.$element = Ox.SplitPanel({ - elements: [ - { - element: Ox.SplitPanel({ - elements: [ - { - element: self.$videobar, - size: 16 - }, - { - element: self.$editor - } - ], - orientation: 'vertical' - }) - }, - { - collapsed: !self.options.showAnnotations, - collapsible: true, - element: Ox.SplitPanel({ - elements: [ - { - element: self.$annotationsbar, - size: 16 - }, - { - element: self.$annotations, - } - ], - orientation: 'vertical' - }) - .bindEvent({ - resize: resizeAnnotations, - resizeend: resizeendAnnotations, - toggle: toggleAnnotations - }), - resizable: true, - resize: [192, 256, 320, 384], - size: self.options.annotationsSize, - tooltip: self.options.tooltips ? 'annotations' : false - } - ], - orientation: 'horizontal' - }); + that.setElement( + Ox.SplitPanel({ + elements: [ + { + element: Ox.SplitPanel({ + elements: [ + { + element: self.$videobar, + size: 16 + }, + { + element: self.$editor + } + ], + orientation: 'vertical' + }) + }, + { + collapsed: !self.options.showAnnotations, + collapsible: true, + element: Ox.SplitPanel({ + elements: [ + { + element: self.$annotationsbar, + size: 16 + }, + { + element: self.$annotations, + } + ], + orientation: 'vertical' + }) + .bindEvent({ + resize: resizeAnnotations, + resizeend: resizeendAnnotations, + toggle: toggleAnnotations + }), + resizable: true, + resize: [192, 256, 320, 384], + size: self.options.annotationsSize, + tooltip: self.options.tooltips ? 'annotations' : false + } + ], + orientation: 'horizontal' + }) + ); // we need a timeout so that a chained bindEvent // actually catches the event @@ -920,9 +929,12 @@ Ox.VideoEditor = function(options, self) { } function selectAnnotation(data) { - //setPosition(data['in']); - setPoint('in', data['in']); - setPoint('out', data.out); + self.options.annotationsRange != 'position' && setPosition(data['in']); + if (data.id) { + setPoint('in', data['in']); + setPoint('out', data.out); + } + setState(data.id ? 'selected' : 'default'); } function select(type) { @@ -933,6 +945,9 @@ Ox.VideoEditor = function(options, self) { function setPoint(point, position) { var otherPoint = point == 'in' ? 'out' : 'in'; self.options[point] = position; + if (self.options.state == 'selected') { + setState('default'); + } self.$player.forEach(function($player) { $player.options(point, self.options[point]); }); @@ -1000,6 +1015,11 @@ Ox.VideoEditor = function(options, self) { }); } + function setState(state) { + self.options.state = state; + self.$timeline[1].options({state: state}); + } + function submitFindInput(value, hasPressedEnter) { self.options.find = value; self.results = find(self.options.find); diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 68d52e95..0b357655 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -340,10 +340,6 @@ Forms background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192)); } -.OxThemeClassic .OxEditableElement.OxSelected { - background: rgb(208, 208, 208); -} - /* ================================================================================ Images @@ -743,6 +739,13 @@ Video background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1)); } +.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected { + background: rgb(192, 255, 192); +} +.OxThemeClassic .OxAnnotationPanel .OxEditableElement input { + background: rgb(192, 192, 255); +} + /* ================================================================================ Miscellaneous @@ -775,7 +778,10 @@ Miscellaneous -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } -.OxThemeClassic ::selection { +.OxThemeClassic ::selection, +.OxThemeClassic ::-moz-selection, +.OxThemeClassic ::-o-selection, +.OxThemeClassic ::-webkit-selection { background: rgb(192, 192, 192); //color: rgb(255, 255, 255); } diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 92a72109..acaef4b6 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -760,6 +760,12 @@ Video //display: none; } +.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected { + background: rgb(0, 128, 0); +} +.OxThemeModern .OxAnnotationPanel .OxEditableElement input { + background: rgb(64, 64, 192); +} /* ================================================================================ diff --git a/source/Ox/js/Collection.js b/source/Ox/js/Collection.js index 41265cfe..a4e0b6fa 100644 --- a/source/Ox/js/Collection.js +++ b/source/Ox/js/Collection.js @@ -104,8 +104,8 @@ Ox.filter Filters a collection by a given condition objects and strings. > Ox.filter([2, 1, 0], function(v, i) { return v == i; }) [1] - > Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })) - ['b'] + > Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; }) + {b: 'b'} > Ox.filter(' foo bar ', function(v) { return v != ' '; }) 'foobar' @*/ @@ -113,14 +113,14 @@ Ox.filter Filters a collection by a given condition Ox.filter = function(col, fn) { var type = Ox.typeOf(col), ret = type == 'array' ? [] : type == 'object' ? {} : ''; - Ox.forEach(col, function(v, k) { - if (fn(v, k)) { + Ox.forEach(col, function(val, key) { + if (fn(val, key)) { if (type == 'array') { - ret.push(v); + ret.push(val); } else if (type == 'object') { - ret[k] = v; + ret[key] = val; } else { - ret += v; + ret += val; } } }); @@ -384,7 +384,7 @@ Ox.last = function(arr, val) { Ox.len Returns the length of an array, function, object or string Not to be confused with Ox.length, which is the length property of the Ox function - (1). + (1). // FIXME: 1 becomes 67 in DocPanel > Ox.len([1, 2, 3]) 3 > Ox.len([,]) @@ -455,7 +455,6 @@ Ox.makeArray Takes an array-like object and returns a true array > Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3}) ["f", "o", "o"] @*/ - Ox.makeArray = /MSIE/.test(navigator.userAgent) ? function(col) { var i, len, ret = []; @@ -632,7 +631,6 @@ Ox.shuffle Randomizes the order of values within a collection > Ox.shuffle('123').length 3 @*/ - Ox.shuffle = function(col) { var keys, ret, type = Ox.typeOf(col), values; function sort() { From dc4a8bf464fd266d81ecb67b84b3fb652fc899f2 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 6 Jan 2012 17:28:53 +0530 Subject: [PATCH 2/2] update Ox.URL --- source/Ox.UI/js/Core/Ox.URL.js | 23 +++++++------- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 33 ++++++++------------- source/Ox.UI/js/Video/Ox.VideoEditor.js | 23 +++++++++----- 3 files changed, 38 insertions(+), 41 deletions(-) diff --git a/source/Ox.UI/js/Core/Ox.URL.js b/source/Ox.UI/js/Core/Ox.URL.js index 0d47bd44..432f0ec3 100644 --- a/source/Ox.UI/js/Core/Ox.URL.js +++ b/source/Ox.UI/js/Core/Ox.URL.js @@ -125,9 +125,12 @@ example.com/2001/2001 -> example.com/0062622/video/00:33:21 example.com/2002/2002 -> example.com/calendar/2002/2002 2002 is a valid duration, but no list view supports durations. Then it is read as a year, and we get calendar view with find *=2002 +example.com/@paris/london -> example.com/map/@paris/london + paris matches place ABC (case-insensitive), but (assuming) find *=london + does not match place ABC, "paris" becomes the map query example.com/@paris/paris -> example.com/map/ABC/paris - paris matches a place name (case-insensitive), so we get map view, zoomed to - Paris, with find *=paris + paris matches place ABC (case-insensitive), so we get map view, zoomed to + ABC/Paris, which is selected, with find *=paris example.com/@renaissance/renaissance -> example.com/calendar/ABC/renaissance renaissaince matches an event name (case-insensitive), so we get calendar view, zoomed to the Renaissance, with find *=renaissance @@ -200,13 +203,9 @@ Ox.URL = function(options) { function constructFind(find) { return find.conditions.map(function(condition) { - var ret; - if (condition.conditions) { - ret = '(' + constructFind(condition) + ')'; - } else { - ret = constructCondition(condition); - } - return ret; + return condition.conditions + ? '(' + constructFind(condition) + ')' + : constructCondition(condition); }).join(find.operator); } @@ -275,10 +274,7 @@ Ox.URL = function(options) { type = Ox.isArray(findKey.type) ? findKey.type[0] : findKey.type, value = str, values = findKey.values; - if (type == 'enum') { - return values[value]; - } - return value; + return type == 'enum' ? values[value] : value; } function decodeValue(str) { @@ -531,6 +527,7 @@ Ox.URL = function(options) { if (!state.span && /^[A-Z@]/.test(parts[0])) { // test for span id or name self.options.getSpan(state.item, state.view, parts[0].replace(/%20/g, ' '), function(span, view) { + Ox.Log('Core', 'span/view', span, view) if (span) { if (!state.view) { // set list or item view diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 81d899bd..215c3e70 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -82,6 +82,7 @@ Ox.AnnotationPanel = function(options, self) { self.$annotations = Ox.ArrayEditable({ editable: self.options.editable, items: getAnnotations(), + selected: self.options.selected, sort: self.sort, width: self.options.width, type: self.options.type == 'text' ? 'textarea' : 'input' @@ -104,20 +105,16 @@ Ox.AnnotationPanel = function(options, self) { } self.$annotations.appendTo(that.$content); - /* - self.$annotations = Ox.Element() - .appendTo(that.$content); - self.$annotation = []; - self.options.items.forEach(function(item, i) { - self.$annotation[i] = Ox.Element() - .addClass('OxAnnotation') - .html(item.value.replace(/\n/g, '
')) - .click(function() { - clickAnnotation(i); - }) - .appendTo(self.$annotations); - }); - */ + Ox.print('SOS', self.options.selected); + self.options.selected && setTimeout(function() { + selectAnnotation({id: self.options.selected}); + }, 0); + + function editAnnotation(data) { + var item = Ox.getObjectById(self.options.items, data.id); + item.value = data.value; + that.triggerEvent('submit', item); + } function getAnnotations() { return self.options.items.filter(function(item) { @@ -128,7 +125,7 @@ Ox.AnnotationPanel = function(options, self) { ) || ( self.options.range == 'position' && item['in'] <= self.options.position - && item.out > self.options.position + && item.out >= self.options.position ) }); } @@ -144,12 +141,6 @@ Ox.AnnotationPanel = function(options, self) { } : {})); } - function editAnnotation(data) { - var item = Ox.getObjectById(self.options.items, data.id); - item.value = data.value; - that.triggerEvent('submit', item); - } - function togglePanel() { } diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 42f1c5e3..86e259a8 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -157,6 +157,8 @@ Ox.VideoEditor = function(options, self) { margin: 8, }); + Ox.print('VIDEO EDITOR OPTIONS', self.options) + self.words = []; Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) { return subtitle.text; @@ -309,6 +311,8 @@ Ox.VideoEditor = function(options, self) { self.$annotationPanel = []; self.options.layers.forEach(function(layer, i) { + var item = Ox.getObjectById(layer.items, self.options.selected), + selected = item ? item.id : ''; self.$annotationPanel[i] = Ox.AnnotationPanel( Ox.extend({ font: self.options.annotationsFont, @@ -316,7 +320,7 @@ Ox.VideoEditor = function(options, self) { out: self.options.out, position: self.options.position, range: self.options.annotationsRange, - // selected: self.options.selected, + selected: selected, sort: self.options.annotationsSort, width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE }, layer) @@ -338,13 +342,15 @@ Ox.VideoEditor = function(options, self) { }); }, select: function(data) { - if(data.id) { + if (data.id) { self.options.layers.forEach(function(layer_, i_) { if (i_ != i) { self.$annotationPanel[i_].deselectItems(); } }); selectAnnotation(data); + } else { + // ... } }, submit: editAnnotation @@ -873,9 +879,9 @@ Ox.VideoEditor = function(options, self) { //Ox.Log('Video', 'getSizes', scrollbarIsVisible, height, self.options.height, size) return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size; function getHeight() { - return size.player[0].height + self.controlsHeight + - size.timeline[0].height + lines * 16 + - (lines + 3) * self.margin; + return size.player[0].height + self.controlsHeight + + size.timeline[0].height + lines * 16 + + (lines + 3) * self.margin; } } @@ -930,11 +936,14 @@ Ox.VideoEditor = function(options, self) { function selectAnnotation(data) { self.options.annotationsRange != 'position' && setPosition(data['in']); + setState(data.id ? 'selected' : 'default'); + that.triggerEvent('select', { + id: data.id || '' + }); if (data.id) { setPoint('in', data['in']); setPoint('out', data.out); } - setState(data.id ? 'selected' : 'default'); } function select(type) { @@ -942,7 +951,7 @@ Ox.VideoEditor = function(options, self) { setPoints(); } - function setPoint(point, position) { + function setPoint(point, position, annotation) { var otherPoint = point == 'in' ? 'out' : 'in'; self.options[point] = position; if (self.options.state == 'selected') {