Introduce more flexible pageMenu

see Dynalon#65

Author: curtismitchell

index.tmpl

@@ -28,8 +28,6 @@
     #md-page-menu a.active {
         /* background-color: rgba(0, 0, 0, 0.01); */
         font-weight: bold;
-        padding-left: 6px;
-
     }
     @media (min-width: 992px) {
         #md-page-menu.affix {

js/basic_skeleton.js

@@ -193,10 +193,25 @@
 
         // adds a link to the navigation at the top of the page
         function addJumpLinkToTOC($heading) {
-            if($.md.config.useSideMenu === false) return;
-            if($heading.prop("tagName") !== 'H2') return;
+            if($.md.config.pageMenu && $.md.config.pageMenu.disable !== false) return;
+
+            function supportedHeading(heading) {
+                var autoAnchors = $.md.config.pageMenu.useHeadings.split(',');
+                var supported = false;
+
+                $(autoAnchors).each(function(i,e){
+                    if(heading.toLowerCase() === e.toLowerCase()) {
+                        supported = true;
+                    }
+                });
+
+                return supported;
+            }
+
+            if(!supportedHeading($heading.prop("tagName"))) return;
+
+            var c = $.md.config.pageMenu.returnAnchor;
 
-            var c = $.md.config.tocAnchor;
             if (c === '')
                 return;
 

js/bootstrap.js

@@ -240,10 +240,9 @@
     }
 
     function createPageContentMenu () {
-
         // assemble the menu
-        var $headings = $('#md-content').find('h2').clone();
-        // we dont want the text of any child nodes
+        var $headings = $('#md-content').find($.md.config.pageMenu.useHeadings);
+
         $headings.children().remove();
 
         if ($headings.length <= 1) {
@@ -300,10 +299,10 @@
         var $ul = $pannel.find("ul");
         affixDiv.append($pannel);
 
-        $headings.each(function(i,e) {
-            var $heading = $(e);
-            var $li = $('<li class="list-group-item" />');
-            var $a = $('<a />');
+        function createMenuItem(heading, className) {
+            var $heading = $(heading);
+            var $a = $('<a class="list-group-item" />');
+            $a.addClass(className);
             $a.attr('href', $.md.util.getInpageAnchorHref($heading.toptext()));
             $a.click(function(ev) {
                 ev.preventDefault();
@@ -313,8 +312,15 @@
                 $.md.scrollToInPageAnchor(anchortext);
             });
             $a.text($heading.toptext());
-            $li.append($a);
-            $ul.append($li);
+            return $a;
+        }
+
+        $($headings).each(function(i,e) {
+            var hClass = $(e).prop('tagName');
+            var currLevel = parseInt(hClass.substr(1,1), 10);
+            var $hli = createMenuItem(e, hClass.toLowerCase() + '-nav');
+
+            $ul.append($hli);
         });
 
         $(window).resize(function () {

js/init.js

@@ -18,11 +18,14 @@
     // default config
     $.md.config = {
         title:  null,
-        useSideMenu: true,
         lineBreaks: 'gfm',
         additionalFooterText: '',
         anchorCharacter: '¶',
-        tocAnchor: '[ ↑ ]'
+        pageMenu: {
+            disable: false,
+            returnAnchor: "[top]",
+            useHeadings: "h2"
+        }
     };