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

276 lines
7.9 KiB
JavaScript

'use strict';
/*@
Ox.InfoList <f:Ox.Element> Info List
([options[, self]]) -> <o> Info List
options <o> Options
self <o> Shared private variable
@*/
Ox.InfoList = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
borderRadius: 0,
defaultRatio: 1,
draggable: false,
id: '',
item: null,
items: null,
keys: [],
max: -1,
min: 0,
selected: [],
size: 192,
sort: [],
unique: ''
})
.options(options || {})
//Ox.print('INFO LIST FIND', self.options.find);
self.iconSize = Math.round(self.options.size * 2/3);
self.itemHeight = self.options.size;
that.setElement(
Ox.List({
construct: constructItem,
draggable: self.options.draggable,
id: self.options.id,
itemHeight: self.itemHeight,
items: self.options.items,
itemWidth: getItemWidth(),
keys: self.options.keys,
max: self.options.max,
min: self.options.min,
orientation: 'vertical',
pageLength: 10,
selected: self.options.selected,
sort: self.options.sort,
type: 'info',
unique: self.options.unique
}, Ox.clone(self))
.addClass('OxInfoList')
.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)
: {
icon: {
width: Math.round(self.iconSize * (
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
)),
height: Math.round(self.iconSize / (
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
))
},
info: {}
},
$icon = Ox.Element()
.css({
float: 'left',
width: '132px',
height: '192px',
margin: '4px 2px 4px 2px',
//background: 'blue'
})
.append(
Ox.IconItem(Ox.extend(data.icon, {
borderRadius: self.options.borderRadius,
iconHeight: self.iconSize,
iconWidth: self.iconSize,
imageHeight: data.icon.height,
imageWidth: data.icon.width,
itemHeight: self.itemHeight,
itemWidth: 128
}))
.addClass('OxInfoIcon')
.css({
position: 'absolute'
})
),
$info = Ox.Element()
.css({
float: 'left',
width: getItemWidth() - 144 + 'px',
height: 196 + 'px',
//background: 'green'
}),
$infobox = Ox.Element()
.css({
position: 'absolute',
width: getItemWidth() - 144 + 'px',
height: 196 + 'px',
marginTop: '-2px',
overflow: 'hidden'
})
.appendTo($info),
$item = Ox.Element()
.css({
width: getItemWidth() - 8 + 'px',
height: 196 + 'px',
margin: '4px',
//background: 'red'
})
.append($icon)
.append($info);
if (!isEmpty) {
var $element = data.info.element(Ox.extend(data.info.options, {
width: getItemWidth() - 152
}))
.addClass('OxInfoElement');
data.info.css && $element.css(data.info.css);
data.info.events && $element.bindEvent(data.info.events);
$element.addClass('OxId' + $element.id); // fixme: needed?
$infobox.append($element);
}
return $item;
}
function getItemWidth(cached) {
if (!cached) {
self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
} else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
self.cachedWidth = that.$element.width() - Ox.UI.SCROLLBAR_SIZE;
self.cachedWidthTime = +new Date();
}
return self.cachedWidth;
}
function updateKeys() {
that.$element.options({
keys: Ox.unique(Ox.merge(
self.options.sort[0].key,
self.options.keys
))
});
}
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') {
updateKeys();
that.$element.options(key, value);
} else if (key == 'width') {
var width = getItemWidth();
$('.OxInfoElement').each(function() {
var $parent = $(this).parent(),
id = parseInt(/OxId(.*?)$/.exec(this.className)[1]);
$parent.css({width: width - 144});
$parent.parent().css({width: width - 144});
$parent.parent().parent().css({width: width - 8});
Ox.Log('List', '@@@', this.className, id)
Ox.UI.elements[id].options({width: width - 152});
});
}
};
/*@
closePreivew <f> closePreview
@*/
that.closePreview = function() {
that.$element.closePreview();
return that;
};
/*@
gainFocus <f> gainFocus
@*/
that.gainFocus = function() {
that.$element.gainFocus();
return that;
};
/*@
hasFocus <f> hasFocus
@*/
that.hasFocus = function() {
return that.$element.hasFocus();
};
/*@
loseFocus <f> loseFocus
@*/
that.loseFocus = function() {
that.$element.loseFocus();
return that;
};
/*@
paste <f> paste
@*/
that.paste = function(data) {
that.$element.paste(data);
return that;
};
/*@
reloadList <f> reloadList
@*/
that.reloadList = function(stayAtPosition) {
that.$element.reloadList(stayAtPosition);
return that;
};
/*@
scrollToSelection <f> scrollToSelection
@*/
that.scrollToSelection = function() {
that.$element.scrollToSelection();
return that;
};
/*@
size <f> size
@*/
that.size = function() {
that.$element.size();
};
/*@
sortList <f> sortList
(key, operator) -> <o>
@*/
that.sortList = function(key, operator) {
self.options.sort = [{
key: key,
operator: operator
}];
updateKeys();
that.$element.sortList(key, operator);
return that;
};
/*@
value <f> value
(id) -> values
(id, key) -> value
(id, key, value) -> <o>
@*/
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;
};