nodality 1.0.81 → 1.0.83

package/layout/simpleBar.js

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

package/layout/slider2025.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.81
+ * nodality v1.0.83
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -29,7 +29,7 @@ class Slider {
         leftButton: new Button("L").set({
           frame: { width: 50, height: 50 },
           svg: this.createArrowSVG("left", 28, this.tintColor),
-          color: this.tintColor, // adopt tintColor
+          color: this.tintColor,
           radius: "100%",
           arrayMargin: { sides: ["all"], value: "1rem" },
         }),
@@ -37,7 +37,7 @@ class Slider {
         rightButton: new Button("R").set({
           frame: { width: 50, height: 50 },
           svg: this.createArrowSVG("right", 28, this.tintColor),
-          color: this.tintColor, // adopt tintColor
+          color: this.tintColor,
           radius: "100%",
           arrayMargin: { sides: ["all"], value: "1rem" },
         }),
@@ -106,14 +106,19 @@ 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.transformOrigin = "center center";
       slide.style.transform = "scale(1)";
       slide.style.scrollSnapAlign = "center";
 
       const rendered = text.render();
       slide.appendChild(rendered);
+
+      // === Click to open overlay lightbox
+      rendered.style.cursor = "pointer";
+      rendered.addEventListener("click", () => {
+        this.showLightbox(index);
+      });
+
       slidesWrapper.appendChild(slide);
     });
 
@@ -139,8 +144,8 @@ class Slider {
     this.arrowNext.style.display = "flex";
     this.arrowNext.style.alignItems = "center";
     this.arrowNext.style.justifyContent = "center";
-    this.arrowPrev.style.backgroundColor = "white";
-    this.arrowPrev.style.padding = ".4rem";
+    this.arrowNext.style.backgroundColor = "white";
+    this.arrowNext.style.padding = ".4rem";
 
     // Navigation dots
     const nav = document.createElement("div");
@@ -154,6 +159,10 @@ class Slider {
     nav.style.padding = ".2rem";
     nav.style.boxShadow = "3px 3px 10px #000";
 
+    if (this.options.hideSelector){
+      nav.style.display = "none";
+    }
+
     this.elements.forEach((_, index) => {
       const navLink = document.createElement("a");
       navLink.style.display = "inline-block";
@@ -176,6 +185,10 @@ class Slider {
     thumbsContainer.style.flexWrap = "nowrap";
     thumbsContainer.style.overflowX = "auto";
 
+    if (this.options.hideThumbnails){
+      thumbsContainer.style.display = "none";
+    }
+
     const slides = slidesWrapper.querySelectorAll(".slide");
     slides.forEach((slide, index) => {
       const thumb = document.createElement("div");
@@ -189,7 +202,6 @@ class Slider {
       thumb.style.cursor = "pointer";
       thumb.style.flexShrink = "0";
       thumb.style.position = "relative";
-    
 
       const sourceContent = slide.firstElementChild || slide.cloneNode(true);
       const preview = sourceContent.cloneNode(true);
@@ -301,6 +313,158 @@ class Slider {
       behavior: "smooth",
     });
   }
+showLightbox(startIndex) {
+  let currentIndex = startIndex;
+
+  const overlay = document.createElement("div");
+  overlay.style.position = "fixed";
+  overlay.style.top = "0";
+  overlay.style.left = "0";
+  overlay.style.width = "100vw";
+  overlay.style.height = "100vh";
+  overlay.style.backgroundColor = "rgba(0,0,0,0.9)";
+  overlay.style.display = "flex";
+  overlay.style.alignItems = "center";
+  overlay.style.justifyContent = "center";
+  overlay.style.zIndex = "9999";
+  overlay.style.cursor = "default";
+
+  const lightboxContainer = document.createElement("div");
+  lightboxContainer.style.position = "relative";
+  lightboxContainer.style.display = "flex";
+  lightboxContainer.style.alignItems = "center";
+  lightboxContainer.style.justifyContent = "center";
+  lightboxContainer.style.maxWidth = "90%";
+  lightboxContainer.style.maxHeight = "90%";
+  overlay.appendChild(lightboxContainer);
+const renderSlide = (index) => {
+  lightboxContainer.innerHTML = "";
+
+  const original = this.elements[index].render();
+
+  let img;
+  if (original.tagName === "IMG") {
+    img = original;
+  } else {
+    img = original.querySelector("img");
+  }
+
+  if (img) {
+    const largeImg = document.createElement("img");
+    largeImg.src = img.src;
+    largeImg.style.maxWidth = "90vw";
+    largeImg.style.maxHeight = "90vh";
+    largeImg.style.objectFit = "contain";
+    largeImg.style.pointerEvents = "none";
+    largeImg.style.display = "block";
+    lightboxContainer.appendChild(largeImg);
+  } else {
+    const content = original.cloneNode(true);
+    content.style.width = "90vw";
+    content.style.height = "90vh";
+    content.style.maxWidth = "90vw";
+    content.style.maxHeight = "90vh";
+    content.style.pointerEvents = "none";
+    lightboxContainer.appendChild(content);
+  }
+};
+
+
+  renderSlide(currentIndex);
+
+  // === Use existing slider buttons ===
+  const prevBtn = this.buttons.leftButton.render().cloneNode(true);
+  const nextBtn = this.buttons.rightButton.render().cloneNode(true);
+
+  // Common styles for both nav buttons
+  const baseBtnStyle = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    background: "white",
+    border: "none",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "50px",
+    height: "50px",
+    margin: "1rem",
+    padding: "0",
+    zIndex: "10000",
+    cursor: "pointer",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+  };
+
+  Object.assign(prevBtn.style, baseBtnStyle, { left: "10px" });
+  Object.assign(nextBtn.style, baseBtnStyle, { right: "10px" });
+
+  prevBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    currentIndex =
+      currentIndex - 1 < 0 ? this.elements.length - 1 : currentIndex - 1;
+    renderSlide(currentIndex);
+  });
+
+  nextBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    currentIndex = (currentIndex + 1) % this.elements.length;
+    renderSlide(currentIndex);
+  });
+
+  overlay.appendChild(prevBtn);
+  overlay.appendChild(nextBtn);
+
+  // === Close button ===
+  const closeBtn = document.createElement("div");
+  closeBtn.innerHTML = "✕";
+  closeBtn.style.position = "absolute";
+  closeBtn.style.top = "15px";
+  closeBtn.style.right = "20px";
+  closeBtn.style.fontSize = "2rem";
+  closeBtn.style.color = "white";
+  closeBtn.style.cursor = "pointer";
+  closeBtn.style.zIndex = "10000";
+  closeBtn.style.userSelect = "none";
+  closeBtn.style.transition = "transform 0.2s ease";
+  closeBtn.addEventListener("mouseenter", () => {
+    closeBtn.style.transform = "scale(1.2)";
+  });
+  closeBtn.addEventListener("mouseleave", () => {
+    closeBtn.style.transform = "scale(1)";
+  });
+  closeBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    document.body.removeChild(overlay);
+    document.removeEventListener("keydown", keyHandler);
+  });
+  overlay.appendChild(closeBtn);
+
+  overlay.addEventListener("click", () => {
+    document.body.removeChild(overlay);
+    document.removeEventListener("keydown", keyHandler);
+  });
+
+  const keyHandler = (e) => {
+    if (e.key === "Escape") {
+      document.body.removeChild(overlay);
+      document.removeEventListener("keydown", keyHandler);
+    } else if (e.key === "ArrowLeft") {
+      currentIndex =
+        currentIndex - 1 < 0 ? this.elements.length - 1 : currentIndex - 1;
+      renderSlide(currentIndex);
+    } else if (e.key === "ArrowRight") {
+      currentIndex = (currentIndex + 1) % this.elements.length;
+      renderSlide(currentIndex);
+    }
+  };
+  document.addEventListener("keydown", keyHandler);
+
+  document.body.appendChild(overlay);
+}
+
+
+
 
   render(div) {
     if (div) {

package/layout/spacer.js

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

package/layout/stack.js

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

package/layout/styler.js

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

package/layout/switcher.js

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

package/layout/table.js

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

package/layout/text.js

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

package/layout/textField.js

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

package/layout/ulist.js

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

package/layout/video.js

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

package/layout/withoutNew.js

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

package/layout/wrap.js

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

package/layout/zoomCard.js

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

package/lib/AppleAnim.js

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

package/lib/KeyframeAnimation.js

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

package/lib/Stacker.js

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

package/lib/TransformAnim.js

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

package/lib/cardGetter.js

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

package/lib/designer.js

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

package/lib/elementMapper.js

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

package/lib/linkGetter.js

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

package/lib/scrollvideo.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.81",
+  "version": "1.0.83",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",