From e368b9e50ba2cafaef0145110615269496f3744a Mon Sep 17 00:00:00 2001 From: martin <74269598+martabal@users.noreply.github.com> Date: Sun, 30 Jul 2023 18:03:08 +0200 Subject: [PATCH] feat: handle escape key and higher wheel zoom ratio (#3471) --- .../components/album-page/album-viewer.svelte | 26 ++++++++++++++++++- .../asset-viewer/photo-viewer.svelte | 2 +- .../components/photos-page/asset-grid.svelte | 13 ++++++---- .../gallery-viewer/gallery-viewer.svelte | 9 +++---- web/src/routes/(user)/search/+page.svelte | 25 ++++++++++++++++++ 5 files changed, 63 insertions(+), 12 deletions(-) diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte index d8a44225bf..93ecce7581 100644 --- a/web/src/lib/components/album-page/album-viewer.svelte +++ b/web/src/lib/components/album-page/album-viewer.svelte @@ -13,7 +13,7 @@ UserResponseDto, api, } from '@api'; - import { onMount } from 'svelte'; + import { onDestroy, onMount } from 'svelte'; import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte'; import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte'; import DotsVertical from 'svelte-material-icons/DotsVertical.svelte'; @@ -43,6 +43,7 @@ import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import { handleError } from '../../utils/handle-error'; import { downloadArchive } from '../../utils/asset-utils'; + import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store'; export let album: AlbumResponseDto; export let sharedLink: SharedLinkResponseDto | undefined = undefined; @@ -119,7 +120,10 @@ return startDateString === endDateString ? startDateString : `${startDateString} - ${endDateString}`; }; + const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event); + onMount(async () => { + document.addEventListener('keydown', onKeyboardPress); currentAlbumName = album.albumName; try { @@ -130,6 +134,26 @@ } }); + onDestroy(() => { + if (browser) { + document.removeEventListener('keydown', onKeyboardPress); + } + }); + + const handleKeyboardPress = (event: KeyboardEvent) => { + if (!$isViewingAssetStoreState) { + switch (event.key) { + case 'Escape': + if (isMultiSelectionMode) { + multiSelectAsset = new Set(); + } else { + goto(backUrl); + } + return; + } + } + }; + // Update Album Name $: { if (!isEditingTitle && currentAlbumName != album.albumName && isOwned) { diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte index 720e006e82..5d5eea3fb5 100644 --- a/web/src/lib/components/asset-viewer/photo-viewer.svelte +++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte @@ -93,7 +93,7 @@ $: if (imgElement) { createZoomImageWheel(imgElement, { - wheelZoomRatio: 0.06, + wheelZoomRatio: 0.2, }); } diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte index ae4673e0bd..e27240df43 100644 --- a/web/src/lib/components/photos-page/asset-grid.svelte +++ b/web/src/lib/components/photos-page/asset-grid.svelte @@ -89,16 +89,19 @@ return; } - if (event.key === '/') { - event.preventDefault(); - } - if (!$isViewingAssetStoreState) { switch (event.key) { + case 'Escape': + assetInteractionStore.clearMultiselect(); + return; case '?': - if (event.shiftKey) showShortcuts = !showShortcuts; + if (event.shiftKey) { + event.preventDefault(); + showShortcuts = !showShortcuts; + } return; case '/': + event.preventDefault(); goto(AppRoute.EXPLORE); return; } diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte index eec4ff694c..3445f6a732 100644 --- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte +++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte @@ -11,6 +11,7 @@ import { flip } from 'svelte/animate'; import { archivedAsset } from '$lib/stores/archived-asset.store'; import { getThumbnailSize } from '$lib/utils/thumbnail-util'; + import { isViewingAssetStoreState } from '$lib/stores/asset-interaction.store'; export let assets: AssetResponseDto[]; export let sharedLink: SharedLinkResponseDto | undefined = undefined; @@ -19,8 +20,6 @@ export let viewFrom: ViewFrom; export let showArchiveIcon = false; - let isShowAssetViewer = false; - let selectedAsset: AssetResponseDto; let currentViewAssetIndex = 0; @@ -34,7 +33,7 @@ currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id); selectedAsset = assets[currentViewAssetIndex]; - isShowAssetViewer = true; + $isViewingAssetStoreState = true; pushState(selectedAsset.id); }; @@ -82,7 +81,7 @@ }; const closeViewer = () => { - isShowAssetViewer = false; + $isViewingAssetStoreState = false; history.pushState(null, '', `${$page.url.pathname}`); }; @@ -118,7 +117,7 @@ {/if} -{#if isShowAssetViewer} +{#if $isViewingAssetStoreState} handleKeyboardPress(event); + + onMount(async () => { + document.addEventListener('keydown', onKeyboardPress); + }); + + onDestroy(() => { + if (browser) { + document.removeEventListener('keydown', onKeyboardPress); + } + }); + + const handleKeyboardPress = (event: KeyboardEvent) => { + if (!$isViewingAssetStoreState) { + switch (event.key) { + case 'Escape': + goto(previousRoute); + return; + } + } + }; + afterNavigate(({ from }) => { // Prevent setting previousRoute to the current page. if (from && from.route.id !== $page.route.id) {