aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorSébastien SAUVAGE <sebsauvage@sebsauvage.net>2013-03-11 02:11:47 -0700
committerSébastien SAUVAGE <sebsauvage@sebsauvage.net>2013-03-11 02:11:47 -0700
commit99954e12900401c5c725e65bce28cc1711653e45 (patch)
tree7b6c401fd5c94e75f4af99f46ca8ef195fad7b4a
parent87e3d65023ae382ec7cabd904dd070a9242e6bb8 (diff)
parent9da49531909101fd944d922a465f651c6f7b5935 (diff)
downloadShaarli-99954e12900401c5c725e65bce28cc1711653e45.tar.gz
Shaarli-99954e12900401c5c725e65bce28cc1711653e45.tar.zst
Shaarli-99954e12900401c5c725e65bce28cc1711653e45.zip
Merge pull request #43 from dsferruzza/highlight-search-results
Highlight search results
-rw-r--r--inc/jquery.highlight.js108
-rw-r--r--inc/shaarli.css2
-rw-r--r--tpl/page.footer.html10
3 files changed, 120 insertions, 0 deletions
diff --git a/inc/jquery.highlight.js b/inc/jquery.highlight.js
new file mode 100644
index 00000000..9dcf3c7a
--- /dev/null
+++ b/inc/jquery.highlight.js
@@ -0,0 +1,108 @@
1/*
2 * jQuery Highlight plugin
3 *
4 * Based on highlight v3 by Johann Burkard
5 * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
6 *
7 * Code a little bit refactored and cleaned (in my humble opinion).
8 * Most important changes:
9 * - has an option to highlight only entire words (wordsOnly - false by default),
10 * - has an option to be case sensitive (caseSensitive - false by default)
11 * - highlight element tag and class names can be specified in options
12 *
13 * Usage:
14 * // wrap every occurrance of text 'lorem' in content
15 * // with <span class='highlight'> (default options)
16 * $('#content').highlight('lorem');
17 *
18 * // search for and highlight more terms at once
19 * // so you can save some time on traversing DOM
20 * $('#content').highlight(['lorem', 'ipsum']);
21 * $('#content').highlight('lorem ipsum');
22 *
23 * // search only for entire word 'lorem'
24 * $('#content').highlight('lorem', { wordsOnly: true });
25 *
26 * // don't ignore case during search of term 'lorem'
27 * $('#content').highlight('lorem', { caseSensitive: true });
28 *
29 * // wrap every occurrance of term 'ipsum' in content
30 * // with <em class='important'>
31 * $('#content').highlight('ipsum', { element: 'em', className: 'important' });
32 *
33 * // remove default highlight
34 * $('#content').unhighlight();
35 *
36 * // remove custom highlight
37 * $('#content').unhighlight({ element: 'em', className: 'important' });
38 *
39 *
40 * Copyright (c) 2009 Bartek Szopka
41 *
42 * Licensed under MIT license.
43 *
44 */
45
46jQuery.extend({
47 highlight: function (node, re, nodeName, className) {
48 if (node.nodeType === 3) {
49 var match = node.data.match(re);
50 if (match) {
51 var highlight = document.createElement(nodeName || 'span');
52 highlight.className = className || 'highlight';
53 var wordNode = node.splitText(match.index);
54 wordNode.splitText(match[0].length);
55 var wordClone = wordNode.cloneNode(true);
56 highlight.appendChild(wordClone);
57 wordNode.parentNode.replaceChild(highlight, wordNode);
58 return 1; //skip added node in parent
59 }
60 } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
61 !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
62 !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
63 for (var i = 0; i < node.childNodes.length; i++) {
64 i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
65 }
66 }
67 return 0;
68 }
69});
70
71jQuery.fn.unhighlight = function (options) {
72 var settings = { className: 'highlight', element: 'span' };
73 jQuery.extend(settings, options);
74
75 return this.find(settings.element + "." + settings.className).each(function () {
76 var parent = this.parentNode;
77 parent.replaceChild(this.firstChild, this);
78 parent.normalize();
79 }).end();
80};
81
82jQuery.fn.highlight = function (words, options) {
83 var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
84 jQuery.extend(settings, options);
85
86 if (words.constructor === String) {
87 words = [words];
88 }
89 words = jQuery.grep(words, function(word, i){
90 return word != '';
91 });
92 words = jQuery.map(words, function(word, i) {
93 return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
94 });
95 if (words.length == 0) { return this; };
96
97 var flag = settings.caseSensitive ? "" : "i";
98 var pattern = "(" + words.join("|") + ")";
99 if (settings.wordsOnly) {
100 pattern = "\\b" + pattern + "\\b";
101 }
102 var re = new RegExp(pattern, flag);
103
104 return this.each(function () {
105 jQuery.highlight(this, re, settings.element, settings.className);
106 });
107};
108
diff --git a/inc/shaarli.css b/inc/shaarli.css
index 695c2a8d..50839848 100644
--- a/inc/shaarli.css
+++ b/inc/shaarli.css
@@ -464,3 +464,5 @@ div.dailyEntryDescription { font-size:10pt; }
464 464
465} 465}
466 466
467/* Highlight search results */
468.highlight { background-color: #FFFF33; } \ No newline at end of file
diff --git a/tpl/page.footer.html b/tpl/page.footer.html
index 13b566ae..3aa47ba6 100644
--- a/tpl/page.footer.html
+++ b/tpl/page.footer.html
@@ -18,3 +18,13 @@ $(document).ready(function()
18}); 18});
19</script> 19</script>
20{/if} 20{/if}
21
22{if="empty($GLOBALS['disablejquery']) && isset($_GET['searchterm'])"}
23<script src="inc/jquery.highlight.js#"></script>
24<script language="JavaScript">
25$(document).ready(function()
26{
27 $('#linklist li').highlight("{$search_crits}");
28});
29</script>
30{/if} \ No newline at end of file