summaryrefslogtreecommitdiff
path: root/assets/js/toc.js
blob: d8fcf3334ab4f4df0dc0e75e9179b41ad4d3a348 (plain)
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
// https://github.com/ghiculescu/jekyll-table-of-contents
(function ($) {
  $.fn.toc = function (options) {
    var defaults = {
      noBackToTopLinks: false,
      title: '<i>Jump to...</i>',
      minimumHeaders: 3,
      headers: 'h1, h2, h3, h4, h5, h6',
      listType: 'ol', // values: [ol|ul]
      showEffect: 'show', // values: [show|slideDown|fadeIn|none]
      showSpeed: 'slow', // set to 0 to deactivate effect
      classes: {
        list: '',
        item: ''
      }
    },
      settings = $.extend(defaults, options);

    function fixedEncodeURIComponent(str) {
      return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
        return '%' + c.charCodeAt(0).toString(16);
      });
    }

    function createLink(header) {
      var innerText = (header.textContent === undefined) ? header.innerText : header.textContent;
      return "<a href='#" + fixedEncodeURIComponent(header.id) + "'>" + innerText + "</a>";
    }

    var headers = $(settings.headers).filter(function () {
      // get all headers with an ID
      var previousSiblingName = $(this).prev().attr("name");
      if (!this.id && previousSiblingName) {
        this.id = $(this).attr("id", previousSiblingName.replace(/\./g, "-"));
      }

      // Yehonal
      if (!this.id) {
        this.id = $(this).text().replace(/\W/g, '_');
      }

      return this.id;
    }), output = $(this);
    if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
      $(this).hide();
      return;
    }

    if (0 === settings.showSpeed) {
      settings.showEffect = 'none';
    }

    var render = {
      show: function () { output.hide().html(html).show(settings.showSpeed); },
      slideDown: function () { output.hide().html(html).slideDown(settings.showSpeed); },
      fadeIn: function () { output.hide().html(html).fadeIn(settings.showSpeed); },
      none: function () { output.html(html); }
    };

    var get_level = function (ele) { return parseInt(ele.nodeName.replace("H", ""), 10); };
    var highest_level = headers.map(function (_, ele) { return get_level(ele); }).get().sort()[0];
    var return_to_top = '<i class="icon-arrow-up back-to-top"> </i>';

    var level = get_level(headers[0]),
      this_level,
      html = settings.title + " <" + settings.listType + " class=\"" + settings.classes.list + "\">";
    headers.on('click', function () {
      if (!settings.noBackToTopLinks) {
        window.location.hash = this.id;
      }
    })
      .addClass('clickable-header')
      .each(function (_, header) {
        this_level = get_level(header);
        if (!settings.noBackToTopLinks && this_level === highest_level) {
          $(header).addClass('top-level-header').after(return_to_top);
        }
        if (this_level === level) // same level as before; same indenting
          html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
        else if (this_level <= level) { // higher level than before; end parent ol
          for (var i = this_level; i < level; i++) {
            html += "</li></" + settings.listType + ">"
          }
          html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
        }
        else if (this_level > level) { // lower level than before; expand the previous to contain a ol
          for (i = this_level; i > level; i--) {
            html += "<" + settings.listType + " class=\"" + settings.classes.list + "\">" +
              "<li class=\"" + settings.classes.item + "\">"
          }
          html += createLink(header);
        }
        level = this_level; // update for the next one
      });
    html += "</" + settings.listType + ">";
    if (!settings.noBackToTopLinks) {
      $(document).on('click', '.back-to-top', function () {
        $(window).scrollTop(0);
        window.location.hash = '';
      });
    }

    render[settings.showEffect]();
  };
})(jQuery);