Moved header to observable

package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "clipboard": "^2.0.0",
+    "custom-event-polyfill": "^1.0.7",
     "escape-html": "^1.0.3",
     "js-cookie": "^2.2.1",
     "lunr": "^2.3.6",

src/assets/javascripts/component/anchor/index.ts

@@ -21,10 +21,11 @@
  */
 
 import { reduce, reverse } from "ramda"
-import { Observable } from "rxjs"
+import { Observable, combineLatest } from "rxjs"
 import { distinctUntilChanged, map, scan, shareReplay } from "rxjs/operators"
 
 import { ViewportOffset, getElement } from "../../ui"
+import { Header } from "../header"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -43,10 +44,11 @@ export interface Anchors {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   offset$: Observable<ViewportOffset>  /* Viewport offset observable */
+  header$: Observable<Header>          /* Header observable */
 }
 
 /* ----------------------------------------------------------------------------
@@ -92,28 +94,21 @@ export function resetAnchor(anchor: HTMLAnchorElement) {
 /**
  * Create an observable to monitor all anchors in respect to viewport offset
  *
- * @param anchors - Anchor elements
- * @param header - Header element
+ * @param els - Anchor elements
  * @param options - Options
  *
  * @return Anchors observable
  */
 export function watchAnchors(
-  anchors: HTMLAnchorElement[], header: HTMLElement, { offset$ }: Options
+  els: HTMLAnchorElement[], { offset$, header$ }: WatchOptions
 ): Observable<Anchors> {
 
-  /* Adjust for header offset if fixed */
-  const adjust = getComputedStyle(header)
-    .getPropertyValue("position") === "fixed"
-      ? 18 + header.offsetHeight
-      : 18
-
   /* Build index to map anchors to their targets */
   const index = new Map<HTMLAnchorElement, HTMLElement>()
-  for (const anchor of anchors) {
-    const target = getElement(decodeURIComponent(anchor.hash))
+  for (const el of els) {
+    const target = getElement(decodeURIComponent(el.hash))
     if (typeof target !== "undefined")
-      index.set(anchor, target)
+      index.set(el, target)
   }
 
   /* Build table to map anchor paths to vertical offsets */
@@ -130,10 +125,16 @@ export function watchAnchors(
     return path
   }, [], [...index])
 
+  /* Compute necessary adjustment for header */
+  const adjust$ = header$
+    .pipe(
+      map(header => 18 + header.height)
+    )
+
   /* Compute partition of done and next anchors */
-  const partition$ = offset$
+  const partition$ = combineLatest(offset$, adjust$)
     .pipe(
-      scan(([done, next], { y }) => {
+      scan(([done, next], [{ y }, adjust]) => {
 
         /* Look forward */
         while (next.length) {
@@ -168,8 +169,8 @@ export function watchAnchors(
   return partition$
     .pipe(
       map(([done, next]) => ({
-        done: done.map(([els]) => els),
-        next: next.map(([els]) => els)
+        done: done.map(([anchors]) => anchors),
+        next: next.map(([anchors]) => anchors)
       })),
       shareReplay({ bufferSize: 1, refCount: true })
     )

src/assets/javascripts/component/container/index.ts

@@ -21,9 +21,10 @@
  */
 
 import { Observable, combineLatest } from "rxjs"
-import { distinctUntilChanged, map, shareReplay } from "rxjs/operators"
+import { distinctUntilChanged, map, pluck, shareReplay } from "rxjs/operators"
 
 import { ViewportOffset, ViewportSize } from "../../ui"
+import { Header } from "../header"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -43,11 +44,12 @@ export interface Container {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   size$: Observable<ViewportSize>      /* Viewport size observable */
   offset$: Observable<ViewportOffset>  /* Viewport offset observable */
+  header$: Observable<Header>          /* Header observable */
 }
 
 /* ----------------------------------------------------------------------------
@@ -60,28 +62,27 @@ interface Options {
  * The container represents the main content area including the sidebars (table
  * of contents and navigation), as well as the actual page content.
  *
- * @param container - Container element
- * @param header - Header element
+ * @param el - Container element
  * @param options - Options
  *
  * @return Container observable
  */
 export function watchContainer(
-  container: HTMLElement, header: HTMLElement, { size$, offset$ }: Options
+  el: HTMLElement, { size$, offset$, header$ }: WatchOptions
 ): Observable<Container> {
 
-  /* Adjust for header offset if fixed */
-  const adjust = getComputedStyle(header)
-    .getPropertyValue("position") === "fixed"
-      ? header.offsetHeight
-      : 0
+  /* Compute necessary adjustment for header */
+  const adjust$ = header$
+    .pipe(
+      pluck("height")
+    )
 
   /* Compute the container's visible height */
-  const height$ = combineLatest(offset$, size$)
+  const height$ = combineLatest(offset$, size$, adjust$)
     .pipe(
-      map(([{ y }, { height }]) => {
-        const top    = container.offsetTop
-        const bottom = container.offsetHeight + top
+      map(([{ y }, { height }, adjust]) => {
+        const top    = el.offsetTop
+        const bottom = el.offsetHeight + top
         return height
           - Math.max(0, top    - y,  adjust)
           - Math.max(0, height + y - bottom)
@@ -90,17 +91,17 @@ export function watchContainer(
     )
 
   /* Compute whether the viewport offset is past the container's top */
-  const active$ = offset$
+  const active$ = combineLatest(offset$, adjust$)
     .pipe(
-      map(({ y }) => y >= container.offsetTop - adjust),
+      map(([{ y }, adjust]) => y >= el.offsetTop - adjust),
       distinctUntilChanged()
     )
 
   /* Combine into a single hot observable */
-  return combineLatest(height$, active$)
+  return combineLatest(height$, adjust$, active$)
     .pipe(
-      map(([height, active]) => ({
-        offset: container.offsetTop - adjust,
+      map(([height, adjust, active]) => ({
+        offset: el.offsetTop - adjust,
         height,
         active
       })),

src/assets/javascripts/component/header/index.ts

@@ -20,6 +20,21 @@
  * IN THE SOFTWARE.
  */
 
+import { Observable, of } from "rxjs"
+import { shareReplay } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Header
+ */
+export interface Header {
+  sticky: boolean                      /* Header stickyness */
+  height: number                       /* Header visible height */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -44,3 +59,28 @@ export function setHeaderShadow(
 export function resetHeader(header: HTMLElement): void {
   header.removeAttribute("data-md-state")
 }
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Create an observable to monitor the header
+ *
+ * @param header - Header element
+ *
+ * @return Header observable
+ */
+export function watchHeader(
+  header: HTMLElement
+): Observable<Header> {
+  const sticky = getComputedStyle(header)
+    .getPropertyValue("position") === "fixed"
+
+  /* Return header as hot observable */
+  return of({
+    sticky,
+    height: sticky ? header.offsetHeight : 0
+  })
+    .pipe(
+      shareReplay({ bufferSize: 1, refCount: true })
+    )
+}

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

@@ -74,7 +74,7 @@ export function watchNavigationIndex(
     }
   }
 
-  /* Return navigation index */
+  /* Return navigation index as hot observable */
   return of(index)
     .pipe(
       shareReplay({ bufferSize: 1, refCount: true })

src/assets/javascripts/component/sidebar/index.ts

@@ -44,9 +44,9 @@ export interface Sidebar {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   container$: Observable<Container>    /* Container observable */
   offset$: Observable<ViewportOffset>  /* Viewport offset observable */
 }
@@ -58,54 +58,54 @@ interface Options {
 /**
  * Set sidebar height
  *
- * @param sidebar - Sidebar HTML element
+ * @param el - Sidebar HTML element
  * @param height - Sidebar height
  */
 export function setSidebarHeight(
-  sidebar: HTMLElement, height: number
+  el: HTMLElement, height: number
 ): void {
-  sidebar.style.height = `${height}px`
+  el.style.height = `${height}px`
 }
 
 /**
  * Set sidebar lock
  *
- * @param sidebar - Sidebar HTML element
+ * @param el - Sidebar HTML element
  * @param lock - Whether the sidebar is locked
  */
 export function setSidebarLock(
-  sidebar: HTMLElement, lock: boolean
+  el: HTMLElement, lock: boolean
 ): void {
-  sidebar.setAttribute("data-md-state", lock ? "lock" : "")
+  el.setAttribute("data-md-state", lock ? "lock" : "")
 }
 
 /**
  * Reset sidebar
  *
- * @param sidebar - Sidebar HTML element
+ * @param el - Sidebar HTML element
  */
-export function resetSidebar(sidebar: HTMLElement): void {
-  sidebar.removeAttribute("data-md-state")
-  sidebar.style.height = ""
+export function resetSidebar(el: HTMLElement): void {
+  el.removeAttribute("data-md-state")
+  el.style.height = ""
 }
 
 /* ------------------------------------------------------------------------- */
 
 /**
  * Create an observable to monitor the sidebar
  *
- * @param sidebar - Sidebar element
+ * @param el - Sidebar element
  * @param options - Options
  *
  * @return Sidebar observable
  */
 export function watchSidebar(
-  sidebar: HTMLElement, { container$, offset$ }: Options
+  el: HTMLElement, { container$, offset$ }: WatchOptions
 ): Observable<Sidebar> {
 
   /* Adjust for internal container offset */
   const adjust = parseFloat(
-    getComputedStyle(sidebar.parentElement!)
+    getComputedStyle(el.parentElement!)
       .getPropertyValue("padding-top")
   )
 

src/assets/javascripts/polyfill/custom-event/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2016-2019 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.
+ */
+
+import "custom-event-polyfill"