nodality 1.0.0-beta.1

package/layout/offsetContainer.js

@@ -0,0 +1,395 @@
+import {Animator} from "./animator.js";
+
+class OffsetContainer extends Animator{ 
+	constructor() {
+        super();
+		this.res = null;
+		this.code = [];
+		//this.setup();
+	}
+
+	toCode(){
+		return this.code;
+	}
+
+
+	resetColumns(){
+		this.res.style.gridTemplateColumns = "";
+		this.res.style.gridTemplateRows = "";
+		return this;
+	}
+
+	set(obj){
+		 obj.align && this.flexAlign(obj.align);
+		 obj.toStart && this.toStart(obj.toStart);
+		 obj.columns && this.columns(obj.columns);
+		 obj.width && (this.res.style.width = obj.width);
+		 obj.border && (this.res.style.border = obj.border);
+		 obj.simpleCenter && this.simpleCenter();
+		// obj.simpleCenter && (stra += `center: "${obj.simpleCenter}",`);
+
+		if (obj.field) {
+			this.res.style.gridTemplateRows = obj.field.rows;
+			this.res.style.gridTemplateColumns = obj.field.columns;
+		}
+		
+
+		return this;
+	}
+
+
+	simpleCenter(){
+		this.res.style.justifyContent = "center";
+		this.res.style.justifyItems = "center";
+		this.res.style.alignContent = "center";
+		this.res.style.alignItems = "center";
+		return this;
+	}
+
+	// https://youtube.com/shorts/u7q1Qj1uuD8?feature=share
+
+
+	columns(cols){
+		this.res.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+		return this;
+	}
+
+	toStart(perc){
+		/*this.res.style.display = "flex";
+		this.res.style.justifyContent = "flex-start";
+		this.res.style.alignItems = "flex-start";*/
+		this.res.style.display = "grid";
+		this.res.style.placeItems = "flex-start";
+		this.res.style.justifyContent = "flex-start";
+		return this; // 224505 15/03 Nice
+	}
+
+	flexAlign(perc){
+		/*this.res.style.display = "flex";
+		this.res.style.justifyContent = "flex-start";
+		this.res.style.alignItems = "flex-start";*/
+		this.res.style.display = "grid";
+		this.res.style.placeItems = "flex-start";
+		this.res.style.alignItems = "center";
+		return this; // 224505 15/03 Nice
+	}
+
+	// https://youtube.com/shorts/u7q1Qj1uuD8?feature=share
+	add(els){
+
+		this.code.push("new OffsetContainer() \n");
+		this.code.push(".setup({ class: 'wow', center: true, reset: true }) \n");
+		// this.code.push(".margin('auto', 0, 'auto', 0) \n");
+		this.code.push(".add([ \n");
+// 155732 I can drag
+
+		/* new OffsetContainer()
+                    .setup({ class: "wow", center: true, reset: true })
+                    .margin("auto", 0, "auto", 0)*/
+
+
+
+		for (var i = 0; i < els.length; i++){
+
+			if (els[i] === undefined){
+				continue;
+			}
+			
+			let item = els[i].render();//.render();
+
+			if (this.options.reset){
+				item.style.gridArea = "1/1";
+			}
+			this.res.appendChild(item);
+
+			if (els[i].toCode()){
+				// console.log("EMO");
+
+				if (els[i].toCode() instanceof Array){ // 114341
+
+					if (i === 0){
+						
+						//console.log(els[i].toCode());
+						if (els[i].toCode()[0].startsWith(" ,new")){
+							//console.log("---");
+							els[i].toCode()[0] = els[i].toCode()[0].replace(" ,new", "new");
+
+							
+							const joined = els[i].toCode().flatMap(l => l).join("");
+							//console.log(joined);
+					this.code.push(`${joined}`);
+						}
+					} else {
+						const joined = els[i].toCode().flatMap(l => l).join("");
+						this.code.push(`${joined}`);
+					}
+
+					
+				} else {
+					this.code.push(`${els[i].toCode()}`);
+				}
+				
+
+
+				if (i == els.length - 1){
+					if (this.code[this.code.length - 1].endsWith(",")){
+					//	alert("IJ")
+					this.code[this.code.length - 1] = this.code[this.code.length - 1].replace(/(^[,\s]+)|([,\s]+$)/g, '')
+					}
+				}
+
+				// 15:05:18 06/03/2023
+			}
+
+		}
+
+
+		this.code.push("]),");
+
+
+
+
+
+		
+		return this;
+	}
+    
+    
+    setWidth(w){
+       
+        this.res.style.width = "100vw";
+    }
+
+	setHeight(w){
+       
+        this.res.style.height = `${w}`;
+		return this;
+    }
+
+
+
+	/*toZStack(){
+this.res.style.display = "grid";
+		let st = this.res.style;
+
+		this.res.style.display = "flex";
+		st.justifyContent = "center";
+		st.alignItems = "center";
+	}*/
+    
+	setup(options) {
+		this.options = options;
+		let container = document.createElement("div");
+		this.res = container;
+		this.res.style.margin = 0;
+		this.res.style.padding = 0;
+        
+        
+      //  this.res.setAttribute("class", options.id);
+        
+          this.res.setAttribute("class", options.class);
+        
+        if (options.hideOverflow === true){
+            this.res.style.overflow = "hidden";
+             this.res.style.overflowY = "scroll";
+        }
+        
+        
+      
+            this.res.style.display = "grid";
+            this.res.style.flexDirection = "column";
+            this.res.style.justifyContent = "center";
+            this.res.style.alignItems = "center";
+     
+            this.res.style.gridColumnStart = 1;
+            this.res.style.gridRowStart = 1;
+
+
+
+            this.res.style.gridTemplateColumns = "1fr 1fr 1fr 1fr 1fr 1fr";
+            this.res.style.gridTemplateRows = "1fr 1fr 1fr";
+        
+        
+         if (options.height){
+            this.res.style.height = options.height;
+         }
+        
+        
+        if (options.width){
+            this.res.style.width = options.width;
+            this.res.style.marginLeft = "auto";
+            this.res.style.marginRight = "auto";
+            
+             let phone = window.matchMedia("(max-device-width: 415px)");
+        
+        
+        if (phone.matches){
+             this.res.style.width = "95%";
+        }
+        }
+        
+        
+    
+
+
+		if (options.reset){
+			this.res.style.gridTemplateColumns = "";
+			this.res.style.gridTemplateRows = "";
+		//	this.res.style.placeItems = "center";
+		}
+       
+        
+		return this;
+	}
+	
+	
+	
+
+	setTemplate(rows, cols){
+		this.res.style.gridTemplateRows = rows;
+		this.res.style.gridTemplateColumns = cols;
+		return this;
+	}
+
+	height(h){
+		this.res.style.width = "auto";
+		this.res.style.height = `${h}`;
+		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;
+	}
+
+	background(color) {
+		this.res.style.background = color;
+		return this;
+	}
+
+	corner(corner) {
+		this.res.style.borderRadius = corner;
+		return this;
+	}
+	
+	padding(L, T, R, B){
+		this.res.style.paddingLeft = L;
+		this.res.style.paddingTop = T;
+		this.res.style.paddingRight = R;
+		this.res.style.paddingBottom = B;
+		return this;
+	}
+	
+	margin(L, T, R, B){
+		this.res.style.marginLeft = L;
+		this.res.style.marginTop = T;
+		this.res.style.marginRight = R;
+		this.res.style.marginBottom = B;
+		return this;
+	}
+    
+    itemWidth(w){
+		for (var i = 0; i < this.res.childNodes.length; i++){
+			let el = this.res.childNodes[i];
+			el.style.width = w;
+		}
+		
+		return this;
+	}
+
+	
+apply(arr) {
+	const goThroughStyles = () => {
+		for (var i = 0; i < arr.length; i++) {
+			let el = arr[i];
+			
+			
+			
+			let query = window.matchMedia(`(max-width: ${el.width}px)`);
+			if (el.device){
+				query = window.matchMedia(`(max-device-width: ${el.width}px)`);
+				alert(el.device);
+			}
+			
+			
+			
+			if (query.matches) {
+				Object.assign(this.res.style, el.styles);
+				// alert(el.style.styles.color);
+			} else {
+					//Object.assign(this.res.style, arr[0].styles);
+			}
+		}
+	}
+	
+	// setFirst
+	let query = window.matchMedia(`(max-width: ${arr[0].width}px)`);
+	
+	if (arr[0].device){
+				query = window.matchMedia(`(max-device-width: ${arr[0].width}px)`);
+		
+			}
+	
+		if (!query.matches){
+				Object.assign(this.res.style, arr[0].styles);
+		}
+	
+	goThroughStyles();
+	window.addEventListener("resize", goThroughStyles); 
+	return this;
+}
+	
+	
+    
+    
+    
+    
+    
+    
+     
+    /*intoJSXO(obj){
+        return <div ref={ref => {
+            ref && ref.appendChild(obj)
+        }} />;
+return this;
+    }*/
+    
+    
+	render(el) {
+		if (el) {
+			document.querySelector("body").style.margin = 0;
+			document.querySelector("body").style.padding = 0;
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+export { OffsetContainer };

package/layout/progress.js

@@ -0,0 +1,111 @@
+import {Animator} from "./animator.js";
+
+// changed on 26/12/2020
+
+class Progress {
+	constructor(value){
+		this.res = null;
+		this.value = value;
+		this.setup();
+	}
+    
+	setup(){
+		let wrap = document.createElement("div");
+		let bottom = document.createElement("div");
+		let top = document.createElement("div");
+		bottom.style.position = "absolute";
+		top.style.position = "relative";
+		wrap.appendChild(bottom);
+		wrap.appendChild(top);
+		this.res = wrap;
+		return this;
+	}
+	
+	padding(L, T, R, B) {
+		if (L || T || R || B){ // CAUGHT MYSELF
+		this.res.style.paddingLeft = L;
+		this.res.style.paddingTop = T;
+		this.res.style.paddingRight = R;
+		this.res.style.paddingBottom = B;
+		} 
+		
+		if (!T && !R && !B){
+			//alert("j")
+		this.res.style.padding = L;	
+		}
+		
+		return this;
+	}
+	
+	
+	arrayPadding(arr, value) {
+		if (arr.includes("left")){
+			this.res.style.paddingLeft = value;
+		}
+		
+		if (arr.includes("right")){
+			this.res.style.paddingRight = value;
+		}
+		
+		if (arr.includes("top")){
+			this.res.style.paddingTop = value;
+		}
+		
+		if (arr.includes("bottom")){
+			this.res.style.paddingBottom = value;
+		}
+			
+		
+		return this;
+	}
+	
+	size(obj){
+		let width = obj.width.split("%")[0];
+		let h = obj.height;
+		
+		this.res.children[0].style.width = (width / 100) * window.innerWidth;
+		this.res.children[0].style.height = h;
+		this.res.children[1].style.width = (width / 100) * window.innerWidth * this.value; 
+		this.res.children[1].style.height = h;
+		
+		
+		const adjust = () => {
+			this.res.children[0].style.width = (width / 100) * window.innerWidth;
+		this.res.children[0].style.height = h;
+		this.res.children[1].style.width = (width / 100) * window.innerWidth * this.value; 
+		this.res.children[1].style.height = h;
+			
+		}
+		
+		
+		window.addEventListener("resize", adjust);
+		adjust();
+		return this;
+	}
+	
+	
+	colors(front, back){
+	   this.res.children[0].style.background = front;
+	   this.res.children[1].style.background = back;
+	   return this;
+	}
+    
+    round(val){
+      this.res.children[0].style.borderRadius = `${val}px`;
+      this.res.children[1].style.borderRadius = `${val}px`;
+      return this;
+    }
+	
+	render(el) {
+		Array.from(this.res.children).forEach(e => e.style.padding = 0);
+		Array.from(this.res.children).forEach(e => e.style.margin = 0);
+		
+		if (el) {
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+	}
+}
+	
+export { Progress };

package/layout/remWin.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# Loop through all .js files in the current directory
+for file in ./*.js; do
+    # Skip if no .js files are found
+    [ -e "$file" ] || continue
+
+    # Use a temporary file to store the modified content
+    temp_file=$(mktemp)
+
+    # Remove lines containing "window.<ClassName> = <ClassName>;"
+    grep -vE 'window\.[a-zA-Z_][a-zA-Z0-9_]* = [a-zA-Z_][a-zA-Z0-9_]*;' "$file" > "$temp_file"
+
+    # Replace the original file with the updated content
+    mv "$temp_file" "$file"
+
+    echo "Processed: $file"
+done
+
+echo "All .js files in the current folder have been processed to remove window assignments."

package/layout/row.js

@@ -0,0 +1,208 @@
+import {Animator} from "./animator.js";
+
+class Row {
+	constructor(frs, saveEl) {
+		this.saveEl = saveEl;
+		this.frs = frs;
+		this.res = null;
+		this.setup();
+		this.responsive();
+	}
+	
+	center() {
+	//	this.res.style.justifyItems = "center";
+		return this;
+	}
+
+
+	toCode(){
+		return this.code;
+	}
+	
+	toColumn(at){
+
+		const toCol = () => {
+			let media = window.matchMedia(`(max-width: ${at})`);
+			// let mobileMedia = window.matchMedia(`(max-device-width: 415px)`);
+
+			if (media.matches){
+				this.res.style.gridTemplateColumns = "1fr";
+			} else {
+				this.res.style.gridTemplateColumns = "1fr 1fr";
+
+			}
+		}
+
+		toCol();
+		window.addEventListener("resize", toCol);
+	
+
+		
+	
+
+		return this;
+	}
+
+	
+
+	
+
+
+	styled(obj){
+		obj.gap && this.gap(obj.gap);
+		return this;
+	}
+
+	gap(val){
+		this.res.style.gap = val;
+		return this;
+	}
+
+
+	static test(){
+		alert("Wow")
+	}
+
+	setup(obj) {
+		//let parent = document.createElement("div");
+		//this.parent = parent;
+
+		let flex = document.createElement("div");
+        flex.setAttribute("class", "someClass");
+		flex.style.display = "grid";
+		flex.style.gridTemplateColumns = "1fr 1fr";
+		flex.style.alignItems = "center";
+		flex.style.margin = 0;
+		flex.style.padding = "1em";
+		//flex.style.width = "100%";
+		
+		//flex.style.display = "flex";
+		
+		this.res = flex;
+		return this;
+	}
+
+	set(options){
+		if (options.width){
+			this.setWidth(options.width);
+		}
+
+		if (options.align){
+			//alert("K")
+			//this.makeAlign(options.align);
+			 this.setAlign(options.align);
+		}
+
+		if (options.centered){
+			this.res.style.marginRight = "auto";
+			this.res.style.marginLeft = "auto";
+		}
+
+
+		if (options.toCol){
+			this.toColumn(options.toCol);
+		}
+
+
+		
+
+		
+
+		return this;
+	}
+
+
+
+	setAlign(){
+		this.res.style.justifyItems = "center";
+		return this;
+	}
+
+	
+
+
+	setWidth(w){
+		this.res.style.width = w;
+	}
+	
+    background(color){
+        this.res.style.background = color;
+        return this;
+    }
+    
+    radius(val){
+        this.res.style.borderRadius = `${val}px`;
+        return this;
+    }
+    
+    
+	  items(arr) {
+        
+        var frString = "";
+        
+        
+		//// console.warn(this.res);
+		for (var i = 0; i < arr.length; i++) {
+			
+			
+			frString += "1fr ";
+			
+			
+			
+			let r = arr[i].render();
+		 // r.style.width = "100%";
+			//r.style.flex = 1;
+			this.res.appendChild(r);
+		}
+        
+        
+        this.res.style.gridTemplateColumns = frString;
+		return this;
+	}
+	
+	
+	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;
+	}
+	
+     frame(obj){
+        this.res.style.width = obj.width;
+        this.res.style.height = obj.height;
+        return this;
+    }
+	
+	
+	render(el) {
+		if (el){
+		document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+	}
+}
+
+export { Row };