141 lines
No EOL
5.3 KiB
JavaScript
141 lines
No EOL
5.3 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',
|
|
resize: null,
|
|
width: 768
|
|
})
|
|
.options(options || {})
|
|
.update({
|
|
width: function() {
|
|
self.columnWidths = getColumnWidths();
|
|
self.$panel.size(0, self.columnWidths[0]);
|
|
self.$panel.size(2, self.columnWidths[2]);
|
|
self.$lists.forEach(function($list, i) {
|
|
$list.options({itemWidth: self.columnWidths[i]});
|
|
});
|
|
}
|
|
})
|
|
.addClass('OxColumnList');
|
|
|
|
self.columnWidths = getColumnWidths();
|
|
self.numberOfColumns = self.options.columns.length;
|
|
|
|
self.$lists = self.options.columns.map(function(column, i) {
|
|
//Ox.print('SELECTED::', self.options.selected[i]);
|
|
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: self.options.columns[i].max,
|
|
resize: self.options.resize,
|
|
scrollbarVisible: true,
|
|
selected: self.options.columns[i].selected,
|
|
sort: self.options.columns[i].sort,
|
|
unique: 'id'
|
|
})
|
|
.bindEvent({
|
|
key_left: function() {
|
|
if (i > 0) {
|
|
self.$lists[i - 1].gainFocus();
|
|
that.triggerEvent('select', {
|
|
id: self.options.columns[i - 1].id,
|
|
ids: self.$lists[i - 1].options('selected')
|
|
});
|
|
}
|
|
},
|
|
key_right: function() {
|
|
var index, object, selected = self.$lists[i].options('selected');
|
|
if (selected.length) {
|
|
if (i < self.numberOfColumns - 1) {
|
|
if (self.$lists[i + 1].options('selected').length == 0) {
|
|
self.$lists[i + 1].selectPosition(0);
|
|
}
|
|
self.$lists[i + 1].gainFocus();
|
|
that.triggerEvent('select', {
|
|
id: self.options.columns[i + 1].id,
|
|
ids: self.$lists[i + 1].options('selected')
|
|
});
|
|
}
|
|
}
|
|
},
|
|
select: function(data) {
|
|
var items = [];
|
|
self.options.columns[i].selected = data.ids;
|
|
if (i < self.numberOfColumns - 1) {
|
|
data.ids.forEach(function(id) {
|
|
var index;
|
|
if (i == 0) {
|
|
index = Ox.getIndexById(self.options.items, id);
|
|
items = items.concat(
|
|
self.options.items[index].items
|
|
);
|
|
} else if (i == 1) {
|
|
index = [];
|
|
Ox.forEach(self.options.columns[0].selected, function(id_) {
|
|
index[0] = Ox.getIndexById(
|
|
self.options.items, id_
|
|
);
|
|
index[1] = Ox.getIndexById(
|
|
self.options.items[index[0]].items, id
|
|
);
|
|
if (index[1] > -1) {
|
|
return false;
|
|
}
|
|
});
|
|
items = items.concat(
|
|
self.options.items[index[0]].items[index[1]].items
|
|
);
|
|
}
|
|
});
|
|
self.$lists[i + 1].options({items: items})
|
|
}
|
|
if (i == 0 || data.ids.length) {
|
|
that.triggerEvent('select', {
|
|
id: column.id,
|
|
ids: data.ids
|
|
});
|
|
} else {
|
|
self.$lists[i - 1].gainFocus();
|
|
that.triggerEvent('select', {
|
|
id: self.options.columns[i - 1].id,
|
|
ids: self.$lists[i - 1].options('selected')
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
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;
|
|
|
|
}; |