Comments (9)
Yea depth = 2
sure sounds good. Btw skimming through the code, it looks like this change would be just a few lines, getHeadings
should accept a depth parameter and select all matching headings, and populateNav
should be a bit smarter because top context is not the only possible parent anymore. Plus getting the depth from the config. But that's about it.
from bootstrap-toc.
Look forward to having higher heading levels, sometimes needed -:)
from bootstrap-toc.
I'd also be interested in support for higher levels. Here's one possibility (assuming $headings grabs one more level):
populateNav: function($topContext, topLevel, $headings) {
var $context = $topContext;
var $prevNav;
var $middleContext;
var $thirdLevel;
var helpers = this;
$headings.each(function(i, el) {
var $newNav = helpers.generateNavItem(el);
var navLevel = helpers.getNavLevel(el);
if (navLevel === topLevel) {
$context = $topContext;
} else {
if (navLevel === topLevel+1) {
if ($context === $topContext) {
$context = helpers.createChildNavList($prevNav);
$middleContext = $context;
}
if ($thirdLevel === true) {
$context = $middleContext;
$thirdLevel = false;
}
} else { // if it is a third-level heading
if ($context === $middleContext) {
$context = helpers.createChildNavList($prevNav);
}
$thirdLevel = true;
}
}
$context.append($newNav);
$prevNav = $newNav;
});
},
from bootstrap-toc.
Hmm. On the one hand, it would be easy to add, but on the other hand, my (limited) design experience says that having three-level navigation hierarchy is actually an information architecture antipattern. Therefore, not sure that I want to encourage it by supporting it in the plugin. I'd consider a pull request to add the functionality, but will otherwise leave this open for a bit to see if anyone else is interested.
from bootstrap-toc.
To explain the use case, we're using bootstrap-toc in generated/rendered html (a custom Jupyter notebook renderer) which quite often contains over a hundred of headings, thus having a third header level would be a godsend. I could try submitting a PR, but I'm not quite sure how it should be done, does Bootstrap support third-level navs or it's something that has to be cooked manually? This could be an optional/opt-in functionality so it won't affect anyone unless they choose to use this feature.
from bootstrap-toc.
does Bootstrap support third-level navs
Bootstrap isn't doing much with respect to this plugin, so shouldn't be an issue. /cc #16
This could be an optional/opt-in functionality
Sure...how about a numLevels
(or depth
?) option, that defaults to 2
?
from bootstrap-toc.
@aso2101 Thank you for sharing the code!
from bootstrap-toc.
I'm definitely interested in this feature. Some things like API references really need the added depth.
from bootstrap-toc.
@aso2101 Thanks. It works.
The strange thing is that scrollspy does not add .active to the third layer
from bootstrap-toc.
Related Issues (20)
- fix build tools with newer versions of Node
- Specify header elements to include i.e. only include <h2> in the TOC HOT 2
- Support unicode CJK characters in headings HOT 1
- Bootstrap toc with Wordpress
- Fix toc with one element HOT 1
- TOC not fixed - help HOT 1
- offset function HOT 2
- yarnpkg HOT 1
- If header starts with a number, scrollspy not works HOT 2
- TOC adjusts margin with sticky-top header HOT 1
- Large number of entries causing overflow requires TOC scrolling HOT 2
- I have a Bootstrap 4 Fixed Navbar - How to Offset? HOT 5
- Remove paragraph symbol (´) from title text
- Break heading in toc if too long
- drop jQuery dependency HOT 5
- How does this work without calling .scrollspy('refresh') ?
- Solution for multi levels
- The $scope parameter is not working.
- Broken unicode support on bootstrap v5 HOT 1
- Uncaught DOMException: Element.querySelector: '#3-1-some-title-level-3' is not a valid selector HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-toc.