no-copyright: Update file list.
[ttfautohint.git] / doc / footnote-popup.js
blobf5de05a39712d6dd4e805577f448470a1f4b25f6
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  */
10 // This code snippet needs `jquery' (http://code.jquery.com/jquery-1.11.2.js)
12 // Add a #footnotediv rule to the CSS code to style the pop-up window.
14 $(document).ready(function() {
15   Footnotes.setup();
16 });
18 var Footnotes = {
19   footnotetimeout: false,
21   setup: function() {
22     /* collect all footnote links that have an ID starting with `fnref' */
23     var footnotelinks = $("a[id^='fnref']")
25     /* clean-up */
26     footnotelinks.unbind('mouseover', Footnotes.footnoteover);
27     footnotelinks.unbind('mouseout', Footnotes.footnoteoout);
29     /* assign our mouse handling functions to the collected footnote links */
30     footnotelinks.bind('mouseover', Footnotes.footnoteover);
31     footnotelinks.bind('mouseout', Footnotes.footnoteoout);
32   },
34   footnoteover: function() {
35     clearTimeout(Footnotes.footnotetimeout);
37     /* clean-up */
38     $('#footnotediv').stop();
39     $('#footnotediv').remove();
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();
46     /* build a diversion having the ID `footnotediv' */
47     var div = $(document.createElement('div'));
48     div.attr('id', 'footnotediv');
50     /* assign our mouse handling functions to the diversion */
51     div.bind('mouseover', Footnotes.divover);
52     div.bind('mouseout', Footnotes.footnoteoout);
54     /* get the footnote data */
55     var el = document.getElementById(id);
56     div.html($(el).html());
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();
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);
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();
76     var top = position.top + 20;
77     if (top + div.height() > $(window).height() + $(window).scrollTop())
78       top = position.top - div.height() - 15;
80     div.css({
81       left: left,
82       top: top
83     });
84   },
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   },
99   divover: function() {
100     clearTimeout(Footnotes.footnotetimeout);
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   }