commit 6156f4b2a98ee58639967990db65003f919d2175 Author: MightyPork Date: Tue Mar 31 02:08:07 2015 +0200 added code diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..616d38b --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.idea/ +*~ +*.bak diff --git a/README.md b/README.md new file mode 100644 index 0000000..285a433 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +ABBR +==== + +Abbr is a JavaScript library / function for finding, highlighting and annotating abbreviations in text. + +It needs no extra markup, all is done automatically. Just tell it what words you want to explain, and it'll do it. + +Abbr takes the following arguments: + + var opts = { + // selector in which to search for abbreviations + where: 'body', + // abbreviation list - word: explanation + words: {}, + // Tag used to mark the matches + tag: 'abbr', + // Attribute holding the "description" to be added to the tag + attr: 'title', + // Case insensitive + ci: true, + // tags that shall not be traversed (in addition to opts.tag) + excluded: ['script', 'style', 'code', 'head', 'textarea', 'embed'], + // Extra excluded (doesn't overwrite the original list) + exclude: [] + }; + +All config options are optional (though, obviously, you don't want to leave `words` empty). + +To run it, simply call: + + abbr({ + // Your options here + }); + +For example: + + abbr({ + where: 'article', + words: { + 'NSA': 'National Spying Agency', + 'Putin': 'Bear rider' + } + }); + diff --git a/abbr.js b/abbr.js new file mode 100644 index 0000000..68faf01 --- /dev/null +++ b/abbr.js @@ -0,0 +1,131 @@ +/** + * HTML abbreviation builder + * ------------------------- + * (c) MightyPork, 2015 + * MIT License + */ + +(function () { + "use strict"; + + function _extend(a, b) { + if (!b) return; + for (var i in a) { + if (b.hasOwnProperty(i)) { + a[i] = b[i]; + } + } + } + + + function _escape(s) { + return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + } + + + /** Public function */ + function abbr(config) { + + // Default config options + + var opts = { + // selector in which to search for abbreviations + where: 'body', + // abbreviation list - word: explanation + words: {}, + // Tag used to mark the matches + tag: 'abbr', + // Attribute holding the "description" to be added to the tag + attr: 'title', + // Case insensitive + ci: true, + // tags that shall not be traversed (in addition to opts.tag) + excluded: ['script', 'style', 'code', 'head', 'textarea', 'embed'], + // Extra excluded (doesn't overwrite the original list) + exclude: [] + }; + + + _extend(opts, config); + + // matches tags that shouldn't be traversed + var badRegex = new RegExp('(' + opts.excluded.concat(opts.exclude).join('|') + '|' + opts.tag + ')', 'i'); + + var wordlist = []; + for (var word in opts.words) { + if (!opts.words.hasOwnProperty(word)) continue; + + wordlist.push({ + w: word, + t: opts.words[word], + r: new RegExp('\\b' + _escape(word) + '\\b', opts.ci ? 'gi' : 'g'), + l: word.length + }); + } + + function _handle_nodes(nodes) { + var i, j, node, offset, chop, collected, wrap, abbr_txt, abbr_txt_clone; + + for (i = 0; i < nodes.length; i++) { + node = nodes[i]; + + if (node.nodeType == 1) { + + if (node.childNodes && !badRegex.test(node.tagName)) { + // ugly hack to convert live node list to array + var nl = []; + for (j = 0; j < node.childNodes.length; j++) nl.push(node.childNodes[j]); + _handle_nodes(nl); + } + + } else if (node.nodeType == 3) { + + // find replacement positions within the text node + var text = node.textContent; + var replpairs = []; + for (j = 0; j < wordlist.length; j++) { + var obj = wordlist[j]; + text.replace(obj.r, function (_, offset) { + replpairs.push({at: offset, len: obj.l, t: obj.t}); + }); + } + + // sort by position + replpairs.sort(function (a, b) { + return a.at - b.at; + }); + + for (offset = 0, j = 0; j < replpairs.length; j++) { + var rp = replpairs[j]; + + // remove non-abbr text + chop = rp.at - offset; + if (chop < 0) continue; + + node = node.splitText(chop); + offset += chop; + + // collect abbr text + chop = rp.len; + collected = node; + node = node.splitText(chop); + offset += chop; + + // the highlight thing + wrap = document.createElement(opts.tag); + wrap.setAttribute(opts.attr, rp.t); + abbr_txt = collected; + abbr_txt_clone = abbr_txt.cloneNode(true); + wrap.appendChild(abbr_txt_clone); + abbr_txt.parentNode.replaceChild(wrap, abbr_txt); + } + } + } + } + + _handle_nodes(document.querySelectorAll(opts.where)); + } + + // make it public + window.abbr = abbr; +})(); diff --git a/example.html b/example.html new file mode 100644 index 0000000..9e45f32 --- /dev/null +++ b/example.html @@ -0,0 +1,80 @@ + + + + + + + + + + + + + +

Example text from Wikipedia

+ +

This is a text from Wikipedia

+ +

+ Linux (pronounced Listeni/ˈlɪnəks/ lin-uks or, less frequently, /ˈlaɪnəks/ lyn-uks) is a Unix-like and mostly POSIX-compliant computer + operating system assembled under the model of free and open-source software development and distribution. The defining component of + Linux is the Linux kernel, an operating system kernel first released on 5 October 1991 by Linus Torvalds. The Free Software Foundation + uses the name GNU/Linux to describe the operating system, which has led to some controversy. +

+ + 

+		here be code. Linux Unix system. Not highlighted.
+
+ +

+ Linux was originally developed as a free operating system for Intel x86–based personal computers, but has since been ported to more + computer hardware platforms than any other operating system. It is the leading operating system on servers and other big iron systems + such as mainframe computers and supercomputers, but is used on only around 1.5% of desktop computers. Linux also runs on embedded + systems, which are devices whose operating system is typically built into the firmware and is highly tailored to the system; this + includes mobile phones, tablet computers, network routers, facility automation controls, televisions and video game consoles. Android, + the most widely used operating system for tablets and smartphones, is built on top of the Linux kernel. +

+ +

+ The development of Linux is one of the most prominent examples of free and open-source software collaboration. The underlying source + code may be used, modified, and distributed—commercially or non-commercially—by anyone under licenses such as the GNU General Public + License. Typically, Linux is packaged in a form known as a Linux distribution, for both desktop and server use. Some popular mainstream + Linux distributions include Debian, Ubuntu, Linux Mint, Fedora, openSUSE, Arch Linux, and the commercial Red Hat Enterprise Linux and + SUSE Linux Enterprise Server. Linux distributions include the Linux kernel, supporting utilities and libraries and usually a large + amount of application software to fulfill the distribution's intended use. +

+ +

+ A distribution oriented toward desktop use will typically include X11, Wayland or Mir as the windowing system, and an accompanying + desktop environment such as GNOME or the KDE Software Compilation. Some such distributions may include a less resource intensive + desktop such as LXDE or Xfce, for use on older or less powerful computers. A distribution intended to run as a server may omit all + graphical environments from the standard install, and instead include other software to set up and operate a solution stack such as + LAMP. Because Linux is freely redistributable, anyone may create a distribution for any intended use. +

+ +