nodality 1.0.31 → 1.0.33

package/layout/formComponents/custom.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/dataList.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/floatingInput.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/form-all.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/form.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/imagePicker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/picker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/radio.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/radiogroup.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/formComponents/range.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/free.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/grid-new.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/grid.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/gridSwitcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/group.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/header.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/horizontalScroller.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/image-old.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/image.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/index.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/label.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/link.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/list-OLD.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/list.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/metaAdder.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/modal2025.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/modernwrap.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/multiswitcher.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/multiswitcherBeta.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/navBar-OLD.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/navBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/navFactor/customDiv.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/newFlatAdder.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/newNavBar copy 2.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/newNavBar copy.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/newNavBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/offsetContainer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/polygon.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/progress.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/row.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/savedNewNavBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/scrollvideo.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/sideBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/sideNavBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/simpleBar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/slider2025.js

@@ -1,39 +1,42 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
 
-import {Animator} from "./animator.js";
-import {Button} from "./button.js";
+import { Animator } from "./animator.js";
+import { Button } from "./button.js";
 
 class Slider {
-  constructor(elements, buttons) {
-    this.container = document.createElement("div"); // root element
+  constructor(elements, buttons, options = {}) {
+    this.container = document.createElement("div");
     this.container.style.width = "100%";
     this.container.style.margin = "20px auto";
     this.container.style.textAlign = "center";
 
     this.elements = elements;
     this.currentSlideIndex = 0;
-
     this.buttons = buttons;
 
+    // 🎨 Tint options
+    this.tintColor = options.tintColor || "green";
+    this.inactiveColor = options.inactiveColor || "gray";
+
+    // 🔵 Default buttons adopt tintColor
     if (!this.buttons) {
       let buttons = {
         leftButton: new Button("L").set({
           frame: { width: 50, height: 50 },
-          url: "../assets/arrow-left.png",
-          color: "#1abc9c",
-          image: new Image().set({ url: "../assets/arrow-left.png", width: "50px", height: "50px" }),
+          svg: this.createArrowSVG("left", 28, this.tintColor),
+          color: this.tintColor, // adopt tintColor
           radius: "100%",
           arrayMargin: { sides: ["all"], value: "1rem" },
         }),
 
         rightButton: new Button("R").set({
           frame: { width: 50, height: 50 },
-          url: "../assets/arrow-right.png",
-          color: "#1abc9c",
+          svg: this.createArrowSVG("right", 28, this.tintColor),
+          color: this.tintColor, // adopt tintColor
           radius: "100%",
           arrayMargin: { sides: ["all"], value: "1rem" },
         }),
@@ -45,6 +48,29 @@ class Slider {
     this.init();
   }
 
+  createArrowSVG(direction = "left", size = 28, color = "currentColor") {
+    const svgNS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("aria-hidden", "true");
+    svg.style.display = "block";
+    svg.style.pointerEvents = "none";
+
+    const path = document.createElementNS(svgNS, "path");
+    path.setAttribute("fill", color);
+
+    if (direction === "left") {
+      path.setAttribute("d", "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z");
+    } else {
+      path.setAttribute("d", "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z");
+    }
+
+    svg.appendChild(path);
+    return svg;
+  }
+
   toCode() {
     let code = `new Slider([${this.elements.map((el) => el.toCode())}], null)`;
     code = code.replace(/,\s*\./g, ".");
@@ -79,12 +105,12 @@ class Slider {
       slide.style.flexShrink = "0";
       slide.style.width = "100%";
       slide.style.height = "400px";
-      slide.style.background = index % 2 === 0 ? "rgb(250, 246, 212)" : "white";
+      slide.style.background =
+        index % 2 === 0 ? "rgb(250, 246, 212)" : "white";
       slide.style.transformOrigin = "center center";
       slide.style.transform = "scale(1)";
       slide.style.scrollSnapAlign = "center";
 
-      // render element once and clone from that instance for the thumbnail
       const rendered = text.render();
       slide.appendChild(rendered);
       slidesWrapper.appendChild(slide);
@@ -97,6 +123,9 @@ class Slider {
     this.arrowPrev.style.top = "50%";
     this.arrowPrev.style.transform = "translateY(-50%)";
     this.arrowPrev.style.zIndex = "1";
+    this.arrowPrev.style.display = "flex";
+    this.arrowPrev.style.alignItems = "center";
+    this.arrowPrev.style.justifyContent = "center";
 
     this.arrowNext = this.buttons.rightButton.render();
     this.arrowNext.style.position = "absolute";
@@ -104,13 +133,15 @@ class Slider {
     this.arrowNext.style.top = "50%";
     this.arrowNext.style.transform = "translateY(-50%)";
     this.arrowNext.style.zIndex = "1";
+    this.arrowNext.style.display = "flex";
+    this.arrowNext.style.alignItems = "center";
+    this.arrowNext.style.justifyContent = "center";
 
     // Navigation dots
     const nav = document.createElement("div");
     nav.style.position = "absolute";
     nav.style.bottom = "10%";
     nav.style.left = "50%";
-    nav.style.width = "200px";
     nav.style.transform = "translateX(-50%)";
     nav.style.textAlign = "center";
 
@@ -120,68 +151,63 @@ class Slider {
       navLink.style.height = "15px";
       navLink.style.width = "15px";
       navLink.style.borderRadius = "50%";
-      navLink.style.backgroundColor = "black";
+      navLink.style.backgroundColor = this.inactiveColor;
       navLink.style.margin = "0 10px";
       navLink.style.cursor = "pointer";
       navLink.dataset.index = index;
       nav.appendChild(navLink);
     });
 
-    // ✅ Thumbnails section (fixed and robust)
+    // ✅ Thumbnails section
     const thumbsContainer = document.createElement("div");
     thumbsContainer.style.display = "flex";
-    thumbsContainer.style.justifyContent = "center";
+    thumbsContainer.style.justifyContent = "flex-start";
     thumbsContainer.style.marginTop = "10px";
     thumbsContainer.style.gap = "10px";
     thumbsContainer.style.flexWrap = "nowrap";
-    thumbsContainer.style.overflowX = "auto"; // optional: allow scrolling if many thumbs
+    thumbsContainer.style.overflowX = "auto";
 
-    // create thumbnails from existing slide DOM (clone once)
     const slides = slidesWrapper.querySelectorAll(".slide");
     slides.forEach((slide, index) => {
       const thumb = document.createElement("div");
-      thumb.className = "slider-thumb"; // specific class so we only select top-level thumbs
+      thumb.className = "slider-thumb";
       thumb.dataset.index = index.toString();
       thumb.style.width = "60px";
       thumb.style.height = "40px";
-      thumb.style.border = "2px solid gray";
+      thumb.style.border = `2px solid ${this.inactiveColor}`;
       thumb.style.borderRadius = "5px";
       thumb.style.overflow = "hidden";
       thumb.style.cursor = "pointer";
       thumb.style.flexShrink = "0";
       thumb.style.position = "relative";
 
-      // use the slide's rendered content and clone it (no extra text.render() calls)
       const sourceContent = slide.firstElementChild || slide.cloneNode(true);
       const preview = sourceContent.cloneNode(true);
-
-      // scale down the preview and make sure it sits in the thumb
       preview.style.transform = "scale(0.2)";
       preview.style.transformOrigin = "top left";
-      // make width/height big enough so scale produces visible result
       preview.style.width = "300px";
       preview.style.height = "auto";
-      preview.style.pointerEvents = "none"; // prevent interactive elements inside preview catching clicks
+      preview.style.pointerEvents = "none";
 
       thumb.appendChild(preview);
-
       thumbsContainer.appendChild(thumb);
     });
 
-    // Append elements to the slider
+    // Append elements
     this.slider.appendChild(this.arrowPrev);
     this.slider.appendChild(this.arrowNext);
     this.slider.appendChild(slidesWrapper);
     this.slider.appendChild(nav);
 
-    // Append everything to root container (single root element)
     this.container.appendChild(this.slider);
     this.container.appendChild(thumbsContainer);
 
-    // Store references (select only top-level thumbs)
+    // Store references
     this.slidesWrapper = slidesWrapper;
     this.navLinks = Array.from(nav.querySelectorAll("a"));
-    this.thumbs = Array.from(thumbsContainer.querySelectorAll(".slider-thumb"));
+    this.thumbs = Array.from(
+      thumbsContainer.querySelectorAll(".slider-thumb")
+    );
   }
 
   init() {
@@ -191,7 +217,11 @@ class Slider {
 
   attachEventListeners() {
     this.arrowPrev.addEventListener("click", () => {
-      this.moveToSlide(this.currentSlideIndex - 1 < 0 ? this.elements.length - 1 : this.currentSlideIndex - 1);
+      this.moveToSlide(
+        this.currentSlideIndex - 1 < 0
+          ? this.elements.length - 1
+          : this.currentSlideIndex - 1
+      );
     });
 
     this.arrowNext.addEventListener("click", () => {
@@ -206,7 +236,6 @@ class Slider {
       });
     });
 
-    // thumbnails click (use data-index to be robust)
     this.thumbs.forEach((thumb) => {
       thumb.addEventListener("click", () => {
         const idx = parseInt(thumb.dataset.index, 10);
@@ -214,10 +243,13 @@ class Slider {
       });
     });
 
-    // Keydown event for left and right arrow keys
     document.addEventListener("keydown", (e) => {
       if (e.key === "ArrowLeft") {
-        this.moveToSlide(this.currentSlideIndex - 1 < 0 ? this.elements.length - 1 : this.currentSlideIndex - 1);
+        this.moveToSlide(
+          this.currentSlideIndex - 1 < 0
+            ? this.elements.length - 1
+            : this.currentSlideIndex - 1
+        );
       } else if (e.key === "ArrowRight") {
         this.moveToSlide((this.currentSlideIndex + 1) % this.elements.length);
       }
@@ -230,21 +262,29 @@ class Slider {
   }
 
   updateActiveSlide() {
-    // highlight nav dots using dataset (robust even if nodes reorder)
+    // nav dots
     this.navLinks.forEach((navLink) => {
       const idx = parseInt(navLink.dataset.index, 10);
-      navLink.style.backgroundColor = idx === this.currentSlideIndex ? "green" : "gray";
+      navLink.style.backgroundColor =
+        idx === this.currentSlideIndex
+          ? this.tintColor
+          : this.inactiveColor;
     });
 
-    // highlight thumbs using dataset (robust)
+    // thumbs
     this.thumbs.forEach((thumb) => {
       const idx = parseInt(thumb.dataset.index, 10);
-      thumb.style.borderColor = idx === this.currentSlideIndex ? "green" : "gray";
+      thumb.style.borderColor =
+        idx === this.currentSlideIndex
+          ? this.tintColor
+          : this.inactiveColor;
     });
 
-    // scroll main slides wrapper
+    // scroll slides
     const slideElem = this.slidesWrapper.querySelector(".slide");
-    const slideWidth = slideElem ? slideElem.offsetWidth : this.slidesWrapper.clientWidth;
+    const slideWidth = slideElem
+      ? slideElem.offsetWidth
+      : this.slidesWrapper.clientWidth;
     this.slidesWrapper.scrollTo({
       left: this.currentSlideIndex * slideWidth,
       behavior: "smooth",
@@ -255,7 +295,7 @@ class Slider {
     if (div) {
       document.querySelector(div).appendChild(this.container);
     } else {
-      return this.container; // return single root element
+      return this.container;
     }
   }
 }

package/layout/spacer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.31
+ * nodality v1.0.33
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */