tooltipxhr: simplify the code a bit - jscancer - Javascript crap (relatively small)
HTML git clone git://git.codemadness.org/jscancer
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit 1d3b222c38a79a8c0e1823b30ac5f7c8eb28a0a1
DIR parent f838e621a6a52066480ee4ad27528972560e1890
HTML Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Sat, 7 May 2016 23:11:05 +0200
tooltipxhr: simplify the code a bit
Diffstat:
M tooltipxhr/README | 4 ++--
M tooltipxhr/tooltip.js | 127 ++++++++++++++-----------------
2 files changed, 60 insertions(+), 71 deletions(-)
---
DIR diff --git a/tooltipxhr/README b/tooltipxhr/README
@@ -8,8 +8,8 @@ FEATURES
--------
- Small:
- - Filesize: +- 2.5KB.
- - Lines: +- 85, not much code, so hopefully easy to understand.
+ - Filesize: +- 2.3KB.
+ - Lines: +- 72, not much code, so hopefully easy to understand.
- No dependencies on other libraries like jQuery.
- Permissive ISC license, see LICENSE file, feel free to contact me for
questions or other terms.
DIR diff --git a/tooltipxhr/tooltip.js b/tooltipxhr/tooltip.js
@@ -1,82 +1,71 @@
-function tooltip_autoload() {
- var t = {
- close: function() {
- this.el.hidden = true;
- this.open = false;
- },
- show: function(uri, fn) {
- var x = new(XMLHttpRequest), t = this;
- x.open("GET", uri + ((uri.indexOf("?") != -1) ? "&" : "?") + "t=" + String(new Date().getTime()), true);
- x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
- x.onreadystatechange = function() {
- if (x.readyState != 4 || [ 0, 200 ].indexOf(x.status) == -1)
- return;
- t.el.innerHTML = x.responseText || "";
- t.el.hidden = false;
- t.open = true;
- fn();
- };
- x.timeout = 10000;
- x.send();
- },
- open: false
- };
- t.el = document.createElement("div");
- t.el.hidden = true;
- t.el.className = "tooltip";
- document.body.appendChild(t.el);
+(function() {
+ var open = false, timershow;
+ var el = document.createElement("div");
+ el.hidden = true;
+ el.className = "tooltip";
+ document.body.appendChild(el);
document.addEventListener("keyup", function(e) {
// close on escape key.
if (e.which === 27) {
- t.close();
- clearTimeout(t.timershow);
+ open = false;
+ el.hidden = true;
+ clearTimeout(timershow);
}
});
// don't close if mouse over popup or it's children.
document.addEventListener("mouseover", function(e) {
for (var p = e.target; p.parentNode !== null && !!p.parentNode; p = p.parentNode)
- if (p === t.el)
+ if (p === el)
return true;
- t.close();
- clearTimeout(t.timershow);
+ open = false;
+ el.hidden = true;
+ clearTimeout(timershow);
return !!e.stopPropagation();
}, false);
- document.addEventListener("mousemove", (function(t) {
- return function(e) {
- for (var p = e.target, uri = null; !!p.parentNode; p = p.parentNode)
- if ((uri = p.getAttribute("data-tooltipuri")) !== null)
- break;
- if (uri === null)
- return;
- var position = function() {
- var x = e.clientX, y = e.clientY + 18;
- // position optimally, try to adjust when outside window.
- if (y + t.el.offsetHeight + 18 > window.innerHeight)
- t.el.style.top = String(e.clientY - t.el.offsetHeight - 2) + "px";
- else
- t.el.style.top = String(y) + "px";
- // NOTE, this is a mess: document.body.clientWidth excludes scrollbar width.
- // window.innerWidth is the window including scrollbar width.
- // window.outerWidth is the window including scrollbar width and window border.
- if (x + t.el.offsetWidth >= document.body.parentNode.offsetWidth + 16) {
- t.el.style.right = "0px";
- t.el.style.left = "auto";
- } else {
- t.el.style.left = String(x) + "px";
- t.el.style.right = "auto";
- }
- };
- if (t.open) {
- position();
- return;
+ document.addEventListener("mousemove", function(e) {
+ for (var p = e.target, uri = null; !!p.parentNode; p = p.parentNode)
+ if ((uri = p.getAttribute("data-tooltipuri")) !== null)
+ break;
+ if (uri === null)
+ return;
+ var position = function() {
+ var x = e.clientX, y = e.clientY + 18;
+ // position optimally, try to adjust when outside window.
+ if (y + el.offsetHeight + 18 > window.innerHeight)
+ el.style.top = String(e.clientY - el.offsetHeight - 2) + "px";
+ else
+ el.style.top = String(y) + "px";
+ // NOTE, this is a mess: document.body.clientWidth excludes scrollbar width.
+ // window.innerWidth is the window including scrollbar width.
+ // window.outerWidth is the window including scrollbar width and window border.
+ if (x + el.offsetWidth >= document.body.parentNode.offsetWidth + 16) {
+ el.style.right = "0px";
+ el.style.left = "auto";
+ } else {
+ el.style.left = String(x) + "px";
+ el.style.right = "auto";
}
- clearTimeout(t.timershow);
- t.timershow = setTimeout(function() {
- t.show(uri, position);
- }, 500);
- return !!e.stopPropagation();
};
- })(t), false);
- return [ t ];
-}
-var tooltips = tooltip_autoload();
+ if (open) {
+ position();
+ return;
+ }
+ clearTimeout(timershow);
+ timershow = setTimeout(function() {
+ var x = new(XMLHttpRequest);
+ x.open("GET", uri + ((uri.indexOf("?") != -1) ? "&" : "?") + "t=" + String(new Date().getTime()), true);
+ x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+ x.onreadystatechange = function() {
+ if (x.readyState != 4 || [ 0, 200 ].indexOf(x.status) == -1)
+ return;
+ el.innerHTML = x.responseText || "";
+ el.hidden = false;
+ open = true;
+ position();
+ };
+ x.timeout = 10000;
+ x.send();
+ }, 500);
+ return !!e.stopPropagation();
+ }, false);
+})();