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

304 lines
8.7 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.InfoList <f> Info List
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.List> Info List
2012-05-21 10:38:18 +00:00
@*/
2011-08-19 06:41:48 +00:00
Ox.InfoList = function(options, self) {
2011-11-03 15:42:41 +00:00
2011-08-19 06:41:48 +00:00
self = self || {};
var that = Ox.Element({}, self)
.defaults({
borderRadius: 0,
defaultRatio: 1,
draggable: false,
id: '',
item: null,
items: null,
keys: [],
max: -1,
min: 0,
query: {conditions: [], operator: '&'},
2012-06-29 12:19:34 +00:00
selectAsYouType: '',
2011-08-19 06:41:48 +00:00
selected: [],
size: 192,
sort: [],
sums: [],
2011-08-19 06:41:48 +00:00
unique: ''
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
items: function() {
2014-09-24 18:17:57 +00:00
self.$list.options({items: self.options.items});
},
query: function() {
2014-09-24 18:17:57 +00:00
self.$list.options({query: self.options.query});
2012-05-28 19:35:41 +00:00
},
selected: function() {
2014-09-24 18:17:57 +00:00
self.$list.options({selected: self.options.selected});
2012-05-28 19:35:41 +00:00
},
sort: function() {
updateKeys();
2014-09-24 18:17:57 +00:00
self.$list.options({sort: self.options.sort});
2012-05-28 19:35:41 +00:00
},
width: function() {
2014-09-24 08:26:51 +00:00
// FIXME: don't use classname for this lookup
2012-05-28 19:35:41 +00:00
var width = getItemWidth();
$('.OxInfoElement').each(function() {
var $parent = $(this).parent(),
id = parseInt(/OxId(.*?)$/.exec(this.className)[1], 10);
2012-05-28 19:35:41 +00:00
$parent.css({width: width - 144});
$parent.parent().css({width: width - 144});
$parent.parent().parent().css({width: width - 8});
2014-09-25 17:40:29 +00:00
Ox.$elements[id].options({width: width - 152});
2012-05-28 19:35:41 +00:00
});
}
});
2011-08-19 06:41:48 +00:00
2011-10-17 10:23:16 +00:00
self.iconSize = Math.round(self.options.size * 2/3);
2011-08-19 06:41:48 +00:00
self.itemHeight = self.options.size;
that.setElement(
2014-09-24 18:17:57 +00:00
self.$list = Ox.List({
2011-08-19 06:41:48 +00:00
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,
query: self.options.query,
2012-06-29 12:19:34 +00:00
selectAsYouType: self.options.selectAsYouType,
2011-08-19 06:41:48 +00:00
selected: self.options.selected,
sort: self.options.sort,
sums: self.options.sums,
2011-08-19 06:41:48 +00:00
type: 'info',
unique: self.options.unique
})
2011-10-16 12:32:02 +00:00
.addClass('OxInfoList')
.bindEvent(function(data, event) {
if (event == 'select') {
self.options.selected = data.ids;
}
that.triggerEvent(event, data);
})
);
2011-08-19 06:41:48 +00:00
updateKeys();
function constructItem(data) {
var isEmpty = Ox.isEmpty(data),
data = !isEmpty
? self.options.item(data, self.options.sort, self.options.size)
: {
icon: {
2011-10-17 10:23:16 +00:00
width: Math.round(self.iconSize * (
2011-08-19 06:41:48 +00:00
self.options.defaultRatio >= 1 ? 1 : self.options.defaultRatio
)),
2011-10-17 10:23:16 +00:00
height: Math.round(self.iconSize / (
2011-08-19 06:41:48 +00:00
self.options.defaultRatio <= 1 ? 1 : self.options.defaultRatio
))
},
info: {}
2012-02-01 11:57:21 +00:00
},
$icon = Ox.Element()
2011-08-19 06:41:48 +00:00
.css({
float: 'left',
2011-10-16 12:32:02 +00:00
width: '132px',
2011-10-16 12:46:27 +00:00
height: '192px',
2013-08-05 22:02:16 +00:00
margin: '2px'
2011-08-19 06:41:48 +00:00
})
.append(
Ox.IconItem(Ox.extend(data.icon, {
borderRadius: self.options.borderRadius,
2011-10-17 10:23:16 +00:00
iconHeight: self.iconSize,
iconWidth: self.iconSize,
imageHeight: data.icon.height,
imageWidth: data.icon.width,
2011-08-19 06:41:48 +00:00
itemHeight: self.itemHeight,
2011-10-17 10:23:16 +00:00
itemWidth: 128
2011-08-19 06:41:48 +00:00
}))
2011-10-16 12:32:02 +00:00
.addClass('OxInfoIcon')
2011-08-19 06:41:48 +00:00
.css({
position: 'absolute'
})
),
$info = Ox.Element()
.css({
float: 'left',
2011-10-17 10:23:16 +00:00
width: getItemWidth() - 144 + 'px',
2012-05-26 15:48:19 +00:00
height: 196 + 'px'
2011-08-19 06:41:48 +00:00
}),
$infobox = Ox.Element()
.css({
position: 'absolute',
2011-10-17 10:23:16 +00:00
width: getItemWidth() - 144 + 'px',
height: 196 + 'px',
marginTop: '-2px',
2011-08-19 06:41:48 +00:00
overflow: 'hidden'
})
2011-11-05 17:27:11 +00:00
.appendTo($info),
2011-08-19 06:41:48 +00:00
$item = Ox.Element()
.css({
width: getItemWidth() - 8 + 'px',
2011-10-16 12:46:27 +00:00
height: 196 + 'px',
2012-05-26 15:48:19 +00:00
margin: '4px'
2011-08-19 06:41:48 +00:00
})
.append($icon)
.append($info);
if (!isEmpty) {
var $element = data.info.element(Ox.extend(data.info.options, {
width: getItemWidth() - 152
}))
2011-10-17 10:23:16 +00:00
.addClass('OxInfoElement');
data.info.css && $element.css(data.info.css);
data.info.events && $element.bindEvent(data.info.events);
$element.addClass('OxId' + $element.oxid); // fixme: needed?
2011-08-19 06:41:48 +00:00
$infobox.append($element);
}
return $item;
}
function getItemWidth(cached) {
if (!cached) {
2014-09-25 19:56:44 +00:00
self.cachedWidth = that.width() - Ox.SCROLLBAR_SIZE;
2011-08-19 06:41:48 +00:00
} else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
2014-09-25 19:56:44 +00:00
self.cachedWidth = that.width() - Ox.SCROLLBAR_SIZE;
2011-08-19 06:41:48 +00:00
self.cachedWidthTime = +new Date();
}
return self.cachedWidth;
}
function updateKeys() {
2014-09-24 18:17:57 +00:00
self.$list.options({
2012-05-24 07:45:33 +00:00
keys: Ox.unique(
[self.options.sort[0].key].concat(self.options.keys)
2012-05-24 07:46:42 +00:00
)
2011-08-19 06:41:48 +00:00
});
}
2012-05-21 10:38:18 +00:00
/*@
2012-05-28 19:35:41 +00:00
closePreview <f> closePreview
2012-05-21 10:38:18 +00:00
@*/
2011-08-19 06:41:48 +00:00
that.closePreview = function() {
2014-09-24 18:17:57 +00:00
self.$list.closePreview();
2011-08-19 06:41:48 +00:00
return that;
};
2012-05-21 10:38:18 +00:00
/*@
gainFocus <f> gainFocus
@*/
that.gainFocus = function() {
2014-09-24 18:17:57 +00:00
self.$list.gainFocus();
return that;
};
2014-02-12 13:56:54 +00:00
that.getPasteIndex = function() {
2014-09-24 18:17:57 +00:00
return self.$list.getPasteIndex();
2014-02-12 13:56:54 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
hasFocus <f> hasFocus
@*/
that.hasFocus = function() {
2014-09-24 18:17:57 +00:00
return self.$list.hasFocus();
};
that.invertSelection = function() {
2014-09-24 18:17:57 +00:00
self.$list.invertSelection();
return that;
};
2012-05-21 10:38:18 +00:00
/*@
loseFocus <f> loseFocus
@*/
that.loseFocus = function() {
2014-09-24 18:17:57 +00:00
self.$list.loseFocus();
return that;
};
2012-05-21 10:38:18 +00:00
/*@
reloadList <f> reloadList
@*/
2011-10-20 16:49:42 +00:00
that.reloadList = function(stayAtPosition) {
2014-09-24 18:17:57 +00:00
self.$list.reloadList(stayAtPosition);
2011-10-16 12:32:02 +00:00
return that;
};
2012-05-21 10:38:18 +00:00
/*@
scrollToSelection <f> scrollToSelection
@*/
2011-10-16 12:32:02 +00:00
that.scrollToSelection = function() {
2014-09-24 18:17:57 +00:00
self.$list.scrollToSelection();
2011-10-16 12:32:02 +00:00
return that;
};
that.selectAll = function() {
2014-09-24 18:17:57 +00:00
self.$list.selectAll();
return that;
};
that.selectPosition = function(pos) {
2014-09-24 18:17:57 +00:00
self.$list.selectPosition(pos);
return that;
};
that.selectSelected = function(offset) {
2014-09-24 18:17:57 +00:00
self.$list.selectSelected(offset);
return that;
};
2012-05-21 10:38:18 +00:00
/*@
size <f> size
@*/
2011-10-16 12:32:02 +00:00
that.size = function() {
2014-09-24 18:17:57 +00:00
self.$list.size();
return that;
2011-10-16 12:32:02 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
sortList <f> sortList
(key, operator) -> <o>
@*/
2011-10-16 12:32:02 +00:00
that.sortList = function(key, operator) {
self.options.sort = [{
key: key,
operator: operator
}];
updateKeys();
2014-09-24 18:17:57 +00:00
self.$list.sortList(key, operator);
2011-10-16 12:32:02 +00:00
return that;
};
2012-05-21 10:38:18 +00:00
/*@
value <f> value
(id) -> values
(id, key) -> value
(id, key, value) -> <o>
(id, {key: value}) -> <o>
2012-05-21 10:38:18 +00:00
@*/
that.value = function() {
var args = Ox.slice(arguments),
id = args.shift();
2011-10-16 12:32:02 +00:00
if (arguments.length == 1) {
2014-09-24 18:17:57 +00:00
return self.$list.value(id);
} else if (arguments.length == 2 && Ox.isString(arguments[1])) {
2014-09-24 18:17:57 +00:00
return self.$list.value(id, arguments[1]);
2011-10-16 12:32:02 +00:00
} else {
Ox.forEach(Ox.makeObject(args), function(value, key) {
2014-09-24 18:17:57 +00:00
self.$list.value(id, key, value);
});
2011-10-16 12:32:02 +00:00
return that;
}
};
2011-08-19 06:41:48 +00:00
return that;
2012-05-21 10:38:18 +00:00
};