From ea6dfbca91f6afe89ff631ac28eae023bcc52853 Mon Sep 17 00:00:00 2001
From: Adrian Lang <lang@cosmocode.de>
Date: Fri, 26 Mar 2010 15:17:26 +0100
Subject: [PATCH] Rewrite footnote popup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Popup now shows up relative to the link, not the mouse position
* Easier handling of mouseout’s bubbling
* Factor out popup creation to allow plugins to use it
---
lib/scripts/script.js | 82 ++++++++++++++++---------------------------
1 file changed, 31 insertions(+), 51 deletions(-)
diff --git a/lib/scripts/script.js b/lib/scripts/script.js
index 205d3f706..99dade692 100644
--- a/lib/scripts/script.js
+++ b/lib/scripts/script.js
@@ -234,57 +234,51 @@ function toggleToc() {
}
/**
- * Display an insitu footnote popup
- *
- * @author Andreas Gohr <andi@splitbrain.org>
- * @author Chris Smith <chris@jalakai.co.uk>
+ * Create JavaScript mouseover popup
*/
-function footnote(e){
- var obj = e.target;
- var id = obj.id.substr(5);
+function insitu_popup(target, popup_id) {
- // get or create the footnote popup div
- var fndiv = $('insitu__fn');
+ // get or create the popup div
+ var fndiv = $(popup_id);
if(!fndiv){
fndiv = document.createElement('div');
- fndiv.id = 'insitu__fn';
+ fndiv.id = popup_id;
fndiv.className = 'insitu-footnote JSpopup dokuwiki';
// autoclose on mouseout - ignoring bubbled up events
addEvent(fndiv,'mouseout',function(e){
- if(e.target != fndiv){
- e.stopPropagation();
- return;
+ var p = e.relatedTarget || e.toElement;
+ while (p && p !== this) {
+ p = p.parentNode;
}
- // check if the element was really left
- if(e.pageX){ // Mozilla
- var bx1 = findPosX(fndiv);
- var bx2 = bx1 + fndiv.offsetWidth;
- var by1 = findPosY(fndiv);
- var by2 = by1 + fndiv.offsetHeight;
- var x = e.pageX;
- var y = e.pageY;
- if(x > bx1 && x < bx2 && y > by1 && y < by2){
- // we're still inside boundaries
- e.stopPropagation();
- return;
- }
- }else{ // IE
- if(e.offsetX > 0 && e.offsetX < fndiv.offsetWidth-1 &&
- e.offsetY > 0 && e.offsetY < fndiv.offsetHeight-1){
- // we're still inside boundaries
- e.stopPropagation();
- return;
- }
+ if (p === this) {
+ return;
}
// okay, hide it
- fndiv.style.display='none';
+ this.style.display='none';
});
- document.body.appendChild(fndiv);
+ getElementsByClass('dokuwiki', document.body, 'div')[0].appendChild(fndiv);
}
+ // position the div and make it visible
+ fndiv.style.position = 'absolute';
+ fndiv.style.left = findPosX(target)+'px';
+ fndiv.style.top = (findPosY(target)+target.scrollHeight * 1.5) + 'px';
+ fndiv.style.display = '';
+ return fndiv;
+}
+
+/**
+ * Display an insitu footnote popup
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ * @author Chris Smith <chris@jalakai.co.uk>
+ */
+function footnote(e){
+ var fndiv = insitu_popup(e.target, 'insitu__fn');
+
// locate the footnote anchor element
- var a = $( "fn__"+id );
+ var a = $("fn__" + e.target.id.substr(5));
if (!a){ return; }
// anchor parent is the footnote container, get its innerHTML
@@ -295,24 +289,10 @@ function footnote(e){
content = content.replace(/^\s+(,\s+)+/,'');
// prefix ids on any elements with "insitu__" to ensure they remain unique
- content = content.replace(/\bid=\"(.*?)\"/gi,'id="insitu__$1');
+ content = content.replace(/\bid=(['"])([^"']+)\1/gi,'id="insitu__$2');
// now put the content into the wrapper
fndiv.innerHTML = content;
-
- // position the div and make it visible
- var x; var y;
- if(e.pageX){ // Mozilla
- x = e.pageX;
- y = e.pageY;
- }else{ // IE
- x = e.offsetX;
- y = e.offsetY;
- }
- fndiv.style.position = 'absolute';
- fndiv.style.left = (x+2)+'px';
- fndiv.style.top = (y+2)+'px';
- fndiv.style.display = '';
}
/**
--
GitLab