mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-25 07:49:37 +02:00
Merge pull request #249 from PhiCoderX/ImageDisplayModal
ImageDisplayModal
This commit is contained in:
commit
2d4d98393c
1 changed files with 42 additions and 9 deletions
|
@ -3,7 +3,6 @@
|
|||
const dispatch = createEventDispatcher();
|
||||
import { onMount } from 'svelte';
|
||||
let modal: HTMLDialogElement;
|
||||
import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
|
||||
import type { Adventure } from '$lib/types';
|
||||
|
||||
export let image: string;
|
||||
|
@ -18,25 +17,59 @@
|
|||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
if (modal) {
|
||||
modal.close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
dispatch('close');
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (event.target === modal) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<dialog id="my_modal_1" class="modal" on:click={handleClickOutside}>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div class="modal-box w-11/12 max-w-5xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
||||
<h3 class="font-bold mb-4 text-2xl">{adventure.name}</h3>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<img src={image} alt={adventure.name} class="w-full h-full object-cover" />
|
||||
<div class="modal-header flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-2xl">{adventure.name}</h3>
|
||||
<button class="btn btn-circle btn-neutral" on:click={close}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-center items-center"
|
||||
style="display: flex; justify-content: center; align-items: center;"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt={adventure.name}
|
||||
style="max-width: 100%; max-height: 75vh; object-fit: contain;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn mt-4 btn-primary" on:click={close}>Close</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue