doc/footnote-popup.js

   1 /*!
   2  * footnote-popup.js
   3  *
   4  * JavaScript code to make pandoc footnotes pop up
   5  *
   6  * written 2014 by Werner Lemberg
   7  * based on code from http://ignorethecode.net/blog/2010/04/20/footnotes
   8  */
   9
  10 // This code snippet needs `jquery' (https://code.jquery.com/jquery-1.11.2.js)
  11
  12 // Add a #footnotediv rule to the CSS code to style the pop-up window.
  13
  14 $(document).ready(function() {
  15   Footnotes.setup();
  16 });
  17
  18 var Footnotes = {
  19   footnotetimeout: false,
  20
  21   setup: function() {
  22     /* collect all footnote links that have an ID starting with `fnref' */
  23     var footnotelinks = $("a[id^='fnref']")
  24
  25     /* clean-up */
  26     footnotelinks.unbind('mouseover', Footnotes.footnoteover);
  27     footnotelinks.unbind('mouseout', Footnotes.footnoteoout);
  28
  29     /* assign our mouse handling functions to the collected footnote links */
  30     footnotelinks.bind('mouseover', Footnotes.footnoteover);
  31     footnotelinks.bind('mouseout', Footnotes.footnoteoout);
  32   },
  33
  34   footnoteover: function() {
  35     clearTimeout(Footnotes.footnotetimeout);
  36
  37     /* clean-up */
  38     $('#footnotediv').stop();
  39     $('#footnotediv').remove();
  40
  41     /* extract position of the current footnote link and get the ID the
  42        `href' attribute is pointing to */
  43     var id = $(this).attr('href').substr(1);
  44     var position = $(this).offset();
  45
  46     /* build a diversion having the ID `footnotediv' */
  47     var div = $(document.createElement('div'));
  48     div.attr('id', 'footnotediv');
  49
  50     /* assign our mouse handling functions to the diversion */
  51     div.bind('mouseover', Footnotes.divover);
  52     div.bind('mouseout', Footnotes.footnoteoout);
  53
  54     /* get the footnote data */
  55     var el = document.getElementById(id);
  56     div.html($(el).html());
  57
  58     /* pandoc inserts a `return symbol' (embedded in a hyperlink) at the
  59        very end of the footnote; it doesn't make sense to display it in a
  60        pop-up window, so we remove it */
  61     div.find('a').last().remove();
  62
  63     /* finally, create some CSS data for the diversion */
  64     div.css({
  65       position: 'absolute',
  66       width: '20em',
  67       opacity: 0.95
  68     });
  69     $(document.body).append(div);
  70
  71     /* ensure that our pop-up window gets displayed on screen */
  72     var left = position.left;
  73     if (left + div.width() + 20 > $(window).width() + $(window).scrollLeft())
  74       left = $(window).width() - div.width() - 20 + $(window).scrollLeft();
  75
  76     var top = position.top + 20;
  77     if (top + div.height() > $(window).height() + $(window).scrollTop())
  78       top = position.top - div.height() - 15;
  79
  80     div.css({
  81       left: left,
  82       top: top
  83     });
  84   },
  85
  86   footnoteoout: function() {
  87     /* as soon as the mouse cursor leaves the diversion, fade out and remove
  88        it eventually */
  89     Footnotes.footnotetimeout = setTimeout(function() {
  90         $('#footnotediv').animate({ opacity: 0 },
  91                                   600,
  92                                   function() {
  93                                     $('#footnotediv').remove();
  94                                   });
  95       },
  96       100);
  97   },
  98
  99   divover: function() {
 100     clearTimeout(Footnotes.footnotetimeout);
 101
 102     /* as soon as the mouse cursor is over the diversion (again), stop a
 103        previous animation and make it immediately visible */
 104     $('#footnotediv').stop();
 105     $('#footnotediv').css({ opacity: 0.95 });
 106   }
 107 }