Skip to content

Add ability for user to set depth limit by adding data-levels="#" #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kudaba wants to merge 2 commits into from
Closed

Add ability for user to set depth limit by adding data-levels="#" #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3414ac9
Add ability for user to set depth limit by adding data-levels="#" to …
Jun 6, 2017
b207384
Integrate recursive css from @MathieuDuponchelle 92b97189c1c272fdb2ef…
Jun 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 19 additions & 26 deletions bootstrap-toc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
90 changes: 60 additions & 30 deletions bootstrap-toc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
},

Expand All @@ -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);
}
};

Expand Down
118 changes: 115 additions & 3 deletions dist/bootstrap-toc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,134 @@ 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;
}

/* 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;
}

/* 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;
}
Loading