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:
parent
f2dbfbd1e5
commit
b3e7945a96
3 changed files with 67 additions and 58 deletions
|
@ -1,9 +1,13 @@
|
||||||
Ox.load('UI', {debug: true}, function() {
|
Ox.load({UI: {debug: true}, Geo: {}}, function() {
|
||||||
|
|
||||||
Ox.load('Geo', function() {
|
|
||||||
|
|
||||||
var $treeList = new Ox.TreeList({
|
var $treeList = new Ox.TreeList({
|
||||||
data: {'Ox.COUNTRIES': Ox.COUNTRIES}
|
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'),
|
$debug = new Ox.Element('div'),
|
||||||
$button = new Ox.Button({
|
$button = new Ox.Button({
|
||||||
|
@ -31,6 +35,4 @@ Ox.load('UI', {debug: true}, function() {
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
}).appendTo($('body'));
|
}).appendTo($('body'));
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
});
|
|
@ -692,8 +692,8 @@ Ox.List = function(options, self) {
|
||||||
});
|
});
|
||||||
self.selected.length && scrollToPosition(self.selected[0]);
|
self.selected.length && scrollToPosition(self.selected[0]);
|
||||||
// that.triggerEvent('init', {items: self.options.items.length});
|
// that.triggerEvent('init', {items: self.options.items.length});
|
||||||
// fixme: do async lists need to trigger init?
|
// fixme: do sync lists need to trigger init?
|
||||||
// will this only be reached in async lists?
|
// will this only be reached in sync lists?
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadPage(page, callback) {
|
function loadPage(page, callback) {
|
||||||
|
@ -1397,8 +1397,7 @@ Ox.List = function(options, self) {
|
||||||
@*/
|
@*/
|
||||||
that.addItems = function(pos, items) {
|
that.addItems = function(pos, items) {
|
||||||
var $items = [],
|
var $items = [],
|
||||||
length = items.length
|
length = items.length;
|
||||||
//first = self.$items.length == 0;
|
|
||||||
self.selected.forEach(function(v, i) {
|
self.selected.forEach(function(v, i) {
|
||||||
if (v >= pos) {
|
if (v >= pos) {
|
||||||
self.selected[i] += length;
|
self.selected[i] += length;
|
||||||
|
@ -1422,11 +1421,9 @@ Ox.List = function(options, self) {
|
||||||
$item.insertAfter($items[i - 1]);
|
$item.insertAfter($items[i - 1]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items));
|
self.options.items.splice.apply(self.options.items, Ox.merge([pos, 0], items));
|
||||||
self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items));
|
self.$items.splice.apply(self.$items, Ox.merge([pos, 0], $items));
|
||||||
//if(first)
|
//loadItems();
|
||||||
loadItems();
|
|
||||||
updatePositions();
|
updatePositions();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1548,12 +1545,13 @@ Ox.List = function(options, self) {
|
||||||
length <n> number of items to remove
|
length <n> number of items to remove
|
||||||
@*/
|
@*/
|
||||||
that.removeItems = function(pos, length) {
|
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) {
|
pos.forEach(function(id) {
|
||||||
var p = getPositionById(id);
|
var p = getPositionById(id);
|
||||||
that.removeItems(p, 1);
|
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) {
|
Ox.range(pos, pos + length).forEach(function(i) {
|
||||||
self.selected.indexOf(i) > -1 && deselect(i);
|
self.selected.indexOf(i) > -1 && deselect(i);
|
||||||
self.$items[i].removeElement();
|
self.$items[i].removeElement();
|
||||||
|
@ -1667,6 +1665,8 @@ Ox.List = function(options, self) {
|
||||||
return id_ == data[key] ? value : id_
|
return id_ == data[key] ? value : id_
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
self.options.items[pos][key] = value;
|
||||||
|
if (pos == 0) Ox.print(self.options.items[pos])
|
||||||
data[key] = value;
|
data[key] = value;
|
||||||
$item.options({data: data});
|
$item.options({data: data});
|
||||||
return that;
|
return that;
|
||||||
|
|
|
@ -33,11 +33,9 @@ Ox.TreeList = function(options, self) {
|
||||||
|
|
||||||
if (self.options.data) {
|
if (self.options.data) {
|
||||||
self.options.items = [];
|
self.options.items = [];
|
||||||
//Ox.print('d', self.options.data, 'i', self.options.items)
|
|
||||||
Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) {
|
Ox.forEach(Ox.sort(Ox.keys(self.options.data)), function(key) {
|
||||||
self.options.items.push(parseData(key, self.options.data[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({
|
that.$element = Ox.List({
|
||||||
|
@ -48,7 +46,7 @@ Ox.TreeList = function(options, self) {
|
||||||
max: self.options.max,
|
max: self.options.max,
|
||||||
min: self.options.min,
|
min: self.options.min,
|
||||||
unique: 'id'
|
unique: 'id'
|
||||||
}, Ox.extend({}, self))
|
}, Ox.copy(self))
|
||||||
.addClass('OxTextList OxTreeList')
|
.addClass('OxTextList OxTreeList')
|
||||||
.css({
|
.css({
|
||||||
width: self.options.width + 'px'
|
width: self.options.width + 'px'
|
||||||
|
@ -72,6 +70,7 @@ Ox.TreeList = function(options, self) {
|
||||||
function constructItem(data) {
|
function constructItem(data) {
|
||||||
var $item = $('<div>'), //.css({width: self.options.width + 'px'}),
|
var $item = $('<div>'), //.css({width: self.options.width + 'px'}),
|
||||||
padding = (data.level + !data.items) * 16 - 8;
|
padding = (data.level + !data.items) * 16 - 8;
|
||||||
|
if (data.title.indexOf('COUNTRIES') > -1) Ox.print('DATA...', data);
|
||||||
if (data.level || !data.items) {
|
if (data.level || !data.items) {
|
||||||
$('<div>')
|
$('<div>')
|
||||||
.addClass('OxCell OxTarget')
|
.addClass('OxCell OxTarget')
|
||||||
|
@ -137,7 +136,8 @@ Ox.TreeList = function(options, self) {
|
||||||
function parseData(key, value) {
|
function parseData(key, value) {
|
||||||
//Ox.print('parseData', key, value)
|
//Ox.print('parseData', key, value)
|
||||||
var ret = {
|
var ret = {
|
||||||
id: Ox.uid(),
|
expanded: false,
|
||||||
|
id: Ox.uid().toString(),
|
||||||
title: key.toString() + ': '
|
title: key.toString() + ': '
|
||||||
},
|
},
|
||||||
type = Ox.typeOf(value);
|
type = Ox.typeOf(value);
|
||||||
|
@ -148,9 +148,9 @@ Ox.TreeList = function(options, self) {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
ret.title += (
|
ret.title += (
|
||||||
type == 'function' ?
|
type == 'function'
|
||||||
value.toString().split('{')[0] :
|
? value.toString().split('{')[0]
|
||||||
JSON.stringify(value)
|
: JSON.stringify(value)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
|
@ -163,10 +163,14 @@ Ox.TreeList = function(options, self) {
|
||||||
items.forEach(function(item, i) {
|
items.forEach(function(item, i) {
|
||||||
var item_ = Ox.extend({
|
var item_ = Ox.extend({
|
||||||
level: level
|
level: level
|
||||||
}, item, item.items ? {
|
}, item, item.items
|
||||||
items: !!item.expanded ?
|
? {
|
||||||
parseItems(item.items, level + 1) : []
|
items: !!item.expanded
|
||||||
} : {});
|
? parseItems(item.items, level + 1)
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
);
|
||||||
ret.push(item_);
|
ret.push(item_);
|
||||||
item.items && Ox.merge(ret, item_.items);
|
item.items && Ox.merge(ret, item_.items);
|
||||||
});
|
});
|
||||||
|
@ -176,7 +180,6 @@ Ox.TreeList = function(options, self) {
|
||||||
function toggleItem(item, expanded) {
|
function toggleItem(item, expanded) {
|
||||||
var $img, pos;
|
var $img, pos;
|
||||||
item.expanded = expanded;
|
item.expanded = expanded;
|
||||||
//getItemById(item.id).expanded = expanded;
|
|
||||||
that.$element.find('.OxItem').each(function() {
|
that.$element.find('.OxItem').each(function() {
|
||||||
var $item = $(this);
|
var $item = $(this);
|
||||||
if ($item.data('id') == item.id) {
|
if ($item.data('id') == item.id) {
|
||||||
|
@ -185,15 +188,19 @@ Ox.TreeList = function(options, self) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
//that.$element.value(item.id, 'expanded', expanded);
|
||||||
$img.attr({
|
$img.attr({
|
||||||
src: Ox.UI.getImageURL(
|
src: Ox.UI.getImageURL(
|
||||||
'symbol' + (expanded ? 'Down' : 'Right')
|
'symbol' + (expanded ? 'Down' : 'Right')
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
that.$element.value(item.id, 'expanded', expanded);
|
expanded
|
||||||
expanded ?
|
? that.$element.addItems(
|
||||||
that.$element.addItems(pos + 1, parseItems(item.items, item.level + 1)) :
|
pos + 1, parseItems(item.items, item.level + 1)
|
||||||
that.$element.removeItems(pos + 1, parseItems(item.items, item.level + 1).length);
|
)
|
||||||
|
: that.$element.removeItems(
|
||||||
|
pos + 1, parseItems(item.items, item.level + 1).length
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleItems(data) {
|
function toggleItems(data) {
|
||||||
|
|
Loading…
Reference in a new issue