toc.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  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. classes: { list: '',
  13. item: '',
  14. link: ''
  15. }
  16. },
  17. settings = $.extend(defaults, options);
  18. function fixedEncodeURIComponent (str) {
  19. return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
  20. return '%' + c.charCodeAt(0).toString(16);
  21. });
  22. }
  23. function createLink (header) {
  24. var innerText = (header.textContent === undefined) ? header.innerText : header.textContent;
  25. var href = document.location.href.replace(document.location.hash, '');
  26. return "<a class='"+settings.classes.link+"' href='" + href + "#" + fixedEncodeURIComponent(header.id) + "'>" + innerText + "</a>";
  27. }
  28. var headers = $(settings.headers).filter(function() {
  29. // get all headers with an ID
  30. var previousSiblingName = $(this).prev().attr( "name" );
  31. if (!this.id && previousSiblingName) {
  32. this.id = $(this).attr( "id", previousSiblingName.replace(/\./g, "-") );
  33. }
  34. return this.id;
  35. }), output = $(this);
  36. if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
  37. $(this).hide();
  38. return;
  39. }
  40. if (0 === settings.showSpeed) {
  41. settings.showEffect = 'none';
  42. }
  43. var render = {
  44. show: function() { output.hide().html(html).show(settings.showSpeed); },
  45. slideDown: function() { output.hide().html(html).slideDown(settings.showSpeed); },
  46. fadeIn: function() { output.hide().html(html).fadeIn(settings.showSpeed); },
  47. none: function() { output.html(html); }
  48. };
  49. var get_level = function(ele) { return parseInt(ele.nodeName.replace("H", ""), 10); };
  50. var highest_level = headers.map(function(_, ele) { return get_level(ele); }).get().sort()[0];
  51. var return_to_top = '<i class="icon-arrow-up back-to-top"> </i>';
  52. var level = get_level(headers[0]),
  53. this_level,
  54. html = settings.title + " <" +settings.listType + " class=\"" + settings.classes.list +"\">";
  55. headers.on('click', function() {
  56. if (!settings.noBackToTopLinks) {
  57. window.location.hash = this.id;
  58. }
  59. })
  60. .addClass('clickable-header')
  61. .each(function(_, header) {
  62. this_level = get_level(header);
  63. if (!settings.noBackToTopLinks && this_level === highest_level) {
  64. $(header).addClass('top-level-header').after(return_to_top);
  65. }
  66. if (this_level === level) // same level as before; same indenting
  67. html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
  68. else if (this_level <= level){ // higher level than before; end parent ol
  69. for(var i = this_level; i < level; i++) {
  70. html += "</li></"+settings.listType+">"
  71. }
  72. html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
  73. }
  74. else if (this_level > level) { // lower level than before; expand the previous to contain a ol
  75. for(i = this_level; i > level; i--) {
  76. html += "<" + settings.listType + " class=\"" + settings.classes.list +"\">" +
  77. "<li class=\"" + settings.classes.item + "\">"
  78. }
  79. html += createLink(header);
  80. }
  81. level = this_level; // update for the next one
  82. });
  83. html += "</"+settings.listType+">";
  84. if (!settings.noBackToTopLinks) {
  85. $(document).on('click', '.back-to-top', function() {
  86. $(window).scrollTop(0);
  87. window.location.hash = '';
  88. });
  89. }
  90. render[settings.showEffect]();
  91. };
  92. })(jQuery);