diff --git a/source/Ox.UI/js/List/Ox.InfoList.js b/source/Ox.UI/js/List/Ox.InfoList.js index d5c07e31..1c75fe55 100644 --- a/source/Ox.UI/js/List/Ox.InfoList.js +++ b/source/Ox.UI/js/List/Ox.InfoList.js @@ -19,8 +19,7 @@ Ox.InfoList = function(options, self) { }) .options(options || {}) - self.iconHeight = Math.round(self.options.size * 2/3); - self.iconWidth = self.iconHeight; + self.iconSize = Math.round(self.options.size * 2/3); self.itemHeight = self.options.size; that.$element = Ox.List({ @@ -55,10 +54,10 @@ Ox.InfoList = function(options, self) { ? self.options.item(data, self.options.sort, self.options.size) : { icon: { - width: Math.round(self.options.size * ( + width: Math.round(self.iconSize * ( self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio )), - height: Math.round(self.options.size / ( + height: Math.round(self.iconSize / ( self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio )) }, @@ -77,13 +76,13 @@ Ox.InfoList = function(options, self) { .append( Ox.IconItem(Ox.extend(data.icon, { borderRadius: self.options.borderRadius, - iconHeight: 128, //self.iconHeight, - iconWidth: 128, //self.iconWidth, - imageHeight: data.height, - imageWidth: data.width, + iconHeight: self.iconSize, + iconWidth: self.iconSize, + imageHeight: data.icon.height, + imageWidth: data.icon.width, isInfoList: true, itemHeight: self.itemHeight, - itemWidth: 128, + itemWidth: 128 })) .addClass('OxInfoIcon') .css({ @@ -93,16 +92,15 @@ Ox.InfoList = function(options, self) { $info = Ox.Element() .css({ float: 'left', - width: getItemWidth() - 152 + 'px', - height: '192px', - margin: '4px', + width: getItemWidth() - 144 + 'px', + height: 196 + 'px', //background: 'green' }), $infobox = Ox.Element() .css({ position: 'absolute', - width: getItemWidth() - 152 + 'px', - height: '192px', + width: getItemWidth() - 144 + 'px', + height: 196 + 'px', overflow: 'hidden' }) .appendTo($info); @@ -119,9 +117,10 @@ Ox.InfoList = function(options, self) { var $element = data.info.element(Ox.extend(data.info.options, { width: getItemWidth() - 152 })) - .addClass('OxInfoElement') - .css(data.info.css); - $element.addClass('OxId' + $element.id); + .addClass('OxInfoElement'); + data.info.css && $element.css(data.info.css); + data.info.events && $element.bindEvent(data.info.events); + $element.addClass('OxId' + $element.id); // fixme: needed? $infobox.append($element); } return $item; @@ -149,6 +148,7 @@ Ox.InfoList = function(options, self) { if (key == 'items') { that.$element.options(key, value); } else if (key == 'selected') { + Ox.print('SELECTED', value) that.$element.options(key, value); } else if (key == 'sort') { that.$element.options(key, value); @@ -157,8 +157,8 @@ Ox.InfoList = function(options, self) { $('.OxInfoElement').each(function() { var $parent = $(this).parent(), id = parseInt(/OxId(.*?)$/.exec(this.className)[1]); - $parent.css({width: width - 152}); - $parent.parent().css({width: width - 152}); + $parent.css({width: width - 144}); + $parent.parent().css({width: width - 144}); $parent.parent().parent().css({width: width - 8}); Ox.print('@@@', this.className, id) Ox.UI.elements[id].options({width: width - 152}); diff --git a/source/Ox.UI/js/List/Ox.List.js b/source/Ox.UI/js/List/Ox.List.js index 2d679d4d..0e4a10ba 100644 --- a/source/Ox.UI/js/List/Ox.List.js +++ b/source/Ox.UI/js/List/Ox.List.js @@ -686,6 +686,18 @@ Ox.List = function(options, self) { return self.selected.indexOf(pos) > -1; } + function isSpecialTarget(e) { + var $element = $(e.target), + $parent; + while ( + !$element.is('.OxSpecialTarget') && !$element.is('.OxPage') + && ($parent = $element.parent()).length + ) { + $element = $parent; + } + return $element.is('.OxSpecialTarget'); + } + function loadItems() { self.$pages[0].empty(); self.$items = []; @@ -885,9 +897,10 @@ Ox.List = function(options, self) { } function doubleclick(data) { - open(); + open(isSpecialTarget(data)); } + /* function _mousedown(e) { // fixme: no longer used, remove var pos = findItemPosition(e), clickable, editable, @@ -970,6 +983,7 @@ Ox.List = function(options, self) { selectNone(); } } + */ function moveItem(startPos, stopPos) { var $item = self.$items[startPos], @@ -984,9 +998,10 @@ Ox.List = function(options, self) { self.selected = [stopPos]; } - function open() { + function open(isSpecialTarget) { self.options.selected.length && that.triggerEvent('open', { - ids: self.options.selected + ids: self.options.selected, + isSpecialTarget: isSpecialTarget == true }); } diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index cc8e0a63..db0f620e 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -11,6 +11,7 @@ Ox.BlockVideoTimeline = function(options, self) { out: 0, position: 0, results: [], + showPointMarkers: false, subtitles: [], width: 0 }) @@ -18,7 +19,6 @@ Ox.BlockVideoTimeline = function(options, self) { .addClass('OxBlockVideoTimeline') .css({ position: 'absolute', - //background: 'rgba(192, 192, 192, 0.1)' }) .bind({ mousedown: mousedown, @@ -69,17 +69,19 @@ Ox.BlockVideoTimeline = function(options, self) { .appendTo(that.$element); setPositionMarker(); - self.$pointMarker = {}; - ['in', 'out'].forEach(function(point) { - var titlecase = Ox.toTitleCase(point); - self.$pointMarker[point] = $('') - .addClass('OxMarkerPoint' + titlecase) - .attr({ - src: Ox.UI.getImageURL('marker' + titlecase) - }) - .appendTo(that.$element); - setPointMarker(point); - }); + if (self.options.showPointMarkers) { + self.$pointMarker = {}; + ['in', 'out'].forEach(function(point) { + var titlecase = Ox.toTitleCase(point); + self.$pointMarker[point] = $('') + .addClass('OxMarkerPoint' + titlecase) + .attr({ + src: Ox.UI.getImageURL('marker' + titlecase) + }) + .appendTo(that.$element); + setPointMarker(point); + }); + } function addLine(i) { self.$lines[i] = $('
') @@ -99,7 +101,8 @@ Ox.BlockVideoTimeline = function(options, self) { }) .appendTo(self.$lines[i]); self.$interfaces[i] = $('
') - .addClass('OxInterface') + // OxTarget and OxSpecialTarget are needed for InfoList + .addClass('OxInterface OxTarget OxSpecialTarget') .css({ position: 'absolute', top: '2px', @@ -139,6 +142,7 @@ Ox.BlockVideoTimeline = function(options, self) { // fixme: check if this pattern is better // than the one used for list selection if (!self.triggered) { + Ox.print('trigger............') that.triggerEvent('position', { position: self.options.position }); @@ -236,8 +240,10 @@ Ox.BlockVideoTimeline = function(options, self) { self.$images.pop(); } setPositionMarker(); - setPointMarker('in'); - setPointMarker('out'); + if (self.options.showPointMarkers) { + setPointMarker('in'); + setPointMarker('out'); + } } function updateTimelines() { @@ -254,7 +260,7 @@ Ox.BlockVideoTimeline = function(options, self) { self.setOption = function(key, value) { if (key == 'in' || key == 'out') { - setPoint(key); + self.options.showPointMarkers && setPoint(key); } else if (key == 'position') { setPositionMarker(); } else if (key == 'results') { diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 7aec5872..ebc43bf2 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -241,6 +241,7 @@ Ox.VideoEditor = function(options, self) { 'in': self.options['in'], out: self.options.out, position: self.options.position, + showPointMarkers: true, subtitles: self.options.subtitles, videoId: self.options.videoId, width: self.sizes.timeline[1].width