nodality 1.0.215 → 1.0.217

package/layout/clean-row.js

@@ -1,686 +0,0 @@
-/*!
- * nodality v1.0.215
- * (c) 2026 Filip Vabrousek
- * License: MIT
- */
-
-import {Animator} from "./animator.js";
-
- 
-class CleanRow extends Animator {
-	constructor(frs, saveEl) {
-		super();
-		this.code = []; // 191455
-		this.saveEl = saveEl;
-		this.frs = frs;
-		this.res = null;
-		this.setup();
-		this.responsive();
-		this.code.push(", new FlexRow()");
-	}
-
-	getType(){
-		return "FlexRowLayoutElement";
-	}
-
-
-
-	set(options){
-
-        let obj = options;
-
-
-		if (obj && obj.id && obj.stroke || obj && obj.id && obj.gradient || obj && obj.id && obj.span || obj && obj.id && obj.backgroundOp){
-	
-						if (obj.gradient){
-						this.globalGradient = obj.gradient.op.gradient;
-			
-						} // OK
-			
-						if (obj.stroke){
-						super.setAny({globalBlast: `${obj.stroke.op.width} ${obj.stroke.op.color}`});
-						}
-			
-						// Filter just the elements with layout element
-						let ft = [obj.stroke, obj.gradient, obj.animation, obj.span, obj.backgroundOp]//obj.gradient.filter(el => el.op.name !== "layout");			
-						ft = ft.filter(el => el != undefined);
-			
-						let arr = [];
-			
-						for (var i = 0; i < ft.length; i++){
-							arr.push({
-								range: ft[i].range,
-								log: ft[i].op.name,
-								target: ft[i].target
-							});
-						}
-			
-						  this.res.setAttribute("id", obj.id);
-						  this.betaReact(arr, obj.id);
-						 // this.protoReact(arr, obj.id);
-					}
-
-                    //-------------------------------------------------------------------------------------------
-                    if (options.padding){
-                        this.padding(options.padding);
-                    }
-            
-                    if (options.background){
-                        this.res.style.backgroundColor = "#ecf0f1";
-                        this.res.style.cornerRadius = "#3rem";
-                    }
-            
-                    if (options.alignTo){
-                      
-                        this.res.style.justifyContent = options.alignTo;
-                
-                    }
-            
-                    
-                    
-            
-            
-            
-                    if (options.background){
-                        this.res.style.backgroundColor = options.background;
-                        this.code.push(`\n background: "${options.background}",`);
-                    }
-            
-                    if (options.justify){
-                        this.res.style.justifyContent = options.justify;
-                        this.code.push(`\n justify: "${options.justify}",`);
-                    }
-            
-                    if (options.border) {
-                    
-                        if (options.border[0] === "top") {
-                            this.res.style.borderTop = `${options.border[1]} solid white`;
-                        //  border: ["top", "1px"],
-                        }
-            
-                        if (options.border[0] === "all") {
-                            this.res.style.border = `${options.border[1]} solid white`;
-                        //  border: ["top", "1px"],
-                        }
-            
-                    
-            
-                        this.code.push(`\n border: ["${options.border[0]}", "${options.border[1]}"],`);
-                    }
-            
-                    if (options.borderObj){
-                        this.res.style.border = `${options.borderObj.width} solid ${options.borderObj.color}`
-                        this.res.style.borderRadius = options.borderObj.radius; 
-                        
-                        let stringified = JSON.stringify(options.borderObj);
-                        this.code.push(`\n borderObj: ${stringified},`);
-            
-                        /*borderObj: {
-                            side: "all",
-                            width: "3px",
-                            color: "rgba(236, 227, 215, 0.5)"
-                        },*/
-                    }
-            
-                    options.width && (this.res.style.width = options.width);
-                    options.width && this.code.push(`\n width: "${options.width}",`);
-            
-                    options.height && (this.res.style.height = options.height);
-                    options.height && this.code.push(`\n height: "${options.height}",`);
-            
-            
-                    if (options.align){
-                         let stringified = JSON.stringify(options.align);
-                         this.res.style.alignItems = "flex-start";
-                         this.code.push(`\n alignIts: "flex-start",`);
-                         this.res.style.alignItems = "flex-start";
-                    }
-                
-                    // options.align && alert("K")
-            
-                    options.wrap && this.wrap();
-                    options.wrap && this.code.push(`\n wrap: true,`)
-            
-                    if (options.alignIts){
-                        let stringified = JSON.stringify(options.alignIts);
-                         this.res.style.alignItems = "flex-start";
-                        this.code.push(`\n alignIts: ${stringified},`);
-                    
-                }
-                    // options.alignIts && alert("J");
-                    //alignIts: "flex-start",
-            
-                    options.owrap && this.onlyWrap();
-                    options.owrap && this.code.push(`\n owrap: true,`)
-            
-                    if (options.owrap != undefined){
-            
-                    
-                    if (options.owrap === false){ // DANGEROUS
-                        // alert("FIRES AFTER OJ");
-                        this.res.style.flexWrap = "nowrap";
-                        this.res.style.background = "yellow";
-                    }
-                }
-            
-                //	console.warn(options);
-            
-                //	options.columnAlways && (this.columnAlways = true);
-                     options.columnAlways && alert("JIJ" + options.columnAlways);
-            
-                     options.toColumn && this.toColumn(options.toColumn); // OK
-            
-                
-                      options.column && this.makeCol(); // OK
-            
-            
-            
-                    if (options.colat){
-                        
-                        options.colat && this.toColumnAt(options.colat);
-                        this.code.push(`\n colat: "${options.colat}",`);
-                    }
-                     
-            
-                    //alert(options.arrpad);
-            
-            
-            
-                //	alert(options.multipad);
-            
-            
-                    if (options.align){
-                        //alert("K")
-                        
-                        this.makeJustify(options.justify);
-                    //	 this.setAlign(options.align);
-                    }
-            
-                    if (options.justify){
-                        this.makeAlign(options.justify);
-                    //	 this.setAlign(options.align);
-                    }
-                    //this.res.style.justifyContent = "flex-start";
-                    //alert(this.res.style.justifyContent);
-                    if (options.justifo === "flex-start"){
-                    
-                        this.res.style.justifyContent = "flex-start";
-                    } else {
-                        //alert(options.justify);
-                    }
-                    
-                    options.radius && (this.res.style.borderRadius = "1rem");
-//---------------------------------------------------------------------------------
-
-
-
-
-
-
-                    return this;
-	}
-
-	
-
-
-	setArea(area){
-		this.res.style.gridArea = area;
-		return this;
-	}
-
-	toColumnAt(at){ // THIS IS THE ONE!!!
-
-
-		if (!this.columnAlways){
-// alert(this.columnAlways);
-
-		
-		const toCol = () => {
-			
-			let media = window.matchMedia(`(max-width: ${at})`);
-			let mobileMedia = window.matchMedia(`(max-device-width: 415px)`);
-
-			if (media.matches || mobileMedia.matches){
-				
-				this.res.style.flexDirection = "column";
-			} else {
-				this.res.style.flexDirection = "row";
-
-			}
-		}
-
-		toCol();
-		window.addEventListener("resize", toCol);
-	}
-	
-
-		  
-	
-
-		return this;
-	}
-
-// 1:32:56, 1:33:24 talk 17/08
-
-
-	onlyWrap(){
-		this.res.style.flexWrap = "wrap";
-		return this;
-	}
-
-	wrap(){
-		this.res.style.flexWrap = "wrap";
-		this.res.style.justifyContent = "space-between";
-		return this;
-	}
-
-
-	aligns(st){
-
-		if (st === "start"){
-			this.res.style.alignItems = "flex-start";
-		}
-
-
-		if (st === "end"){
-			this.res.style.alignItems = "flex-end";
-		}
-
-		if (st === "center"){
-			this.res.style.alignItems = "center";
-		}
-
-
-		// alert(st);
-
-		return this;
-	}
-
-
-	toColumn(at){
-		 alert("ON")
-
-		const toCol = () => {
-			let media = window.matchMedia(`(max-width: ${at})`);
-			let mobileMedia = window.matchMedia(`(max-device-width: 415px)`);
-			// alert(media);
-
-			//console.log(mobileMedia);
-
-			if (media.matches || mobileMedia.matches){
-				this.res.style.flexDirection = "column";
-			} else {
-				this.res.style.flexDirection = "row";
-
-			}
-		}
-
-		toCol();
-		window.addEventListener("resize", toCol);
-	
-
-		
-	
-
-		return this;
-	}
-
-
-	toCode(){
-		return this.code; // 21:40:09
-	}
-
-
-	borderAround(data){
-		this.res.style.border = data;
-		return this;
-	}
-
-	
-
-	cornerRadius(el){
-		this.res.style.borderRadius = el;
-		return this;
-	}
-	
-
-
-
-	makeJustify(opt){
-		//alert("KJ");
-		if (opt === "start"){
-
-			// alert("HJ");
-		this.res.style.justifyContent = "flex-start";
-		}
-
-		return this;
-	}
-
-
-	makeAlign(opt){
-		//alert("KJ");
-		if (opt === "center"){
-
-			// alert("HJ");
-		this.res.style.alignItems = "center";
-		} else {
-
-		
-
-
-			
-				//alert(opt)
-				this.res.style.justifyContent = opt;
-			//	let stringified = JSON.stringify(options.alignTo);
-				//this.code.push(`\n alignTo: "${stringified}",`);
-		}
-
-		return this;
-	}
-
-	
- makeCol(){
-	this.res.style.flexDirection = "column";
-	return this;
- }
-
-
-
-
-
-	padding(vals){
-		this.res.style.padding = vals;
-		return this;
-	}
-	
-    
-    toColumn(){
-        this.res.style.flexDirection = "column";
-        return this;
-    }
-    
-    
-    
-    setClass(classa){
-         this.res.setAttribute("class", classa);
-        return this;
-    }
-    
-
-	setup() {
-		let flex = document.createElement("div");
-		flex.style.display = "flex";
-		flex.style.justifyContent = "space-around";
-        flex.style.alignItems = "center";
-		flex.style.margin = 0;
-		// flex.style.width = "100%";
-		this.res = flex;
-
-
-		//console.log("FREDERICK!");
-		//console.log(this);
-
-		
-
-		return this;
-
-		// 19:36:06 Houdini Roger kilimanjaro 06/03 audiovisual
-	}
-
-
-	noSpaceAround(){
-		this.res.style.justifyContent = "";
-		return this;
-	}
-
-
-
-
-	itemAlignCenter(){
-		this.res.style.justifyContent = "center";
-        this.res.style.alignItems = "center";
-		return this;
-	}
-
-
-	/*
-	{
-		if 
-	}
-	
-	*/
-    
-    
-    
-    
-     frame(obj){
-        this.res.style.width = obj.width;
-        this.res.style.height = obj.height;
-         
-         
-         let media = window.matchMedia("(max-device-width: 415px)");
-         
-         if (media.matches && obj.mobile){
-              this.res.style.width = obj.mobile
-         }
-         
-        return this;
-    }
-    
-     background(color){
-        this.res.style.background = color;
-        return this;
-    }
-    
-    radius(val){
-        this.res.style.borderRadius = `${val}px`;
-        return this;
-    }
-    
-    shadow(x, y, radius){
-          this.res.style.boxShadow = "0px 1px 10px 0px rgb(145 145 145)"; //`${x}px ${y}px ${radius}px #000`;
-        return this;
-    }
-    
-    onTap(e){
-		this.res.addEventListener("click", e);
-		return this;
-	}
-	
-	
-	items(arr) {
-		//console.log("2 images enter flex row")
-		//console.warn(arr); // 2 images enter flexRow or there is problem in FlexRow code gen
-
-		//console.warn(this.res);
-
-		this.els = arr;
-
-		this.code.push(".items([");
-
-/*
-		console.log("/FL ITEM---");*/
-
-		for (var i = 0; i < arr.length; i++) {
-			
-		
-			
-			
-		//	console.error(arr[i].render);
-			
-		if (arr[i] != undefined){
-		if (arr[i].render instanceof Function){ // 170736
-				let r = arr[i].render();
-				// r.style.width = "100%";
-				   //r.style.flex = 1;
-				   this.res.appendChild(r);
-			} else {
-				this.res.appendChild(arr[i]);
-			}
-		}
-		
-
-
-			//this.code.push("L");
-
-
-		/*	if (arr[i].toCode instanceof Array){
-				// console.warn(arr[i].toCode().flatMap(x => x));
-				this.code.push(arr[i].toCode().flatMap(x => x));
-			} else {
-				if (arr[i].toCode){
-					this.code.push(arr[i].toCode());
-					
-	
-	
-					
-				}
-			}*/
-
-
-			if (arr[i] != undefined){
-			
-
-			
-			
-			if (arr[i].render instanceof Function){
-				let item = arr[i].render();//.render();
-				this.res.appendChild(item);
-			
-	
-				if (arr[i].toCode !== undefined){
-				//	console.log("arr[i]");
-				//	console.log(arr[i]);
-					 this.code.push(arr[i].toCode().flatMap(l=>l)); // 20:10:00 Nice!
-				// 12:25:10 Wow!!!
-
-
-				// Image codegen problem
-			}
-		}
-	}
-			
-			
-
-		
-			//console.log("FREDERICK!");
-			//console.log(this.code);
-
-			//this.code = this.code.flatMap(x => x).flatMap(x => x);
-		}
-
-
-		this.code.push("])");
-
-
-		// this.code = this.code.flatMap(x => x);
-	//	console.log(this.code);
-
-
-		
-		return this;
-	}
-
-
-
-	/*
-	
-		this.code.push(".add([ \n");
-		for (var i = 0; i < els.length; i++){
-			let item = els[i].render();//.render();
-			this.res.appendChild(item);
-
-
-			if (els[i].toCode !== undefined){
-
-				 this.code.push(els[i].toCode().flatMap(l=>l)); // 20:10:00 Nice!
-			// 12:25:10 Wow!!!
-
-			
-		}
-		}
-		
-		//122616 06/03 Houdini M2 chip
-		this.code.push("])");
-
-
-		return this;
-	*/
-
-
-	
-
-	adjustRatiosForLayout(){
-
-		if (this.els[1].getWidth == undefined){
-			return this;
-		}
-
-		if (this.els[1].getHeight == undefined){
-			return this; // 171653 fix
-		} // 171354
-
-		window.addEventListener("resize", () => {
-			this.resizeValues();
-		});
-
-
-		this.resizeValues();
-
-
-
-
-		// 18:29:04
-		
-		return this;
-	}
-	
-
-	resizeValues(){
-		let newWidth = window.innerWidth * 0.7;
-			let aspect = (this.els[1].getHeight() / this.els[1].getWidth());
-			let goal = newWidth * aspect;
-	
-			this.res.children[0].style.height = `${goal}px`;
-			this.res.children[0].style.width = `30%`;
-			this.res.children[1].style.width = `70%`;
-	}
-	
-	responsive(h){
-		let media = window.matchMedia(`(max-device-width: 415px)`);
-		
-		const adjust = () => {
-			if (window.innerWidth < h || media.matches){
-			this.res.style.gridTemplateColumns = "1fr";
-		} else {
-			this.res.style.gridTemplateColumns = "1fr 1fr";
-		}
-		}
-		
-		
-		if (window.innerWidth < h || media.matches){
-			this.res.style.gridTemplateColumns = "1fr";
-		} else {
-			this.res.style.gridTemplateColumns = "1fr 1fr";
-		}
-		
-		
-		window.addEventListener("resize", adjust);
-		
-		
-		return this; // :D
-		return this;
-	}
-	
-	
-	render(el) {
-		// console.log("BORDER:" + this.res.style.border);
-		if (el){
-		document.querySelector(el).appendChild(this.res);
-		} else {
-			return this.res;
-		}
-	}
-}
-export { CleanRow };