add custom icons to Ox.TreeList

source/Ox.UI/js/List/TreeList.js

@@ -5,6 +5,7 @@ Ox.TreeList <f> TreeList Object
     ([options[, self]]) -> <o:Ox.List> TreeList Object
     options <o> Options object
         data <f|null> data to be parsed to items, needs documentation
+        icon <o|f|null> Image URL, or function that returns an image object
         items <a|[]> array of items
         max <n|-1> maximum number of items that can be selected, -1 unlimited
         min <n|0> minimum number of items that have to be selected
@@ -21,6 +22,7 @@ Ox.TreeList = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 data: null,
+                icon: null,
                 items: [],
                 max: 1,
                 min: 0,
@@ -87,44 +89,49 @@ Ox.TreeList = function(options, self) {
     }
 
     function constructItem(data) {
-        var $item = $('<div>').css({width: self.options.width + 'px'}),
+        var $item = $('<div>').css({
-            padding = (data.level + !data.items) * 16 - 8;
+                width: self.options.width - Ox.UI.SCROLLBAR_SIZE + 'px'
+            }),
+            $cell = $('<div>').addClass('OxCell').css({width: '8px'}),
+            $icon = data.id ? getIcon(data.id, data.expanded || (
+                data.items ? false : null
+            )) : null,
+            padding = data.level * 16 - 8;
         if (data.level || !data.items) {
             $('<div>')
                 .addClass('OxCell OxTarget')
-                .css({
+                .css({width: padding + 'px'})
-                    width: padding + 'px'
-                })
-                .appendTo($item);
-        }
-        if (data.items) {
-            $('<div>')
-                .addClass('OxCell')
-                .css({
-                    width: '8px'
-                })
-                .append(
-                    // fixme: need Ox.Icon()
-                    $('<img>')
-                        .addClass('OxToggle')
-                        .attr({
-                            src: Ox.UI.getImageURL(
-                                'symbol' + (data.expanded ? 'Down' : 'Right')
-                            )
-                        })
-                )
                 .appendTo($item);
         }
+        $cell.appendTo($item);
+        $icon && $icon.addClass(data.items ? 'OxToggle' : 'OxTarget').appendTo($cell);
         $('<div>')
             .addClass('OxCell OxTarget' + (!data.items ? ' OxSelectable' : ''))
             .css({
-                width: (self.options.width - padding - 32 + !data.items * 16) + 'px'
+                width: self.options.width - padding - 32 - Ox.UI.SCROLLBAR_SIZE + 'px'
             })
             .html(data.title || '')
             .appendTo($item);
         return $item;
     }
 
+    function getIcon(id, expanded) {
+        var isFunction = Ox.isFunction(self.options.icon),
+            $icon = isFunction ? self.options.icon(id, expanded) : null;
+        if (!$icon) {
+            if (expanded === null) {
+                if (!$icon && self.options.icon && !isFunction) {
+                    $icon = $('<img>').attr({src: self.options.icon});
+                }
+            } else {
+                $icon = $('<img>').attr({src: Ox.UI.getImageURL(
+                    'symbol' + (expanded ? 'Down' : 'Right')
+                )});
+            }
+        }
+        return $icon;
+    }
+
     function getItemById(id, items, level) {
         var ret = null;
         items = items || self.options.items;
@@ -238,9 +245,7 @@ Ox.TreeList = function(options, self) {
         });
         //that.$element.value(item.id, 'expanded', expanded);
         $img.attr({
-            src: Ox.UI.getImageURL(
+            src: getIcon(item.id, expanded).attr('src')
-                'symbol' + (expanded ? 'Down' : 'Right')
-            )
         });
         expanded
             ? that.$element.addItems(