document sections: adaptive toc

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js

@@ -1,11 +1,130 @@
 (function ($) {
 
     $(function () {
+
+        var initToc = function () {
+
+            function handleCustomScrolls() {
+                var wWidth = $(window).width();
+                if (wWidth > 766) {
+                    $("#sidebar-scroll").mCustomScrollbar({
+                        theme: "minimal"
+                    });
+
+                    $("#scroll-index").mCustomScrollbar({
+                        theme: "minimal-dark"
+                    });
+                }
+            }
+
+            $('li:not(.last-link) a.tree-toggle').click(function () {
+                $(this).parent().children('ul.tree').toggle(100);
+                $(this).closest("li").toggleClass("selected-tree");
+            });
+
+            $('li:not(.last-link) span.plus-icon i.fa-chevron-right').click(function () {
+
+                var $element = $(this).parent();
+
+                $element.parent().children('ul.tree').toggle(100);
+                $element.closest("li").toggleClass("selected-tree");
+            });
+
+            var scrollTopBtn = $(".scroll-top-btn");
+            var enoughHeight = $(".docs-sidebar-wrapper > .docs-top").height() + 60;
+
+            $(window).scroll(function () {
+                var topPos = $(window).scrollTop();
+                if (topPos > enoughHeight) {
+                    $(scrollTopBtn).addClass("showup");
+                    $("body").addClass("scrolled");
+                } else {
+                    $(scrollTopBtn).removeClass("showup");
+                    $("body").removeClass("scrolled");
+                }
+            });
+
+            $(scrollTopBtn).click(function () {
+                $('html, body').animate({
+                    scrollTop: 0
+                }, 500);
+                return false;
+            });
+
+            var scrollToHashLink = function () {
+                var hash = window.location.hash;
+
+                if (!hash || hash === "#") {
+                    return;
+                }
+
+                var $targetElement = $(hash);
+
+                $targetElement = $targetElement.length ? $targetElement : $('[name=' + this.hash.slice(1) + ']');
+
+                if (!$targetElement.length) {
+                    return;
+                }
+
+                $('html,body').stop().animate({
+                    scrollTop: $targetElement.offset().top
+                }, 200);
+
+                return;
+            };
+
+            var createToc = function () {
+                handleCustomScrolls();
+
+                $("#docs-sticky-index").empty();
+
+                var $myNav = $("#docs-sticky-index");
+                Toc.init($myNav);
+
+                $("body").scrollspy({
+                    target: $myNav
+                });
+
+                $("#docs-sticky-index a").on('click', function (event) {
+                    if (this.hash !== "") {
+                        event.preventDefault();
+                        var hash = this.hash;
+                        $('html, body').animate({
+                            scrollTop: $(hash).offset().top
+                        }, 500, function () {
+                            window.location.hash = hash;
+                        });
+                    }
+                });
+
+                $(".btn-toggle").on("click", function () {
+                    $(".toggle-row").slideToggle(400);
+                    $(this).toggleClass("less");
+                });
+
+                $(".close-mmenu").on("click", function () {
+                    $(".navbar-collapse").removeClass("show");
+                });
+
+                $(".open-dmenu").on("click", function () {
+                    $(".docs-tree-list").slideToggle();
+                });
+
+                scrollToHashLink();
+            };
+
+            $(window).resize(function () {
+                handleCustomScrolls();
+            });
+
+
+            createToc();
+        };
+
         var initNavigationFilter = function (navigationContainerId) {
 
             var $navigation = $("#" + navigationContainerId);
 
-
             var getShownDocumentLinks = function () {
                 return $navigation.find(".mCSB_container > li a:visible").not(".tree-toggle");
             };
@@ -191,15 +310,21 @@
                         }
                     }
 
+                    var headers = $(sections[i]).find(':header');
+
                     if (show) {
+                        headers.removeAttr('data-toc-skip');
                         $(sections[i]).show();
                     }
                     else {
+                        headers.attr('data-toc-skip', 'true');
                         $(sections[i]).hide();
                     }
                 }
 
                 setQueryString();
+
+                initToc();
             };
 
             $(".doc-section-combobox").change(function () {
@@ -236,6 +361,7 @@
 
         initSections();
 
+        initToc();
     });
 
 })(jQuery);

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@@ -1,117 +1,4 @@
 (function ($) {
-    $(function () {
-        $('li:not(.last-link) a.tree-toggle').click(function () {
-            $(this).parent().children('ul.tree').toggle(100);
-            $(this).closest("li").toggleClass("selected-tree");
-        });
-
-        $('li:not(.last-link) span.plus-icon i.fa-chevron-right').click(function () {
-
-            var $element = $(this).parent();
-
-            $element.parent().children('ul.tree').toggle(100);
-            $element.closest("li").toggleClass("selected-tree");
-        });
-
-        var scrollTopBtn = $(".scroll-top-btn");
-        var enoughHeight = $(".docs-sidebar-wrapper > .docs-top").height() + 60;
-
-        $(window).scroll(function () {
-            var topPos = $(window).scrollTop();
-            if (topPos > enoughHeight) {
-                $(scrollTopBtn).addClass("showup");
-                $("body").addClass("scrolled");
-            } else {
-                $(scrollTopBtn).removeClass("showup");
-                $("body").removeClass("scrolled");
-            }
-        });
-
-        $(scrollTopBtn).click(function () {
-            $('html, body').animate({
-                scrollTop: 0
-            }, 500);
-            return false;
-        });
-
-        var scrollToHashLink = function () {
-            var hash = window.location.hash;
-
-            if (!hash || hash === "#") {
-                return;
-            }
-
-            var $targetElement = $(hash);
-
-            $targetElement = $targetElement.length ? $targetElement : $('[name=' + this.hash.slice(1) + ']');
-
-            if (!$targetElement.length) {
-                return;
-            }
-
-            $('html,body').stop().animate({
-                scrollTop: $targetElement.offset().top 
-            }, 200);
-
-            return;
-        };
-
-        $(document).ready(function () {
-            handleCustomScrolls();
-
-            var $myNav = $("#docs-sticky-index");
-            Toc.init($myNav);
-
-            $("body").scrollspy({
-                target: $myNav
-            });
-
-            $("#docs-sticky-index a").on('click', function (event) {
-                if (this.hash !== "") {
-                    event.preventDefault();
-                    var hash = this.hash;
-                    $('html, body').animate({
-                        scrollTop: $(hash).offset().top
-                    }, 500, function () {
-                        window.location.hash = hash;
-                    });
-                }
-            });
-
-            $(".btn-toggle").on("click", function () {
-                $(".toggle-row").slideToggle(400);
-                $(this).toggleClass("less");
-            });
-
-            $(".close-mmenu").on("click", function () {
-                $(".navbar-collapse").removeClass("show");
-            });
-
-            $(".open-dmenu").on("click", function () {
-                $(".docs-tree-list").slideToggle();
-            });
-
-            scrollToHashLink();
-        });
-
-        $(window).resize(function () {
-            handleCustomScrolls();
-        });
-    });
-
-    function handleCustomScrolls() {
-        var wWidth = $(window).width();
-        if (wWidth > 766) {
-            $("#sidebar-scroll").mCustomScrollbar({
-                theme: "minimal"
-            });
-
-            $("#scroll-index").mCustomScrollbar({
-                theme: "minimal-dark"
-            });
-        }
-    }
-
     window.Toc.helpers.createNavList = function () {
         return $('<ul class="nav nav-pills flex-column"></ul>');
     };