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

update CustomList and ColumnList

Browse source
This commit is contained in:
rolux 2012-12-10 17:46:48 +01:00
parent 5e35de1aa2
commit 68aeaebe3f
2 changed files with 113 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
source/Ox.UI/js/List/ColumnList.js
View file

@ -11,16 +11,92 @@ Ox.ColumnList = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
columns: [],
item: {},
custom: {},
items: [],
list: 'table',
selected: [],
width: 768
})
.options(options || {})
.update({
width: function() {
self.columnWidths = getColumnWidths();
self.$panel.size(0, self.columnWidths[0]),
self.$panel.size(2, self.columnWidths[2])
}
})
.addClass('OxColumnList');
self.columnWidths = getColumnWidths();
self.numberOfColumns = self.options.columns.length;
self.$lists = self.options.columns.map(function(column, i) {
var isLastColumn = i == self.numberOfColumns - 1;
return Ox.CustomList({
item: self.options.columns[i].item,
itemHeight: self.options.columns[i].itemHeight,
items: i == 0 ? self.options.items : [],
itemWidth: self.columnWidths[i],
keys: self.options.columns[i].keys,
max: 1,
scrollbarVisible: true,
unique: 'id'
})
.bindEvent({
key_left: function() {
i && self.$lists[i - 1].gainFocus();
},
key_right: function() {
var object, selected = self.$lists[i].options('selected');
if (selected.length) {
if (i < self.numberOfColumns - 1) {
object = Ox.getObjectById(self.options.items, self.options.selected[0][0]);
if (i == 1) {
object = Ox.getObjectById(object.items, self.options.selected[1][0]);
}
self.$lists[i + 1]
.options({selected: [object.items[0].id]})
.gainFocus();
}
}
},
select: function(data) {
var id = data.ids[0], index;
self.options.selected[i] = data.ids;
if (i == 0) {
index = Ox.getIndexById(self.options.items, id);
self.$lists[1].options({
items: id ? self.options.items[index].items : []
});
} else if (i == 1) {
index = [];
index[0] = Ox.getIndexById(self.options.items, self.options.selected[0][0]);
index[1] = Ox.getIndexById(self.options.items[index[0]].items, id);
self.$lists[2].options({
items: id ? self.options.items[index[0]].items[index[1]].items : []
});
}
}
});
});
self.$panel = Ox.SplitPanel({
elements: self.$lists.map(function($list, index) {
return Ox.extend(
{element: $list},
index == 1 ? {} : {size: self.columnWidths[index]}
);
}),
orientation: 'horizontal'
});
that.setElement(self.$panel);
function getColumnWidths() {
return Ox.splitInt(self.options.width, 3);
}
return that;
};

37
source/Ox.UI/js/List/CustomList.js
View file

@ -29,13 +29,20 @@ Ox.CustomList = function(options, self) {
})
.options(options || {})
.update({
items: function() {
self.$list.options({items: self.options.items});
},
selected: function() {
self.$list.options({selected: self.options.selected});
// FIXME: TableList doesn't trigger event here
that.triggerEvent('select', {ids: self.options.selected});
}
})
.addClass('OxCustomList');
self.$list = Ox.List({
construct: function(data) {
return self.options.item(data).addClass('OxTarget');
return self.options.item(data, self.options.itemWidth - Ox.UI.SCROLLBAR_SIZE).addClass('OxTarget');
},
draggable: self.options.draggable,
itemHeight: self.options.itemHeight,
@ -60,10 +67,36 @@ Ox.CustomList = function(options, self) {
overflowY: (self.options.scrollbarVisible ? 'scroll' : 'hidden')
})
.bindEvent(function(data, event) {
if (event == 'select') {
self.options.selected = data.ids;
}
that.triggerEvent(event, data);
})
.appendTo(that);
/*@
gainFocus <f> gain Focus
@*/
that.gainFocus = function() {
self.$list.gainFocus();
return that;
};
/*@
hasFocus <f> has Focus
@*/
that.hasFocus = function() {
return self.$list.hasFocus();
};
/*@
loseFocus <f> lose Focus
@*/
that.loseFocus = function() {
self.$list.loseFocus();
return that;
};
return that;
};