add InfoList (draft)

source/Ox.UI/css/Ox.UI.css

@@ -995,21 +995,27 @@ Lists
     opacity: 1;
 }
 
-.OxIconList .OxItem > div {
+.OxIconList .OxItem > div,
+.OxInfoList .OxIcon > div {
     position: relative;
 }
 
 .OxIconList .OxItem > .OxIcon,
-.OxIconList .OxItem > .OxText {
+.OxIconList .OxItem > .OxText,
+.OxInfoList .OxItem > .OxIcon,
+.OxInfoList .OxItem > .OxText {
     //left: -2px;
 }
 
-.OxIconList .OxItem > .OxIcon {
+.OxIconList .OxItem > .OxIcon,
+.OxInfoList .OxItem > .OxIcon {
     overflow: hidden;
 }
 
 .OxIconList .OxItem > .OxIcon > img,
-.OxIconList .OxItem > .OxIcon > .OxVideoPlayer {
+.OxIconList .OxItem > .OxIcon > .OxVideoPlayer,
+.OxInfoList .OxItem > .OxIcon > img,
+.OxInfoList .OxItem > .OxIcon > .OxVideoPlayer {
     position: absolute;
     left: 0;
     right: 0;
@@ -1020,11 +1026,13 @@ Lists
     border-radius: 4px;
 }
 
-.OxIconList .OxItem > .OxReflection {
+.OxIconList .OxItem > .OxReflection,
+.OxInfoList .OxItem > .OxReflection {
     overflow: hidden;
 }
 
-.OxIconList .OxItem > .OxReflection > div {
+.OxIconList .OxItem > .OxReflection > div,
+.OxInfoList .OxItem > .OxReflection > div {
     position: absolute;
     left: 0;
     top: 0;
@@ -1032,7 +1040,8 @@ Lists
     margin: auto;
 }
 
-.OxIconList .OxItem > .OxReflection > img {
+.OxIconList .OxItem > .OxReflection > img,
+.OxInfoList .OxItem > .OxReflection > img {
     position: absolute;
     left: 0;
     top: 0;
@@ -1040,10 +1049,12 @@ Lists
     margin: auto;
 }
 
-.OxIconList .OxItem > .OxText {
+.OxIconList .OxItem > .OxText,
+.OxInfoList .OxItem > .OxText {
     text-align: center;
 }
-.OxIconList .OxItem > .OxText > div {
+.OxIconList .OxItem > .OxText > div,
+.OxInfoList .OxItem > .OxText > div {
     display: inline-block;
     font-size: 9px;
     font-weight: bold;

source/Ox.UI/js/List/Ox.IconList.js

@@ -46,6 +46,7 @@ Ox.IconList = function(options, self) {
                 selected: [],
                 size: 128,
                 sort: [],
+                unique: ''
             })
             .options(options || {});
 
@@ -60,6 +61,7 @@ Ox.IconList = function(options, self) {
 
     that.$element = Ox.List({
             centered: self.options.centered,
+            // fixme: change all occurences of construct to render
             construct: constructItem,
             draggable: self.options.draggable,
             id: self.options.id,
@@ -71,24 +73,16 @@ Ox.IconList = function(options, self) {
             min: self.options.min,
             orientation: self.options.orientation,
             selected: self.options.selected,
-            size: self.options.size,
             sort: self.options.sort,
             type: 'icon',
             unique: self.options.unique
         }, $.extend({}, self)) // pass event handler
-        .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
+        .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation));
-        .click(click)
-        .dblclick(dblclick)
-        .scroll(scroll);
 
     updateKeys();
 
-    function click() {
-        
-    }
-
     function constructItem(data) {
-        var isEmpty = Ox.isEmpty(data);
+        var isEmpty = Ox.isEmpty(data),
             data = !isEmpty
                 ? self.options.item(data, self.options.sort, self.options.size)
                 : {
@@ -99,7 +93,7 @@ Ox.IconList = function(options, self) {
                         self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
                     ))
                 };
-        return self.options.itemConstructor($.extend(data, {
+        return self.options.itemConstructor(Ox.extend(data, {
             borderRadius: self.options.borderRadius,
             iconHeight: self.iconHeight,
             iconWidth: self.iconWidth,
@@ -113,14 +107,6 @@ Ox.IconList = function(options, self) {
         }));
     }
 
-    function dblclick() {
-        
-    }
-
-    function scroll() {
-        
-    }
-
     function updateKeys() {
         self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
         that.$element.options({
@@ -130,13 +116,11 @@ Ox.IconList = function(options, self) {
 
     /*@
     setOption <f> set key/value
-        (key, value) -> <u> set eky in options to value
+        (key, value) -> <u> set key in options to value
     @*/
     self.setOption = function(key, value) {
         if (key == 'items') {
             that.$element.options(key, value);
-        } else if (key == 'paste') {
-            that.$element.options(key, value);
         } else if (key == 'selected') {
             that.$element.options(key, value);
         } else if (key == 'sort') {
@@ -177,6 +161,7 @@ Ox.IconList = function(options, self) {
     @*/
     that.scrollToSelection = function() {
         that.$element.scrollToSelection();
+        return that;
     };
 
     /*@

source/Ox.UI/js/List/Ox.InfoList.js

@@ -0,0 +1,172 @@
+Ox.InfoList = function(options, self) {
+  
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            borderRadius: 0,
+            defaultRatio: 1,
+            draggable: false,
+            id: '',
+            item: null,
+            items: null,
+            keys: [],
+            max: -1,
+            min: 0,
+            selected: [],
+            size: 192,
+            sort: [],
+            unique: ''
+        })
+        .options(options || {})
+
+    self.iconHeight = Math.round(self.options.size * 2/3);
+    self.iconWidth = self.iconHeight;
+    self.itemHeight = self.options.size;
+
+    that.$element = Ox.List({
+            construct: constructItem,
+            draggable: self.options.draggable,
+            id: self.options.id,
+            itemHeight: self.itemHeight,
+            items: self.options.items,
+            itemWidth: getItemWidth(),
+            keys: self.options.keys,
+            max: self.options.max,
+            min: self.options.min,
+            orientation: 'vertical',
+            pageLength: 10,
+            selected: self.options.selected,
+            sort: self.options.sort,
+            type: 'info',
+            unique: self.options.unique
+        })
+        .addClass('OxInfoList');
+
+    updateKeys();
+
+    function constructItem(data) {
+        var isEmpty = Ox.isEmpty(data),
+            data = !isEmpty
+                ? self.options.item(data, self.options.sort, self.options.size)
+                : {
+                    icon: {
+                        width: Math.round(self.options.size * (
+                            self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
+                        )),
+                        height: Math.round(self.options.size / (
+                            self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
+                        ))
+                    },
+                    info: {}
+                };
+        Ox.print('DATA -=-------', data)
+        
+        var $icon = Ox.Element()
+                .css({
+                    float: 'left',
+                    width: '128px',
+                    height: '192px',
+                    margin: '4px',
+                    background: 'rgba(255, 255, 255, 0.1)'
+                })
+                .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,
+                            itemHeight: self.itemHeight,
+                            itemWidth: 128,
+                        }))
+                        .addClass('OxIcon')
+                        .css({
+                            position: 'absolute'
+                        })
+                ),
+            $info = Ox.Element()
+                .css({
+                    float: 'left',
+                    width: getItemWidth() - 152 + 'px',
+                    height: '192px',
+                    margin: '4px'
+                }),
+            $infobox = Ox.Element()
+                .css({
+                    position: 'absolute',
+                    width: getItemWidth() - 152 + 'px',
+                    height: '192px',
+                    overflow: 'hidden'
+                })
+                .appendTo($info);
+            $item = Ox.Element()
+                .css({
+                    width: getItemWidth() - 8 + 'px',
+                    height: 192 + 'px',
+                    margin: '4px'
+                })
+                .append($icon)
+                .append($info);
+        if (!isEmpty) {
+            var $element = data.info.element(Ox.extend(data.info.options, {
+                    width: getItemWidth() - 152
+                }))
+                .addClass('OxInfoElement')
+                .css(data.info.css);
+            $element.addClass('OxId' + $element.id);
+            $infobox.append($element);
+        }
+        return $item;
+    }
+
+
+    function getItemWidth(cached) {
+        if (!cached) {
+            self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
+        } else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
+            self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
+            self.cachedWidthTime = +new Date();
+        }
+        return self.cachedWidth;
+    }
+
+    function updateKeys() {
+        self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
+        that.$element.options({
+            keys: self.options.keys
+        });
+    }
+
+    self.setOption = function(key, value) {
+        if (key == 'items') {
+            that.$element.options(key, value);
+        } else if (key == 'selected') {
+            that.$element.options(key, value);
+        } else if (key == 'sort') {
+            that.$element.options(key, value);
+        } else if (key == 'width') {
+            var width = getItemWidth();
+            $('.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.parent().parent().css({width: width - 8});
+                Ox.print('@@@', this.className, id)
+                Ox.print('@@@', this.className, id)
+                Ox.print('@@@', this.className, id)
+                Ox.print('@@@', this.className, id)
+                Ox.print('@@@', this.className, id)
+                Ox.UI.elements[id].options({width: width - 152});
+            });
+        }
+    };
+
+    that.closePreview = function() {
+        that.$element.closePreview();
+        return that;
+    };
+
+    return that;
+
+};

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -182,6 +182,7 @@ Ox.VideoEditor = function(options, self) {
                 posterFrame: self.options.posterFrame,
                 showMarkers: true,
                 showMilliseconds: 3,
+                sizeIsLarge: self.options.videoSize == 'large',
                 subtitles: self.options.subtitles,
                 type: type,
                 video: type == 'play' ? self.options.video : self.options.getFrameURL,

source/Ox.UI/themes/modern/css/modern.css

@@ -233,7 +233,8 @@ Lists
 ================================================================================
 */
 
-.OxThemeModern .OxIconList .OxItem > img.OxLoading {
+.OxThemeModern .OxIconList .OxItem > img.OxLoading,
+.OxThemeModern .OxInfoList .OxIcon > img.OxLoading {
     border-color: rgb(48, 48, 48);
     background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
     background: -webkit-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));