nodality 1.0.0-beta.1

package/layout/dropdown2025.js

@@ -0,0 +1,152 @@
+import { Animator } from "./animator.js";
+
+class Dropdown extends Animator {
+    constructor() {
+        super();
+        this.res = document.createElement("div");
+
+        // Wrapper for the collapsed dropdown
+        this.toggleWrap = document.createElement("div");
+     //   this.toggleWrap.style.background = "olive";
+        this.toggleWrap.style.zIndex = 9999;
+        this.toggleWrap.style.borderRadius = "0.3rem";
+       //this.toggleWrap.style.width = "200px"; // Explicit width for collapsed dropdown
+        this.toggleWrap.style.height = "40px"; // Fixed height for collapsed dropdown
+        this.toggleWrap.style.cursor = "pointer";
+        this.toggleWrap.style.display = "flex";
+        this.toggleWrap.style.alignItems = "center";
+        this.toggleWrap.style.justifyContent = "center";
+        this.res.appendChild(this.toggleWrap);
+
+        // Container for dropdown content
+        this.contentWrap = document.createElement("div");
+        this.contentWrap.style.position = "absolute";
+        this.contentWrap.style.background = "#ecf0f1";
+        this.contentWrap.style.borderRadius = "0.3rem";
+        this.contentWrap.style.boxShadow = "0 2px 5px rgba(0, 0, 0, 0.15)";
+        this.contentWrap.style.marginTop = "10px"; // Visual separation
+        this.contentWrap.style.width = "250px"; // Explicit width for dropdown content
+        this.contentWrap.style.display = "none"; // Hidden by default
+
+        this.res.appendChild(this.contentWrap);
+
+        this.styles = {};
+        this.children = [];
+        this.isExpanded = false;
+
+        this.toggleWrap.addEventListener("click", () => this.toggle());
+
+       
+    }
+
+    set(obj) {
+        this.options = obj;
+
+        if (obj.title) {
+            this.toggleWrap.textContent = obj.title;
+        }
+
+        if (obj.width) {
+            this.toggleWrap.style.width = obj.width;
+        }
+
+        if (obj.contentWidth) {
+            this.contentWrap.style.width = obj.contentWidth;
+        }
+
+        if (obj.background) {
+            this.contentWrap.style.backgroundColor = obj.background;
+        }
+
+        obj.mar && this.mar(obj.mar);//alert("/")
+
+
+        const adjust = () => {
+          //  alert("OBJA");
+          //  alert(obj.breakpoint);
+            let media2 = window.matchMedia(`(max-device-width: 415px)`);
+            let smallScreen = window.matchMedia(`(max-width: ${obj.breakpoint ?? "600px"})`); // was 600px
+
+            if (media2.matches || smallScreen.matches) {
+                this.contentWrap.style.position = "relative";
+            } else {
+                this.contentWrap.style.position = "absolute";
+            }
+        };
+
+        window.addEventListener("resize", adjust);
+        adjust();
+
+
+        return this;
+    }
+
+    add(children) {
+      if (!Array.isArray(children)) {
+          throw new Error("The 'add' method expects an array of children.");
+      }
+  
+      children.forEach((child, i) => {
+if (i !== 0){
+
+
+          if (child.res instanceof HTMLElement) {
+              this.contentWrap.appendChild(child.res);
+          } else {
+              throw new Error("Each child must have a valid 'element' property that is an HTMLElement.");
+          }
+        }
+
+      });
+  
+      // Set the first child as the title of the toggleWrap if no title is explicitly set
+      if (!this.options || !this.options.title) {
+          const firstChild = children[0];
+          if (firstChild && firstChild.res) {
+            this.toggleWrap.appendChild(firstChild.res);
+            //  this.toggleWrap.textContent = firstChild.res.textContent || "Dropdown";
+          }
+      }
+  
+      this.children.push(...children);
+      return this;
+  }
+  
+
+    toggle() {
+        this.isExpanded = !this.isExpanded;
+        this.contentWrap.style.display = this.isExpanded ? "block" : "none";
+    }
+
+    toCode() {
+        const props = this.options
+            ? Object.entries(this.options)
+                  .map(([key, value]) => {
+                      if (typeof value === "string") return `${key}: \"${value}\"`;
+                      if (typeof value === "object") return `${key}: ${JSON.stringify(value)}`;
+                      return `${key}: ${value}`;
+                  })
+                  .join(",\n  ")
+            : "";
+
+        let finalCode = this.children
+            .map((el, i) =>
+                el
+                    .toCode()
+                    .flatMap((l) => l)
+                    .join("") + (i < this.children.length - 1 ? "," : "")
+            )
+            .join("");
+
+        return [`new Dropdown().set({\n  ${props}\n}).add([\n ${finalCode}\n])`];
+    }
+
+    render(id) {
+        if (id) {
+            document.querySelector(id).appendChild(this.res);
+        }
+        return this.res;
+    }
+}
+
+export { Dropdown };

package/layout/edit.sh

@@ -0,0 +1,39 @@
+#!/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
+
+    # Extract the class name using a basic regex and awk
+    class_name=$(grep -o 'class [a-zA-Z_][a-zA-Z0-9_]*' "$file" | awk '{print $2}')
+
+    # Check if the class name was found
+    if [ -z "$class_name" ]; then
+        echo "No class definition found in $file. Skipping..."
+        continue
+    fi
+
+    # Temporary file to store the output
+    temp_file=$(mktemp)
+
+    # Preserve class content and add imports/exports
+    {
+        echo 'import {Animator} from "./animator.js";'
+        echo
+        cat "$file"
+        echo
+        echo "window.$class_name = $class_name;"
+        echo "export { $class_name };"
+    } > "$temp_file"
+
+    # Replace the original file with the transformed content
+    mv "$temp_file" "$file"
+
+    echo "Transformed: $file"
+done
+
+echo "All .js files in the current folder have been processed."
+
+
+# ./edit.sh in your folder, only ONE class per file!

package/layout/emptyElement.js

@@ -0,0 +1,21 @@
+import {Animator} from "./animator.js";
+
+class Empty {
+    constructor() {
+        this.res = document.createElement("null");
+    }
+
+    toCode(){
+        return "";
+    }
+
+    render(div) {
+        if (div) {
+            document.querySelector(div).appendChild(this.res);
+        } else {
+
+            return this.res;
+        }
+    } 
+} // 183934
+export { Empty };

package/layout/externalStylesheet.js

@@ -0,0 +1,19 @@
+import {Animator} from "./animator.js";
+
+ class ExternalStylesheet extends Base {
+        constructor(link){
+            super();
+            this.link = link;
+        }
+
+        render(){
+            let el = document.createElement("link");
+            el.setAttribute("rel", "stylesheet");
+            el.setAttribute("href", this.link);
+            document.getElementsByTagName( "head" )[0].appendChild( el );
+            return el;
+        }
+    }
+
+
+export { ExternalStylesheet };

package/layout/flexCard.js

@@ -0,0 +1,220 @@
+import {Animator} from "./animator.js";
+
+
+
+class Card extends Animator {
+	constructor(text, url) {
+        super();
+		this.text = text;
+		this.url = url;
+		this.setup();
+	}
+
+	getType(){
+		return "sCardElement";
+	}
+
+	setup() {
+		let query = window.matchMedia("(max-device-width: 415px)");
+		let card = document.createElement("div");
+		card.style.display = "flex";
+		card.style.flexDirection = "column";
+		card.style.alignItems = "center";
+		card.style.backgroundColor = "#fff";
+		card.style.fontFamily = "Arial";
+		card.style.width = "100%";
+		card.style.boxShadow = "3px 3px 10px #111";
+		card.style.overflow = "hidden"
+		this.res = card;	
+		return this;	
+	}
+
+	set(obj){
+		let stra = "";
+		this.obj = obj;
+
+		if (obj.border){
+			this.res.style.border = obj.border;
+		}
+
+		if (obj.radius){
+			this.res.style.borderRadius = obj.radius;
+		}
+
+		if (obj.arrayPadding){
+			let sides = obj.arrayPadding.sides;
+			//console.log(sides);
+			//console.log(sides.map(x => `"${x}"`).join(", "));
+
+			const mapped = sides.map(x => `"${x}"`).join(", ")
+	
+		
+
+		obj.arrayPadding && this.arrayPadding(obj.arrayPadding.sides, obj.arrayPadding.value);
+		//obj.arrayPadding && this.arrayPadding(obj.arrayMargin.sides, obj.arrayMargin.value);
+		obj.arrayPadding && (stra += `\n arrayPadding: {sides: [${mapped}], value: "${obj.arrayPadding.value}"},`); // 2345 06/03
+		
+	
+	}
+		
+		obj.arrayMargin && this.arrayMargin(obj.arrayMargin.sides, obj.arrayMargin.value);
+		//obj.arrayMargin && this.arrayMargin(obj.arrayMargin.sides, obj.arrayMargin.value);
+		obj.arrayMargin && (stra += `\n arrayMargin: {sides: [${obj.arrayMargin.sides.map(side => `"${side}", `)}], value: "${obj.arrayMargin.value}"},`); // 2345 06/03
+
+
+		obj.width && (this.res.style.width = obj.width);
+
+
+		return this;
+	}
+
+	arrayPadding(arr, value) {
+
+		if (!value){ // LTRB
+			this.res.style.marginLeft = `${arr[0]}px`;
+			this.res.style.marginTop = `${arr[1]}px`;
+			this.res.style.marginRight = `${arr[2]}px`;
+			this.res.style.marginBottom = `${arr[3]}px`;
+		}
+
+		if (arr[0] === "all"){
+			this.res.style.paddingLeft = value;
+			this.res.style.paddingTop = value;
+			this.res.style.paddingRight = value;
+			this.res.style.paddingBottom = 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;
+		}
+
+		if (!value){
+			this.res.style.paddingBottom = arr;
+		}
+		
+
+		//alert(value);
+
+		return this;
+	} //22155 snap to change phone screen
+ 
+
+	arrayMargin(arr, value) { // 224857 redefined earlier
+
+		// console.log(arr);
+		if (arr.includes("left")){
+			this.res.style.marginLeft = value;
+		}
+		
+		if (arr.includes("right")){
+			this.res.style.marginRight = value;
+		}
+		
+		if (arr.includes("top")){
+			this.res.style.marginTop = value;
+		}
+		
+		if (arr.includes("bottom")){
+			this.res.style.marginBottom = value;
+		}
+
+		if (arr.includes("all")){
+			this.res.style.margin = value;
+		}
+
+		if (!value){
+			this.res.style.marginBottom = arr;
+		}
+		
+		return this;
+	}
+
+	frame(obj){
+
+		if (obj.height){
+		this.res.style.height = obj.height;
+		}
+
+		if (obj.width){
+			this.res.style.width = obj.width;
+			}
+
+			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;
+    }
+	
+	background(color){
+		this.res.style.backgroundColor = color;
+		return this;
+	}
+	
+	color(color){
+		this.res.style.color = color;
+		return this;
+	}
+	
+	padding(pad){
+		this.res.style.padding = `${pad}px`;
+		return this;
+	}
+	
+	items(els){
+		for (var i = 0; i < els.length; i++){
+			this.res.appendChild(els[i].render());
+		}
+		
+		return this;
+	}
+	
+	shadow(){
+	this.res.style.boxShadow = "1px 1px 20px rgba(0, 0, 0, 0.60)";
+	return this;
+	}
+	
+	round(value){
+	this.res.style.borderRadius = `${value}px`;
+	return this;
+	}
+	
+	render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.res);
+		} else {
+			return this.res;
+		}	
+	}
+}
+export { Card };

package/layout/flexGrid.js

@@ -0,0 +1,192 @@
+import {Animator} from "./animator.js";
+
+
+// Add code-gen after backup
+class FlexGrid {
+	constructor(){
+		this.code = [];
+		this.setup();
+	}
+
+	toCode(){
+		return this.code;
+	}
+	
+	
+	setup(){
+		this.code.push("new FlexGrid()");
+		this.code.push(".setup()")
+		let gr = document.createElement("div");
+		gr.style.display = "flex";
+		//gr.style.flexWrap = "wrap";
+		
+		gr.style.padding = 0;
+		gr.style.margin = 0;
+		//gr.style.width = "100%";
+		this.res = gr;
+		return this; // DANGEROUS FEBRUARY ?
+	}
+
+	// flex: 1, maxWidth: "400px", wrap: true
+
+	set(options){
+		this.code.push(".set({");
+	//	this.code.push(JSON.stringify(options));
+	//	console.log("OPE");
+		
+		options.width && this.code.push(`width: "${options.width}",`);
+		options.flex && (this.res.style.flex = options.flex);
+		options.flex && this.code.push(`flex: ${options.flex},`);
+
+		options.maxWidth && (this.res.style.maxWidth = options.maxWidth);
+		options.maxWidth && this.code.push(`maxWidth: "${options.maxWidth}",`);
+
+		options.maxWidth && (this.res.style.minWidth = "400px");
+		options.maxWidth && (this.res.style.marginLeft = "auto");
+		options.maxWidth && (this.res.style.marginRight = "auto");
+
+	//	this.res.style.width = "400px"
+		options.width && (this.res.style.width = `${options.width}`);
+		options.wrap && (this.res.style.flexWrap = `wrap`); // ok
+
+		options.wrap && this.code.push(`wrap: ${options.wrap},`);
+		
+		options.align && (this.res.style.justifyContent = options.align);
+		options.align && this.code.push(`align: ${options.align},`);
+
+
+			
+			options.colat && this.toColumnAt(options.colat);
+			options.colat && this.code.push(`\n colat: "${options.colat}",`);
+		
+
+
+		this.code.push("}),");
+
+		// console.log(this.code);
+		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";
+				this.res.style.alignItems = "center";
+			} else {
+				this.res.style.flexDirection = "row";
+
+			}
+		}
+
+		toCol();
+		window.addEventListener("resize", toCol);
+	}
+}
+	
+	 flex(str){
+		this.arra = Array.from(str.replace(/\s/g, ''));
+		this.areas = Array.from(Array(str.replace(/\s/g, '')).join(""));
+		this.save = `"${str}"`;
+		return this;
+	}
+	
+	
+	padding(value){
+		this.res.style.padding = `${value}px`;
+		return this;
+	}
+	
+	
+	center(){
+		this.res.style.marginLeft = "auto";
+		this.res.style.marginRight = "auto";
+		return this;
+	}
+	
+	items(elements){
+		this.items = elements;
+		this.code.push("\n .items([");
+
+		var count = -1;
+		for (var i = 0; i < elements.length; i++){
+			var el = elements[i];
+			count += 1;
+
+
+if (el != undefined){
+
+
+			let ela = el.render()
+
+			if (el.toCode !== undefined){
+				this.code.push(el.toCode().flatMap(l=>l)); // 20:10:00 Nice!
+		   // 12:25:10 Wow!!!
+	  		 }
+
+
+			// ela.style.flex = this.areas[count];
+			this.res.appendChild(ela);
+			}
+
+
+		}
+
+		this.code.push("\n ])");
+		return this;
+	}
+	
+	width(w){
+		this.res.style.width = w;
+		return this;
+	}
+	
+	
+	border(color, width){
+		this.res.style.border = `${width}px solid ${color}`;
+		return this;
+	}
+	
+	adjust(h){
+		const adj = () => {
+		let query = window.matchMedia("(max-device-width: 415px)");
+		
+		if (window.innerWidth < h || query.matches) {
+			for (var i = 0; i < this.res.children.length; i++){
+				this.res.children[i].style.flex = "";
+				this.res.children[i].style.width = "100%";
+			}
+		} else {
+			//console.warn(this.arra);
+			for (var i = 0; i < this.res.children.length; i++){			
+				this.res.children[i].style.flex = `${this.arra[i]}`;
+			}
+		  }	
+		}
+	
+		adj();
+		window.addEventListener("resize", adj);
+		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 { FlexGrid };