diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js index 25869871..29003c1f 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -199,13 +199,17 @@ Ox.ArrayEditable = function(options, self) { function triggerSelectEvent() { if (!self.triggered) { - that.triggerEvent('select', {id: self.options.selected}); + that.triggerEvent('select', Ox.extend({ + id: self.options.selected + }, self.options.selected ? { + top: self.$items[self.selected].offset().top + } : {})); self.triggered = true; setTimeout(function() { self.triggered = false; }, 250); } - }; + } self.setOption = function(key, value) { if (key == 'items') { diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 333ae1a5..53189ef4 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -25,7 +25,11 @@ Ox.AnnotationPanel = function(options, self) { collapsed: false, editable: false, id: '', + 'in': 0, + item: '', items: [], + out: 0, + position: 0, range: 'all', selected: '', sort: 'position', @@ -57,7 +61,7 @@ Ox.AnnotationPanel = function(options, self) { id: 'add', style: 'symbol', title: 'add', - tooltip: 'Add', + tooltip: 'Add ' + self.options.item, type: 'image' }).bindEvent({ click: function(data) { @@ -131,9 +135,7 @@ Ox.AnnotationPanel = function(options, self) { function selectAnnotation(data) { var item = Ox.getObjectById(self.options.items, data.id); self.options.selected = item ? data.id : ''; - that.triggerEvent('select', Ox.extend({ - id: data.id - }, item ? { + that.triggerEvent('select', Ox.extend(data, item ? { 'in': item['in'], out: item.out, layer: self.options.id diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index d0064c5e..aff6235f 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -396,10 +396,8 @@ Ox.VideoEditor = function(options, self) { self.$annotationPanel[i_].options({selected: ''}); } }); - selectAnnotation(data); - } else { - // ... } + selectAnnotation(data); }, submit: submitAnnotation, toggle: function(data) { @@ -1100,11 +1098,26 @@ Ox.VideoEditor = function(options, self) { if (self.options.selected) { setPoint('in', data['in']); setPoint('out', data.out); - Ox.print('???', JSON.stringify(self.options.selected), getPanel(self.options.selected)) getPanel(self.options.selected).options({selected: self.options.selected}); } setTimelineState(); updateEditMenu(); + if (data.top) { + var height = self.$annotations.height(), + scrollTop = self.$annotations.scrollTop(); + data.top -= 60; // 20 + 24 + 16 + Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top); + if (data.top < 0 || data.top > height - 16) { + if (data.top < 0) { + scrollTop += data.top - 3; + } else if (data.top > height - 16) { + scrollTop += data.top - height + 14; + } + self.$annotations.animate({ + scrollTop: scrollTop + 'px' + }, 0); + } + } that.triggerEvent('select', { id: self.options.selected }); diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 501ab142..d345dc03 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -740,7 +740,7 @@ Video } .OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected { - background: rgb(128, 128, 255); + background: rgb(192, 192, 255); box-shadow: 0 0 1px rgb(64, 64, 64); } .OxThemeClassic .OxAnnotationPanel .OxEditableElement input {