Refactored table of contents component

src/assets/javascripts/components/index.ts

@@ -22,4 +22,3 @@
 
 export * from "./hero"
 export * from "./tabs"
-export * from "./toc"

src/assets/javascripts/components/toc/index.ts

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-
-export * from "./_"

src/assets/javascripts/components2/index.ts

@@ -25,3 +25,4 @@ export * from "./header"
 export * from "./main"
 export * from "./navigation"
 export * from "./search"
+export * from "./toc"

src/assets/javascripts/components2/navigation/index.ts

@@ -40,17 +40,17 @@ import {
  * ------------------------------------------------------------------------- */
 
 /**
- * Navigation for breakpoint below screen
+ * Navigation below screen breakpoint
  */
 export interface NavigationBelowScreen {
-  layer: NavigationLayer               /* Navigation layer */
+  layer: NavigationLayer               /* Active layer */
 }
 
 /**
- * Navigation for breakpoint above screen
+ * Navigation above screen breakpoint
  */
 export interface NavigationAboveScreen {
-  sidebar: Sidebar                     /* Navigation sidebar */
+  sidebar: Sidebar                     /* Sidebar */
 }
 
 /* ------------------------------------------------------------------------- */
@@ -71,7 +71,7 @@ export type Navigation =
  */
 interface MountOptions {
   main$: Observable<Main>              /* Main area observable */
-  viewport$: Observable<Viewport>      /* Viewport offset observable */
+  viewport$: Observable<Viewport>      /* Viewport observable */
   screen$: Observable<boolean>         /* Screen media observable */
 }
 
@@ -87,22 +87,22 @@ interface MountOptions {
  * @return Operator function
  */
 export function mountNavigation(
-  options: MountOptions
+  { main$, viewport$, screen$ }: MountOptions
 ): OperatorFunction<HTMLElement, Navigation> {
   return pipe(
-    switchMap(el => options.screen$
+    switchMap(el => screen$
       .pipe(
         switchMap(screen => {
 
-          /* Mount sidebar for screen and above */
+          /* Mount navigation above screen breakpoint */
           if (screen) {
-            return watchSidebar(el, options)
+            return watchSidebar(el, { main$, viewport$ })
               .pipe(
                 paintSidebar(el),
                 map(sidebar => ({ sidebar }))
               )
 
-          /* Mount navigation layer otherwise */
+          /* Mount navigation below screen breakpoint */
           } else {
             const els = getElements("nav", el)
             return watchNavigationLayer(els)

src/assets/javascripts/components2/toc/index.ts

@@ -20,8 +20,14 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, combineLatest, pipe } from "rxjs"
-import { map, shareReplay } from "rxjs/operators"
+import {
+  Observable,
+  OperatorFunction,
+  combineLatest,
+  of,
+  pipe
+} from "rxjs"
+import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import {
   AnchorList,
@@ -35,32 +41,45 @@ import {
   watchAnchorList,
   watchSidebar
 } from "observables"
-import { switchMapIf } from "utilities"
 
 /* ----------------------------------------------------------------------------
  * Types
  * ------------------------------------------------------------------------- */
 
 /**
- * Table of contents state
+ * Table of contents below tablet breakpoint
  */
-export interface TableOfContentsState {
-  sidebar: Sidebar                     /* Sidebar state */
+export interface TableOfContentsBelowTablet {} // tslint:disable-line
+
+/**
+ * Table of contents above tablet breakpoint
+ */
+export interface TableOfContentsAboveTablet {
+  sidebar: Sidebar                     /* Sidebar */
   anchors: AnchorList                  /* Anchor list */
 }
 
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Table of contents
+ */
+export type TableOfContents =
+  | TableOfContentsBelowTablet
+  | TableOfContentsAboveTablet
+
 /* ----------------------------------------------------------------------------
  * Helper types
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Mount options
  */
-interface Options {
+interface MountOptions {
   header$: Observable<Header>          /* Header observable */
   main$: Observable<Main>              /* Main area observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
-  tablet$: Observable<boolean>         /* Media tablet observable */
+  tablet$: Observable<boolean>         /* Tablet media observable */
 }
 
 /* ----------------------------------------------------------------------------
@@ -68,17 +87,23 @@ interface Options {
  * ------------------------------------------------------------------------- */
 
 /**
- * Watch table of contents
+ * Mount table of contents from source observable
  *
- * @param el - Table of contents element
- * @param agent - Agent
  * @param options - Options
  *
- * @return Table of contents state observable
+ * @return Operator function
  */
-export function watchTableOfContents(
-  el: HTMLElement, { header$, main$, viewport$ }: Options
-): Observable<TableOfContentsState> {
+export function mountTableOfContents(
+  { header$, main$, viewport$, tablet$}: MountOptions
+): OperatorFunction<HTMLElement, TableOfContents> {
+  return pipe(
+    switchMap(el => tablet$
+      .pipe(
+        switchMap(tablet => {
+
+          /* Mount table of contents above tablet breakpoint */
+          if (tablet) {
+            const els = getElements<HTMLAnchorElement>(".md-nav__link", el)
 
             /* Watch and paint sidebar */
             const sidebar$ = watchSidebar(el, { main$, viewport$ })
@@ -87,7 +112,6 @@ export function watchTableOfContents(
               )
 
             /* Watch and paint anchor list (scroll spy) */
-  const els = getElements<HTMLAnchorElement>(".md-nav__link", el)
             const anchors$ = watchAnchorList(els, { header$, viewport$ })
               .pipe(
                 paintAnchorList(els)
@@ -98,23 +122,14 @@ export function watchTableOfContents(
               .pipe(
                 map(([sidebar, anchors]) => ({ sidebar, anchors }))
               )
-}
 
-/* ------------------------------------------------------------------------- */
-
-/**
- * Mount table of contents from source observable
- *
- * @param agent - Agent
- * @param options - Options
- *
- * @return Operator function
- */
-export function mountTableOfContents(
-  options: Options
-): OperatorFunction<HTMLElement, TableOfContentsState> {
-  return pipe(
-    switchMapIf(options.tablet$, el => watchTableOfContents(el, options)),
+          /* Mount table of contents below tablet breakpoint */
+          } else {
+            return of({})
+          }
+        })
+      )
+    ),
     shareReplay(1)
   )
 }