forked from 0x2620/oxjs
rename Ox.UI source files, remove Ox. prefix
This commit is contained in:
j
parent
005d50c389
commit
91e1065aab
101 changed files with 0 additions and 0 deletions
277
source/Ox.UI/js/List/InfoList.js
Normal file
277
source/Ox.UI/js/List/InfoList.js
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
'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 || {})
|
||||
.update({
|
||||
items: function() {
|
||||
that.$element.options('items', self.options.items);
|
||||
},
|
||||
selected: function() {
|
||||
that.$element.options('selected', self.options.selected);
|
||||
},
|
||||
sort: function() {
|
||||
updateKeys();
|
||||
that.$element.options('sort', self.options.sort);
|
||||
},
|
||||
width: function() {
|
||||
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});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//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(
|
||||
[self.options.sort[0].key].concat(self.options.keys)
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
closePreview <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;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue