fix(UI): group components, directives, injectables, pipes based on mo…

…dule fix #145 fix #258
compodoc · Mar 11, 2018 · 46cbb07 · 46cbb07
1 parent e97dbcb
commit 46cbb07
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 121 deletions.
diff --git a/src/app/application.ts b/src/app/application.ts
@@ -751,21 +751,39 @@ export class Application {
 
         return new Promise((resolve, reject) => {
             this.configuration.mainData.modules = _modules.map(ngModule => {
+                ngModule.compodocLinks = {
+                    components: [],
+                    directives: [],
+                    injectables: [],
+                    pipes: []
+                };
                 ['declarations', 'bootstrap', 'imports', 'exports'].forEach(metadataType => {
                     ngModule[metadataType] = ngModule[metadataType].filter(metaDataItem => {
                         switch (metaDataItem.type) {
                             case 'directive':
                                 return this.dependenciesEngine
                                     .getDirectives()
                                     .some(
-                                        directive => (directive as any).name === metaDataItem.name
+                                        directive => {
+                                            let selectedDirective = (directive as any).name === metaDataItem.name;
+                                            if (selectedDirective && !ngModule.compodocLinks.directives.includes(directive)) {
+                                                ngModule.compodocLinks.directives.push(directive);
+                                            }
+                                            return selectedDirective;
+                                        }
                                     );
 
                             case 'component':
                                 return this.dependenciesEngine
                                     .getComponents()
                                     .some(
-                                        component => (component as any).name === metaDataItem.name
+                                        component => {
+                                            let selectedComponent = (component as any).name === metaDataItem.name;
+                                            if (selectedComponent && !ngModule.compodocLinks.components.includes(component)) {
+                                                ngModule.compodocLinks.components.push(component);
+                                            }
+                                            return selectedComponent;
+                                        }
                                     );
 
                             case 'module':
@@ -776,7 +794,13 @@ export class Application {
                             case 'pipe':
                                 return this.dependenciesEngine
                                     .getPipes()
-                                    .some(pipe => (pipe as any).name === metaDataItem.name);
+                                    .some(pipe => {
+                                        let selectedPipe = (pipe as any).name === metaDataItem.name;
+                                        if (selectedPipe && !ngModule.compodocLinks.pipes.includes(pipe)) {
+                                            ngModule.compodocLinks.pipes.push(pipe);
+                                        }
+                                        return selectedPipe;
+                                    });
 
                             default:
                                 return true;
@@ -787,7 +811,13 @@ export class Application {
                     return (
                         this.dependenciesEngine
                             .getInjectables()
-                            .some(injectable => (injectable as any).name === provider.name) ||
+                            .some(injectable => {
+                                let selectedInjectable = (injectable as any).name === provider.name;
+                                if (selectedInjectable && !ngModule.compodocLinks.injectables.includes(injectable)) {
+                                    ngModule.compodocLinks.injectables.push(injectable);
+                                }
+                                return selectedInjectable;
+                            }) ||
                         this.dependenciesEngine
                             .getInterceptors()
                             .some(interceptor => (interceptor as any).name === provider.name)
@@ -812,6 +842,7 @@ export class Application {
                 });
                 return ngModule;
             });
+
             this.configuration.addPage({
                 name: 'modules',
                 id: 'modules',

diff --git a/src/resources/js/menu.js b/src/resources/js/menu.js
@@ -73,11 +73,8 @@ document.addEventListener('DOMContentLoaded', function() {
     if (activeMenu) {
         activeLink = document.querySelector('.' + activeMenuClass + ' .active');
         if (activeLink) {
-            activeMenu.scrollTop = activeLink.offsetTop;
-            if (activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 || activeLink.innerHTML.toLowerCase().indexOf('overview') != -1) {
-                activeMenu.scrollTop = 0;
-            }
             var linkType = activeLink.getAttribute('data-type');
+            var linkContext = activeLink.getAttribute('data-context');
             if (linkType === 'entity-link') {
                 var parentLi = activeLink.parentNode,
                     parentUl,
@@ -95,13 +92,26 @@ document.addEventListener('DOMContentLoaded', function() {
                         }
                     }
                 }
-
+                if (linkContext && linkContext === 'sub-entity') {
+                    // Toggle also the master parent menu
+                    var linkContextId = activeLink.getAttribute('data-context-id');
+                    var toggler = activeMenu.querySelector('.chapter.' + linkContextId + ' a .menu-toggler');
+                    if (toggler) {
+                        toggler.click();
+                    }
+                }
             } else if (linkType === 'chapter-link') {
                 var toggler = activeLink.querySelector('.menu-toggler');
                 if (toggler) {
                     toggler.click();
                 }
             }
+            setTimeout(function() {
+                activeMenu.scrollTop = activeLink.offsetTop;
+                if (activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 || activeLink.innerHTML.toLowerCase().indexOf('overview') != -1) {
+                    activeMenu.scrollTop = 0;
+                }
+            }, 300);
         }
     }
 });
diff --git a/src/resources/styles/compodoc.css b/src/resources/styles/compodoc.css
@@ -161,10 +161,10 @@ a[href] {
     height: 100%;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    width: calc(100% - 300px);
+    width: calc(100% - 320px);
     position: absolute;
     top: 0;
-    left: 300px;
+    left: 320px;
     padding: 15px 30px;
 }
 
@@ -260,7 +260,7 @@ a[href] {
     border-right: 1px solid #e7e7e7;
     height: 100%;
     padding: 0;
-    width: 300px;
+    width: 320px;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
@@ -320,6 +320,14 @@ a[href] {
     position: relative;
 }
 
+.menu ul.list li.chapter .inner .simple {
+    padding-left: 35px;
+}
+
+.menu ul.list li.chapter .inner ul.links {
+    padding-left: 40px;
+}
+
 .menu .panel-group {
     width: 100%;
     height: 100%;