100 lines
3.2 KiB
Svelte
100 lines
3.2 KiB
Svelte
<script>
|
|
import SvgIcon from "@jamescoyle/svelte-icon";
|
|
import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
|
|
import "$lib/css/slideshow.css";
|
|
import { onMount } from "svelte";
|
|
import { createTimeLine } from "$lib/js/timeline.js";
|
|
|
|
// Exported values
|
|
export let data = [];
|
|
export let type;
|
|
export let typename;
|
|
export let timeline = false;
|
|
|
|
// Slideshow global variables
|
|
let slideshow_index = 0;
|
|
let slideshow_hidden = [];
|
|
|
|
// Timeline global variables
|
|
let slideshow;
|
|
let bubbles = [];
|
|
if (timeline) {
|
|
onMount(() => {
|
|
for (const element of document.getElementsByClassName(
|
|
`${typename}-bubble`
|
|
)) {
|
|
bubbles.push({
|
|
left: element.offsetLeft,
|
|
top: element.offsetTop,
|
|
});
|
|
}
|
|
for (const div of createTimeLine(bubbles,typename)) {
|
|
slideshow.appendChild(div);
|
|
}
|
|
});
|
|
}
|
|
|
|
function slideCards() {
|
|
const slideshowElements = document.querySelectorAll(
|
|
`.${typename}-container`
|
|
);
|
|
const slideshowTimeline =
|
|
document.querySelectorAll(`.${typename}-string`);
|
|
|
|
console.log(slideshowTimeline);
|
|
if (slideshow_index >= data.length - 1) {
|
|
slideshow_hidden = [];
|
|
slideshow_index = 0;
|
|
if (timeline) {
|
|
for (const timeline of slideshowTimeline) {
|
|
timeline.style.backgroundColor = "";
|
|
}
|
|
}
|
|
} else {
|
|
slideshow_hidden.push(slideshow_index);
|
|
slideshow_index++;
|
|
}
|
|
let transformValue = 0;
|
|
for (const id of slideshow_hidden) {
|
|
transformValue += slideshowElements[id].clientWidth;
|
|
}
|
|
slideshowElements.forEach((element, id) => {
|
|
let newtransformValue = transformValue;
|
|
if (slideshow_hidden.includes(id)) {
|
|
// 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
|
|
newtransformValue *= 1.1;
|
|
}
|
|
element.style.transform = `translateX(-${newtransformValue}px)`;
|
|
if (slideshowTimeline[id] != undefined) {
|
|
slideshowTimeline[
|
|
id
|
|
].style.transform = `translateX(-${transformValue}px)`;
|
|
if (slideshow_hidden.includes(id)) {
|
|
slideshowTimeline[id].style.backgroundColor =
|
|
"var(--color-background)";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div class="slideshow" bind:this={slideshow}>
|
|
<button class="slideshow_btn" on:click={slideCards}>
|
|
<div>
|
|
<SvgIcon
|
|
size="45"
|
|
path={slideshow_index >= data.length - 1
|
|
? mdiChevronLeft
|
|
: mdiArrowRight}
|
|
type="mdi"
|
|
/>
|
|
</div>
|
|
</button>
|
|
{#each data.reverse() as selected_data, index (index)}
|
|
<svelte:component
|
|
this={type}
|
|
data={selected_data}
|
|
active={index == slideshow_index ? true : false}
|
|
/>
|
|
{/each}
|
|
</div>
|