support formatting of values in lists; make list icons load faster

build/js/ox.js

@@ -1184,16 +1184,6 @@ Encoding functions
 Format functions
 ================================================================================
 */
-Ox.format = function (s, args) {
-    /* Python(ish) string formatting:
-     * >>> format('{0}', ['zzz'])
-     * "zzz"
-     * >>> format('{x}', {x: 1})
-     * "1"
-     */
-    var re = /\{([^}]+)\}/g;
-    return s.replace(re, function(_, match){ return args[match]; });
-}
 
 Ox.formatDate = function() {
     /*
@@ -1354,9 +1344,24 @@ Ox.formatDate = function() {
     return function(date, str) {
         str = str || date;
         date = arguments.length == 2 ? date : new Date();
+        var split;
+        if (typeof date == 'string') {
+            // support YYYY-MM-DD
+            split = date.substr(0, 10).split('-');
+            if (split.length == 3) {
+                date = [split[1], split[2], split[0]].join('/') + date.substr(10);
+            }
+        }
+        if (Ox.isNumber(date) || Ox.isString(date)) {
+            date = new Date(date);
+        }
+        if (Ox.isDate(date) && date.toString() != 'Invalid Date') {
             $.each(format, function(i, v) {
                 str = str.replace(v[0], v[1](date));
             });
+        } else {
+            str = '';
+        }
         return str;
     };
 }();
@@ -1417,16 +1422,31 @@ Ox.formatNumber = function(num, dec) {
     "666,667"
     */
     var str = Math.abs(num).toFixed(dec || 0),
-        spl = str.split("."),
+        spl = str.split('.'),
         arr = [];
     while (spl[0]) {
         arr.unshift(spl[0].substr(-3));
         spl[0] = spl[0].substr(0, spl[0].length - 3);
     }
-    spl[0] = arr.join(",");
-    return (num < 0 ? "-" : "") + spl.join(".");
+    spl[0] = arr.join(',');
+    return (num < 0 ? '-' : '') + spl.join('.');
 };
 
+Ox.formatPercent = function(num, total, dec) {
+    return Ox.formatNumber(num / total * 100, dec) + '%'
+};
+
+Ox.formatString = function (s, args) {
+    /* Python(ish) string formatting:
+     * >>> format('{0}', ['zzz'])
+     * "zzz"
+     * >>> format('{x}', {x: 1})
+     * "1"
+     */
+    var re = /\{([^}]+)\}/g;
+    return s.replace(re, function(_, match){ return args[match]; });
+}
+
 Ox.formatValue = function(num, str) {
     /*
     >>> Ox.formatValue(0, "B")

build/js/ox.ui.js

@@ -6013,10 +6013,11 @@ requires
                 })
                 .one('load', function() {
                     that.$iconImage.removeClass('OxLoading');
-                    that.$reflectionImage.removeClass('OxLoading');
-                });
-            that.$reflectionImage.attr({
+                    that.$reflectionImage
+                        .attr({
                             src: self.options.url
+                        })
+                        .removeClass('OxLoading');
                 });
         }
 
@@ -6066,6 +6067,7 @@ requires
             $items: [],
             $pages: [],
             clickTimeout: 0,
+            format: {},
             ids: {},
             itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
             keyboardEvents: {
@@ -6465,6 +6467,7 @@ requires
                         self.$items[pos] = new Ox.ListItem({
                             construct: self.options.construct,
                             data: v,
+                            format: self.options.format,
                             id: v[self.options.unique],
                             position: pos
                         });
@@ -6912,13 +6915,20 @@ requires
                 .defaults({
                     construct: function() {},
                     data: {},
+                    format: [],
                     id: '',
                     position: 0
                 })
                 .options(options || {});
 
         $.each(self.options.data, function(k, v) {
-            self.options.data[k] = $.isArray(v) ? v.join(', ') : v;
+            var format = self.options.format[k];
+            if (Ox.isArray(v)) {
+                self.options.data[k] = v.join(', ');
+            } else if (format) {
+                self.options.data[k] = Ox['format' + Ox.toTitleCase(format.type)]
+                    .apply(this, $.merge([v], format.args));
+            }
         });
 
         that.$element = self.options.construct(self.options.data)
@@ -6949,6 +6959,7 @@ requires
                     columnsRemovable: false,
                     columnsResizable: false,
                     columnWidth: [40, 800],
+                    format: [],
                     id: '',
                     max: -1,
                     min: 0,
@@ -7023,6 +7034,7 @@ requires
 
         that.$body = new Ox.List({
                 construct: constructItem,
+                format: self.options.format,
                 id: self.options.id,
                 itemHeight: 16,
                 itemWidth: getItemWidth(),
@@ -7204,7 +7216,6 @@ requires
                     });
             $.each(self.visibleColumns, function(i, v) {
                 var $cell = $('<div>')
-                
                         .addClass('OxCell OxColumn' + Ox.toTitleCase(v.id))
                         .css({
                             width: (self.columnWidths[i] - 9) + 'px',