3-level nested heading hierarchy

[aldanor]

Would it be possible to implement, as an option? It would be a super useful feature to have.

[afeld]

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.

[aldanor]

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.

[afeld]

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?

[aldanor]

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.

[aso2101]

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;
        });
      },

[flinhong]

Look forward to having higher heading levels, sometimes needed -:)

[cansadadeserfeliz]

@aso2101 Thank you for sharing the code!

[CoryGH]

I'm definitely interested in this feature. Some things like API references really need the added depth.

[terrylinooo]

@aso2101 Thanks. It works.

The strange thing is that scrollspy does not add .active to the third layer