0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add custom icons to Ox.TreeList

Browse source
This commit is contained in:
rolux 2012-06-12 13:13:23 +02:00
parent 721e77f01b
commit 15264c188f
1 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
source/Ox.UI/js/List/TreeList.js
View file

@ -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'}),
padding = (data.level + !data.items) * 16 - 8;
var $item = $('<div>').css({
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({
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')
)
})
)
.css({width: padding + 'px'})
.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(
'symbol' + (expanded ? 'Down' : 'Right')
)
src: getIcon(item.id, expanded).attr('src')
});
expanded
? that.$element.addItems(