106 lines
No EOL
3.6 KiB
JavaScript
106 lines
No EOL
3.6 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.ColumnList <f> Column List Widget
|
|
experimental
|
|
@*/
|
|
|
|
Ox.ColumnList = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
columns: [],
|
|
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 : []
|
|
});
|
|
}
|
|
that.triggerEvent('select', {
|
|
id: column.id,
|
|
ids: data.ids
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
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;
|
|
|
|
}; |