oxjs/source/Ox.UI/js/List/Ox.IconList.js

217 lines
6.7 KiB
JavaScript
Raw Normal View History

// vim: et:ts=4:sw=4:sts=4:ft=js
2011-05-16 10:49:48 +00:00
/*@
Ox.IconList <f:Ox.Element> IconList Object
() -> <f> IconList Object
(options) -> <f> IconList Object
(options, self) -> <f> IconList Object
options <o> Options object
2011-08-06 17:41:01 +00:00
borderRadius <n|0> border radius for icon images
2011-05-16 10:49:48 +00:00
centerSelection <b|false> scroll list so selection is always centered
defaultRatio <n|1> aspect ratio of icon placeholders
draggable <b|false> If true, items can be dragged
fixedRatio <b|n|false> if set to a number, icons have a fixed ratio
2011-05-16 10:49:48 +00:00
id <s|''> element id
item <f|null> called with data, sort, size,
2011-06-20 14:37:37 +00:00
extends data with information needed for constructor
itemConstructor <f|Ox.IconItem> contructor used to create item
2011-05-16 10:49:48 +00:00
items <f|null> items array or callback function
keys <a|[]> available item keys
max <n|-1> maximum selected selected items
min <n|0> minimum of selcted items
orientation <s|both> list orientation
selected <a|[]> array of selected items
size <n|128> list size
sort <a|[]> sort keys
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.IconList = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
2011-08-06 17:41:01 +00:00
borderRadius: 0,
2011-04-22 22:03:10 +00:00
centerSelection: false,
defaultRatio: 1,
draggable: false,
fixedRatio: false,
2011-04-22 22:03:10 +00:00
id: '',
item: null,
2011-06-20 14:37:37 +00:00
itemConstructor: Ox.IconItem,
2011-04-22 22:03:10 +00:00
items: null,
keys: [],
max: -1,
min: 0,
orientation: 'both',
selected: [],
size: 128,
sort: [],
2011-08-19 06:41:48 +00:00
unique: ''
2011-04-22 22:03:10 +00:00
})
.options(options || {});
if (self.options.fixedRatio) {
self.options.defaultRatio = self.options.fixedRatio;
}
2011-08-07 03:05:43 +00:00
self.iconHeight = Math.round(self.options.size / (self.options.fixedRatio || 1));
2011-08-07 02:33:26 +00:00
self.iconWidth = self.options.size;
self.itemHeight = self.iconHeight + self.options.size * 0.5;
self.itemWidth = self.options.size;
2011-04-22 22:03:10 +00:00
that.$element = Ox.List({
2011-04-22 22:03:10 +00:00
centered: self.options.centered,
2011-08-19 06:41:48 +00:00
// fixme: change all occurences of construct to render
2011-04-22 22:03:10 +00:00
construct: constructItem,
draggable: self.options.draggable,
id: self.options.id,
itemHeight: self.itemHeight,
items: self.options.items,
itemWidth: self.itemWidth,
keys: self.options.keys,
max: self.options.max,
min: self.options.min,
orientation: self.options.orientation,
2011-04-22 22:03:10 +00:00
selected: self.options.selected,
sort: self.options.sort,
type: 'icon',
unique: self.options.unique
}, $.extend({}, self)) // pass event handler
2011-08-28 06:23:15 +00:00
.addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
.bindEvent({
select: function() {
self.options.selected = that.$element.options('selected');
}
});
2011-04-22 22:03:10 +00:00
updateKeys();
function constructItem(data) {
var isEmpty = Ox.isEmpty(data);
data = !isEmpty
? self.options.item(data, self.options.sort, self.options.size)
: {
width: Math.round(self.options.size * (
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
)),
height: Math.round(self.options.size / (
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
))
};
2011-08-19 06:41:48 +00:00
return self.options.itemConstructor(Ox.extend(data, {
2011-08-06 17:41:01 +00:00
borderRadius: self.options.borderRadius,
2011-08-07 02:33:26 +00:00
iconHeight: self.iconHeight,
iconWidth: self.iconWidth,
imageHeight: data.height,
imageWidth: data.width,
itemHeight: self.itemHeight,
itemWidth: self.itemWidth,
//height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
//size: self.options.size,
//width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
2011-04-22 22:03:10 +00:00
}));
}
function updateKeys() {
self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key]));
that.$element.options({
keys: self.options.keys
});
}
2011-05-16 10:49:48 +00:00
/*@
setOption <f> set key/value
2011-08-19 06:41:48 +00:00
(key, value) -> <u> set key in options to value
2011-05-16 10:49:48 +00:00
@*/
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'items') {
that.$element.options(key, value);
} else if (key == 'selected') {
that.$element.options(key, value);
} else if (key == 'sort') {
that.$element.options(key, value);
2011-04-22 22:03:10 +00:00
}
};
2011-04-22 22:03:10 +00:00
2011-05-16 10:49:48 +00:00
/*@
closePreview <f> close preview
2011-08-07 22:16:06 +00:00
() -> <o> the list
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.closePreview = function() {
that.$element.closePreview();
2011-08-07 22:16:06 +00:00
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
2011-08-07 22:16:06 +00:00
paste <f> paste into list
() -> <o> the list
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.paste = function(data) {
that.$element.paste(data);
return that;
};
2011-05-16 10:49:48 +00:00
/*@
reloadList <f> reload list
2011-08-07 22:16:06 +00:00
() -> <o> the list
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.reloadList = function() {
that.$element.reloadList();
return that;
};
2011-05-16 10:49:48 +00:00
/*@
2011-08-07 22:16:06 +00:00
scrollToSelection <f> scroll list to selection
() -> <o> the list
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.scrollToSelection = function() {
that.$element.scrollToSelection();
2011-08-19 06:41:48 +00:00
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
2011-08-07 22:16:06 +00:00
size <f> get size of list
() -> <n> size
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.size = function() {
that.$element.size();
};
2011-05-16 10:49:48 +00:00
/*@
sortList <f> sort list
2011-08-07 22:16:06 +00:00
(key, operator) -> <o> the list
key <s> sort key
operator <s> sort operator ("+" or "-")
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.sortList = function(key, operator) {
self.options.sort = [{
key: key,
operator: operator
}];
updateKeys();
that.$element.sortList(key, operator);
2011-08-07 22:16:06 +00:00
return that;
2011-04-22 22:03:10 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
value <f> get/set value of item in list
(id) -> <o> get all data for item
(id, key) -> <s> get value of key of item with id
(id, key, value) -> <f> set value, returns IconList
@*/
2011-04-22 22:03:10 +00:00
that.value = function(id, key, value) {
// fixme: make this accept id, {k: v, ...}
if (arguments.length == 1) {
return that.$element.value(id);
} else if (arguments.length == 2) {
return that.$element.value(id, key);
} else {
that.$element.value(id, key, value);
return that;
}
};
2011-04-22 22:03:10 +00:00
return that;
};