update infolist

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});

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
         });
     }
 

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] = $('<img>')
-            .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] = $('<img>')
+                .addClass('OxMarkerPoint' + titlecase)
+                .attr({
+                    src: Ox.UI.getImageURL('marker' + titlecase)
+                })
+                .appendTo(that.$element);
+            setPointMarker(point);
+        });
+    }
 
     function addLine(i) {
         self.$lines[i] = $('<div>')
@@ -99,7 +101,8 @@ Ox.BlockVideoTimeline = function(options, self) {
             })
             .appendTo(self.$lines[i]);
         self.$interfaces[i] = $('<div>')
-            .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') {

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