update infolist

2011-10-17 10:23:16 +00:00 · 2011-10-17 10:23:16 +00:00 · 5d669f42e3
commit 5d669f42e3
parent 57ed9f9680
4 changed files with 60 additions and 38 deletions
--- 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});
--- 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
        });
    }

--- 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] = $('<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') {
--- 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