MightyPork
/
abbr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added code

Browse Source
master
Ondřej Hruška 9 years ago
commit 6156f4b2a9
4 changed files with 258 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      .gitignore
  2. 44
      README.md
  3. 131
      abbr.js
  4. 80
      example.html

3
.gitignore vendored
Unescape View File

@ -0,0 +1,3 @@
.idea/
*~
*.bak

44
README.md
Unescape View File

@ -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'
}
});

131
abbr.js
Unescape View File

@ -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;
})();

80
example.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save