0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

support fixed-ratio icon lists

Browse source
This commit is contained in:
rlx 2011-08-07 02:33:26 +00:00
commit 6dfa732636
4 changed files with 64 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

66
source/Ox.UI/js/List/Ox.IconItem.js
View file

@ -7,13 +7,14 @@ Ox.IconItem <f:Ox.Element> IconItem Object
(options, self) -> <f> IconItem Object
options <o> Options object
borderRadius <n|0> border radius for icon images
fixedRatio <b|n|false> if set to a number, icons have a fixed ratio
height <n|128> icon height
iconHeight <n|128> icon height
iconWidth <n|128> icon width
imageHeight <n|128> icon image height
imageWidth <n|128> icon image width
id <s> element id
info <s> icon info
size <n|128> icon size
title <s> title
width <n|128> icon width
url <s> icon url
self <o> shared private variable
@*/
@ -26,38 +27,40 @@ Ox.IconItem = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
borderRadius: 0,
fixedRatio: false,
height: 128,
iconHeight: 128,
iconWidth: 128,
imageHeight: 128,
imageWidth: 128,
itemHeight: 192,
itemWidth: 128,
id: '',
info: '',
size: 128,
title: '',
width: 128,
url: ''
})
.options(options || {});
$.extend(self, {
fontSize: self.options.size == 64 ? 6 : 9,
height: self.options.size * 1.5,
lineLength: self.options.size == 64 ? 15 : 23,
lines: self.options.size == 64 ? 4 : 5,
fontSize: self.options.itemWidth == 64 ? 6 : 9,
lineLength: self.options.itemWidth == 64 ? 15 : 23,
lines: self.options.itemWidth == 64 ? 4 : 5,
url: Ox.UI.PATH + 'png/transparent.png',
width: self.options.size
});
self.title = formatText(self.options.title, self.lines - 1, self.lineLength);
self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
Ox.print('SELF OPTIONS', self.options)
that.css({
width: self.width + 'px',
height: self.height + 'px'
width: self.options.itemWidth + 'px',
height: self.options.itemHeight + 'px'
});
that.$icon = $('<div>')
.addClass('OxIcon')
.css({
top: self.options.size == 64 ? -64 : -124,
width: (self.options.size + 4) + 'px',
height: (self.options.size + 4) + 'px'
top: self.options.iconWidth == 64 ? -64 : -124,
width: (self.options.iconWidth + 4) + 'px',
height: (self.options.iconHeight + 4) + 'px'
});
that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget')
@ -65,8 +68,8 @@ Ox.IconItem = function(options, self) {
src: self.url
})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px',
width: self.options.imageWidth + 'px',
height: self.options.imageHeight + 'px',
borderRadius: self.options.borderRadius + 4 + 'px'
})
.mousedown(mousedown)
@ -76,9 +79,9 @@ Ox.IconItem = function(options, self) {
that.$textBox = $('<div>')
.addClass('OxText')
.css({
top: (self.options.size / 2) + 'px',
width: (self.options.size + 4) + 'px',
height: (self.options.size == 64 ? 30 : 58) + 'px'
top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
width: self.options.itemWidth + 4 + 'px',
height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
});
that.$text = $('<div>')
.addClass('OxTarget')
@ -93,9 +96,9 @@ Ox.IconItem = function(options, self) {
that.$reflection = $('<div>')
.addClass('OxReflection')
.css({
top: self.options.size + 'px',
width: (self.options.size + 4) + 'px',
height: (self.options.size / 2) + 'px'
top: self.options.iconHeight + 'px',
width: self.options.itemWidth + 4 + 'px',
height: self.options.itemHeight - self.options.iconHeight + 'px'
});
that.$reflectionImage = $('<img>')
.addClass('OxLoading')
@ -103,17 +106,17 @@ Ox.IconItem = function(options, self) {
src: self.url
})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px',
width: self.options.imageWidth + 'px',
height: self.options.imageHeight + 'px',
// firefox is 1px off when centering images with odd width and scaleY(-1)
paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px',
borderRadius: self.options.borderRadius + 4 + 'px'
paddingLeft: ($.browser.mozilla && self.options.imageWidth % 2 ? 1 : 0) + 'px',
borderRadius: self.options.borderRadius + 'px'
});
that.$gradient = $('<div>')
.css({
//top: (-self.options.size / 2) + 'px',
width: self.options.size + 'px',
height: (self.options.size / 2) + 'px'
width: self.options.itemWidth + 'px',
height: self.options.itemWidth / 2 + 'px'
});
that.append(
@ -174,6 +177,7 @@ Ox.IconItem = function(options, self) {
that.removeClass('OxHover');
}
Ox.print('CSS HEIGHT', that.css('height'))
return that;
};