0x2620/oxjs
2
0
Fork 1
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
parent accb7c862a
commit 6dfa732636
4 changed files with 64 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/Ox.UI/css/Ox.UI.css
View file

@ -918,7 +918,11 @@ Lists
//left: -2px; //left: -2px;
} }
.OxIconList .OxItem > .OxIcon img { .OxIconList .OxItem > .OxIcon {
overflow: hidden;
}
.OxIconList .OxItem > .OxIcon > img {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;

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

34
source/Ox.UI/js/List/Ox.IconList.js
View file

@ -53,10 +53,10 @@ Ox.IconList = function(options, self) {
self.options.defaultRatio = self.options.fixedRatio; self.options.defaultRatio = self.options.fixedRatio;
} }
$.extend(self, { self.iconHeight = self.options.size / (self.options.fixedRatio || 1);
itemHeight: self.options.size * 1.5, self.iconWidth = self.options.size;
itemWidth: self.options.size self.itemHeight = self.iconHeight + self.options.size * 0.5;
}); self.itemWidth = self.options.size;
that.$element = Ox.List({ that.$element = Ox.List({
centered: self.options.centered, centered: self.options.centered,
@ -89,15 +89,27 @@ Ox.IconList = function(options, self) {
function constructItem(data) { function constructItem(data) {
var isEmpty = Ox.isEmpty(data); var isEmpty = Ox.isEmpty(data);
data = !isEmpty ? data = !isEmpty
self.options.item(data, self.options.sort, self.options.size) : {} ? self.options.item(data, self.options.sort, self.options.size)
ratio = !isEmpty ? data.width / data.height : self.options.defaultRatio; : {
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($.extend(data, { return self.options.itemConstructor($.extend(data, {
borderRadius: self.options.borderRadius, borderRadius: self.options.borderRadius,
fixedRatio: self.options.fixedRatio, iconHeight: self.iconHeight,
height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)), iconWidth: self.iconWidth,
size: self.options.size, imageHeight: data.height,
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio)) 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))
})); }));
} }

2
source/Ox.UI/js/List/Ox.ListItem.js
View file

@ -21,7 +21,7 @@ Ox.ListItem = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
construct: function() {}, construct: null,
data: {}, data: {},
draggable: false, draggable: false,
position: 0, position: 0,