nodality 1.0.76 → 1.0.78

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.76
+ * nodality v1.0.78
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -16,6 +16,8 @@ class Animator {
              isMovedUp: false,
               isMovedDown: false
         }
+
+		this.openedElements = new WeakMap();
     }
 
 	isHidden(hide){
@@ -323,49 +325,11 @@ class Animator {
 		window.addEventListener("resize", react);
 		react();
 	}*/
-
-	respad(arr) {
-  const breakpoints = {
-    default: 0,
-    xs: 0,     // less than 576px
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1400
-  };
-
-  // ✅ Normalize breakpoints (string → numeric)
-  arr.forEach(item => {
-    if (breakpoints[item.breakpoint] !== undefined) {
-      item._value = breakpoints[item.breakpoint];
-    } else {
-      item._value = parseInt(item.breakpoint, 10); // handles "1200px" or "768"
-    }
+respad(arr) {
+  this._applyResponsive(arr, (applied) => {
+    console.log("Applying padding for", applied.breakpoint);
+    this.pad(applied.values);
   });
-
-  // ✅ Sort by numeric value (small → large)
-  arr.sort((a, b) => a._value - b._value);
-
-  const react = () => {
-    const width = window.innerWidth;
-    let applied = null;
-
-    // ✅ Find the LAST matching breakpoint (≤ width)
-    for (let i = 0; i < arr.length; i++) {
-      if (width >= arr[i]._value) {
-        applied = arr[i];
-      }
-    }
-
-    if (applied) {
-      console.log("Applying padding for", applied.breakpoint);
-      this.pad(applied.values);
-    }
-  };
-
-  window.addEventListener("resize", react);
-  react();
 }
 
 
@@ -385,10 +349,10 @@ class Animator {
 		react();
 	}*/
 
-	resmar(arr) {
+	_applyResponsive(arr, applyFn) {
   const breakpoints = {
     default: 0,
-    xs: 0,     // less than 576px
+    xs: 0,
     sm: 576,
     md: 768,
     lg: 992,
@@ -396,108 +360,80 @@ class Animator {
     xxl: 1400
   };
 
-  // ✅ Normalize breakpoints (string → numeric)
+  // ✅ Normalize breakpoints
   arr.forEach(item => {
     if (breakpoints[item.breakpoint] !== undefined) {
       item._value = breakpoints[item.breakpoint];
     } else {
-      item._value = parseInt(item.breakpoint, 10); // handles "1200px" or "768"
+      item._value = parseInt(item.breakpoint, 10); // e.g. "700px" → 700
     }
   });
 
-  // ✅ Sort breakpoints (small → large)
+  // ✅ Sort by numeric value ascending
   arr.sort((a, b) => a._value - b._value);
 
+  const defaultItem = arr.find(item => item.breakpoint === "default");
+
   const react = () => {
     const width = window.innerWidth;
-    let applied = null;
+    let applied = defaultItem || null;
 
-    // ✅ Find the LAST matching breakpoint (≤ width)
+    // ✅ Apply the FIRST breakpoint whose max-width matches
     for (let i = 0; i < arr.length; i++) {
-      if (width >= arr[i]._value) {
-        applied = arr[i];
+      const bp = arr[i];
+      if (bp.breakpoint !== "default" && width <= bp._value) {
+        applied = bp;
+        break;
       }
     }
 
     if (applied) {
-      console.log("Applying margin for", applied.breakpoint);
-      this.mar(applied.values);
+      applyFn(applied);
     }
   };
 
+  // Prevent duplicate listeners
+  if (this._responsiveHandler) window.removeEventListener("resize", this._responsiveHandler);
+  this._responsiveHandler = react;
+
   window.addEventListener("resize", react);
   react();
 }
 
-	resprop(arr) {
+resmar(arr) {
+  this._applyResponsive(arr, (applied) => {
+    console.log("Applying margin for", applied.breakpoint);
+    this.mar(applied.values);
+  });
+}
 
-			const breakpoints = {
-	default: 0,
-    xs: 0,     // less than 576px
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1400
-  };
 
-			console.log("RES STYLE");
-						console.log(arr);
- // Save the original styles
+resprop(arr) {
   this.prevStyles = {};
   for (let i = 0; i < this.res.style.length; i++) {
-    let prop = this.res.style[i];
+    const prop = this.res.style[i];
     this.prevStyles[prop] = this.res.style[prop];
-    console.log("kio");
   }
 
-  // ✅ Normalize breakpoints (string → numeric value)
-  arr.forEach(item => {
-    if (breakpoints[item.breakpoint] !== undefined) {
-      item._value = breakpoints[item.breakpoint];
-    } else {
-      item._value = parseInt(item.breakpoint, 10); // handles "1200px" or "768"
-    }
-  });
-
-  // ✅ Sort by numeric value (small → large)
-  arr.sort((a, b) => a._value - b._value);
-
-   console.log("Sorted breakpoints:", arr);
+  this._applyResponsive(arr, (applied) => {
+    console.log("Applying styles for", applied.breakpoint);
 
-  const react = () => {
-    // Reset styles
+    // Reset to previous styles
     for (const key in this.prevStyles) {
       this.res.style[key] = this.prevStyles[key];
     }
 
-    const width = window.innerWidth;
-
-    // Apply only the LAST matching breakpoint
-    let applied = null;
-    for (let i = 0; i < arr.length; i++) {
-      if (width <= arr[i]._value) {
-        applied = arr[i];
-        break; // stop at the first matching
-      }
-    }
-
-    if (applied) {
-      console.log("Applying styles for", applied.breakpoint);
-      for (const key in applied) {
-        if (key !== "breakpoint" && key !== "_value") {
-          this.res.style[key] = applied[key];
-        }
+    // Apply responsive props
+    for (const key in applied) {
+      if (key !== "breakpoint" && key !== "_value" && key !== "values") {
+        this.res.style[key] = applied[key];
       }
     }
-  };
-
-
-	window.addEventListener("resize", react);
-	react();
+  });
 }
 
 
+
 	/*resprop(arr) {
 
 		this.prevBackground = this.res.style.background;
@@ -1566,7 +1502,7 @@ if (operations.includes("gradient")){
 			if (this.text){
 
 			
-			this.res.textContent = this.text; //"a"
+			//this.res.textContent = this.text; //"a"
 			}
 			this.res.style['-webkit-text-fill-color'] = 'transparent';
 	
@@ -1741,7 +1677,32 @@ this.res.appendChild(t);
 	}*/
 
 
+
 	if (operations.includes("spana") || operations.includes("span")) {
+
+	const overlay = document.createElement("div");
+	overlay.setAttribute("id", "oroa");
+Object.assign(overlay.style, {
+  position: "absolute",
+  inset: "0",
+  background: "linear-gradient(90deg, rgb(52,152,219), rgb(26,188,156))",
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+  pointerEvents: "none",
+});
+
+/*
+if (!this.res.querySelector("#oroa") && operations.includes("gradient")){
+// Set text content
+overlay.textContent = "SWIM FREE";
+overlay.style.position = "relative";
+this.res.appendChild(overlay);
+}*/
+
+		// 🛑 prevent re-creating spans on resize
+  if (this.res && this.res.querySelector('span')) return;
+
+  
     this.res = this.resCopy;
     this.res.textContent = ""; // clear current content
 
@@ -1865,6 +1826,51 @@ window.addEventListener(this.openTag, () => {
 
 	  } 
 
+	  if (this.options.animation && this.options.animation.op.fireAt === "inview") {
+  let ass = this.options.animation.op;
+  this.res.animate(ass.keyframesClose, { duration: 0, fill: "forwards" });
+
+  let hasOpened = false;
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting && !hasOpened) {
+        hasOpened = true;
+        this.res.animate(ass.keyframesOpen, ass.openOptions);
+        observer.disconnect();
+      }
+    });
+  });
+
+  observer.observe(this.res);
+}
+/*
+if (!this.openedElements.get(this.res)) {
+  const ass = this.options.animation.op;
+
+this.res.querySelectorAll('span').forEach(span => {
+  if (!span._hasOpened) {
+    span.animate(ass.keyframesClose, { duration: 0, fill: "forwards" });
+
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !span._hasOpened) {
+          span._hasOpened = true;
+          span.animate(ass.keyframesOpen, ass.openOptions);
+          observer.disconnect();
+        }
+      });
+    });
+
+    observer.observe(span);
+  }
+});
+}*/
+
+
+
+
+/*
 	  if (this.options.animation && this.options.animation.op.fireAt && this.options.animation.op.fireAt === "inview") {
 
 		let ass = this.options.animation.op;
@@ -1888,7 +1894,7 @@ window.addEventListener(this.openTag, () => {
 
 		// Start observing the element
 		observer.observe(this.res);
-}
+}*/
 	
 		
 	}

package/layout/audio.js

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

package/layout/audionew.js

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

package/layout/base-2.js

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

package/layout/base.js

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

package/layout/betaDesktopBar.js

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

package/layout/betaMobileBar.js

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

package/layout/box.js

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

package/layout/button.js

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

package/layout/cards.js

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

package/layout/center.js

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

package/layout/checkbox.js

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

package/layout/circle.js

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

package/layout/cleanRow.js

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

package/layout/code.js

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

package/layout/container.js

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

package/layout/custom.js

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

package/layout/divImage.js

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

package/layout/dropdown.js

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

package/layout/dropdown2025.js

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

package/layout/emptyElement.js

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

package/layout/externalStylesheet.js

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

package/layout/flexCard.js

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

package/layout/flexGrid.js

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

package/layout/flexrow.js

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

package/layout/footer.js

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

package/layout/formComponents/custom.js

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

package/layout/formComponents/dataList.js

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

package/layout/formComponents/floatingInput.js

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

package/layout/formComponents/form-all.js

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

package/layout/formComponents/form.js

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

package/layout/formComponents/imagePicker.js

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

package/layout/formComponents/picker.js

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

package/layout/formComponents/radio.js

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

package/layout/formComponents/radiogroup.js

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

package/layout/formComponents/range.js

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

package/layout/free.js

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

package/layout/grid-new.js

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

package/layout/grid.js

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

package/layout/gridSwitcher.js

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

package/layout/group.js

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

package/layout/header.js

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

package/layout/horizontalScroller.js

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

package/layout/image-old.js

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