Merge pull request #109 from fsegurai/development

feat/new TOC validation for scrollspy component
fsegurai · Dec 7, 2024 · a8bf6b1 · a8bf6b1
2 parents 16bcfd9 + 90b08bf
commit a8bf6b1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -53,19 +53,15 @@ export class AppComponent implements OnInit {
   @HostListener('window:scroll')
   onWindowScroll(): void {
     const tabHeaderValue = this.tabHeader();
-    if (tabHeaderValue == null) {
-      return;
-    }
+    if (tabHeaderValue == null) return;
+
     const tabHeader = tabHeaderValue.nativeElement;
     const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
     const windowOffset = Math.ceil(window.scrollY);
     const hasStickyClass = tabHeader.classList.contains(this.stickyClassName);
-    if (!hasStickyClass && windowOffset >= tabHeaderOffset) {
-      tabHeader.classList.add(this.stickyClassName);
-    }
-    if (hasStickyClass && windowOffset < tabHeaderOffset) {
-      tabHeader.classList.remove(this.stickyClassName);
-    }
+
+    if (!hasStickyClass && windowOffset >= tabHeaderOffset) tabHeader.classList.add(this.stickyClassName);
+    if (hasStickyClass && windowOffset < tabHeaderOffset) tabHeader.classList.remove(this.stickyClassName);
   }
 
   ngOnInit(): void {
@@ -107,9 +103,9 @@ export class AppComponent implements OnInit {
     this.theme = theme;
     const bodyClassList = this.document.querySelector('body')!.classList;
     const removeClassList = /\w*-theme\b/.exec(bodyClassList.value);
-    if (removeClassList) {
-      bodyClassList.remove(...removeClassList);
-    }
+
+    if (removeClassList) bodyClassList.remove(...removeClassList);
+
     bodyClassList.add(`${ this.theme }-theme`);
     localStorage.setItem(LOCAL_STORAGE_THEME_KEY, this.theme);
   }

diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.html
@@ -8,21 +8,23 @@
         [GitHub](https://github.com/fsegurai)
       </markdown>
     </div>
-    @if (showScrollUpButton) {
+    @if (displayTOC() && showScrollUpButton) {
       <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button--fixed"
               color="accent"
               fxHide.gt-sm mat-fab>
         <img src="icon-chevron-up.svg" alt="Scroll to top">
       </button>
     }
   </div>
-  <div class="sticky" fxFlex="1 0 180px" fxFlexAlign="flex-start" fxHide.lt-md fxLayout="column">
-    <app-scrollspy-nav [headings]="headings()"></app-scrollspy-nav>
-    @if (showScrollUpButton) {
-      <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button" color="accent"
-              mat-mini-fab>
-        <img src="icon-chevron-up.svg" alt="Scroll to top">
-      </button>
-    }
-  </div>
+  @if (displayTOC()) {
+    <div class="sticky" fxFlex="1 0 180px" fxFlexAlign="flex-start" fxHide.lt-md fxLayout="column">
+      <app-scrollspy-nav [headings]="headings()"></app-scrollspy-nav>
+      @if (showScrollUpButton) {
+        <button (click)="onScrollUp()" [@zoomAnimation] class="scrollup-button" color="accent"
+                mat-mini-fab>
+          <img src="icon-chevron-up.svg" alt="Scroll to top">
+        </button>
+      }
+    </div>
+  }
 </div>
diff --git a/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts b/demo/src/app/shared/scrollspy-nav-layout/scrollspy-nav-layout.component.ts
@@ -25,7 +25,9 @@ import { ZOOM_ANIMATION } from './scrollspy-nav-layout.animation';
 export class ScrollspyNavLayoutComponent {
   readonly headings = input<Element[]>();
 
-  showScrollUpButton = false;
+  readonly displayTOC = input<boolean>(true);
+
+  protected showScrollUpButton = false;
 
   @HostListener('window:scroll')
   onWindowScroll(): void {