Moved keyboard handlers to separate module

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7cbaf05d.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.3428f4d3.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7cbaf05d.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.3428f4d3.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0a5433f7.min.js",

material/base.html

@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.7cbaf05d.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.3428f4d3.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

src/assets/javascripts/actions/header/title/index.ts

@@ -30,7 +30,7 @@
  * @param el - Header title element
  * @param value - Whether the title is shown
  */
-export function setHeaderTitleActive(
+export function setHeaderTitle(
   el: HTMLElement, value: boolean
 ): void {
   el.setAttribute("data-md-state", value ? "active" : "")
@@ -41,7 +41,7 @@ export function setHeaderTitleActive(
  *
  * @param el - Header element
  */
-export function resetHeaderTitleActive(
+export function resetHeaderTitle(
   el: HTMLElement
 ): void {
   el.removeAttribute("data-md-state")

src/assets/javascripts/actions/index.ts

@@ -24,4 +24,3 @@ export * from "./anchor"
 export * from "./header"
 export * from "./main"
 export * from "./search"
-export * from "./toggle"

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

@@ -1,43 +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.
- */
-
-/* ----------------------------------------------------------------------------
- * Functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Set toggle
- *
- * 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 el - Toggle element
- * @param value - Toggle value
- */
-export function setToggle(
-  el: HTMLInputElement, value: boolean
-): void {
-  if (el.checked !== value)
-    el.click()
-}

src/assets/javascripts/components/search/_/index.ts

@@ -20,11 +20,11 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, combineLatest, pipe } from "rxjs"
+import { OperatorFunction, combineLatest, pipe } from "rxjs"
 import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import { SearchResult } from "integrations/search"
-import { Key, SearchQuery, WorkerHandler } from "observables"
+import { SearchQuery, WorkerHandler } from "observables"
 import { SearchMessage } from "workers"
 
 import { useComponent } from "../../_"
@@ -44,17 +44,6 @@ export interface Search {
   result: SearchResult[]               /* Search result list */
 }
 
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Mount options
- */
-interface MountOptions {
-  keyboard$: Observable<Key>           /* Keyboard observable */
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -68,7 +57,7 @@ interface MountOptions {
  * @return Search observable
  */
 export function mountSearch(
-  handler: WorkerHandler<SearchMessage>, { keyboard$ }: MountOptions
+  handler: WorkerHandler<SearchMessage>
 ): OperatorFunction<HTMLElement, Search> {
   return pipe(
     switchMap(() => {
@@ -89,7 +78,7 @@ export function mountSearch(
       /* Mount search result */
       const result$ = useComponent("search-result")
         .pipe(
-          mountSearchResult(handler, { query$, keyboard$ })
+          mountSearchResult(handler, { query$ })
         )
 
       /* Combine into a single hot observable */

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

@@ -28,10 +28,10 @@ import {
   withLatestFrom
 } from "rxjs/operators"
 
-import { setToggle } from "actions"
 import {
   SearchQuery,
   WorkerHandler,
+  setToggle,
   useToggle,
   watchSearchQuery
 } from "observables"

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

@@ -28,32 +28,21 @@ import {
   map,
   pluck,
   shareReplay,
-  switchMap,
+  switchMap
-  withLatestFrom
 } from "rxjs/operators"
 
-import { setToggle } from "actions"
 import { SearchResult } from "integrations/search"
 import {
-  Key,
   SearchQuery,
   WorkerHandler,
-  getActiveElement,
-  getElements,
   paintSearchResult,
-  setElementFocus,
+  watchElementOffset
-  useToggle,
-  watchElementOffset,
-  watchToggle
 } from "observables"
-import { takeIf } from "utilities"
 import {
   SearchMessage,
   isSearchResultMessage
 } from "workers"
 
-import { useComponent } from "../../_"
-
 /* ----------------------------------------------------------------------------
  * Helper types
  * ------------------------------------------------------------------------- */
@@ -63,7 +52,6 @@ import { useComponent } from "../../_"
  */
 interface MountOptions {
   query$: Observable<SearchQuery>      /* Search query observable */
-  keyboard$: Observable<Key>           /* Keyboard observable */
 }
 
 /* ----------------------------------------------------------------------------
@@ -79,9 +67,8 @@ interface MountOptions {
  * @return Operator function
  */
 export function mountSearchResult(
-  { rx$ }: WorkerHandler<SearchMessage>, { query$, keyboard$ }: MountOptions
+  { rx$ }: WorkerHandler<SearchMessage>, { query$ }: MountOptions
 ): OperatorFunction<HTMLElement, SearchResult[]> {
-  const toggle$ = useToggle("search")
   return pipe(
     switchMap(el => {
       const container = el.parentElement!
@@ -96,55 +83,6 @@ export function mountSearchResult(
           filter(identity)
         )
 
-      /* Setup keyboard navigation in search mode */
-      keyboard$
-        .pipe(
-          takeIf(toggle$.pipe(switchMap(watchToggle))),
-          withLatestFrom(toggle$, useComponent("search-query"))
-        )
-          .subscribe(([key, toggle, query]) => {
-            const active = getActiveElement()
-            switch (key.type) {
-
-              /* Enter: prevent form submission */
-              case "Enter":
-                if (active === query)
-                  key.claim()
-                break
-
-              /* Escape or Tab: close search */
-              case "Escape":
-              case "Tab":
-                setToggle(toggle, false)
-                setElementFocus(query, false)
-                break
-
-              /* Vertical arrows: select previous or next search result */
-              case "ArrowUp":
-              case "ArrowDown":
-                if (typeof active === "undefined") {
-                  setElementFocus(query)
-                } else {
-                  const els = [query, ...getElements("[href]", el)]
-                  const i = Math.max(0, (
-                    Math.max(0, els.indexOf(active)) + els.length + (
-                      key.type === "ArrowUp" ? -1 : +1
-                    )
-                  ) % els.length)
-                  setElementFocus(els[i])
-                }
-
-                /* Prevent scrolling of page */
-                key.claim()
-                break
-
-              /* All other keys: hand to search query */
-              default:
-                if (query !== getActiveElement())
-                  setElementFocus(query)
-            }
-          })
-
       /* Paint search results */
       return rx$
         .pipe(

src/assets/javascripts/index.ts

@@ -45,6 +45,7 @@ import {
 
 import {
   watchToggle,
+  setToggle,
   getElements,
   watchMedia,
   watchDocument,
@@ -59,7 +60,7 @@ import {
 } from "./observables"
 import { setupSearchWorker } from "./workers"
 
-import { setToggle, setScrollLock, resetScrollLock } from "actions"
+import { setScrollLock, resetScrollLock } from "actions"
 import {
   mountHeader,
   mountHero,
@@ -73,6 +74,7 @@ import {
   mountHeaderTitle
 } from "components"
 import { setupClipboard } from "./integrations/clipboard"
+import { setupKeyboard } from "./integrations/keyboard"
 import {
   patchTables,
   patchDetails,
@@ -156,7 +158,7 @@ export function initialize(config: unknown) {
 
   const search$ = useComponent("search")
     .pipe(
-      mountSearch(worker, { keyboard$ }),
+      mountSearch(worker)
     )
 
   const navigation$ = useComponent("navigation")
@@ -187,6 +189,8 @@ export function initialize(config: unknown) {
 
   /* ----------------------------------------------------------------------- */
 
+  setupKeyboard()
+
   // must be in another scope!
   const dialog = renderDialog("Copied to Clipboard")
 
@@ -275,22 +279,8 @@ export function initialize(config: unknown) {
 
   /* ----------------------------------------------------------------------- */
 
-  // General keyboard handlers
-  keyboard$
-    .pipe(
-      takeIf(not(toggle$.pipe(switchMap(watchToggle)))),
-      filter(key => ["s", "f"].includes(key.type)),
-      withLatestFrom(toggle$)
-    )
-      .subscribe(([key, toggle]) => {
-        const el = getActiveElement()
-        if (!(el && mayReceiveKeyboardEvents(el))) {
-          setToggle(toggle, true)
-          key.claim()
-        }
-      })
-
   // if we use a single tab outside of search, unhide all permalinks.
+  // TODO: experimental. necessary!?
   keyboard$
     .pipe(
       takeIf(not(toggle$.pipe(switchMap(watchToggle)))),

src/assets/javascripts/integrations/keyboard/index.ts

@@ -0,0 +1,129 @@
+/*
+ * 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 { switchMap, withLatestFrom } from "rxjs/operators"
+
+import { useComponent } from "components"
+import {
+  Key,
+  getActiveElement,
+  getElements,
+  isSusceptibleToKeyboard,
+  setElementFocus,
+  setToggle,
+  useToggle,
+  watchKeyboard,
+  watchToggle
+} from "observables"
+import { not, takeIf } from "utilities"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Setup keyboard
+ *
+ * @return Keyboard observable
+ */
+export function setupKeyboard(): Observable<Key> {
+  const keyboard$ = watchKeyboard()
+
+  /* Setup keyboard handlers in search mode */
+  const toggle$ = useToggle("search")
+  keyboard$
+    .pipe(
+      takeIf(toggle$.pipe(switchMap(watchToggle))),
+      withLatestFrom(
+        toggle$,
+        useComponent("search-query"),
+        useComponent("search-result")
+      )
+    )
+      .subscribe(([key, toggle, query, result]) => {
+        const active = getActiveElement()
+        switch (key.type) {
+
+          /* Enter: prevent form submission */
+          case "Enter":
+            if (active === query)
+              key.claim()
+            break
+
+          /* Escape or Tab: close search */
+          case "Escape":
+          case "Tab":
+            setToggle(toggle, false)
+            setElementFocus(query, false)
+            break
+
+          /* Vertical arrows: select previous or next search result */
+          case "ArrowUp":
+          case "ArrowDown":
+            if (typeof active === "undefined") {
+              setElementFocus(query)
+            } else {
+              const els = [query, ...getElements("[href]", result)]
+              const i = Math.max(0, (
+                Math.max(0, els.indexOf(active)) + els.length + (
+                  key.type === "ArrowUp" ? -1 : +1
+                )
+              ) % els.length)
+              setElementFocus(els[i])
+            }
+
+            /* Prevent scrolling of page */
+            key.claim()
+            break
+
+          /* All other keys: hand to search query */
+          default:
+            if (query !== getActiveElement())
+              setElementFocus(query)
+        }
+      })
+
+  /* Setup general keyboard handlers */
+  keyboard$
+    .pipe(
+      takeIf(not(toggle$.pipe(switchMap(watchToggle)))),
+      withLatestFrom(useComponent("search-query"))
+    )
+      .subscribe(([key, query]) => {
+        const active = getActiveElement()
+        switch (key.type) {
+
+          /* [s]earch / [f]ind: open search  */
+          case "s":
+          case "f":
+            if (!(active && isSusceptibleToKeyboard(active))) {
+              setElementFocus(query)
+              key.claim()
+            }
+            break
+        }
+      })
+
+  /* Return keyboard observable */
+  return keyboard$
+}

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

@@ -46,7 +46,7 @@ export interface Key {
  *
  * @return Test result
  */
-export function mayReceiveKeyboardEvents(el: HTMLElement) {
+export function isSusceptibleToKeyboard(el: HTMLElement) {
   switch (el.tagName) {
 
     /* Form elements */

src/assets/javascripts/observables/header/title/index.ts

@@ -20,10 +20,14 @@
  * IN THE SOFTWARE.
  */
 
-import { MonoTypeOperatorFunction, animationFrameScheduler, pipe } from "rxjs"
+import {
+  MonoTypeOperatorFunction,
+  animationFrameScheduler,
+  pipe
+} from "rxjs"
 import { finalize, observeOn, tap } from "rxjs/operators"
 
-import { resetHeaderTitleActive, setHeaderTitleActive } from "actions"
+import { resetHeaderTitle, setHeaderTitle } from "actions"
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -44,12 +48,12 @@ export function paintHeaderTitle(
     /* Defer repaint to next animation frame */
     observeOn(animationFrameScheduler),
     tap(active => {
-      setHeaderTitleActive(el, active)
+      setHeaderTitle(el, active)
     }),
 
     /* Reset on complete or error */
     finalize(() => {
-      resetHeaderTitleActive(el)
+      resetHeaderTitle(el)
     })
   )
 }

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

@@ -131,6 +131,26 @@ export function useToggle(
 
 /* ------------------------------------------------------------------------- */
 
+/**
+ * Set toggle
+ *
+ * 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 el - Toggle element
+ * @param value - Toggle value
+ */
+export function setToggle(
+  el: HTMLInputElement, value: boolean
+): void {
+  if (el.checked !== value)
+    el.click()
+}
+
+/* ------------------------------------------------------------------------- */
+
 /**
  * Watch toggle
  *

src/assets/javascripts/patches/details/index.ts

@@ -89,9 +89,8 @@ export function patchDetails(
       filter(hash => !!hash.length),
       switchMap(hash => of(getElementOrThrow<HTMLElement>(hash))
         .pipe(
-          map(el => el.closest("details")!),
+          map(el => [el.closest("details")!, hash] as const),
-          filter(el => el && !el.open),
+          filter(([el]) => el && !el.open)
-          map(el => [el, hash] as const)
         )
       ),
       catchError(() => NEVER)