commit
6156f4b2a9
@ -0,0 +1,3 @@ |
|||||||
|
.idea/ |
||||||
|
*~ |
||||||
|
*.bak |
||||||
@ -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' |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
@ -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; |
||||||
|
})(); |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
<!DOCTYPE HTML> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<style> |
||||||
|
abbr {border-bottom: 1px dashed black; cursor: help;} |
||||||
|
abbr:hover {border-bottom-color: #1b6196;} |
||||||
|
</style> |
||||||
|
|
||||||
|
<!-- Include it --> |
||||||
|
<script src="abbr.js"></script> |
||||||
|
|
||||||
|
<script type="text/javascript"> |
||||||
|
|
||||||
|
function init() { |
||||||
|
abbr({ |
||||||
|
// It supports various options, |
||||||
|
// see the library file for reference. |
||||||
|
words: { |
||||||
|
'GNU/Linux': 'Combo of GNU utils and Linux Kernel.', |
||||||
|
'Linux': 'Holy grail', |
||||||
|
'Unix': "Not sure, google it!", |
||||||
|
'operating system': 'something in a computer', |
||||||
|
'system': 'order', |
||||||
|
'automation': 'doing stuff by itself', |
||||||
|
'free': 'not paid', |
||||||
|
'open-source': 'With publicly available code.', |
||||||
|
'Wikipedia': 'free online encyclopedia', |
||||||
|
'formware': 'low level system code' |
||||||
|
}, |
||||||
|
exclude: ['h1'] |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body onload="init()"><!-- Use $(document).ready() if you have jQuery --> |
||||||
|
|
||||||
|
<h1>Example text from Wikipedia</h1> |
||||||
|
|
||||||
|
<h2>This is a text from Wikipedia</h2> |
||||||
|
|
||||||
|
<p> |
||||||
|
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. |
||||||
|
</p> |
||||||
|
|
||||||
|
<pre><code> |
||||||
|
here be code. Linux Unix system. Not highlighted. |
||||||
|
</code></pre> |
||||||
|
|
||||||
|
<p> |
||||||
|
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. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p> |
||||||
|
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. |
||||||
|
</p> |
||||||
|
|
||||||
|
<p> |
||||||
|
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. |
||||||
|
</p> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue