support fixed-ratio icon lists

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

@@ -918,7 +918,11 @@ Lists
     //left: -2px;
 }
 
-.OxIconList .OxItem > .OxIcon img {
+.OxIconList .OxItem > .OxIcon {
+    overflow: hidden;
+}
+
+.OxIconList .OxItem > .OxIcon > img {
     position: absolute;
     left: 0;
     right: 0;

source/Ox.UI/js/List/Ox.IconItem.js

@@ -7,13 +7,14 @@ Ox.IconItem <f:Ox.Element> IconItem Object
     (options, self) -> <f> IconItem Object
     options <o> Options object
         borderRadius <n|0> border radius for icon images
-        fixedRatio <b|n|false> if set to a number, icons have a fixed ratio
-        height <n|128> icon height
+        iconHeight <n|128> icon height
+        iconWidth <n|128> icon width
+        imageHeight <n|128> icon image height
+        imageWidth <n|128> icon image width
         id <s> element id
         info <s> icon info
         size <n|128> icon size
         title <s> title
-        width <n|128> icon width
         url <s> icon url
     self    <o> shared private variable
 @*/
@@ -26,38 +27,40 @@ Ox.IconItem = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 borderRadius: 0,
-                fixedRatio: false,
-                height: 128,
+                iconHeight: 128,
+                iconWidth: 128,
+                imageHeight: 128,
+                imageWidth: 128,
+                itemHeight: 192,
+                itemWidth: 128,
                 id: '',
                 info: '',
-                size: 128,
                 title: '',
-                width: 128,
                 url: ''
             })
             .options(options || {});
 
     $.extend(self, {
-        fontSize: self.options.size == 64 ? 6 : 9,
-        height: self.options.size * 1.5,
-        lineLength: self.options.size == 64 ? 15 : 23,
-        lines: self.options.size == 64 ? 4 : 5,
+        fontSize: self.options.itemWidth == 64 ? 6 : 9,
+        lineLength: self.options.itemWidth == 64 ? 15 : 23,
+        lines: self.options.itemWidth == 64 ? 4 : 5,
         url: Ox.UI.PATH + 'png/transparent.png',
-        width: self.options.size
     });
     self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
     self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
 
+    Ox.print('SELF OPTIONS', self.options)
+
     that.css({
-        width: self.width + 'px',
-        height: self.height + 'px'
+        width: self.options.itemWidth + 'px',
+        height: self.options.itemHeight + 'px'
     });
     that.$icon = $('<div>')
         .addClass('OxIcon')
         .css({
-            top: self.options.size == 64 ? -64 : -124,
-            width: (self.options.size + 4) + 'px',
-            height: (self.options.size + 4) + 'px'
+            top: self.options.iconWidth == 64 ? -64 : -124,
+            width: (self.options.iconWidth + 4) + 'px',
+            height: (self.options.iconHeight + 4) + 'px'
         });
     that.$iconImage = $('<img>')
         .addClass('OxLoading OxTarget')
@@ -65,8 +68,8 @@ Ox.IconItem = function(options, self) {
             src: self.url
         })
         .css({
-            width: self.options.width + 'px',
-            height: self.options.height + 'px',
+            width: self.options.imageWidth + 'px',
+            height: self.options.imageHeight + 'px',
             borderRadius: self.options.borderRadius + 4 + 'px'
         })
         .mousedown(mousedown)
@@ -76,9 +79,9 @@ Ox.IconItem = function(options, self) {
     that.$textBox = $('<div>')
         .addClass('OxText')
         .css({
-            top: (self.options.size / 2) + 'px',
-            width: (self.options.size + 4) + 'px',
-            height: (self.options.size == 64 ? 30 : 58) + 'px'
+            top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
+            width: self.options.itemWidth + 4 + 'px',
+            height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
         });
     that.$text = $('<div>')
         .addClass('OxTarget')
@@ -93,9 +96,9 @@ Ox.IconItem = function(options, self) {
     that.$reflection = $('<div>')
         .addClass('OxReflection')
         .css({
-            top: self.options.size + 'px',
-            width: (self.options.size + 4) + 'px',
-            height: (self.options.size / 2) + 'px'
+            top: self.options.iconHeight + 'px',
+            width: self.options.itemWidth + 4 + 'px',
+            height: self.options.itemHeight - self.options.iconHeight + 'px'
         });
     that.$reflectionImage = $('<img>')
         .addClass('OxLoading')
@@ -103,17 +106,17 @@ Ox.IconItem = function(options, self) {
             src: self.url
         })
         .css({
-            width: self.options.width + 'px',
-            height: self.options.height + 'px',
+            width: self.options.imageWidth + 'px',
+            height: self.options.imageHeight + 'px',
             // firefox is 1px off when centering images with odd width and scaleY(-1)
-            paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px',
-            borderRadius: self.options.borderRadius + 4 + 'px'
+            paddingLeft: ($.browser.mozilla && self.options.imageWidth % 2 ? 1 : 0) + 'px',
+            borderRadius: self.options.borderRadius + 'px'
         });
     that.$gradient = $('<div>')
         .css({
             //top: (-self.options.size / 2) + 'px',
-            width: self.options.size + 'px',
-            height: (self.options.size / 2) + 'px'
+            width: self.options.itemWidth + 'px',
+            height: self.options.itemWidth / 2 + 'px'
         });
 
     that.append(
@@ -174,6 +177,7 @@ Ox.IconItem = function(options, self) {
         that.removeClass('OxHover');
     }
 
+    Ox.print('CSS HEIGHT', that.css('height'))
     return that;
 
 };

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

@@ -53,10 +53,10 @@ Ox.IconList = function(options, self) {
         self.options.defaultRatio = self.options.fixedRatio;
     }
 
-    $.extend(self, {
-        itemHeight: self.options.size * 1.5,
-        itemWidth: self.options.size
-    });
+    self.iconHeight = self.options.size / (self.options.fixedRatio || 1);
+    self.iconWidth = self.options.size;
+    self.itemHeight = self.iconHeight + self.options.size * 0.5;
+    self.itemWidth = self.options.size;
 
     that.$element = Ox.List({
             centered: self.options.centered,
@@ -89,15 +89,27 @@ Ox.IconList = function(options, self) {
 
     function constructItem(data) {
         var isEmpty = Ox.isEmpty(data);
-            data = !isEmpty ? 
-                self.options.item(data, self.options.sort, self.options.size) : {}
-            ratio = !isEmpty ? data.width / data.height : self.options.defaultRatio;
+            data = !isEmpty
+                ? self.options.item(data, self.options.sort, self.options.size)
+                : {
+                    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
+                    ))
+                };
         return self.options.itemConstructor($.extend(data, {
             borderRadius: self.options.borderRadius,
-            fixedRatio: self.options.fixedRatio,
-            height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
-            size: self.options.size,
-            width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
+            iconHeight: self.iconHeight,
+            iconWidth: self.iconWidth,
+            imageHeight: data.height,
+            imageWidth: data.width,
+            itemHeight: self.itemHeight,
+            itemWidth: self.itemWidth,
+            //height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
+            //size: self.options.size,
+            //width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
         }));
     }
 

source/Ox.UI/js/List/Ox.ListItem.js

@@ -21,7 +21,7 @@ Ox.ListItem = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
             .defaults({
-                construct: function() {},
+                construct: null,
                 data: {},
                 draggable: false,
                 position: 0,