added code
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user