sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

modularize oxui

Browse source
This commit is contained in:
rolux 2011-04-23 00:03:10 +02:00
commit 0024af978c
106 changed files with 16127 additions and 47034 deletions
Download patch file Download diff file Expand all files Collapse all files

155
source/js/Ox.IconItem.js Normal file
View file

@ -0,0 +1,155 @@
Ox.IconItem = function(options, self) {
//Ox.print('IconItem', options, self)
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
height: 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,
url: Ox.UI.PATH + '/png/ox.ui/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);
that.css({
width: self.width + 'px',
height: self.height + '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'
});
that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget')
.attr({
src: self.url
})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px'
})
.mousedown(mousedown)
.mouseenter(mouseenter)
.mouseleave(mouseleave);
self.options.url && that.$iconImage.one('load', load);
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'
})
that.$text = $('<div>')
.addClass('OxTarget')
.css({
fontSize: self.fontSize + 'px'
})
.html(
self.title + '<br/><span class="OxInfo">' + self.info + '</span>'
)
.mouseenter(mouseenter)
.mouseleave(mouseleave);
that.$reflection = $('<div>')
.addClass('OxReflection')
.css({
top: self.options.size + 'px',
width: (self.options.size + 4) + 'px',
height: (self.options.size / 2) + 'px'
});
that.$reflectionImage = $('<img>')
.addClass('OxLoading')
.attr({
src: self.url
})
.css({
width: self.options.width + 'px',
height: self.options.height + 'px',
// firefox is 1px off when centering images with odd width and scaleY(-1)
paddingLeft: ($.browser.mozilla && self.options.width % 2 ? 1 : 0) + 'px'
});
that.$gradient = $('<div>')
.css({
//top: (-self.options.size / 2) + 'px',
width: self.options.width + 'px',
height: (self.options.size / 2) + 'px'
});
that.append(
that.$reflection.append(
that.$reflectionImage
).append(
that.$gradient
)
).append(
that.$textBox.append(
that.$text
)
).append(
that.$icon.append(
that.$iconImage
)
);
function formatText(text, maxLines, maxLength) {
var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
return $.map(lines, function(line, i) {
if (i < maxLines - 1) {
return line;
} else if (i == maxLines - 1) {
return lines.length == maxLines ? line : Ox.truncate($.map(lines, function(line, i) {
return i < maxLines - 1 ? null : line;
}).join(' '), maxLength, '...', 'center');
} else {
return null;
}
}).join('<br/>');
}
function load() {
that.$iconImage.attr({
src: self.options.url
})
.one('load', function() {
that.$iconImage.removeClass('OxLoading');
that.$reflectionImage
.attr({
src: self.options.url
})
.removeClass('OxLoading');
});
}
function mousedown(e) {
// fixme: preventDefault keeps image from being draggable in safari - but also keeps the list from getting focus
// e.preventDefault();
}
function mouseenter() {
that.addClass('OxHover');
}
function mouseleave() {
that.removeClass('OxHover');
}
return that;
};