toc.js 3.0 KB

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