48 lines
1.5 KiB
Plaintext
48 lines
1.5 KiB
Plaintext
---
|
|
import client from "@/data/pocketbase";
|
|
const { class: className, recipe } = Astro.props
|
|
const links = await client.getRecipeImages(recipe as string)
|
|
|
|
---
|
|
|
|
<script>
|
|
let pos = 0;
|
|
const dataElement = document.getElementById('carousel-data');
|
|
const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
|
|
const cap = links.length - 1;
|
|
const img = document.getElementById('carousel-img') as HTMLImageElement;
|
|
|
|
if (cap == 0) {
|
|
const b0 = document.getElementById('dec-button')
|
|
const b1 = document.getElementById('inc-button')
|
|
|
|
b0!.hidden = true
|
|
b1!.hidden = true
|
|
}
|
|
|
|
function inc() {
|
|
pos = pos === cap ? 0 : pos + 1;
|
|
if (img) img.src = links[pos];
|
|
}
|
|
|
|
function dec() {
|
|
pos = pos === 0 ? cap : pos - 1;
|
|
if (img) img.src = links[pos];
|
|
}
|
|
|
|
// make functions globally accessible
|
|
(window as any).inc = inc;
|
|
(window as any).dec = dec;
|
|
</script>
|
|
|
|
<div class={className}>
|
|
<!-- Hidden element to pass server data to client -->
|
|
<div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
|
|
|
|
<div class="relative flex items-center w-full h-60">
|
|
<button id="dec-button" class="absolute left-2" onclick="dec()"><</button>
|
|
<img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
|
|
<!-- <div class="w-70 h-60 bg-green-600" /> -->
|
|
<button id="inc-button" class="absolute right-2" onclick="inc()">></button>
|
|
</div>
|
|
</div> |