Started refactoring, added prettier and checks and reformatted project, added cspell and checks and custom project words, beginning of robotic oceanographic surface sampler content

src/components/Media/CustomCarousel/custom-carousel.ts

@@ -0,0 +1,111 @@
+import {
+  Carousel,
+  type CarouselItem,
+  type CarouselInterface,
+  type CarouselOptions,
+  type IndicatorItem,
+  Modal,
+  type ModalInterface,
+} from "flowbite";
+
+class CustomCarousel extends HTMLElement {
+  _slide: boolean;
+  _items: CarouselItem[];
+  _options: CarouselOptions;
+  _carousel: CarouselInterface;
+
+  _modalEl: HTMLElement;
+  _modal: ModalInterface;
+
+  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();
+
+    this._modalEl =
+      (this.querySelector("[data-custom-carousel-modal]") as HTMLElement) ||
+      undefined;
+    this._modal = new Modal(this._modalEl);
+
+    window.addEventListener("load", this._attachHandlers);
+  }
+
+  _getItems = (): CarouselItem[] => {
+    let customItems =
+      this.querySelectorAll("[data-custom-carousel-item]") || [];
+
+    return Array.from(customItems).map((item): CarouselItem => {
+      return {
+        el: item as HTMLElement,
+        position: Number(item.getAttribute("data-custom-carousel-item")),
+      };
+    });
+  };
+
+  _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): IndicatorItem => {
+            return {
+              el: item as HTMLElement,
+              position: Number(
+                item.getAttribute("data-custom-carousel-slide-to"),
+              ),
+            };
+          },
+        ),
+      },
+    };
+  };
+
+  _attachHandlers = (): void => {
+    // Carousel controls
+    this.querySelector("[data-custom-carousel-next]")?.addEventListener(
+      "click",
+      () => this._carousel.next(),
+    );
+    this.querySelector("[data-custom-carousel-prev]")?.addEventListener(
+      "click",
+      () => this._carousel.prev(),
+    );
+
+    // Close fullscreen modal
+    this._modalEl
+      .querySelector("[data-custom-carousel-modal-hide]")
+      ?.addEventListener("click", () => this._modal.hide());
+
+    // Click to open fullscreen modal
+    this._items.forEach((item) => {
+      item.el.addEventListener("click", () => {
+        const imgCloned = item.el.querySelector("img")?.cloneNode() as Node;
+        const imageDiv =
+          (this._modalEl.querySelector(
+            "[data-custom-carousel-modal-image]",
+          ) as HTMLElement) || undefined;
+
+        imageDiv.innerHTML = "";
+        imageDiv?.appendChild(imgCloned);
+
+        this._modal.show();
+      });
+    });
+  };
+}
+
+customElements.define("custom-carousel", CustomCarousel);