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

205 lines
6.5 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 10:49:48 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.IconItem <f> IconItem Object
([options[, self]]) -> <o:Ox.Element> IconItem Object
2011-05-16 10:49:48 +00:00
options <o> Options object
2012-02-01 11:57:21 +00:00
borderRadius <n|0> Border radius for icon images
find <s|''> String to be highlighted
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
url <s> Icon url
self <o> Shared private variable
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.IconItem = function(options, self) {
2011-11-04 15:54:28 +00:00
//Ox.Log('List', 'IconItem', options, self)
2011-04-22 22:03:10 +00:00
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
2011-08-06 17:41:01 +00:00
borderRadius: 0,
2012-02-01 11:57:21 +00:00
find: '',
2011-08-07 02:33:26 +00:00
iconHeight: 128,
iconWidth: 128,
imageHeight: 128,
imageWidth: 128,
itemHeight: 192,
itemWidth: 128,
2011-04-22 22:03:10 +00:00
id: '',
info: '',
title: '',
url: ''
})
.options(options || {});
2011-04-22 22:03:10 +00:00
2012-02-04 11:44:19 +00:00
//Ox.print('ICON ITEM FIND', self.options.find)
2012-02-01 11:57:21 +00:00
Ox.extend(self, {
2011-08-07 02:33:26 +00:00
fontSize: self.options.itemWidth == 64 ? 6 : 9,
infoIsObject: Ox.isObject(self.options.info),
2011-08-07 02:33:26 +00:00
lineLength: self.options.itemWidth == 64 ? 15 : 23,
lines: self.options.itemWidth == 64 ? 4 : 5,
2012-05-26 15:48:19 +00:00
url: Ox.UI.PATH + 'png/transparent.png'
2011-04-22 22:03:10 +00:00
});
self.title = formatText(self.options.title, self.lines - 1 - self.infoIsObject, self.lineLength);
if (!self.infoIsObject) {
self.info = formatText(self.options.info, 5 - self.title.split('<br/>').length, self.lineLength);
} else {
self.title = $('<div>').css({fontSize: self.fontSize + 'px'}).html(self.title);
self.info = $('<div>').append(
self.options.info.css({
width: Math.round(self.options.itemWidth / 2) + 'px',
padding: 0,
margin: '1px auto 1px auto',
fontSize: self.fontSize + 'px',
textShadow: 'none'
})
);
}
2011-04-22 22:03:10 +00:00
that.css({
2011-09-29 17:25:50 +00:00
// 2 * 2 px margin (.css), 2 * 2 px border (here)
width: self.options.itemWidth + 4 + 'px',
height: self.options.itemHeight + + 4 + 'px'
2011-04-22 22:03:10 +00:00
});
that.$icon = $('<div>')
.addClass('OxIcon')
.css({
2012-02-01 11:57:21 +00:00
top: self.options.iconWidth == 64 ? -64 : -124,
2011-08-07 02:33:26 +00:00
width: (self.options.iconWidth + 4) + 'px',
height: (self.options.iconHeight + 4) + 'px'
2011-04-22 22:03:10 +00:00
});
that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget')
.attr({
src: self.url
})
.css({
2011-08-07 02:33:26 +00:00
width: self.options.imageWidth + 'px',
height: self.options.imageHeight + 'px',
2011-08-06 17:41:01 +00:00
borderRadius: self.options.borderRadius + 4 + 'px'
2011-04-22 22:03:10 +00:00
})
.mousedown(mousedown)
.mouseenter(mouseenter)
.mouseleave(mouseleave);
self.options.url && that.$iconImage.one('load', load);
that.$textBox = $('<div>')
.addClass('OxText')
.css({
2012-02-01 11:57:21 +00:00
top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
2011-08-07 02:33:26 +00:00
width: self.options.itemWidth + 4 + 'px',
height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
2011-06-01 10:59:30 +00:00
});
2011-04-22 22:03:10 +00:00
that.$text = $('<div>')
.addClass('OxTarget')
.css({
fontSize: self.fontSize + 'px'
})
.mouseenter(mouseenter)
.mouseleave(mouseleave);
if (!self.infoIsObject) {
that.$text.html(
(self.title ? self.title + '<br/>' : '')
+ '<span class="OxInfo">' + self.info + '</span>'
);
} else {
that.$text.append(self.title).append(self.info);
}
2011-04-22 22:03:10 +00:00
that.$reflection = $('<div>')
.addClass('OxReflection')
.css({
2011-08-07 02:33:26 +00:00
top: self.options.iconHeight + 'px',
width: self.options.itemWidth + 4 + 'px',
height: self.options.itemHeight - self.options.iconHeight + 'px'
2011-04-22 22:03:10 +00:00
});
that.$reflectionImage = $('<img>')
.addClass('OxLoading')
.attr({
src: self.url
})
.css({
2011-08-07 02:33:26 +00:00
width: self.options.imageWidth + 'px',
height: self.options.imageHeight + 'px',
2011-04-22 22:03:10 +00:00
// firefox is 1px off when centering images with odd width and scaleY(-1)
2011-08-07 02:33:26 +00:00
paddingLeft: ($.browser.mozilla && self.options.imageWidth % 2 ? 1 : 0) + 'px',
borderRadius: self.options.borderRadius + 'px'
2011-04-22 22:03:10 +00:00
});
that.$gradient = $('<div>')
.css({
//top: (-self.options.size / 2) + 'px',
2011-08-07 02:33:26 +00:00
width: self.options.itemWidth + 'px',
height: self.options.itemWidth / 2 + 'px'
2011-04-22 22:03:10 +00:00
});
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) {
2011-09-28 17:31:35 +00:00
text = Ox.isArray(text) ? text.join(', ') : text;
2012-06-04 11:49:39 +00:00
var lines = Ox.wordwrap(text, maxLength, true).split('\n');
// if the text has too many lines, replace the last line with the
// truncated rest (including the last line) and discard all extra lines
if (lines.length > maxLines) {
lines[maxLines - 1] = Ox.truncate(
lines.slice(maxLines - 1).join(''), 'center', maxLength
).replace('…', '<span class="OxLight">…</span>');
lines = lines.slice(0, maxLines);
}
2012-06-03 08:41:18 +00:00
return Ox.highlight(
lines.join('<br/>'), self.options.find, 'OxHighlight', true
);
2011-04-22 22:03:10 +00:00
}
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;
};