diff options
Diffstat (limited to 'frontend/src/lib/reader/components')
| -rw-r--r-- | frontend/src/lib/reader/components/ReaderMenuButton.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/reader/components/ToggleFullscreenButton.svelte | 34 |
2 files changed, 35 insertions, 1 deletions
diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte index da494e3..924342f 100644 --- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte +++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte @@ -9,7 +9,7 @@ <button type="button" - class="btn-transparent invisible xl:visible" + class="btn-transparent hidden xl:flex" {title} aria-label={title} onclick={() => (reader.sidebar = !reader.sidebar)} diff --git a/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte new file mode 100644 index 0000000..9ad4ce6 --- /dev/null +++ b/frontend/src/lib/reader/components/ToggleFullscreenButton.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + import { accelerator } from '$lib/Shortcuts'; + import { toastFinally } from '$lib/Toasts'; + + let { dialog }: { dialog?: HTMLElement } = $props(); + + function onclick() { + if (isFullscreen) { + document.exitFullscreen().catch(toastFinally); + } else if (dialog?.requestFullscreen) { + dialog.requestFullscreen().catch(toastFinally); + } + } + + let fullscreenElement: HTMLElement | null = $state(null); + let isFullscreen = $derived(fullscreenElement !== null); +</script> + +<svelte:document bind:fullscreenElement /> + +<button + type="button" + class="btn-transparent" + title="Toggle fullscreen" + aria-label="Toggle fullscreen" + {onclick} + use:accelerator={'f'} +> + {#if isFullscreen} + <span class="icon-lg icon-[material-symbols--fullscreen-exit]"></span> + {:else} + <span class="icon-lg icon-[material-symbols--fullscreen]"></span> + {/if} +</button> |