nodality 1.0.218 → 1.0.220

package/layout/animator.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.218
+ * nodality v1.0.220
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -21,7 +21,6 @@ class Animator {
 
 		// Auto-subscribe every component to Theme so dark-mode "just works"
 		// even when the user never declared a per-component theme map.
-		// Subclasses set this.res later in their own constructor; we re-apply
 		// in a microtask, by which time the synchronous chain has finished.
 		if (typeof document !== "undefined") {
 			this._themeUnsub = Theme.subscribe((mode) => this._applyTheme(mode));
@@ -398,7 +397,6 @@ class Animator {
 			let w = obj.border.width;
 			this.res.style.border = w ? `${w}px solid transparent` : "1px solid transparent";
 
-			//this.res.style.border = "1px solid transparent";
 		}
 
 
@@ -429,7 +427,6 @@ class Animator {
 			// start snapping instead of easing.
 			this.res.style.transitionProperty =
 				`background-color, color, border, box-shadow, transform`;
-			//  this.transition(obj.animation);
 		}
 
 		// remember the pre-hover transform so scale-on-hover can be undone cleanly
@@ -448,19 +445,12 @@ class Animator {
 		    }
 
 
-
-
-			/*if (obj.border){
-				this.res.style.border = "1px solid transparent";
-			}*/
 			
 			
 			
-			// // // console.log(`OUT: ${this.res.style.backgroundColor}`);
 		}
         
         this.res.onmouseover = () => {
-			//this.res.style.backgroundColor = "#ffffff"; //obj.background; //`#ffffff`;
 			//alert("OJHOIH")
 		//	alert(obj.background);
 			this.res.style.color = obj.color;
@@ -488,11 +478,7 @@ class Animator {
 				this.res.style.boxShadow = obj.boxShadow;
 			}
 
-			//if (this.options && this.options.borderObj){ was here
 				
-				//let o = this.options.borderObj;
-				//this.res.style.border = `${o.width}px solid ${o.color}`;
-				//this.res.style.borderRadius = `${o.radius}`;
 			//}
 
 			// // // console.log(`OVER: ${obj.background}`);
@@ -573,8 +559,6 @@ class Animator {
 	}
 
 
-
-
 	setAny(obj){
 		this[Object.keys(obj)[0]] = [Object.values(obj)[0]];
 	}
@@ -588,11 +572,9 @@ class Animator {
 	}
 
 
-
 	// [{ breakpoint: "sm" , values: [...]}]
 
 
-
 /**
  * @private
  * Sets up the single resize listener and runs all registered tasks.
@@ -886,11 +868,6 @@ respad(arr) {
 }
 
 
-
-
-
-
-
 resmar(arr) {
 
     // --- 1. CONFIGURATION & NORMALIZATION ---
@@ -971,8 +948,6 @@ resmar(arr) {
 }
 
 
-
-
 	/**
 	 * Tells the caller they passed an option that no longer exists as the
 	 * way to do this, and what to use instead.
@@ -982,6 +957,58 @@ resmar(arr) {
 	 * ordinary paths and blocked the page for every visitor, and the ban is
 	 * worth more than making this one warning louder.
 	 */
+	color(color){
+		this.res.style.color = color;
+		return this;
+	}
+
+	onTap(handler){
+		this.res.addEventListener("click", handler);
+		return this;
+	}
+
+	setArea(area){
+		this.res.style.gridArea = area;
+		return this;
+	}
+
+
+	font(font){
+		this.res.style.fontFamily = font;
+		return this;
+	}
+
+	radius(v) {
+		this.res.style.borderRadius = typeof v === "number" ? `${v}px` : v;
+		return this;
+	}
+
+	width(percentage){
+		this.res.style.width = percentage;
+		return this;
+	}
+
+    scale(obj){
+        
+        let previousWidth = this.res.style.width;
+          
+        this.res.style.transition= "0.5s all";
+      //  alert(previousWidth);
+        
+        this.res.addEventListener("mouseover", () => {
+            let previousWidth = this.res.style.width;
+             this.res.style.transform = "scale(1.04)";
+        });
+        
+         this.res.addEventListener("mouseout", () => {
+            let previousWidth = this.res.style.width;
+              this.res.style.transform = "scale(1.0)";
+        });
+        
+        
+        return this;
+    }
+
 	deprecatedOption(name, replacement) {
 		console.error(`nodality: \`${name}\` is deprecated — use \`${replacement}\` instead.`);
 		return this;
@@ -1098,7 +1125,6 @@ resmar(arr) {
 	}
 
 
-
 	mar(arr){
 
 		// Shorthand: mar: "center" → margin: 0 auto
@@ -1187,7 +1213,6 @@ resmar(arr) {
 		//alert(obj.col);
 		this.res.style.gridColumn = obj.col;
 		this.res.style.gridRow = obj.row;
-		//this.res.style.border = "1px solid green";
 		return this;
 	  }
 
@@ -1264,7 +1289,6 @@ resmar(arr) {
         }
 
 
-
 		const display6 = "calc(1rem + 0.5vw)"; // calc(1rem + 1.2vw)
         
         if (name === "S6"){
@@ -1295,7 +1319,6 @@ resmar(arr) {
     
 
 
-
 setPref(id){
 	this.preffersId = id;
 }
@@ -1306,9 +1329,6 @@ setClass(id){
 }
 
 
-
-
-
   //--------- START OF INDEPENDENT
 
 
@@ -1324,7 +1344,6 @@ setTags(obj){
 }
 
   chainReact(queries, id, keep) { // we use this
-	//this.cssGen(queries, id, this.class, this.class !== undefined); // 02/04/2024 10:43:40 Nice!!!
 
 	this.ap = false;
 	this.cta = 0;
@@ -1415,13 +1434,10 @@ setTags(obj){
 	  this.res.style['-webkit-text-fill-color'] = '';
 	  this.res.style['-webkit-text-stroke-color'] = "";
 	  this.res.style['-webkit-text-stroke-width'] = "";
-	//  this.res.style['-webkit-background-clip'] = 'unset';
 	  this.res.style.filter = "";
 	 
-	  //if (operations.includes("gradient")){
 	 
 
-	//  if (operations.includes("gradient")) {
 
 	
  if (this.options.background){
@@ -1430,7 +1446,6 @@ setTags(obj){
 	  } else {
 				//alert("/")
 				//console.log("///-Hello-///")
-		// this.res.style.background = "black"; always set backgrohnd to shapes dangerous affects divs
 	  }
 	 // }
 	  
@@ -1445,7 +1460,6 @@ if (operations.includes("gradient")){
 	  // NO CONITION, ALWAYS!!!!
 	  if (operations.includes("gradient") || operations.includes("shadow")){
 			this.res.style.position = "relative";
-			//this.res.style.zIndex = -1; 
 			// Navigation might go over it give nav higher zIndex
 	  } // FIX 23:31:56 10/11/24
 
@@ -1461,7 +1475,6 @@ if (operations.includes("gradient")){
 
 		if (this.getType() === "FlexRowLayoutElement" || this.getType() === "LayoutWrapperElement"){
 			// alert("///")
-			// this.res.style.opacity = 0.3;
 			//alert(`${w}px solid orange`);
 			this.res.style.border = `${typeof w === 'number' ? w + 'px' : w} solid orange`;
  this.res.style.display = "inline-block"; // or block
@@ -1476,13 +1489,11 @@ if (operations.includes("gradient")){
 			if (this.text){
 
 			
-			//this.res.textContent = this.text; //"a"
 			}
 			this.res.style['-webkit-text-fill-color'] = 'transparent';
 	
 			this.res.style['-webkit-text-stroke-color'] =  gl;//"orange";
 			this.res.style['-webkit-text-stroke-width'] = `${w}`;
-		//this.res.style.display = "inline-block"; // important for transform
 			//alert("HIOH")
 		}
 	  }
@@ -1499,7 +1510,6 @@ if (operations.includes("gradient")){
 	 }
 
 	  if (operations.includes("gradient")){
-		// alert(this.getType());
 		// not working with blast
 
 		// Children are cleared when setting gradient to wrap and resizing
@@ -1508,17 +1518,14 @@ if (operations.includes("gradient")){
 		if (this.getType() !== "LayoutWrapperElement" && this.getType() !== "FlexRowLayoutElement"){
 			this.res.style['-webkit-text-fill-color'] = 'transparent';
 		}
-		//alert(this.globalGradient);
 
 		// globalGradient is set in element "set" method
 		this.res.style.background = this.globalGradient;// "linear-gradient(to left, #3498db, #1abc9c)";
 		
 		
 	//	console.log("LGT");
-	//	console.log(this.getType());
 		if (this.getType() !== "LayoutWrapperElement" && this.getType() !== "FlexRowLayoutElement" ){
 		// alert("OJIOJIOIO")
-		//alert(this.getType());
 			this.res.style['background-clip'] = 'text'; // 19:23:05 05/05/2024 -webkit was a problem here!
 		}
 	
@@ -1565,9 +1572,6 @@ if (this.getType() === "FlexRowLayoutElement" || this.getType() === "LayoutWrapp
 }
 
 
-
-
-			//if (this.getType() === "FlexRowLayoutElement"){
 			//} else {
 				
 				
@@ -1589,7 +1593,6 @@ if (this.getType() === "FlexRowLayoutElement" || this.getType() === "LayoutWrapp
   }
 
 
-
 	if (operations.includes("spana") || operations.includes("span")) {
 
 	const overlay = document.createElement("div");
@@ -1670,7 +1673,6 @@ if (this.options.animation && !this.hasAnimated && !this.options.animation.op.fi
 
 this.hasAnimated = true;
 let ass = this.options.animation.op;
-//alert(this.openTag);
 
  this._on(window, /*this.openTag*/"sidebar:open", () => {
 		
@@ -1683,18 +1685,13 @@ let ass = this.options.animation.op;
   });
 
 
-
 	this.res.animate(ass.keyframesClose, {
 		duration: 0,
 		fill: "forwards"
 	   });
 
 
-
-		//this.res.animate(ass.keyframesOpen, ass.openOptions);
 	   if (this.openTag && this.closeTag){
-		// alert("ONA" + this.openTag);
-		//alert(this.openTag);
 		
 this._on(window, this.openTag, () => {
 		this.res.animate(ass.keyframesOpen, ass.openOptions);
@@ -1751,8 +1748,6 @@ this._on(window, this.openTag, () => {
 }
 
 
-
-
 	
 		
 	}
@@ -1778,18 +1773,10 @@ this._on(window, this.openTag, () => {
 // 
 
 
-
-
-
 	if (obj.transform || (obj.op /*&& obj.op.transform*/)){
 		
 
 
-
-
-
-
-
 		let transform = obj.op;//transform; 
 
 		if (!obj.transform ){ // 21:48:05 Nice!!! 30/03/25
@@ -1921,7 +1908,6 @@ this._on(window, this.openTag, () => {
 		}
 
 		// 17:37:15 a comma was missing
-		//this.res.style.transform = transformValue;
 		(this.blastTarget || this.res).style.transform = transformValue;
 		this.res.style.opacity = opacity;
 	} else {
@@ -1988,7 +1974,6 @@ this._on(window, this.openTag, () => {
 	
 		// Apply reset transform if any values were provided
 		if (resetTransformValue) {
-		//	this.res.style.transition = "transform 0.5s ease-in-out"; // Reset transition
 			this.res.style.transform = resetTransformValue.trim(); // Remove trailing space
 		}
 	}
@@ -2025,7 +2010,6 @@ if (transform.on){
 	}
 
 
-
 maxWidth(w){
     this.res.style.maxWidth = w;
     return this;
@@ -2038,17 +2022,6 @@ removeQuotesFromFirstWord(jsonString) {
   
 
 
-
-
-
-
-
-
-
-
-
-
-
     
 } // 2600-1870
 

package/layout/audio.js

@@ -1,86 +1,17 @@
 /*!
- * nodality v1.0.218
+ * nodality v1.0.220
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
 import {Animator} from "./animator.js";
 
-/*class Wrap {
-	constructor(){
-		this.setup();
-	}
-	
-	setup(){
-		let gr = document.createElement("div");
-		gr.style.padding = 0;
-		gr.style.margin = 0;
-		this.res = gr;
-	}
-	
-	width(w, shouldCenter){
-		this.res.style.width = w;
-		
-		if (shouldCenter){
-		this.res.style.marginLeft = "auto";
-		this.res.style.marginRight = "auto";
-		}
-		return this;
-	}
-	
-	
-	size(w, h){
-		this.w = w;
-		this.h = h;
-		
-		if (this.w){
-			this.res.style.width = this.w;
-		} else {
-			this.res.style.width = window.innerWidth;
-		}
-		
-	if (this.h){
-			this.res.style.height = this.h;
-		} else {
-			this.res.style.height = window.innerHeight;
-		}
-		
-		
-		return this;
-	}
-	
-	items(els){
-		for (var i = 0; i < els.length; i++){
-			this.res.appendChild(els[i].render().render());
-		}
-		return this;
-	}
-	
-	
-	
-	border(color, width){
-		this.res.style.border = `${width}px solid ${color}`;
-		return this;
-	}
-	
-	render(el){
-		if (el){
-			document.querySelector(el).appendChild(this.res);
-		} else {
-			return this.res;
-		}
-		
-	}
-}*/
-
-
 
 	class Audio extends Animator {
 	constructor(url, /*obj*/) {
 		super();
 		this.url = url;
 		this.res = null;
-		//this.setup(obj);
 		
 		this.setup();
 	}
@@ -95,23 +26,6 @@ import {Animator} from "./animator.js";
 			this.res.setAttribute("controls", "controls");
 			
 			
-			/*var x = document.createElement("VIDEO");
-
-  if (x.canPlayType("video/mp4")) {
-    x.setAttribute("src","movie.mp4");
-  } else {
-    x.setAttribute("src","movie.ogg");
-  }
-
-  x.setAttribute("width", "320");
-  x.setAttribute("height", "240");
-  x.setAttribute("controls", "controls");
-  document.body.appendChild(x);
-		
-		
-		
-		
-		*/
 		}
 		
 		
@@ -119,16 +33,8 @@ import {Animator} from "./animator.js";
 		size(w/*, h*/) {
 			
 			this.res.style.width = w;
-			//this.res.style.height = w;
 			
 			
-		/*if (w && h) {
-			this.res.style.width = w;
-			this.res.style.height = h;
-		} else {
-			this.res.style.width = w;
-			this.res.style.height = w;
-		}*/
 
 		return this;
 	}

package/layout/audionew.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.218
+ * nodality v1.0.220
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -70,7 +70,4 @@ import {Animator} from "./animator.js";
  
 
 
-//var _oldAudio = Audio;
-//Audio = function(...args) { return new _oldAudio(...args) };
-
 export { NAudio };

package/layout/base.js

@@ -1,23 +1,16 @@
 /*!
- * nodality v1.0.218
+ * nodality v1.0.220
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
 
-import {Animator} from "./animator.js";
-
 class Base {
 	constructor(/*items*/){
-		//this.items = items ?? [];
 		//Base.prototype.items = items;
 		this.oldLength = 0;
 	}
 	
 	
-	/*set itemso(itemsa) {
-		 this.items = itemsa;// (itemsa);
-		Base.prototype.items = itemsa;
-	}*/
 	
 	
 	observe(obj) {
@@ -104,40 +97,6 @@ class Base {
 		//node.insertBefore(p, node.childNodes[node.childNodes.length]);
 		document.body.appendChild(p);
 	}
-	
-	
-	
-	
-	
-	/*adjustState(newData){
-		
-		let node = document.querySelector(this.el);
-			
-		
-		alert("LENAX " + node.childNodes[0].children.length);
-		
-		
-		var lenax = node.childNodes[0].children.length;
-		
-		//var len = node.childNodes[0];// 1
-		alert(node.childNodes[0]);
-			while (node.firstChild){
-				node.removeChild(node.lastChild);
-			}
-			
-			this.render(this.el).render(this.el);	 // rendra ===> build
-	}*/
-	
-	
-	
-	
-	 toNode(htmlString) {
-  var div = document.createElement('div');
-  div.innerHTML = htmlString.trim();
-
-  // Change this to div.childNodes to support multiple top-level nodes
-  return div.firstChild; 
-}
 
 
 	
@@ -149,9 +108,7 @@ class Base {
 	toCode(){
 		return [""];
 	}
-	
-	toHTML(el){
-		return this.render(el).render(el).innerHTML; // // rendra ===> build
-	}
+
+
 }
 export { Base };

package/layout/beta-desktop-bar.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.218
+ * nodality v1.0.220
  * (c) 2026 Filip Vabrousek
  * License: MIT
  */
@@ -65,7 +65,6 @@ class /*Beta*/DesktopBar extends Animator { // add set method for background col
         // this and overrides it.
         this.navbar.style.padding = '1rem';
         this.navbar.style.backgroundColor = this.obj.background ?? '#333';
-        //this.navbar.style.color = 'white';
 
         this.navbarHeader.style.display = 'flex';
         this.navbarHeader.style.alignItems = 'center';
@@ -86,10 +85,6 @@ class /*Beta*/DesktopBar extends Animator { // add set method for background col
         return this;
     }
 
-    /*addNavItem(navItemElement) {
-        this.navContent.appendChild(navItemElement);
-        return this;
-    }*/
 
     add(ele){
         this.items = ele;
@@ -105,11 +100,6 @@ class /*Beta*/DesktopBar extends Animator { // add set method for background col
         let items = this.items.map(it => it.toCode()).flatMap(x => x);
 
         // console.warn(items.join("").replace(/}\)/g, '}),'));
-      /* console.log(this.items[3]);
-
-        if (this.items[3].toCode().length != 1){
-            alert("Wrong link codegen");
-        }*/
 
         //   ${items.join("")}
         return `new DesktopBar().set(${this.removeQuotesFromFirstWord(JSON.stringify(this.obj))}).add([
@@ -130,7 +120,6 @@ class /*Beta*/DesktopBar extends Animator { // add set method for background col
         }
 
         return this.navbar;
-       // container.appendChild(this.navbar);
     }
 }