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

support highlighting in icon list text

Browse source
This commit is contained in:
rlx 2012-02-01 11:57:21 +00:00
parent 4dba56ba87
commit 1ae47b761b
4 changed files with 41 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,17 +8,18 @@ Ox.IconItem <f:Ox.Element> IconItem Object
(options) -> <f> IconItem Object (options) -> <f> 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
iconHeight <n|128> icon height find <s|''> String to be highlighted
iconWidth <n|128> icon width iconHeight <n|128> Icon height
imageHeight <n|128> icon image height iconWidth <n|128> Icon width
imageWidth <n|128> icon image width imageHeight <n|128> Icon image height
id <s> element id imageWidth <n|128> Icon image width
info <s> icon info id <s> Element id
size <n|128> icon size info <s> Icon info
title <s> title size <n|128> Icon size
url <s> icon url title <s> Title
self <o> shared private variable url <s> Icon url
self <o> Shared private variable
@*/ @*/
Ox.IconItem = function(options, self) { Ox.IconItem = function(options, self) {
@ -29,11 +30,11 @@ Ox.IconItem = function(options, self) {
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
borderRadius: 0, borderRadius: 0,
find: '',
iconHeight: 128, iconHeight: 128,
iconWidth: 128, iconWidth: 128,
imageHeight: 128, imageHeight: 128,
imageWidth: 128, imageWidth: 128,
isInfoList: false,
itemHeight: 192, itemHeight: 192,
itemWidth: 128, itemWidth: 128,
id: '', id: '',
@ -43,6 +44,8 @@ Ox.IconItem = function(options, self) {
}) })
.options(options || {}); .options(options || {});
Ox.print('ICON ITEM FIND', self.options.find)
Ox.extend(self, { Ox.extend(self, {
fontSize: self.options.itemWidth == 64 ? 6 : 9, fontSize: self.options.itemWidth == 64 ? 6 : 9,
infoIsObject: Ox.isObject(self.options.info), infoIsObject: Ox.isObject(self.options.info),
@ -75,8 +78,7 @@ Ox.IconItem = function(options, self) {
that.$icon = $('<div>') that.$icon = $('<div>')
.addClass('OxIcon') .addClass('OxIcon')
.css({ .css({
top: self.options.________isInfoList top: self.options.iconWidth == 64 ? -64 : -124,
? 0 : self.options.iconWidth == 64 ? -64 : -124,
width: (self.options.iconWidth + 4) + 'px', width: (self.options.iconWidth + 4) + 'px',
height: (self.options.iconHeight + 4) + 'px' height: (self.options.iconHeight + 4) + 'px'
}); });
@ -97,9 +99,7 @@ Ox.IconItem = function(options, self) {
that.$textBox = $('<div>') that.$textBox = $('<div>')
.addClass('OxText') .addClass('OxText')
.css({ .css({
top: self.options.________isInfoList top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
? self.options.iconHeight
: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
width: self.options.itemWidth + 4 + 'px', width: self.options.itemWidth + 4 + 'px',
height: (self.options.itemWidth == 64 ? 30 : 58) + 'px' height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
}); });
@ -162,8 +162,9 @@ Ox.IconItem = function(options, self) {
function formatText(text, maxLines, maxLength) { function formatText(text, maxLines, maxLength) {
text = Ox.isArray(text) ? text.join(', ') : text; text = Ox.isArray(text) ? text.join(', ') : text;
var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>'); var lines = Ox.wordwrap(text, maxLength, '\n', true, false).split('\n');
return Ox.map(lines, function(line, i) { return Ox.highlightHTML(
Ox.map(lines, function(line, i) {
if (i < maxLines - 1) { if (i < maxLines - 1) {
return line; return line;
} else if (i == maxLines - 1) { } else if (i == maxLines - 1) {
@ -173,7 +174,9 @@ Ox.IconItem = function(options, self) {
} else { } else {
return null; return null;
} }
}).join('<br/>'); }).join(' <br>'),
self.options.find, 'OxHighlight', ['br']
).replace(/ (<.*?>)?<br>/g, '$1<br>');
} }
function load() { function load() {

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

@ -36,6 +36,7 @@ Ox.IconList = function(options, self) {
centerSelection: false, centerSelection: false,
defaultRatio: 1, defaultRatio: 1,
draggable: false, draggable: false,
find: '',
fixedRatio: false, fixedRatio: false,
id: '', id: '',
item: null, item: null,
@ -106,6 +107,7 @@ Ox.IconList = function(options, self) {
}; };
return self.options.itemConstructor(Ox.extend(data, { return self.options.itemConstructor(Ox.extend(data, {
borderRadius: self.options.borderRadius, borderRadius: self.options.borderRadius,
find: self.options.find,
iconHeight: self.iconHeight, iconHeight: self.iconHeight,
iconWidth: self.iconWidth, iconWidth: self.iconWidth,
imageHeight: data.height, imageHeight: data.height,

9
source/Ox.UI/js/List/Ox.InfoList.js
View file

@ -21,6 +21,8 @@ Ox.InfoList = function(options, self) {
}) })
.options(options || {}) .options(options || {})
Ox.print('INFO LIST FIND', self.options.find);
self.iconSize = Math.round(self.options.size * 2/3); self.iconSize = Math.round(self.options.size * 2/3);
self.itemHeight = self.options.size; self.itemHeight = self.options.size;
@ -64,10 +66,8 @@ Ox.InfoList = function(options, self) {
)) ))
}, },
info: {} info: {}
}; },
Ox.Log('List', 'DATA -=-------', data) $icon = Ox.Element()
var $icon = Ox.Element()
.css({ .css({
float: 'left', float: 'left',
width: '132px', width: '132px',
@ -82,7 +82,6 @@ Ox.InfoList = function(options, self) {
iconWidth: self.iconSize, iconWidth: self.iconSize,
imageHeight: data.icon.height, imageHeight: data.icon.height,
imageWidth: data.icon.width, imageWidth: data.icon.width,
isInfoList: true,
itemHeight: self.itemHeight, itemHeight: self.itemHeight,
itemWidth: 128 itemWidth: 128
})) }))

6
source/Ox/js/String.js
View file

@ -75,13 +75,13 @@ Ox.highlightHTML <f> Highlight matches in an HTML string
> Ox.highlightHTML('AT&amp;T', 'amp', 'h') > Ox.highlightHTML('AT&amp;T', 'amp', 'h')
'AT&amp;T' 'AT&amp;T'
@*/ @*/
Ox.highlightHTML = function(html, str, classname) { Ox.highlightHTML = function(html, str, classname, tags) {
var count = 0, var count = 0,
isEntity = false, isEntity = false,
isTag = false, isTag = false,
position, position,
positions = [], positions = [];
tags = ['a', 'b', 'code', 'i', 's', 'sub', 'sup', 'u']; tags = Ox.merge(tags || [], ['a', 'b', 'code', 'i', 's', 'sub', 'sup', 'u']);
str = Ox.encodeHTML(str).toLowerCase(); str = Ox.encodeHTML(str).toLowerCase();
Ox.forEach(html.toLowerCase(), function(chr, i) { Ox.forEach(html.toLowerCase(), function(chr, i) {
// check for entity or tag start // check for entity or tag start