feat(template): sidebar category support expand and collapse(#244)

docgeni · Sep 27, 2021 · 3538670 · 3538670
1 parent b3eda41
commit 3538670
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 7 deletions.
diff --git a/packages/template/src/interfaces/navigation-item.ts b/packages/template/src/interfaces/navigation-item.ts
@@ -19,6 +19,7 @@ export interface DocItem {
         };
     };
     toc?: 'menu' | 'content' | 'hidden' | false;
+    ancestors?: CategoryItem[];
 }
 
 export interface ComponentDocItem extends DocItem {
@@ -42,6 +43,7 @@ export interface CategoryItem {
         };
     };
     toc?: 'menu' | 'content' | 'hidden' | false;
+    ancestors?: CategoryItem[];
 }
 
 export interface ChannelItem {

diff --git a/packages/template/src/services/global-context.spec.ts b/packages/template/src/services/global-context.spec.ts
@@ -191,6 +191,9 @@ describe('GlobalContext', () => {
             ]
         };
         req.flush(data);
+        spectator.service.docItems.forEach(docItem => {
+            delete docItem.ancestors;
+        });
         expect(spectator.service.navs).toEqual(data.navs);
         expect(spectator.service.docItems).toEqual(data.docs);
     });

diff --git a/packages/template/src/services/global-context.ts b/packages/template/src/services/global-context.ts
@@ -108,6 +108,10 @@ export class GlobalContext {
         while (navs.length) {
             const item = navs.shift();
             if (item.items) {
+                item.items.forEach(child => {
+                    child.ancestors = child.ancestors || [];
+                    child.ancestors.push(...(item.ancestors || []), item);
+                });
                 navs.unshift(...item.items);
             } else if (!item.hidden) {
                 list.push(item);

diff --git a/packages/template/src/shared/icon/svgs.ts b/packages/template/src/shared/icon/svgs.ts
@@ -83,6 +83,14 @@ const arrowRight = `<svg width="1em" height="1em" viewBox="0 0 16 16" version="1
         <path d="M7.4,4.14955232 L4.4383,7.3151 C4.2123,7.5571 3.8323,7.5691 3.5903,7.3431 C3.3483,7.1161 3.3353,6.7371 3.5623,6.4951 L7.53151194,2.2516372 C7.55538364,2.21814642 7.58305703,2.18659454 7.6145,2.1576 C7.8585,1.9336 8.2375,1.9496 8.4615,2.1946 L12.4315,6.5176 C12.6565,6.7616 12.6395,7.1416 12.3955,7.3656 C12.1515,7.5896 11.7725,7.5736 11.5475,7.3296 L8.6,4.11846621 L8.6,13.2666667 C8.6,13.6712222 8.331,14 8,14 C7.668,14 7.4,13.6712222 7.4,13.2666667 L7.4,4.14955232 Z" id="形状结合"  transform="translate(7.995013, 7.999832) rotate(90.000000) translate(-7.995013, -7.999832) "></path>
     </g>
 </svg>`;
+const angleRight = `<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>navigation/angle-right</title>
+    <desc>Created with Sketch.</desc>
+    <g id="navigation/angle-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M7.97815,11.49765 L7.9728,11.503 L2.2998,5.831 L3.1298,5 L7.97807731,9.84827731 L12.8255,5 L13.6565,5.831 L7.9835,11.503 L7.97815,11.49765 Z" id="形状结合" fill="#888888" transform="translate(7.978150, 8.251500) scale(-1, -1) rotate(-270.000000) translate(-7.978150, -8.251500) "></path>
+    </g>
+</svg>`;
 export const BUILTIN_SVGS = {
     github,
     code,
@@ -91,5 +99,6 @@ export const BUILTIN_SVGS = {
     check,
     list,
     arrowLeft,
-    arrowRight
+    arrowRight,
+    angleRight
 };
diff --git a/packages/template/src/shared/sidebar/sidebar.component.html b/packages/template/src/shared/sidebar/sidebar.component.html
@@ -13,9 +13,12 @@
 
   <ng-template let-menu #navTemplate>
     <ng-container *ngIf="menu.items; else item">
-      <div class="menu-group" *ngIf="menu.items.length > 0">
-        <div class="group-header">
-          <div class="group-title" *ngIf="menu.title">{{ menu.title }}</div>
+      <div class="menu-group" *ngIf="menu.items.length > 0" [class.group-group--open]="menuDisplayMap.get(menu)">
+        <div class="group-header" (click)="toggle(menu)">
+          <div class="group-title" *ngIf="menu.title">
+            {{ menu.title }}
+          </div>
+          <div *ngIf="menu.items && menu.items.length" class="group-arrow"><dg-icon [iconName]="'angleRight'"></dg-icon></div>
         </div>
         <div class="group-body">
           <ng-container *ngFor="let menu of menu.items">

diff --git a/packages/template/src/shared/sidebar/sidebar.component.ts b/packages/template/src/shared/sidebar/sidebar.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, HostBinding, Input } from '@angular/core';
-import { NavigationItem } from '../../interfaces/public-api';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { CategoryItem, NavigationItem } from '../../interfaces/public-api';
 import { GlobalContext } from '../../services/global-context';
 
 @Component({
@@ -10,8 +12,56 @@ export class SidebarComponent implements OnInit {
     @HostBinding(`class.dg-sidebar`) isSidebar = true;
 
     @Input() menus: NavigationItem[];
+    menuDisplayMap = new Map<CategoryItem, boolean>();
+    readonly initDisplay = true;
+    constructor(public global: GlobalContext, private router: Router, private activatedRoute: ActivatedRoute) {}
 
-    constructor(public global: GlobalContext) {}
+    ngOnInit(): void {
+        this.router.events.pipe(filter(item => item instanceof NavigationEnd)).subscribe(() => {
+            this.updateGroupsCollapseStates();
+        });
+    }
 
-    ngOnInit(): void {}
+    toggle(menu: CategoryItem) {
+        if (!menu.items || !menu.items.length) {
+            return;
+        }
+        let status = this.menuDisplayMap.get(menu);
+        this.setMenuOpen(menu, !status);
+    }
+
+    private setMenuOpen(menu: CategoryItem, open: boolean) {
+        this.menuDisplayMap.set(menu, open);
+    }
+
+    ngOnChanges(): void {
+        if (this.initDisplay) {
+            this.setMenuDisplay(this.menus);
+        }
+        this.updateGroupsCollapseStates();
+    }
+
+    private updateGroupsCollapseStates() {
+        let ancestors: CategoryItem[] = [];
+        for (const menu of this.global.docItems) {
+            let urlTree = this.router.createUrlTree(['./' + menu.path], { relativeTo: this.activatedRoute });
+            let result = this.router.isActive(urlTree, !menu.examples);
+            if (result) {
+                ancestors = menu.ancestors;
+                break;
+            }
+        }
+        ancestors.forEach(menu => {
+            this.setMenuOpen(menu, true);
+        });
+    }
+
+    private setMenuDisplay(menus: CategoryItem[]) {
+        for (const menu of menus) {
+            this.menuDisplayMap.set(menu, true);
+            if (menu.items && menu.items.length) {
+                this.setMenuDisplay(menu.items);
+            }
+        }
+    }
 }
diff --git a/packages/template/src/styles/sidebar.scss b/packages/template/src/styles/sidebar.scss
@@ -2,19 +2,41 @@
     overflow-x: hidden;
 
     .menu-group {
+        cursor: pointer;
         .group-header {
+            display: flex;
+            align-items: center;
             .group-title {
+                flex: 1 1 0;
                 padding: $dg-sidebar-menu-item-space-y 30px;
                 color: $dg-gray-600;
+                padding-right: 0;
+            }
+            .group-arrow {
+                margin-right: 30px;
+                transition: all 0.5s;
             }
         }
         .group-body {
             margin-left: $dg-sidebar-item-indent;
+            max-height: 0;
+            opacity: 0;
+            overflow: hidden;
+            transition: all 0.5s;
         }
 
         .menu-item {
             margin-left: $dg-sidebar-item-indent;
         }
+        &.group-group--open {
+            & > .group-body {
+                max-height: 4000px;
+                opacity: 1;
+            }
+            & > .group-arrow {
+                transform: rotate(90deg);
+            }
+        }
     }
 
     .menu-item {