Compartmentalized Timeline and Carousel, applied www-data permissions to all files in built docker container, for deploys to work

src/components/CustomCarousel/custom-carousel.ts

@@ -0,0 +1,80 @@
+import {Carousel, type CarouselItem, type CarouselOptions, type IndicatorItem} from 'flowbite';
+
+class CustomCarousel extends HTMLElement {
+    _slide: boolean;
+    _items: CarouselItem[];
+    _options: CarouselOptions;
+    _carousel: Carousel;
+
+    constructor() {
+        super();
+
+        this._slide = this.getAttribute('data-custom-carousel') === 'slide';
+        this._items = this._getItems();
+        this._options = this._getOptions();
+        this._carousel = new Carousel(this, this._items, this._options);
+
+        if (this._slide && this._items.length > 0) this._carousel.cycle();
+
+        window.addEventListener("load", this._attachHandlers);
+
+    }
+
+    _getItems = (): CarouselItem[] => {
+        let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
+
+        return Array.from(customItems).map(
+            (item, index): CarouselItem => {
+                return {el: item as HTMLElement, position: index}
+            }
+        )
+    }
+
+    _getOptions = (): CarouselOptions => {
+        let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
+
+        return {
+            defaultPosition: 0,
+            interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
+
+            indicators: {
+                activeClasses: 'border-2 border-caperren-green bg-black',
+                inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
+                items: Array.from(customIndicators).map(
+                    (item, index): IndicatorItem => {
+                        return {
+                            el: item as HTMLElement,
+                            position: Number(item.getAttribute('data-custom-carousel-slide-to'))
+                        }
+                    }
+                )
+            }
+        }
+    }
+
+    _attachHandlers = (): void => {
+        // Controls
+        const carouselNextEl = this.querySelector(
+            '[data-custom-carousel-next]'
+        );
+        const carouselPrevEl = this.querySelector(
+            '[data-custom-carousel-prev]'
+        );
+
+        if (carouselNextEl) {
+            carouselNextEl.addEventListener('click', () => {
+                this._carousel.next();
+            });
+        }
+
+        if (carouselPrevEl) {
+            carouselPrevEl.addEventListener('click', () => {
+                this._carousel.prev();
+            });
+        }
+    }
+
+
+}
+
+customElements.define('custom-carousel', CustomCarousel)