https://precice.org/js/toc.js

1// https://github.com/ghiculescu/jekyll-table-of-contents
2(function($){
3  $.fn.toc = function(options) {
4    var defaults = {
5      noBackToTopLinks: false,
6      title: '',
7      minimumHeaders: 3,
8      headers: 'h1, h2, h3, h4',
9      listType: 'ol', // values: [ol|ul]
10      showEffect: 'show', // values: [show|slideDown|fadeIn|none]
11      showSpeed: 'slow' // set to 0 to deactivate effect
12    },
13    settings = $.extend(defaults, options);
14
15    var headers = $(settings.headers).filter(function() {
16      // get all headers with an ID
17      var previousSiblingName = $(this).prev().attr( "name" );
18      if (!this.id && previousSiblingName) {
19        this.id = $(this).attr( "id", previousSiblingName.replace(/\./g, "-") );
20      }
21      return this.id;
22    }), output = $(this);
23    if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
24      return;
25    }
26
27    if (0 === settings.showSpeed) {
28      settings.showEffect = 'none';
29    }
30
31    var render = {
32      show: function() { output.hide().html(html).show(settings.showSpeed); },
33      slideDown: function() { output.hide().html(html).slideDown(settings.showSpeed); },
34      fadeIn: function() { output.hide().html(html).fadeIn(settings.showSpeed); },
35      none: function() { output.html(html); }
36    };
37
38    var get_level = function(ele) { return parseInt(ele.nodeName.replace("H", ""), 10); }
39    var highest_level = headers.map(function(_, ele) { return get_level(ele); }).get().sort()[0];
40    var return_to_top = '<i class="icon-arrow-up back-to-top"> </i>';
41
42    var level = get_level(headers[0]),
43      this_level,
44      html = settings.title + " <"+settings.listType+">";
45    headers.on('click', function() {
46      if (!settings.noBackToTopLinks) {
47        window.history.pushState("object or string", "Title", "#"+this.id);
48      }
49    })
50    .addClass('clickable-header')
51    .each(function(_, header) {
52      this_level = get_level(header);
53      if (!settings.noBackToTopLinks && this_level === highest_level) {
54        $(header).addClass('top-level-header').after(return_to_top);
55      }
56      if (this_level === level) // same level as before; same indenting
57        html += "<li><a href='#" + header.id + "'>" + header.innerHTML + "</a>";
58      else if (this_level <= level){ // higher level than before; end parent ol
59        for(i = this_level; i < level; i++) {
60          html += "</li></"+settings.listType+">"
61        }
62        html += "<li><a href='#" + header.id + "'>" + header.innerHTML + "</a>";
63      }
64      else if (this_level > level) { // lower level than before; expand the previous to contain a ol
65        for(i = this_level; i > level; i--) {
66          html += "<"+settings.listType+"><li>"
67        }
68        html += "<a href='#" + header.id + "'>" + header.innerHTML + "</a>";
69      }
70      level = this_level; // update for the next one
71    });
72    html += "</"+settings.listType+">";
73    if (!settings.noBackToTopLinks) {
74      $(document).on('click', '.back-to-top', function() {
75        $(window).scrollTop(0);
76        window.location.hash = '';
77      });
78    }
79
80    render[settings.showEffect]();
81  };
82})(jQuery);