// vim: et:ts=4:sw=4:sts=4:ft=js /*@ Ox.IconList IconList Object () -> IconList Object (options) -> IconList Object (options, self) -> IconList Object options Options object borderRadius border radius for icon images centerSelection scroll list so selection is always centered defaultRatio aspect ratio of icon placeholders draggable can be dragged fixedRatio if set to a number, icons have a fixed ratio id element id item called with data, sort, size, extends data with information needed for constructor itemConstructor contructor used to create item items items array or callback function keys available item keys max maximum selected selected items min minimum of selcted items orientation list orientation selected array of selected items size list size sort sort keys self shared private variable @*/ Ox.IconList = function(options, self) { self = self || {}; var that = Ox.Element({}, self) .defaults({ borderRadius: 0, centerSelection: false, defaultRatio: 1, draggable: true, fixedRatio: false, id: '', item: null, itemConstructor: Ox.IconItem, items: null, keys: [], max: -1, min: 0, orientation: 'both', selected: [], size: 128, sort: [], unique: '' }) .options(options || {}); if (self.options.fixedRatio) { self.options.defaultRatio = self.options.fixedRatio; } self.iconHeight = Math.round(self.options.size / (self.options.fixedRatio || 1)); self.iconWidth = self.options.size; self.itemHeight = self.iconHeight + self.options.size * 0.5; self.itemWidth = self.options.size; that.$element = Ox.List({ centered: self.options.centered, // fixme: change all occurences of construct to render 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, selected: self.options.selected, sort: self.options.sort, type: 'icon', unique: self.options.unique }, $.extend({}, self)) // pass event handler .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation)) .bindEvent({ select: function() { self.options.selected = that.$element.options('selected'); } }); 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 )) }; return self.options.itemConstructor(Ox.extend(data, { borderRadius: self.options.borderRadius, 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)) })); } function updateKeys() { self.options.keys = Ox.unique($.merge(self.options.keys, [self.options.sort[0].key])); that.$element.options({ keys: self.options.keys }); } /*@ setOption set key/value (key, value) -> set key in options to value @*/ self.setOption = function(key, value) { 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); } }; /*@ closePreview close preview () -> the list @*/ that.closePreview = function() { that.$element.closePreview(); return that; }; /*@ paste paste into list () -> the list @*/ that.paste = function(data) { that.$element.paste(data); return that; }; /*@ reloadList reload list () -> the list @*/ that.reloadList = function() { that.$element.reloadList(); return that; }; /*@ scrollToSelection scroll list to selection () -> the list @*/ that.scrollToSelection = function() { that.$element.scrollToSelection(); return that; }; /*@ size get size of list () -> size @*/ that.size = function() { that.$element.size(); }; /*@ sortList sort list (key, operator) -> the list key sort key operator sort operator ("+" or "-") @*/ that.sortList = function(key, operator) { self.options.sort = [{ key: key, operator: operator }]; updateKeys(); that.$element.sortList(key, operator); return that; }; /*@ value get/set value of item in list (id) -> get all data for item (id, key) -> get value of key of item with id (id, key, value) -> set value, returns IconList @*/ 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; } }; return that; };