Merge pull request #2657 from TEIC/issue_2656

Popup fix

P5/webnav/popupFootnotes.js

@@ -10,13 +10,13 @@
  var footnotePopupContent = null;
  var biblFrame = null;
 
-$(document).ready(function(){
-//First we create a popup box ready to receive the footnotes.
+
+document.addEventListener("DOMContentLoaded", function() {
   footnotePopup = document.createElement('div');
   footnotePopup.setAttribute('id', 'footnotePopup');
   var closer = document.createElement('div');
   closer.setAttribute('class', 'footnotePopupCloser');
-  closer.setAttribute('onclick', 'this.parentNode.style.display = \'none\'');
+  closer.onclick = function() {this.parentNode.style.display = "none"};
   var x = document.createTextNode('x');
   closer.appendChild(x);
   footnotePopupContent = document.createElement('div');
@@ -30,15 +30,18 @@ $(document).ready(function(){
   for (var i=0; i<links.length; i++){
     if (links[i].hasAttribute("href") && links[i].getAttribute('href').substring(0, 5) == '#Note'){
       if (links[i].getAttribute('class') != 'link_return'){
-        links[i].setAttribute('onclick', 'showPopupFootnote(\'' + links[i].getAttribute('href').substring(1) + '\')');
-        links[i].setAttribute('href', 'javascript:void(0)');
+        var dest = links[i].getAttribute('href').substring(1);
+        links[i].onclick = function (e) {
+          e.preventDefault();
+          showPopupFootnote(e.target, dest);
+        }
       }
     }    
   }
   addBiblFrame();
 });
 
-function showPopupFootnote(footnoteId){
+function showPopupFootnote(el, footnoteId){
   var footnote = document.getElementById(footnoteId);
   if ((footnotePopup == null)||(footnotePopupContent == null)||(footnote == null)){
 //If something is missing, we just default to original behaviour and jump to the footnote.
@@ -49,10 +52,17 @@ function showPopupFootnote(footnoteId){
   var cloneFootnote = footnote.cloneNode(true);
 //We need to remove the id because it'll be a duplicate.
   cloneFootnote.setAttribute('id', '');
+  // Also remove links back to the text because they are not needed in popups.
+  cloneFootnote.querySelectorAll("a.link_return").forEach(function(a) {a.parentElement.removeChild(a)});
 //Add it to the popup.
   clearContent(footnotePopupContent);
   footnotePopupContent.appendChild(cloneFootnote);
   footnotePopup.style.display = 'block';
+
+  // Position the popup near the footnote
+  const footnoteY = el.getBoundingClientRect().top;
+  const popupHeight = footnotePopup.getBoundingClientRect().height;
+  footnotePopup.style.top = (footnoteY - popupHeight - 20) + 'px';
 }
 
 function clearContent(targetEl){
@@ -63,29 +73,32 @@ function clearContent(targetEl){
 } 
 
 //Bind the escape key so that it hides the popup if it's showing.
-$(document).keyup(function(e){
-  if(e.keyCode === 27)
+document.addEventListener("keyup", function(e) {
+  if(e.keyCode === 27) {
     if (document.getElementById('footnotePopup').style.display == 'block'){
       document.getElementById('footnotePopup').style.display = 'none';
       e.preventDefault();
       e.stopPropagation();
     }
-});
+  }
+})
 
 //These functions set up and handle the display of bibliographical references
 //as popups.
 
 //This function finds all links to items in the bibliography and turns them
 //into JS calls which retrieve the content which has been imported into 
 //an iframe, and display it as a popup.
-function setupBiblPopups (){
+function setupBiblPopups () {
   var links = document.getElementsByTagName('a');
   for (var i=0; i<links.length; i++){
     var href = links[i].getAttribute('href');
     if (href && href.substring(0, 9) == 'BIB.html#'){
       var biblId = href.substring(9, href.length);
-        links[i].setAttribute('onclick', 'showPopupBibl(\'' + biblId + '\')');
-        links[i].setAttribute('href', 'javascript:void(0)');
+        links[i].onclick = function(e) {
+          e.preventDefault();
+          showPopupBibl(e.target, biblId)
+        }
       //}
     }
   }
@@ -102,12 +115,12 @@ function addBiblFrame(){
     biblFrame.style.display = 'none';
     document.getElementsByTagName('body')[0].appendChild(biblFrame);
     biblFrame.setAttribute('src', 'BIB.html');
-    $(biblFrame).ready(setupBiblPopups);
+    biblFrame.addEventListener("load", setupBiblPopups);
 }
 
 //This function shows a bibl popup. It differs slightly from the function for note
 //popups, so it is distinct.
-function showPopupBibl(biblId){
+function showPopupBibl(el, biblId){
   var bibl = null;
 //We have to be cautious here; some browsers block access to the iframe 
 //document contents from another document, especially when running locally.
@@ -125,11 +138,18 @@ function showPopupBibl(biblId){
     return;
   }
 //Otherwise, we populate the popup with the content of the bibl, and show it.
-  var biblContent = bibl.innerHTML;
+  var biblContent = bibl.cloneNode(true);
+  // Also remove links back to the text because they are not needed in popups.
+  biblContent.querySelectorAll("a.link_return").forEach(function(a) {a.parentElement.removeChild(a)});
 //Add it to the popup.
   clearContent(footnotePopupContent);
-  footnotePopupContent.innerHTML = biblContent;
+  footnotePopupContent.innerHTML = biblContent.innerHTML;
   footnotePopup.style.display = 'block';
+
+  // Position the popup near the footnote
+  const footnoteY = el.getBoundingClientRect().top;
+  const popupHeight = footnotePopup.getBoundingClientRect().height;
+  footnotePopup.style.top = (footnoteY - popupHeight - 20) + 'px';
 }