diff --git a/bootstrap-toc.css b/bootstrap-toc.css index e8a054c..950707a 100644 --- a/bootstrap-toc.css +++ b/bootstrap-toc.css @@ -8,53 +8,46 @@ /* All levels of nav */ nav[data-toggle='toc'] .nav > li > a { display: block; - padding: 4px 20px; - font-size: 13px; font-weight: 500; color: #767676; + padding: 4px 10px; + + border-left: 1px solid rgba(255, 255, 255, 0); } + nav[data-toggle='toc'] .nav > li > a:hover, nav[data-toggle='toc'] .nav > li > a:focus { - padding-left: 19px; color: #563d7c; text-decoration: none; background-color: transparent; border-left: 1px solid #563d7c; } -nav[data-toggle='toc'] .nav > .active > a, -nav[data-toggle='toc'] .nav > .active:hover > a, -nav[data-toggle='toc'] .nav > .active:focus > a { - padding-left: 18px; +nav[data-toggle='toc'] .nav .active > a, +nav[data-toggle='toc'] .nav .active:hover > a, +nav[data-toggle='toc'] .nav .active:focus > a { font-weight: bold; color: #563d7c; background-color: transparent; border-left: 2px solid #563d7c; } +nav[data-toggle='toc'] { + font-size: 18px; +} + +/* Recursive levels of nav */ +nav[data-toggle='toc'] .nav { + position: relative; + padding-left: 7px; + font-size: 93%; +} + /* Nav: second level (shown on .active) */ nav[data-toggle='toc'] .nav .nav { display: none; /* Hide by default, but at >768px, show it */ - padding-bottom: 10px; -} -nav[data-toggle='toc'] .nav .nav > li > a { - padding-top: 1px; - padding-bottom: 1px; - padding-left: 30px; - font-size: 12px; - font-weight: normal; -} -nav[data-toggle='toc'] .nav .nav > li > a:hover, -nav[data-toggle='toc'] .nav .nav > li > a:focus { - padding-left: 29px; -} -nav[data-toggle='toc'] .nav .nav > .active > a, -nav[data-toggle='toc'] .nav .nav > .active:hover > a, -nav[data-toggle='toc'] .nav .nav > .active:focus > a { - padding-left: 28px; - font-weight: 500; } /* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ nav[data-toggle='toc'] .nav > .active > ul { display: block; -} +} \ No newline at end of file diff --git a/bootstrap-toc.js b/bootstrap-toc.js index 7834877..67322b0 100644 --- a/bootstrap-toc.js +++ b/bootstrap-toc.js @@ -83,42 +83,70 @@ return 1; }, + + // get the last level to evaluate until (i.e. default starting h1, last level will be 2 so we will evaluate all h1 and h2 elements) + getLastLevel: function($nav, topLevel) { + // get the max number of levels to generate (default 2) + var levels = 2; + var levelsAttr = $nav.attr('data-levels'); + if ($.isNumeric(levelsAttr)) { + levels = parseInt(levelsAttr); + } + + var lastLevel = topLevel + levels - 1; + if (lastLevel > 6) return 6; + if (lastLevel < topLevel) return topLevel; + return lastLevel; + }, - // returns the elements for the top level, and the next below it - getHeadings: function($scope, topLevel) { - var topSelector = 'h' + topLevel; - - var secondaryLevel = topLevel + 1; - var secondarySelector = 'h' + secondaryLevel; - - return this.findOrFilter($scope, topSelector + ',' + secondarySelector); + // returns the elements for given level range + getHeadings: function($scope, startLevel, endLevel) { + var filter = 'h' + startLevel; + for (var i = startLevel + 1; i <= endLevel; ++i) { + filter += ',h' + i; + } + return this.findOrFilter($scope, filter); }, getNavLevel: function(el) { return parseInt(el.tagName.charAt(1), 10); }, - populateNav: function($topContext, topLevel, $headings) { - var $context = $topContext; - var $prevNav; - + populateNav: function($context, $headings, firstLevel, lastLevel) { var helpers = this; + var contexts = []; + var curLevel = firstLevel; + var $curContext = $context; + var $prevNav; $headings.each(function(i, el) { - var $newNav = helpers.generateNavItem(el); var navLevel = helpers.getNavLevel(el); - - // determine the proper $context - if (navLevel === topLevel) { - // use top level - $context = $topContext; - } else if ($prevNav && $context === $topContext) { - // create a new level of the tree and switch to it - $context = helpers.createChildNavList($prevNav); - } // else use the current $context - - $context.append($newNav); - - $prevNav = $newNav; + + if (navLevel == curLevel + 1) { + if (curLevel == lastLevel || !$prevNav) { + return; + } + + contexts.push($curContext); + $curContext = helpers.createChildNavList($prevNav); + ++curLevel; + } + else if (navLevel < curLevel) { + if (navLevel < firstLevel) { + return; + } + + while (curLevel > navLevel) { + $curContext = contexts.pop(); + --curLevel; + } + } + + if (navLevel != curLevel) { + return; + } + + $prevNav = helpers.generateNavItem(el); + $curContext.append($prevNav); }); }, @@ -140,13 +168,15 @@ init: function(opts) { opts = this.helpers.parseOps(opts); - // ensure that the data attribute is in place for styling - opts.$nav.attr('data-toggle', 'toc'); + // ensure that the data attribute is in place for styling + opts.$nav.attr('data-toggle', 'toc'); var $topContext = this.helpers.createChildNavList(opts.$nav); var topLevel = this.helpers.getTopLevel(opts.$scope); - var $headings = this.helpers.getHeadings(opts.$scope, topLevel); - this.helpers.populateNav($topContext, topLevel, $headings); + var lastLevel = this.helpers.getLastLevel(opts.$nav, topLevel); + + var $headings = this.helpers.getHeadings(opts.$scope, topLevel, lastLevel); + this.helpers.populateNav($topContext, $headings, topLevel, lastLevel); } }; diff --git a/dist/bootstrap-toc.css b/dist/bootstrap-toc.css index 5a85941..acd31fa 100644 --- a/dist/bootstrap-toc.css +++ b/dist/bootstrap-toc.css @@ -39,18 +39,18 @@ nav[data-toggle='toc'] .nav .nav { nav[data-toggle='toc'] .nav .nav > li > a { padding-top: 1px; padding-bottom: 1px; - padding-left: 30px; + padding-left: 30px; /* Add 10 per level */ font-size: 12px; font-weight: normal; } nav[data-toggle='toc'] .nav .nav > li > a:hover, nav[data-toggle='toc'] .nav .nav > li > a:focus { - padding-left: 29px; + padding-left: 29px; /* Add 10 per level */ } nav[data-toggle='toc'] .nav .nav > .active > a, nav[data-toggle='toc'] .nav .nav > .active:hover > a, nav[data-toggle='toc'] .nav .nav > .active:focus > a { - padding-left: 28px; + padding-left: 28px; /* Add 10 per level */ font-weight: 500; } @@ -58,3 +58,115 @@ nav[data-toggle='toc'] .nav .nav > .active:focus > a { nav[data-toggle='toc'] .nav > .active > ul { display: block; } + +/* Nav: third level (shown on .active) */ +nav[data-toggle='toc'] .nav .nav .nav { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} +nav[data-toggle='toc'] .nav .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 40px; /* Add 10 per level */ + font-size: 12px; + font-weight: normal; +} +nav[data-toggle='toc'] .nav .nav .nav > li > a:hover, +nav[data-toggle='toc'] .nav .nav .nav > li > a:focus { + padding-left: 39px; /* Add 10 per level */ +} +nav[data-toggle='toc'] .nav .nav .nav > .active > a, +nav[data-toggle='toc'] .nav .nav .nav > .active:hover > a, +nav[data-toggle='toc'] .nav .nav .nav > .active:focus > a { + padding-left: 38px; /* Add 10 per level */ + font-weight: 500; +} + +/* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ +nav[data-toggle='toc'] .nav .nav > .active > ul { + display: block; +} + +/* Nav: fourth level (shown on .active) */ +nav[data-toggle='toc'] .nav .nav .nav .nav { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} +nav[data-toggle='toc'] .nav .nav .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 50px; /* Add 10 per level */ + font-size: 12px; + font-weight: normal; +} +nav[data-toggle='toc'] .nav .nav .nav .nav > li > a:hover, +nav[data-toggle='toc'] .nav .nav .nav .nav > li > a:focus { + padding-left: 49px; /* Add 10 per level */ +} +nav[data-toggle='toc'] .nav .nav .nav .nav > .active > a, +nav[data-toggle='toc'] .nav .nav .nav .nav > .active:hover > a, +nav[data-toggle='toc'] .nav .nav .nav .nav > .active:focus > a { + padding-left: 48px; /* Add 10 per level */ + font-weight: 500; +} + +/* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ +nav[data-toggle='toc'] .nav .nav .nav > .active > ul { + display: block; +} + +/* Nav: fifth level (shown on .active) */ +nav[data-toggle='toc'] .nav .nav .nav .nav .nav { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 60px; /* Add 10 per level */ + font-size: 12px; + font-weight: normal; +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > li > a:hover, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > li > a:focus { + padding-left: 59px; /* Add 10 per level */ +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > .active > a, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > .active:hover > a, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > .active:focus > a { + padding-left: 58px; /* Add 10 per level */ + font-weight: 500; +} + +/* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ +nav[data-toggle='toc'] .nav .nav .nav .nav > .active > ul { + display: block; +} + +/* Nav: sixth level (shown on .active) */ +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav { + display: none; /* Hide by default, but at >768px, show it */ + padding-bottom: 10px; +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 70px; /* Add 10 per level */ + font-size: 12px; + font-weight: normal; +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > li > a:hover, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > li > a:focus { + padding-left: 69px; /* Add 10 per level */ +} +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > .active > a, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > .active:hover > a, +nav[data-toggle='toc'] .nav .nav .nav .nav .nav .nav > .active:focus > a { + padding-left: 68px; /* Add 10 per level */ + font-weight: 500; +} + +/* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */ +nav[data-toggle='toc'] .nav .nav .nav .nav .nav > .active > ul { + display: block; +} diff --git a/dist/bootstrap-toc.js b/dist/bootstrap-toc.js index 1cdd573..832a68a 100644 --- a/dist/bootstrap-toc.js +++ b/dist/bootstrap-toc.js @@ -2,7 +2,7 @@ * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ -(function() { +(function($) { 'use strict'; window.Toc = { @@ -83,42 +83,70 @@ return 1; }, + + // get the last level to evaluate until (i.e. default starting h1, last level will be 2 so we will evaluate all h1 and h2 elements) + getLastLevel: function($nav, topLevel) { + // get the max number of levels to generate (default 2) + var levels = 2; + var levelsAttr = $nav.attr('data-levels'); + if ($.isNumeric(levelsAttr)) { + levels = parseInt(levelsAttr); + } + + var lastLevel = topLevel + levels - 1; + if (lastLevel > 6) return 6; + if (lastLevel < topLevel) return topLevel; + return lastLevel; + }, - // returns the elements for the top level, and the next below it - getHeadings: function($scope, topLevel) { - var topSelector = 'h' + topLevel; - - var secondaryLevel = topLevel + 1; - var secondarySelector = 'h' + secondaryLevel; - - return this.findOrFilter($scope, topSelector + ',' + secondarySelector); + // returns the elements for given level range + getHeadings: function($scope, startLevel, endLevel) { + var filter = 'h' + startLevel; + for (var i = startLevel + 1; i <= endLevel; ++i) { + filter += ',h' + i; + } + return this.findOrFilter($scope, filter); }, getNavLevel: function(el) { return parseInt(el.tagName.charAt(1), 10); }, - populateNav: function($topContext, topLevel, $headings) { - var $context = $topContext; - var $prevNav; - + populateNav: function($context, $headings, firstLevel, lastLevel) { var helpers = this; + var contexts = []; + var curLevel = firstLevel; + var $curContext = $context; + var $prevNav; $headings.each(function(i, el) { - var $newNav = helpers.generateNavItem(el); var navLevel = helpers.getNavLevel(el); - - // determine the proper $context - if (navLevel === topLevel) { - // use top level - $context = $topContext; - } else if ($prevNav && $context === $topContext) { - // create a new level of the tree and switch to it - $context = helpers.createChildNavList($prevNav); - } // else use the current $context - - $context.append($newNav); - - $prevNav = $newNav; + + if (navLevel == curLevel + 1) { + if (curLevel == lastLevel || !$prevNav) { + return; + } + + contexts.push($curContext); + $curContext = helpers.createChildNavList($prevNav); + ++curLevel; + } + else if (navLevel < curLevel) { + if (navLevel < firstLevel) { + return; + } + + while (curLevel > navLevel) { + $curContext = contexts.pop(); + --curLevel; + } + } + + if (navLevel != curLevel) { + return; + } + + $prevNav = helpers.generateNavItem(el); + $curContext.append($prevNav); }); }, @@ -140,13 +168,15 @@ init: function(opts) { opts = this.helpers.parseOps(opts); - // ensure that the data attribute is in place for styling - opts.$nav.attr('data-toggle', 'toc'); + // ensure that the data attribute is in place for styling + opts.$nav.attr('data-toggle', 'toc'); var $topContext = this.helpers.createChildNavList(opts.$nav); var topLevel = this.helpers.getTopLevel(opts.$scope); - var $headings = this.helpers.getHeadings(opts.$scope, topLevel); - this.helpers.populateNav($topContext, topLevel, $headings); + var lastLevel = this.helpers.getLastLevel(opts.$nav, topLevel); + + var $headings = this.helpers.getHeadings(opts.$scope, topLevel, lastLevel); + this.helpers.populateNav($topContext, $headings, topLevel, lastLevel); } }; @@ -156,4 +186,4 @@ Toc.init($nav); }); }); -})(); +})(jQuery); diff --git a/dist/bootstrap-toc.min.css b/dist/bootstrap-toc.min.css index 2d36ad1..9b49d10 100644 --- a/dist/bootstrap-toc.min.css +++ b/dist/bootstrap-toc.min.css @@ -1,4 +1,4 @@ /*! * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman - * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav>.active:focus>a,nav[data-toggle=toc] .nav>.active:hover>a,nav[data-toggle=toc] .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav>.active>a{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav>.active>ul{display:block} \ No newline at end of file + * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */nav[data-toggle=toc] .nav>li>a{display:block;padding:4px 20px;font-size:13px;font-weight:500;color:#767676}nav[data-toggle=toc] .nav>li>a:focus,nav[data-toggle=toc] .nav>li>a:hover{padding-left:19px;color:#563d7c;text-decoration:none;background-color:transparent;border-left:1px solid #563d7c}nav[data-toggle=toc] .nav>.active:focus>a,nav[data-toggle=toc] .nav>.active:hover>a,nav[data-toggle=toc] .nav>.active>a{padding-left:18px;font-weight:700;color:#563d7c;background-color:transparent;border-left:2px solid #563d7c}nav[data-toggle=toc] .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:30px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav>li>a:hover{padding-left:29px}nav[data-toggle=toc] .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav>.active>a{padding-left:28px;font-weight:500}nav[data-toggle=toc] .nav>.active>ul{display:block}nav[data-toggle=toc] .nav .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:40px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav .nav>li>a:hover{padding-left:39px}nav[data-toggle=toc] .nav .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav .nav>.active>a{padding-left:38px;font-weight:500}nav[data-toggle=toc] .nav .nav>.active>ul{display:block}nav[data-toggle=toc] .nav .nav .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:50px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav .nav .nav>li>a:hover{padding-left:49px}nav[data-toggle=toc] .nav .nav .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav .nav .nav>.active>a{padding-left:48px;font-weight:500}nav[data-toggle=toc] .nav .nav .nav>.active>ul{display:block}nav[data-toggle=toc] .nav .nav .nav .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav .nav .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:60px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav .nav .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav .nav .nav .nav>li>a:hover{padding-left:59px}nav[data-toggle=toc] .nav .nav .nav .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav .nav .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav .nav .nav .nav>.active>a{padding-left:58px;font-weight:500}nav[data-toggle=toc] .nav .nav .nav .nav>.active>ul{display:block}nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav{display:none;padding-bottom:10px}nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>li>a{padding-top:1px;padding-bottom:1px;padding-left:70px;font-size:12px;font-weight:400}nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>li>a:focus,nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>li>a:hover{padding-left:69px}nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>.active:focus>a,nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>.active:hover>a,nav[data-toggle=toc] .nav .nav .nav .nav .nav .nav>.active>a{padding-left:68px;font-weight:500}nav[data-toggle=toc] .nav .nav .nav .nav .nav>.active>ul{display:block} \ No newline at end of file diff --git a/dist/bootstrap-toc.min.js b/dist/bootstrap-toc.min.js index 35bae96..dc79cfc 100644 --- a/dist/bootstrap-toc.min.js +++ b/dist/bootstrap-toc.min.js @@ -2,4 +2,4 @@ * Bootstrap Table of Contents v0.4.1 (http://afeld.github.io/bootstrap-toc/) * Copyright 2015 Aidan Feldman * Licensed under MIT (https://github.com/afeld/bootstrap-toc/blob/gh-pages/LICENSE.md) */ -!function(){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var r=e.find(t);return e.filter(t).add(r).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(e){var t=$(e).text(),r=t.trim().toLowerCase().replace(/[^A-Za-z0-9]+/g,"-");return r||e.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),r=0;;r++){var n=t;if(r>0&&(n+="-"+r),!document.getElementById(n))return n}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t,t},createNavList:function(){return $('')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(e,t){var r=$("");r.attr("href","#"+e),r.text(t);var n=$("
  • ");return n.append(r),n},generateNavItem:function(e){var t=this.generateAnchor(e),r=$(e),n=r.data("toc-text")||r.text();return this.generateNavEl(t,n)},getTopLevel:function(e){for(var t=1;t<=6;t++){var r=this.findOrFilter(e,"h"+t);if(r.length>1)return t}return 1},getHeadings:function(e,t){var r="h"+t,n=t+1,a="h"+n;return this.findOrFilter(e,r+","+a)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(e,t,r){var n,a=e,i=this;r.each(function(r,o){var s=i.generateNavItem(o),u=i.getNavLevel(o);u===t?a=e:n&&a===e&&(a=i.createChildNavList(n)),a.append(s),n=s})},parseOps:function(e){var t;return t=e.jquery?{$nav:e}:e,t.$scope=t.$scope||$(document.body),t}},init:function(e){e=this.helpers.parseOps(e),e.$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),r=this.helpers.getTopLevel(e.$scope),n=this.helpers.getHeadings(e.$scope,r);this.helpers.populateNav(t,r,n)}},$(function(){$('nav[data-toggle="toc"]').each(function(e,t){var r=$(t);Toc.init(r)})})}(); \ No newline at end of file +!function(e){"use strict";window.Toc={helpers:{findOrFilter:function(e,t){var r=e.find(t);return e.filter(t).add(r).filter(":not([data-toc-skip])")},generateUniqueIdBase:function(t){var r=e(t).text(),a=r.trim().toLowerCase().replace(/[^A-Za-z0-9]+/g,"-");return a||t.tagName.toLowerCase()},generateUniqueId:function(e){for(var t=this.generateUniqueIdBase(e),r=0;;r++){var a=t;if(r>0&&(a+="-"+r),!document.getElementById(a))return a}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t,t},createNavList:function(){return e('')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(t,r){var a=e("");a.attr("href","#"+t),a.text(r);var n=e("
  • ");return n.append(a),n},generateNavItem:function(t){var r=this.generateAnchor(t),a=e(t),n=a.data("toc-text")||a.text();return this.generateNavEl(r,n)},getTopLevel:function(e){for(var t=1;t<=6;t++){var r=this.findOrFilter(e,"h"+t);if(r.length>1)return t}return 1},getLastLevel:function(t,r){var a=2,n=t.attr("data-levels");e.isNumeric(n)&&(a=parseInt(n));var i=r+a-1;return i>6?6:ic;)u=s.pop(),--o}c==o&&(n=i.generateNavItem(t),u.append(n))})},parseOps:function(t){var r;return r=t.jquery?{$nav:t}:t,r.$scope=r.$scope||e(document.body),r}},init:function(e){e=this.helpers.parseOps(e),e.$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),r=this.helpers.getTopLevel(e.$scope),a=this.helpers.getLastLevel(e.$nav,r),n=this.helpers.getHeadings(e.$scope,r,a);this.helpers.populateNav(t,n,r,a)}},e(function(){e('nav[data-toggle="toc"]').each(function(t,r){var a=e(r);Toc.init(a)})})}(jQuery); \ No newline at end of file diff --git a/test/toc-test.js b/test/toc-test.js index c86339f..c4e7b37 100644 --- a/test/toc-test.js +++ b/test/toc-test.js @@ -89,7 +89,47 @@ describe('Toc', function() { expect(level).to.eql(6); }); }); + + describe('.getLastLevel()', function() { + it("returns 2 by default", function() { + var $nav = $(''); + var level = Toc.helpers.getLastLevel($nav, 1); + expect(level).to.eql(2); + }); + it("Start level plus user specified levels", function() { + var $nav = $( + '' + ); + var level = Toc.helpers.getLastLevel($nav, 2); + expect(level).to.eql(4); + }); + + it("Cap out at level 6", function() { + var $nav = $( + '' + ); + var level = Toc.helpers.getLastLevel($nav, 5); + expect(level).to.eql(6); + }); + + it("Handles invalid data", function() { + var $nav = $( + '' + ); + var level = Toc.helpers.getLastLevel($nav, 1); + expect(level).to.eql(2); + }); + + it("Handles negative data", function() { + var $nav = $( + '' + ); + var level = Toc.helpers.getLastLevel($nav, 1); + expect(level).to.eql(1); + }); + }); + describe('.getNavLevel()', function() { it("returns the value from the tag", function() { var el = document.createElement('h5'); @@ -206,5 +246,105 @@ describe('Toc', function() { '' ); }); + + it("handles up to 6 nested headings", function() { + $fixture.append( + '

    H1

    ' + + '

    H2

    ' + + '

    H3

    ' + + '

    H4

    ' + + '
    H5
    ' + + '
    H6
    ' + ); + + $nav = $( + '' + ); + + Toc.init({ + $nav: $nav, + $scope: $fixture + }); + + expect($nav.html()).to.eql( + '' + ); + }); + + it("handles staggered nesting", function() { + $fixture.append( + '

    H1

    ' + + '

    H2

    ' + + '

    H3

    ' + + '

    H1-1

    ' + // expect drop from 3 to 1 + '

    H3-1

    ' + // intentionally in wrong spot, expect to skip, only handles one level change at a time + '

    H2-1

    ' + ); + + $nav = $( + '' + ); + + Toc.init({ + $nav: $nav, + $scope: $fixture + }); + + expect($nav.html()).to.eql( + '' + ); + }); + }); });