support highlighting in icon list text

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

@@ -8,17 +8,18 @@ Ox.IconItem <f:Ox.Element> IconItem Object
     (options) ->       <f> IconItem Object
     (options, self) -> <f> IconItem Object
     options <o> Options object
-        borderRadius <n|0> border radius for icon images
-        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
+        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) {
@@ -29,11 +30,11 @@ Ox.IconItem = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 borderRadius: 0,
+                find: '',
                 iconHeight: 128,
                 iconWidth: 128,
                 imageHeight: 128,
                 imageWidth: 128,
-                isInfoList: false,
                 itemHeight: 192,
                 itemWidth: 128,
                 id: '',
@@ -43,6 +44,8 @@ Ox.IconItem = function(options, self) {
             })
             .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),
@@ -75,8 +78,7 @@ Ox.IconItem = function(options, self) {
     that.$icon = $('<div>')
         .addClass('OxIcon')
         .css({
-            top: self.options.________isInfoList
-                ? 0 : self.options.iconWidth == 64 ? -64 : -124,
+            top: self.options.iconWidth == 64 ? -64 : -124,
             width: (self.options.iconWidth + 4) + 'px',
             height: (self.options.iconHeight + 4) + 'px'
         });
@@ -97,9 +99,7 @@ Ox.IconItem = function(options, self) {
     that.$textBox = $('<div>')
         .addClass('OxText')
         .css({
-            top: self.options.________isInfoList
-                ? self.options.iconHeight
-                : self.options.iconHeight - self.options.itemWidth / 2 + 'px',
+            top: self.options.iconHeight - self.options.itemWidth / 2 + 'px',
             width: self.options.itemWidth + 4 + 'px',
             height: (self.options.itemWidth == 64 ? 30 : 58) + 'px'
         });
@@ -162,18 +162,21 @@ Ox.IconItem = function(options, self) {
 
     function formatText(text, maxLines, maxLength) {
         text = Ox.isArray(text) ? text.join(', ') : text;
-        var lines = Ox.wordwrap(text, maxLength, '<br/>', true, false).split('<br/>');
-        return Ox.map(lines, function(line, i) {
-            if (i < maxLines - 1) {
-                return line;
-            } else if (i == maxLines - 1) {
-                return lines.length == maxLines ? line : Ox.truncate(lines.map(function(line, i) {
-                    return i < maxLines - 1 ? null : line;
-                }).join(' '), maxLength, '...', 'center');
-            } else {
-                return null;
-            }
-        }).join('<br/>');
+        var lines = Ox.wordwrap(text, maxLength, '\n', true, false).split('\n');
+        return Ox.highlightHTML(
+            Ox.map(lines, function(line, i) {
+                if (i < maxLines - 1) {
+                    return line;
+                } else if (i == maxLines - 1) {
+                    return lines.length == maxLines ? line : Ox.truncate(lines.map(function(line, i) {
+                        return i < maxLines - 1 ? null : line;
+                    }).join(' '), maxLength, '...', 'center');
+                } else {
+                    return null;
+                }
+            }).join(' <br>'),
+            self.options.find, 'OxHighlight', ['br']
+        ).replace(/ (<.*?>)?<br>/g, '$1<br>');
     }
 
     function load() {

source/Ox.UI/js/List/Ox.IconList.js

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

source/Ox.UI/js/List/Ox.InfoList.js

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

source/Ox/js/String.js

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