diff --git a/src/assets/javascripts/components/index.ts b/src/assets/javascripts/components/index.ts index 827649cde..d7c4443d0 100644 --- a/src/assets/javascripts/components/index.ts +++ b/src/assets/javascripts/components/index.ts @@ -22,4 +22,3 @@ export * from "./hero" export * from "./tabs" -export * from "./toc" diff --git a/src/assets/javascripts/components/toc/index.ts b/src/assets/javascripts/components/toc/index.ts deleted file mode 100644 index 8bf56dec7..000000000 --- a/src/assets/javascripts/components/toc/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) 2016-2020 Martin Donath - * - * 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 "./_" diff --git a/src/assets/javascripts/components2/index.ts b/src/assets/javascripts/components2/index.ts index 1119cd6ac..a7736db47 100644 --- a/src/assets/javascripts/components2/index.ts +++ b/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" diff --git a/src/assets/javascripts/components2/navigation/index.ts b/src/assets/javascripts/components2/navigation/index.ts index 5d612e6a1..28195f9e3 100644 --- a/src/assets/javascripts/components2/navigation/index.ts +++ b/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 area observable */ - viewport$: Observable /* Viewport offset observable */ + viewport$: Observable /* Viewport observable */ screen$: Observable /* Screen media observable */ } @@ -87,22 +87,22 @@ interface MountOptions { * @return Operator function */ export function mountNavigation( - options: MountOptions + { main$, viewport$, screen$ }: MountOptions ): OperatorFunction { 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) diff --git a/src/assets/javascripts/components/toc/_/index.ts b/src/assets/javascripts/components2/toc/index.ts similarity index 58% rename from src/assets/javascripts/components/toc/_/index.ts rename to src/assets/javascripts/components2/toc/index.ts index 476cc4a6b..752090d8f 100644 --- a/src/assets/javascripts/components/toc/_/index.ts +++ b/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,86 +41,95 @@ 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 observable */ main$: Observable
/* Main area observable */ viewport$: Observable /* Viewport observable */ - tablet$: Observable /* Media tablet observable */ + tablet$: Observable /* Tablet media observable */ } /* ---------------------------------------------------------------------------- * Functions * ------------------------------------------------------------------------- */ -/** - * Watch table of contents - * - * @param el - Table of contents element - * @param agent - Agent - * @param options - Options - * - * @return Table of contents state observable - */ -export function watchTableOfContents( - el: HTMLElement, { header$, main$, viewport$ }: Options -): Observable { - - /* Watch and paint sidebar */ - const sidebar$ = watchSidebar(el, { main$, viewport$ }) - .pipe( - paintSidebar(el) - ) - - /* Watch and paint anchor list (scroll spy) */ - const els = getElements(".md-nav__link", el) - const anchors$ = watchAnchorList(els, { header$, viewport$ }) - .pipe( - paintAnchorList(els) - ) - - /* Combine into a single hot observable */ - return combineLatest([sidebar$, anchors$]) - .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 { + { header$, main$, viewport$, tablet$}: MountOptions +): OperatorFunction { return pipe( - switchMapIf(options.tablet$, el => watchTableOfContents(el, options)), + switchMap(el => tablet$ + .pipe( + switchMap(tablet => { + + /* Mount table of contents above tablet breakpoint */ + if (tablet) { + const els = getElements(".md-nav__link", el) + + /* Watch and paint sidebar */ + const sidebar$ = watchSidebar(el, { main$, viewport$ }) + .pipe( + paintSidebar(el) + ) + + /* Watch and paint anchor list (scroll spy) */ + const anchors$ = watchAnchorList(els, { header$, viewport$ }) + .pipe( + paintAnchorList(els) + ) + + /* Combine into a single hot observable */ + return combineLatest([sidebar$, anchors$]) + .pipe( + map(([sidebar, anchors]) => ({ sidebar, anchors })) + ) + + /* Mount table of contents below tablet breakpoint */ + } else { + return of({}) + } + }) + ) + ), shareReplay(1) ) }