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
parent
f2dbfbd1e5
commit
b3e7945a96
3 changed files with 67 additions and 58 deletions
|
|
@ -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'));
|
||||
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue