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: '<i>Jump to...</i>',
   7       minimumHeaders: 3,
   8       headers: 'h1, h2, h3, h4, h5, h6',
   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.location.hash = 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);