mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 14:59:36 +02:00
Refactor AdventureCard and CardCarousel components
This commit is contained in:
parent
3ee9625fe8
commit
2601b07b5f
4 changed files with 51 additions and 46 deletions
|
@ -18,7 +18,6 @@
|
|||
import CollectionLink from './CollectionLink.svelte';
|
||||
import DotsHorizontal from '~icons/mdi/dots-horizontal';
|
||||
import DeleteWarning from './DeleteWarning.svelte';
|
||||
import ImageDisplayModal from './ImageDisplayModal.svelte';
|
||||
import { isAdventureVisited, typeToString } from '$lib';
|
||||
import CardCarousel from './CardCarousel.svelte';
|
||||
|
||||
|
|
|
@ -4,30 +4,34 @@
|
|||
|
||||
export let adventures: Adventure[] = [];
|
||||
|
||||
let adventure_images: string[] = [];
|
||||
let currentSlide = 0; // Declare as a regular variable
|
||||
|
||||
let adventure: Adventure | null = null;
|
||||
let currentSlide = 0;
|
||||
let image_url: string | null = null;
|
||||
|
||||
adventures.forEach((adventure) => {
|
||||
adventure_images = [...adventure_images, ...adventure.images.map((image) => image.image)];
|
||||
});
|
||||
$: adventure_images = adventures.flatMap((adventure) =>
|
||||
adventure.images.map((image) => ({ image: image.image, adventure: adventure }))
|
||||
);
|
||||
|
||||
// Reactive statement to log when currentSlide changes
|
||||
$: console.log('Current slide:', currentSlide);
|
||||
$: {
|
||||
if (adventure_images.length > 0) {
|
||||
currentSlide = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function changeSlide(direction: string) {
|
||||
if (direction === 'next' && currentSlide < adventure_images.length - 1) {
|
||||
currentSlide = currentSlide + 1; // Use direct assignment
|
||||
currentSlide = currentSlide + 1;
|
||||
} else if (direction === 'prev' && currentSlide > 0) {
|
||||
currentSlide = currentSlide - 1; // Use direct assignment
|
||||
currentSlide = currentSlide - 1;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if image_url}
|
||||
<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} />
|
||||
<ImageDisplayModal
|
||||
adventure={adventure_images[currentSlide].adventure}
|
||||
image={image_url}
|
||||
on:close={() => (image_url = null)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<figure>
|
||||
|
@ -39,13 +43,13 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
on:click|stopPropagation={() => (image_url = adventure_images[currentSlide])}
|
||||
on:click|stopPropagation={() => (image_url = adventure_images[currentSlide].image)}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={adventure_images[currentSlide]}
|
||||
src={adventure_images[currentSlide].image}
|
||||
class="w-full h-48 object-cover"
|
||||
alt={adventure_images[currentSlide]}
|
||||
alt={adventure_images[currentSlide].adventure.name}
|
||||
/>
|
||||
</a>
|
||||
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
import TrashCan from '~icons/mdi/trashcan';
|
||||
import DeleteWarning from './DeleteWarning.svelte';
|
||||
import ShareModal from './ShareModal.svelte';
|
||||
import ImageDisplayModal from './ImageDisplayModal.svelte';
|
||||
import CardCarousel from './CardCarousel.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
import type { Adventure } from '$lib/types';
|
||||
|
||||
export let image: string;
|
||||
export let adventure: Adventure | null = null;
|
||||
|
||||
onMount(() => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
|
@ -41,8 +42,9 @@
|
|||
<!-- 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">
|
||||
{#if adventure}
|
||||
<div class="modal-header flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-2xl">Image Preview</h3>
|
||||
<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"
|
||||
|
@ -66,9 +68,10 @@
|
|||
>
|
||||
<img
|
||||
src={image}
|
||||
alt="My Adventure"
|
||||
alt={adventure.name}
|
||||
style="max-width: 100%; max-height: 75vh; object-fit: contain;"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue