Lazy expandable feature for documentation

docs/en/docs-nav.json

@@ -71,6 +71,8 @@
         },
         {
           "text": "Book Store Application",
+          "isLazyExpandable": true,
+          "path": "tutorials/book-store",
           "items": [
             {
               "text": "Overview",

modules/docs/src/Volo.Docs.Domain.Shared/Volo/Docs/Documents/NavigationNode.cs

@@ -16,6 +16,9 @@ namespace Volo.Docs.Documents
         [JsonPropertyName("items")]
         public List<NavigationNode> Items { get; set; }
         
+        [JsonPropertyName("isLazyExpandable")]
+        public bool IsLazyExpandable { get; set; }
+        
         [JsonPropertyName("isIndex")]
         public bool IsIndex { get; set; }
 

modules/docs/src/Volo.Docs.Web/Areas/Documents/TagHelpers/TreeTagHelper.cs

@@ -72,11 +72,14 @@ namespace Volo.Docs.Areas.Documents.TagHelpers
 
             var isAnyNodeOpenedInThisLevel = IsAnyNodeOpenedInThisLevel(node);
 
-            node.Items?.ForEach(innerNode =>
+            if (!node.IsLazyExpandable || isAnyNodeOpenedInThisLevel)
             {
-                content += GetParentNode(innerNode, isAnyNodeOpenedInThisLevel);
-            });
-
+                node.Items?.ForEach(innerNode =>
+                {
+                    content += GetParentNode(innerNode, isAnyNodeOpenedInThisLevel);
+                });
+            }
+            
             var result = node.IsEmpty ? content : GetLeafNode(node, content);
 
             return result;
@@ -121,6 +124,11 @@ namespace Volo.Docs.Areas.Documents.TagHelpers
                 listItemCss += " selected-tree";
             }
 
+            if (node.IsLazyExpandable)
+            {
+                listItemCss += " lazy-expand";
+            }
+
             string listInnerItem;
             if (node.Path.IsNullOrEmpty() && node.IsLeaf)
             {

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@@ -53,6 +53,21 @@
 
     @if (Model.LoadSuccess)
     {
+        <script type="text/javascript">
+                var doc = doc || {};
+                doc.project = {
+                    id: '@Model.Project.Id',
+                    name: '@Model.Project.Name',
+                    languageCode: '@Model.LanguageCode',
+                    version: '@Model.Version',
+                    routeVersion: '@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)',
+                }
+                doc.uiOptions = {
+                    routePrefix: '@DocsUiOptions.Value.RoutePrefix',
+                    multiLanguageMode : `@DocsUiOptions.Value.MultiLanguageMode`,
+                    singleProjectMode : `@DocsUiOptions.Value.SingleProjectMode.Enable`,
+                }
+        </script>
         <abp-script-bundle name="@typeof(IndexModel).FullName">
             <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)"/>
             <abp-script type="@typeof(ClipboardScriptBundleContributor)"/>

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

@@ -1,5 +1,116 @@
+var doc = doc || {};
+
 (function ($) {
     $(function () {        
+        
+        var _documentAppService = volo.docs.documents.docsDocument;
+        
+        doc.lazyExpandableNavigation = {
+            isAllLoaded: false,
+            findNode : function(text, node){
+                if(node.text === text && node.isLazyExpandable){
+                    return node;
+                }
+                if(node.items){
+                    for (let i = 0; i < node.items.length; i++) {
+                        var result = doc.lazyExpandableNavigation.findNode(text, node.items[i]);
+                        if(result){
+                            return result;
+                        }
+                    }
+                }
+                return null;
+            },
+            renderNodeAsHtml : function($lazyLiElement, node){
+                if(node.isEmpty){
+                    return;
+                }
+                
+                var $ul =  $(`<ul class="nav nav-list tree"></ul>`);
+                var $li = $(`<li class="${node.hasChildItems ? 'nav-header' : 'last-link'}"></li>`);
+                
+                $li.append(`<span class="plus-icon"> <i class="fa fa-${node.hasChildItems ? 'chevron-right' : node.path ? 'has-link' : 'no-link'}"></i></span><a href="${normalPath(node.path)}">${node.text}</a>`)
+
+                if(node.isLazyExpandable){
+                    $li.addClass("lazy-expand");
+                }else if(node.hasChildItems){
+                    node.items.forEach(function(item){
+                        doc.lazyExpandableNavigation.renderNodeAsHtml($li, item);
+                    });
+                }
+
+                $ul.append($li);
+                $lazyLiElement.append($ul)
+                
+                function normalPath(path){
+                    var pathWithoutFileExtension = removeFileExtensionFromPath(path);
+
+                    if (!pathWithoutFileExtension)
+                    {
+                        return "javascript:;";
+                    }
+
+                    if (path.toLowerCase().startsWith("http://") || path.toLowerCase().startsWith("https://"))
+                    {
+                        return path;
+                    }
+                    
+                    path = abp.appPath + doc.uiOptions.routePrefix;
+
+                    if(doc.uiOptions.multiLanguageMode === `True`){
+                        path += doc.project.languageCode;
+                    }
+                    
+                    if(doc.uiOptions.singleProjectMode === `False`){
+                        path += "/" + doc.project.name
+                    }
+                    
+                    path += "/" + doc.project.routeVersion;
+                    path += "/" + pathWithoutFileExtension;
+                    return path.replace("//","/");
+                }
+                
+                function removeFileExtensionFromPath(path){
+                    if (!path)
+                    {
+                        return null;
+                    }
+
+                    var lastDotIndex = path.lastIndexOf(".");
+                    if (lastDotIndex < 0)
+                    {
+                        return path;
+                    }
+
+                    return path.substring(0, lastDotIndex);
+                }
+            },
+            loadAll : function(lazyLiElements){
+                if(doc.lazyExpandableNavigation.isAllLoaded){
+                    return;
+                }
+                for(var i = 0; i < lazyLiElements.length; i++){
+                    var $li = $(lazyLiElements[i]);
+                    if($li.has("ul").length === 0){
+                        var node = doc.lazyExpandableNavigation.findNode($li.find("a").text(), doc.project.navigation);
+                        node.items.forEach(item => {
+                            doc.lazyExpandableNavigation.renderNodeAsHtml($li, item);
+                        })
+                    }
+
+                    var childLazyLiElements = $li.find("li.lazy-expand");
+                    if(childLazyLiElements.length > 0){
+                        doc.lazyExpandableNavigation.loadAll(childLazyLiElements);
+                    }
+
+                    $("li .lazy-expand").off('click');
+                    initLazyExpandNavigation();
+                }
+                
+                doc.lazyExpandableNavigation.isAllLoaded = true;
+            }
+        }
+        
         var initNavigationFilter = function (navigationContainerId) {
             var $navigation = $('#' + navigationContainerId);
 
@@ -23,6 +134,8 @@
                     return;
                 }
 
+                doc.lazyExpandableNavigation.loadAll($navigation.find("li.lazy-expand"));
+                
                 var filteredItems = $navigation
                     .find('li > a')
                     .filter(function () {
@@ -98,6 +211,16 @@
             });
         };
 
+        var initDocProject = function(){
+            _documentAppService.getNavigation({
+                projectId: doc.project.id,
+                version: doc.project.version,
+                languageCode: doc.project.languageCode
+            }).done((data) => {
+                doc.project.navigation = data;
+            })
+        }
+
         var initSocialShareLinks = function () {
             var pageHeader = $('.docs-body').find('h1, h2').first().text();
 
@@ -272,6 +395,25 @@
             }
         };
         
+        var initLazyExpandNavigation = function(){
+            $("li .lazy-expand").on('click', function(){
+                var $this = $(this);
+                if($this.has("ul").length > 0){
+                    return;
+                }
+                
+                var node = doc.lazyExpandableNavigation.findNode($this.find("a").text(), doc.project.navigation);
+                node.items.forEach(item => {
+                    doc.lazyExpandableNavigation.renderNodeAsHtml($this, item);
+                })
+
+                $("li .lazy-expand").off('click');
+                initLazyExpandNavigation();
+            });
+        }
+
+        initDocProject();
+        
         initNavigationFilter('sidebar-scroll');
 
         initAnchorTags('.docs-page .docs-body');
@@ -279,6 +421,8 @@
         initSocialShareLinks();
 
         initSections();
+
+        initLazyExpandNavigation();
         
         Element.prototype.querySelector = function (selector) {
             var result = $(this).find(decodeURI(selector));