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
204
source/Ox.UI/js/List/IconItem.js
Normal file
204
source/Ox.UI/js/List/IconItem.js
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.IconItem <f:Ox.Element> IconItem Object
|
||||
([options[, self]]) -> <o> IconItem Object
|
||||
options <o> Options object
|
||||
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
|
||||
@*/
|
||||
|
||||
Ox.IconItem = function(options, self) {
|
||||
|
||||
//Ox.Log('List', 'IconItem', options, self)
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
borderRadius: 0,
|
||||
find: '',
|
||||
iconHeight: 128,
|
||||
iconWidth: 128,
|
||||
imageHeight: 128,
|
||||
imageWidth: 128,
|
||||
itemHeight: 192,
|
||||
itemWidth: 128,
|
||||
id: '',
|
||||
info: '',
|
||||
title: '',
|
||||
url: ''
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
//Ox.print('ICON ITEM FIND', self.options.find)
|
||||
|
||||
Ox.extend(self, {
|
||||
fontSize: self.options.itemWidth == 64 ? 6 : 9,
|
||||
infoIsObject: Ox.isObject(self.options.info),
|
||||
lineLength: self.options.itemWidth == 64 ? 15 : 23,
|
||||
lines: self.options.itemWidth == 64 ? 4 : 5,
|
||||
url: Ox.UI.PATH + 'png/transparent.png'
|
||||
});
|
||||
|
||||
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'
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
that.css({
|
||||
// 2 * 2 px margin (.css), 2 * 2 px border (here)
|
||||
width: self.options.itemWidth + 4 + 'px',
|
||||
height: self.options.itemHeight + + 4 + 'px'
|
||||
});
|
||||
that.$icon = $('<div>')
|
||||
.addClass('OxIcon')
|
||||
.css({
|
||||
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')
|
||||
.attr({
|
||||
src: self.url
|
||||
})
|
||||
.css({
|
||||
width: self.options.imageWidth + 'px',
|
||||
height: self.options.imageHeight + 'px',
|
||||
borderRadius: self.options.borderRadius + 4 + 'px'
|
||||
})
|
||||
.mousedown(mousedown)
|
||||
.mouseenter(mouseenter)
|
||||
.mouseleave(mouseleave);
|
||||
self.options.url && that.$iconImage.one('load', load);
|
||||
that.$textBox = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({
|
||||
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')
|
||||
.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);
|
||||
}
|
||||
that.$reflection = $('<div>')
|
||||
.addClass('OxReflection')
|
||||
.css({
|
||||
top: self.options.iconHeight + 'px',
|
||||
width: self.options.itemWidth + 4 + 'px',
|
||||
height: self.options.itemHeight - self.options.iconHeight + 'px'
|
||||
});
|
||||
that.$reflectionImage = $('<img>')
|
||||
.addClass('OxLoading')
|
||||
.attr({
|
||||
src: self.url
|
||||
})
|
||||
.css({
|
||||
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.imageWidth % 2 ? 1 : 0) + 'px',
|
||||
borderRadius: self.options.borderRadius + 'px'
|
||||
});
|
||||
that.$gradient = $('<div>')
|
||||
.css({
|
||||
//top: (-self.options.size / 2) + 'px',
|
||||
width: self.options.itemWidth + 'px',
|
||||
height: self.options.itemWidth / 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) {
|
||||
text = Ox.isArray(text) ? text.join(', ') : text;
|
||||
var lines = Ox.wordwrap(text, maxLength, '\n', true, false).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(' '), maxLength, '...', 'center'
|
||||
);
|
||||
lines = lines.slice(0, maxLines);
|
||||
}
|
||||
return Ox.highlightHTML(
|
||||
lines.join(' <br/>'), self.options.find, 'OxHighlight', true
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue