helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat: improve/refactor focus handling (#17796)

Browse source 
* feat: improve focus

* test

* lint

* use modulus in loop
This commit is contained in:
Min Idzelis 2025-04-30 00:19:38 -04:00 • committed by GitHub
parent 2e8a286540
commit 4b1ced439b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 92 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View file

@ -22,6 +22,7 @@
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { debounce } from 'lodash-es';
import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
import { focusNext } from '$lib/utils/focus-util';
interface Props {
assets: AssetResponseDto[];
@ -259,25 +260,8 @@
}
};
const focusNextAsset = () => {
if (assetInteraction.focussedAssetId === null && assets.length > 0) {
assetInteraction.focussedAssetId = assets[0].id;
} else if (assetInteraction.focussedAssetId !== null && assets.length > 0) {
const currentIndex = assets.findIndex((a) => a.id === assetInteraction.focussedAssetId);
if (currentIndex !== -1 && currentIndex + 1 < assets.length) {
assetInteraction.focussedAssetId = assets[currentIndex + 1].id;
}
}
};
const focusPreviousAsset = () => {
if (assetInteraction.focussedAssetId !== null && assets.length > 0) {
const currentIndex = assets.findIndex((a) => a.id === assetInteraction.focussedAssetId);
if (currentIndex >= 1) {
assetInteraction.focussedAssetId = assets[currentIndex - 1].id;
}
}
};
const focusNextAsset = () => focusNext((element) => element.dataset.thumbnailFocusContainer !== undefined, true);
const focusPreviousAsset = () => focusNext((element) => element.dataset.thumbnailFocusContainer !== undefined, false);
let shortcutList = $derived(
(() => {
@ -417,10 +401,6 @@
}
};
const assetOnFocusHandler = (asset: AssetResponseDto) => {
assetInteraction.focussedAssetId = asset.id;
};
let isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
let idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
@ -490,12 +470,10 @@
}}
onSelect={(asset) => handleSelectAssets(asset)}
onMouseEvent={() => assetMouseEventHandler(asset)}
handleFocus={() => assetOnFocusHandler(asset)}
{showArchiveIcon}
{asset}
selected={assetInteraction.hasSelectedAsset(asset.id)}
selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
focussed={assetInteraction.isFocussedAsset(asset.id)}
thumbnailWidth={layout.width}
thumbnailHeight={layout.height}
/>