File: footnote-popup.js

package info (click to toggle)
ttfautohint 1.6-1
  • links: PTS, VCS
  • area: main
  • in suites: stretch
  • size: 8,504 kB
  • ctags: 4,347
  • sloc: ansic: 38,386; sh: 5,749; cpp: 4,131; perl: 340; makefile: 309; sed: 39
file content (107 lines) | stat: -rw-r--r-- 3,305 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/*!
 * footnote-popup.js
 *
 * JavaScript code to make pandoc footnotes pop up
 *
 * written 2014 by Werner Lemberg
 * based on code from http://ignorethecode.net/blog/2010/04/20/footnotes
 */

// This code snippet needs `jquery' (http://code.jquery.com/jquery-1.11.2.js)

// Add a #footnotediv rule to the CSS code to style the pop-up window.

$(document).ready(function() {
  Footnotes.setup();
});

var Footnotes = {
  footnotetimeout: false,

  setup: function() {
    /* collect all footnote links that have an ID starting with `fnref' */
    var footnotelinks = $("a[id^='fnref']")

    /* clean-up */
    footnotelinks.unbind('mouseover', Footnotes.footnoteover);
    footnotelinks.unbind('mouseout', Footnotes.footnoteoout);

    /* assign our mouse handling functions to the collected footnote links */
    footnotelinks.bind('mouseover', Footnotes.footnoteover);
    footnotelinks.bind('mouseout', Footnotes.footnoteoout);
  },

  footnoteover: function() {
    clearTimeout(Footnotes.footnotetimeout);

    /* clean-up */
    $('#footnotediv').stop();
    $('#footnotediv').remove();

    /* extract position of the current footnote link and get the ID the
       `href' attribute is pointing to */
    var id = $(this).attr('href').substr(1);
    var position = $(this).offset();

    /* build a diversion having the ID `footnotediv' */
    var div = $(document.createElement('div'));
    div.attr('id', 'footnotediv');

    /* assign our mouse handling functions to the diversion */
    div.bind('mouseover', Footnotes.divover);
    div.bind('mouseout', Footnotes.footnoteoout);

    /* get the footnote data */
    var el = document.getElementById(id);
    div.html($(el).html());

    /* pandoc inserts a `return symbol' (embedded in a hyperlink) at the
       very end of the footnote; it doesn't make sense to display it in a
       pop-up window, so we remove it */
    div.find('a').last().remove();

    /* finally, create some CSS data for the diversion */
    div.css({
      position: 'absolute',
      width: '20em',
      opacity: 0.95
    });
    $(document.body).append(div);

    /* ensure that our pop-up window gets displayed on screen */
    var left = position.left;
    if (left + div.width() + 20 > $(window).width() + $(window).scrollLeft())
      left = $(window).width() - div.width() - 20 + $(window).scrollLeft();

    var top = position.top + 20;
    if (top + div.height() > $(window).height() + $(window).scrollTop())
      top = position.top - div.height() - 15;

    div.css({
      left: left,
      top: top
    });
  },

  footnoteoout: function() {
    /* as soon as the mouse cursor leaves the diversion, fade out and remove
       it eventually */
    Footnotes.footnotetimeout = setTimeout(function() {
        $('#footnotediv').animate({ opacity: 0 },
                                  600,
                                  function() {
                                    $('#footnotediv').remove();
                                  });
      },
      100);
  },

  divover: function() {
    clearTimeout(Footnotes.footnotetimeout);

    /* as soon as the mouse cursor is over the diversion (again), stop a
       previous animation and make it immediately visible */
    $('#footnotediv').stop();
    $('#footnotediv').css({ opacity: 0.95 });
  }
}