starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-23 22:33:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

Moved keyboard handlers to separate module

Browse Source
This commit is contained in:
squidfunk
2020-02-19 15:09:49 +01:00
parent b0ebcc8d5b
commit 8171fc0ecd
17 changed files with 183 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/javascripts/actions/header/title/index.ts
View File

@@ -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")

1
src/assets/javascripts/actions/index.ts
View File

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

43
src/assets/javascripts/actions/toggle/index.ts
View File

@@ -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()
}

19
src/assets/javascripts/components/search/_/index.ts
View File

@@ -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 */

2
src/assets/javascripts/components/search/query/index.ts
View File

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

68
src/assets/javascripts/components/search/result/index.ts
View File

@@ -28,32 +28,21 @@ import {
map,
pluck,
shareReplay,
switchMap,
withLatestFrom
switchMap
} from "rxjs/operators"
import { setToggle } from "actions"
import { SearchResult } from "integrations/search"
import {
Key,
SearchQuery,
WorkerHandler,
getActiveElement,
getElements,
paintSearchResult,
setElementFocus,
useToggle,
watchElementOffset,
watchToggle
watchElementOffset
} 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(

24
src/assets/javascripts/index.ts
View File

@@ -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)))),

129
src/assets/javascripts/integrations/keyboard/index.ts Normal file
View File

@@ -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$
}

2
src/assets/javascripts/observables/agent/keyboard/index.ts
View File

@@ -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 */

12
src/assets/javascripts/observables/header/title/index.ts
View File

@@ -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)
})
)
}

20
src/assets/javascripts/observables/toggle/index.ts
View File

@@ -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
*

5
src/assets/javascripts/patches/details/index.ts
View File

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