Better naming for helper types

src/assets/javascripts/observables/agent/document/_/index.ts

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+
+import { Observable, fromEvent } from "rxjs"
+import { mapTo, shareReplay } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Observable for document load events
+ */
+const load$ = fromEvent(document, "DOMContentLoaded")
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch document
+ *
+ * @return Document observable
+ */
+export function watchDocument(): Observable<Document> {
+  return load$
+    .pipe(
+      mapTo(document),
+      shareReplay(1)
+    )
+}

src/assets/javascripts/observables/agent/document/index.ts

@@ -20,88 +20,5 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, fromEvent } from "rxjs"
-import { ajax } from "rxjs/ajax"
-import {
-  distinctUntilChanged,
-  map,
-  mapTo,
-  pluck,
-  shareReplay,
-  skip,
-  startWith,
-  switchMap
-} from "rxjs/operators"
-
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Switch options
- */
-interface SwitchOptions {
-  location$: Observable<string>        /* Location observable */
-}
-
-/* ----------------------------------------------------------------------------
- * Data
- * ------------------------------------------------------------------------- */
-
-/**
- * Observable for document load events
- */
-const load$ = fromEvent(document, "DOMContentLoaded")
-
-/* ----------------------------------------------------------------------------
- * Functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Watch document
- *
- * @return Document observable
- */
-export function watchDocument(): Observable<Document> {
-  return load$
-    .pipe(
-      mapTo(document),
-      shareReplay(1)
-    )
-}
-
-/**
- * Watch document switch
- *
- * This function returns an observables that fetches a document if the provided
- * location observable emits a new value (i.e. URL). If the emitted URL points
- * to the same page, the request is effectively ignored (e.g. when only the
- * fragment identifier changes).
- *
- * @param options - Options
- *
- * @return Document switch observable
- */
-export function watchDocumentSwitch(
-  { location$ }: SwitchOptions
-): Observable<Document> {
-  return location$
-    .pipe(
-      startWith(location.href),
-      map(url => url.replace(/#[^#]+$/, "")),
-      distinctUntilChanged(),
-      skip(1),
-
-      /* Fetch document */
-      switchMap(url => ajax({
-        url,
-        responseType: "document",
-        withCredentials: true
-      })
-        .pipe<Document>(
-          pluck("response")
-        )
-      ),
-      shareReplay(1)
-    )
-}
+export * from "./_"
+export * from "./switch"

src/assets/javascripts/observables/agent/document/switch/index.ts

@@ -0,0 +1,84 @@
+/*
+ * 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.
+ */
+
+import { Observable } from "rxjs"
+import { ajax } from "rxjs/ajax"
+import {
+  distinctUntilChanged,
+  map,
+  pluck,
+  shareReplay,
+  skip,
+  startWith,
+  switchMap
+} from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch options
+ */
+interface WatchOptions {
+  location$: Observable<string>        /* Location observable */
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch document switch
+ *
+ * This function returns an observables that fetches a document if the provided
+ * location observable emits a new value (i.e. URL). If the emitted URL points
+ * to the same page, the request is effectively ignored (e.g. when only the
+ * fragment identifier changes).
+ *
+ * @param options - Options
+ *
+ * @return Document switch observable
+ */
+export function watchDocumentSwitch(
+  { location$ }: WatchOptions
+): Observable<Document> {
+  return location$
+    .pipe(
+      startWith(location.href),
+      map(url => url.replace(/#[^#]+$/, "")),
+      distinctUntilChanged(),
+      skip(1),
+
+      /* Fetch document */
+      switchMap(url => ajax({
+        url,
+        responseType: "document",
+        withCredentials: true
+      })
+        .pipe<Document>(
+          pluck("response")
+        )
+      ),
+      shareReplay(1)
+    )
+}

src/assets/javascripts/observables/agent/element/offset/index.ts

@@ -47,9 +47,9 @@ export interface ElementOffset {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
 
@@ -82,7 +82,7 @@ export function getElementOffset(el: HTMLElement): ElementOffset {
  * @return Element offset observable
  */
 export function watchElementOffset(
-  el: HTMLElement, { viewport$ }: Options
+  el: HTMLElement, { viewport$ }: WatchOptions
 ): Observable<ElementOffset> {
   const scroll$ = fromEvent(el, "scroll")
   const size$ = viewport$

src/assets/javascripts/observables/agent/viewport/relative/index.ts

@@ -31,9 +31,9 @@ import { Viewport } from "../_"
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   header$: Observable<Header>          /* Header observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
@@ -51,7 +51,7 @@ interface Options {
  * @return Viewport observable
  */
 export function watchViewportFrom(
-  el: HTMLElement, { header$, viewport$ }: Options
+  el: HTMLElement, { header$, viewport$ }: WatchOptions
 ): Observable<Viewport> {
   return combineLatest([viewport$, header$])
     .pipe(

src/assets/javascripts/observables/agent/worker/index.ts

@@ -21,7 +21,13 @@
  */
 
 import { Observable, Subject, fromEvent } from "rxjs"
-import { pluck, share, switchMapTo, tap, throttle } from "rxjs/operators"
+import {
+  pluck,
+  share,
+  switchMapTo,
+  tap,
+  throttle
+} from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -52,11 +58,11 @@ export interface WorkerHandler<
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  *
  * @template T - Worker message type
  */
-interface Options<T extends WorkerMessage> {
+interface WatchOptions<T extends WorkerMessage> {
   tx$: Observable<T>                   /* Message transmission observable */
 }
 
@@ -78,7 +84,7 @@ interface Options<T extends WorkerMessage> {
  * @return Worker message observable
  */
 export function watchWorker<T extends WorkerMessage>(
-  worker: Worker, { tx$ }: Options<T>
+  worker: Worker, { tx$ }: WatchOptions<T>
 ): Observable<T> {
 
   /* Intercept messages from web worker */

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

@@ -67,9 +67,9 @@ export interface AnchorList {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   header$: Observable<Header>          /* Header observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
@@ -99,7 +99,7 @@ interface Options {
  * @return Anchor list observable
  */
 export function watchAnchorList(
-  els: HTMLAnchorElement[], { header$, viewport$ }: Options
+  els: HTMLAnchorElement[], { header$, viewport$ }: WatchOptions
 ): Observable<AnchorList> {
   const table = new Map<HTMLAnchorElement, HTMLElement>()
   for (const el of els) {

src/assets/javascripts/observables/main/_/index.ts

@@ -49,9 +49,9 @@ export interface Main {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   header$: Observable<Header>          /* Header observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
@@ -73,7 +73,7 @@ interface Options {
  * @return Main area observable
  */
 export function watchMain(
-  el: HTMLElement, { header$, viewport$ }: Options
+  el: HTMLElement, { header$, viewport$ }: WatchOptions
 ): Observable<Main> {
 
   /* Compute necessary adjustment for header */

src/assets/javascripts/observables/main/sidebar/index.ts

@@ -64,9 +64,9 @@ export interface Sidebar {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   main$: Observable<Main>              /* Main area observable */
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
@@ -89,7 +89,7 @@ interface Options {
  * @return Sidebar observable
  */
 export function watchSidebar(
-  el: HTMLElement, { main$, viewport$ }: Options
+  el: HTMLElement, { main$, viewport$ }: WatchOptions
 ): Observable<Sidebar> {
 
   /* Adjust for internal main area offset */

src/assets/javascripts/observables/search/query/index.ts

@@ -47,9 +47,9 @@ export interface SearchQuery {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Watch options
  */
-interface Options {
+interface WatchOptions {
   transform?(value: string): string    /* Transformation function */
 }
 
@@ -87,7 +87,7 @@ function defaultTransform(value: string): string {
  * @return Search query observable
  */
 export function watchSearchQuery(
-  el: HTMLInputElement, { transform = defaultTransform }: Options = {}
+  el: HTMLInputElement, { transform = defaultTransform }: WatchOptions = {}
 ): Observable<SearchQuery> {
 
   /* Intercept keyboard events */

src/assets/javascripts/observables/search/result/index.ts

@@ -53,9 +53,9 @@ import { SearchQuery } from "../query"
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Paint options
  */
-interface Options {
+interface PaintOptions {
   query$: Observable<SearchQuery>     /* Search query observable */
   fetch$: Observable<boolean>         /* Search trigger observable */
 }
@@ -73,7 +73,7 @@ interface Options {
  * @return Operator function
  */
 export function paintSearchResult(
-  el: HTMLElement, { query$, fetch$ }: Options
+  el: HTMLElement, { query$, fetch$ }: PaintOptions
 ): MonoTypeOperatorFunction<SearchResult[]> {
   const list = getElement(".md-search-result__list", el)!
   const meta = getElement(".md-search-result__meta", el)!

src/assets/javascripts/observables/toggle/index.ts

@@ -20,29 +20,111 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, fromEvent } from "rxjs"
-import { map, startWith } from "rxjs/operators"
+import { NEVER, Observable, fromEvent, of } from "rxjs"
+import {
+  map,
+  shareReplay,
+  startWith,
+  switchMap,
+  take
+} from "rxjs/operators"
+
+import { getElement } from "../agent"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Toggle
+ */
+export type Toggle =
+  | "drawer"                           /* Toggle for drawer */
+  | "search"                           /* Toggle for search */
+
+/**
+ * Toggle map
+ */
+export type ToggleMap = {
+  [P in Toggle]?: HTMLInputElement
+}
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch options
+ */
+interface WatchOptions {
+  document$: Observable<Document>      /* Document observable */
+}
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Toggle map observable
+ */
+let toggles$: Observable<ToggleMap>
 
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
 
 /**
- * Set toggle
+ * Watch toggles with given names
  *
- * Simulating a click event seems to be the most cross-browser compatible way
- * of changing the value while also emitting a `change` event. Before, Material
- * used `CustomEvent` to programmatically change the value of a toggle, but this
- * is a much simpler and cleaner solution.
+ * @param names - Toggle names
+ * @param options - Options
  *
- * @param el - Toggle element
- * @param value - Toggle value
+ * @return Toggle map observable
  */
-export function setToggle(
-  el: HTMLInputElement, value: boolean
-): void {
-  if (el.checked !== value)
-    el.click()
+export function watchToggleMap(
+  names: Toggle[], { document$ }: WatchOptions
+): Observable<ToggleMap> {
+  toggles$ = document$
+    .pipe(
+      take(1),
+
+      /* Build toggle map */
+      map(document => names.reduce<ToggleMap>((toggles, name) => {
+        const el = getElement(`[data-md-toggle=${name}]`, document)
+        return {
+          ...toggles,
+          ...typeof el !== "undefined" ? { [name]: el } : {}
+        }
+      }, {}))
+    )
+
+  /* Return toggle map as hot observable */
+  return toggles$
+    .pipe(
+      shareReplay(1)
+    )
+}
+
+/**
+ * Retrieve a toggle
+ *
+ * @template T - Element type
+ *
+ * @param name - Toggle name
+ *
+ * @return Element observable
+ */
+export function useToggle(
+  name: Toggle
+): Observable<HTMLInputElement> {
+  return toggles$
+    .pipe(
+      switchMap(toggles => {
+        return typeof toggles[name] !== "undefined"
+          ? of(toggles[name]!)
+          : NEVER
+      })
+    )
 }
 
 /* ------------------------------------------------------------------------- */