fix bugs in treelist where the icon would not update, items would not expand, and expanding items would be slow

This commit is contained in:
rlx 2011-10-01 13:06:50 +00:00
parent f2dbfbd1e5
commit b3e7945a96
3 changed files with 67 additions and 58 deletions

View file

@ -1,36 +1,38 @@
Ox.load('UI', {debug: true}, function() {
Ox.load({UI: {debug: true}, Geo: {}}, function() {
Ox.load('Geo', function() {
var $treeList = new Ox.TreeList({
data: {'Ox.COUNTRIES': Ox.COUNTRIES}
var $treeList = new Ox.TreeList({
data: {'Ox.COUNTRIES': Ox.COUNTRIES},
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
.bindEvent({
resize: function(data) {
$treeList.options({width: data.width - Ox.UI.SCROLLBAR_SIZE});
}
}),
$debug = new Ox.Element('div'),
$button = new Ox.Button({
title: 'Debug'
})
.bindEvent({
click: function() {
$text.html(JSON.stringify($treeList.$element.options('items')))
}
})
.appendTo($debug),
$text = new Ox.Element('div').appendTo($debug),
$splitPanel = new Ox.SplitPanel({
elements: [
{
element: $treeList,
size: 256,
resizable: true,
resize: [128, 256, 384]
},
{
element: $debug
}
],
orientation: 'horizontal'
}).appendTo($('body'));
});
$debug = new Ox.Element('div'),
$button = new Ox.Button({
title: 'Debug'
})
.bindEvent({
click: function() {
$text.html(JSON.stringify($treeList.$element.options('items')))
}
})
.appendTo($debug),
$text = new Ox.Element('div').appendTo($debug),
$splitPanel = new Ox.SplitPanel({
elements: [
{
element: $treeList,
size: 256,
resizable: true,
resize: [128, 256, 384]
},
{
element: $debug
}
],
orientation: 'horizontal'
}).appendTo($('body'));
});

View file

@ -692,8 +692,8 @@ Ox.List = function(options, self) {
});
self.selected.length && scrollToPosition(self.selected[0]);
// that.triggerEvent('init', {items: self.options.items.length});
// fixme: do async lists need to trigger init?
// will this only be reached in async lists?
// fixme: do sync lists need to trigger init?
// will this only be reached in sync lists?
}
function loadPage(page, callback) {
@ -1397,8 +1397,7 @@ Ox.List = function(options, self) {
@*/
that.addItems = function(pos, items) {
var $items = [],
length = items.length
//first = self.$items.length == 0;
length = items.length;
self.selected.forEach(function(v, i) {
if (v >= pos) {
self.selected[i] += length;
@ -1422,11 +1421,9 @@ Ox.List = function(options, self) {
$item.insertAfter($items[i - 1]);
}
});
self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items));
self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items));
//if(first)
loadItems();
//loadItems();
updatePositions();
}
@ -1548,12 +1545,13 @@ Ox.List = function(options, self) {
length <n> number of items to remove
@*/
that.removeItems = function(pos, length) {
if(!length) { //pos is list of ids
Ox.print('removeItems', pos, length)
if (Ox.isUndefined(length)) { // pos is list of ids
pos.forEach(function(id) {
var p = getPositionById(id);
that.removeItems(p, 1);
});
} else { //remove items from pos to pos+length
} else { // remove items from pos to pos+length
Ox.range(pos, pos + length).forEach(function(i) {
self.selected.indexOf(i) > -1 && deselect(i);
self.$items[i].removeElement();
@ -1667,6 +1665,8 @@ Ox.List = function(options, self) {
return id_ == data[key] ? value : id_
});
}
self.options.items[pos][key] = value;
if (pos == 0) Ox.print(self.options.items[pos])
data[key] = value;
$item.options({data: data});
return that;

View file

@ -33,11 +33,9 @@ Ox.TreeList = function(options, self) {
if (self.options.data) {
self.options.items = [];
//Ox.print('d', self.options.data, 'i', self.options.items)
Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) {
self.options.items.push(parseData(key, self.options.data[key]));
});
//Ox.print('d', self.options.data, 'i', self.options.items)
}
that.$element = Ox.List({
@ -48,7 +46,7 @@ Ox.TreeList = function(options, self) {
max: self.options.max,
min: self.options.min,
unique: 'id'
}, Ox.extend({}, self))
}, Ox.copy(self))
.addClass('OxTextList OxTreeList')
.css({
width: self.options.width + 'px'
@ -72,6 +70,7 @@ Ox.TreeList = function(options, self) {
function constructItem(data) {
var $item = $('<div>'), //.css({width: self.options.width + 'px'}),
padding = (data.level + !data.items) * 16 - 8;
if (data.title.indexOf('COUNTRIES') > -1) Ox.print('DATA...', data);
if (data.level || !data.items) {
$('<div>')
.addClass('OxCell OxTarget')
@ -137,7 +136,8 @@ Ox.TreeList = function(options, self) {
function parseData(key, value) {
//Ox.print('parseData', key, value)
var ret = {
id: Ox.uid(),
expanded: false,
id: Ox.uid().toString(),
title: key.toString() + ': '
},
type = Ox.typeOf(value);
@ -148,9 +148,9 @@ Ox.TreeList = function(options, self) {
});
} else {
ret.title += (
type == 'function' ?
value.toString().split('{')[0] :
JSON.stringify(value)
type == 'function'
? value.toString().split('{')[0]
: JSON.stringify(value)
);
}
return ret;
@ -163,10 +163,14 @@ Ox.TreeList = function(options, self) {
items.forEach(function(item, i) {
var item_ = Ox.extend({
level: level
}, item, item.items ? {
items: !!item.expanded ?
parseItems(item.items, level + 1) : []
} : {});
}, item, item.items
? {
items: !!item.expanded
? parseItems(item.items, level + 1)
: []
}
: {}
);
ret.push(item_);
item.items && Ox.merge(ret, item_.items);
});
@ -176,7 +180,6 @@ Ox.TreeList = function(options, self) {
function toggleItem(item, expanded) {
var $img, pos;
item.expanded = expanded;
//getItemById(item.id).expanded = expanded;
that.$element.find('.OxItem').each(function() {
var $item = $(this);
if ($item.data('id') == item.id) {
@ -185,15 +188,19 @@ Ox.TreeList = function(options, self) {
return false;
}
});
//that.$element.value(item.id, 'expanded', expanded);
$img.attr({
src: Ox.UI.getImageURL(
'symbol' + (expanded ? 'Down' : 'Right')
)
});
that.$element.value(item.id, 'expanded', expanded);
expanded ?
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) :
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length);
expanded
? that.$element.addItems(
pos + 1, parseItems(item.items, item.level + 1)
)
: that.$element.removeItems(
pos + 1, parseItems(item.items, item.level + 1).length
);
}
function toggleItems(data) {
@ -209,7 +216,7 @@ Ox.TreeList = function(options, self) {
if (key == 'data') {
} else if (key == 'width') {
}
};