tooltipxhr: batch of improvements - 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 5ac77cb27101dd0822d685a87fae728ef0aa539f
DIR parent 24a8497f1f0b9734fb410110bf817966e228040e
HTML Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Sat, 28 May 2016 20:24:10 +0200
tooltipxhr: batch of improvements
Diffstat:
M tooltipxhr/README | 10 +++++-----
A tooltipxhr/TODO | 5 +++++
M tooltipxhr/example.html | 5 +++--
D tooltipxhr/tooltip.js | 71 -------------------------------
R tooltipxhr/style.css -> tooltipxhr… | 0
A tooltipxhr/tooltipxhr.js | 74 +++++++++++++++++++++++++++++++
M tooltipxhr/win.html | 3 +--
7 files changed, 88 insertions(+), 80 deletions(-)
---
DIR diff --git a/tooltipxhr/README b/tooltipxhr/README
@@ -1,22 +1,22 @@
tooltip
=======
-small Javascript tooltip script for use with XMLHttpRequest (AJAX).
+small tooltip script for use with XMLHttpRequest (AJAX).
FEATURES
--------
- Small:
- - Filesize: +- 2.3KB.
- - Lines: +- 72, not much code, so hopefully easy to understand.
+ - Filesize: +- 2.4KB.
+ - Lines: +- 75, 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.
-- No support for legacy browsers, officially supported are:
+- Officially supported browsers are:
- Firefox and Firefox ESR.
- Chrome and most recent webkit-based browsers.
- - IE Edge.
+ - IE8+ (use compat.js).
USAGE
DIR diff --git a/tooltipxhr/TODO b/tooltipxhr/TODO
@@ -0,0 +1,5 @@
+? limit mousemove event rate, slow on my laptop.
+? don't use hardcoded scrollbar width and height (16px).
+
+x mouseover tooltip offset at bottom differs from mouseover.
+x tooltip does not work anymore on bottom of window (position()?).
DIR diff --git a/tooltipxhr/example.html b/tooltipxhr/example.html
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jstooltip</title>
- <link rel="stylesheet" type="text/css" href="style.css" />
+ <link rel="stylesheet" type="text/css" href="tooltipxhr.css" />
<style type="text/css">
table {
table-layout: fixed;
@@ -253,7 +253,8 @@
</tbody>
</table>
-<script type="text/javascript" src="tooltip.js"></script>
+<!--[if lte IE 8]><script type="text/javascript" src="../compat.js"></script><![endif]-->
+<script type="text/javascript" src="tooltipxhr.js"></script>
</body>
</html>
DIR diff --git a/tooltipxhr/tooltip.js b/tooltipxhr/tooltip.js
@@ -1,71 +0,0 @@
-(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) {
- 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 === el)
- return true;
- open = false;
- el.hidden = true;
- clearTimeout(timershow);
- return !!e.stopPropagation();
- }, false);
- 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";
- }
- };
- 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);
-})();
DIR diff --git a/tooltipxhr/style.css b/tooltipxhr/tooltipxhr.css
DIR diff --git a/tooltipxhr/tooltipxhr.js b/tooltipxhr/tooltipxhr.js
@@ -0,0 +1,74 @@
+(function() {
+ var open = false, timershow;
+ var el = document.createElement("div");
+ el.style.display = "none";
+ el.className = "tooltip";
+ document.body.appendChild(el);
+
+ var position = function(x, y) {
+ // position optimally, try to adjust when outside window.
+ if (y + el.offsetHeight + 32 > window.innerHeight)
+ el.style.top = String(y - el.offsetHeight - 18) + "px";
+ else
+ el.style.top = String(y + 18) + "px"; /* + space for cursor height */
+ // 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) {
+ el.style.right = "0px";
+ el.style.left = "auto";
+ } else {
+ el.style.left = String(x) + "px";
+ el.style.right = "auto";
+ }
+ };
+ document.addEventListener("keyup", function(e) {
+ // close on escape key.
+ if (e.which === 27) {
+ open = false;
+ el.style.display = "none";
+ 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; p = p.parentNode)
+ if (p === el)
+ return;
+ open = false;
+ el.style.display = "none";
+ clearTimeout(timershow);
+ return !!e.stopPropagation();
+ }, false);
+ document.addEventListener("mousemove", function(e) {
+ if (open)
+ return position(e.clientX, e.clientY);
+ clearTimeout(timershow);
+ timershow = setTimeout((function(target, x, y) {
+ return function() {
+ var uri = null;
+ for (var p = target; !!p.parentNode; p = p.parentNode)
+ if ((uri = p.getAttribute("data-tooltipuri")) !== null)
+ break;
+ if (uri === null)
+ return;
+
+ var xhr = new(XMLHttpRequest);
+ xhr.open("GET", uri + ((uri.indexOf("?") != -1) ? "&" : "?") + "t=" + String(new Date().getTime()), true);
+ xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState != 4 || [ 0, 200 ].indexOf(xhr.status) == -1)
+ return;
+ el.innerHTML = xhr.responseText || "";
+ el.style.display = "block";
+ open = true;
+ position(x, y);
+ };
+ xhr.timeout = 10000;
+ xhr.overrideMimeType("text/html");
+ xhr.send();
+ };
+ })(e.target, e.clientX, e.clientY), 500);
+ return !!e.stopPropagation();
+ }, false);
+})();
DIR diff --git a/tooltipxhr/win.html b/tooltipxhr/win.html
@@ -2,4 +2,4 @@ lorem ipsum blablablablabla end<br/>
test
<br/>
-<strong>EOF</strong>
-\ No newline at end of file
+<strong>EOF</strong>