Rewrite footnote popup

* 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

1 files 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 = '';
 }
 
 /**