nodality 1.0.0-beta.1

package/layout/footer.js

@@ -0,0 +1,83 @@
+import {Animator} from "./animator.js";
+
+
+
+// 13:28 07/04/2020 - BEGIN NOTHING GONNA STOP US NOW  Lets go!
+class Footer {
+	constructor(text){
+		this.text = text;
+		this.ele = null;
+		this.setup();
+	}
+	
+	setup(){
+		let el = document.createElement("footer");
+		let node = document.createTextNode(this.text);
+		el.appendChild(node);
+		this.ele = el;
+		this.ele.style.padding = 0;
+		this.ele.style.margin = 0;
+		this.ele.style.textAlign = "center";
+		
+		this.padding(20);
+		this.bold();
+		this.ele.style.backgroundColor = "#ecf0f1";
+		return this;
+	}
+	
+	font(font){
+		this.ele.style.fontFamily = font;
+		return this;
+	}
+	
+	size(s){
+		this.ele.style.fontSize = s;
+		return this;
+	}
+	
+	em(e){
+		this.ele.style.fontSize = `${e}em`;
+		return this;
+	}
+	
+	color(color){
+		this.ele.style.color = color;
+		return this;
+	}
+	
+	weight(weight){
+		this.ele.style.fontWeight = weight;
+		return this;
+	}
+	
+	bold(){
+		this.ele.style.fontWeight = "bold";
+		return this;
+	}
+	
+	italic(){
+		this.ele.style.fontStyle = "italic";
+		return this;
+	}
+	
+	padding(val){
+		this.ele.style.padding = val;
+		return this;
+	}
+	
+	
+	margin(val){
+		this.ele.style.margin = val;
+		return this;
+	}
+	
+	render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.ele);
+		} else {
+			return this.ele;
+		}	
+	}
+}
+	
+export { Footer };

package/layout/formComponents/dataList.js

@@ -0,0 +1,183 @@
+import {Animator} from "../animator.js";
+
+
+ class DataList {
+        constructor(){
+            this.res = null;
+            this.currentItem = "";
+        }
+        
+        set(items){
+
+        let obj = items;
+     
+
+        this.options = items;
+        var container = document.createElement("input");
+        container.setAttribute("list", "dlCities");
+        container.setAttribute("id", "my");
+    
+        var optionList = items.data;
+
+    var i = 0,
+    len = optionList.length,
+    dl = document.createElement('datalist');
+
+    dl.id = 'dlCities';
+            
+    for (var i = 0; i < len; i += 1) {
+        var option = document.createElement('option');
+        option.value = optionList[i];
+        dl.appendChild(option);
+    }
+            
+            container.appendChild(dl);
+            container.addEventListener("change", () => {
+                let val = document.querySelector("#my").value;
+                console.log(val); 
+                this.currentItem = val;
+            });
+            
+            
+            
+            
+            container.setAttribute("placeholder", "Type value");
+            container.style.padding = ".4rem .75rem";
+            container.style.fontSize = "1rem";
+            this.res = container;
+            this.responsive();
+
+            obj.arrayPadding && this.arrayPadding(obj.arrayPadding.sides, obj.arrayPadding.value);
+            obj.arrayMargin && this.arrayMargin(obj.arrayMargin.sides, obj.arrayMargin.value);
+
+            obj.pad && this.pad(obj.pad);
+            obj.mar && this.mar(obj.mar);
+
+
+            return this;
+            
+        }
+
+        toCode() {
+            const objString = JSON.stringify(this.options, null, 4);
+            return [`new DataList().set(${objString})`];
+        }
+
+        getValue(){
+            return this.res.value;
+        }
+
+
+    arrayPadding(arr, value) {
+		//alert("PP")
+		console.log(arr);
+			if (arr.includes("left")){
+				this.res.style.paddingLeft = value;
+			}
+	
+			// console.log("PAD");
+			// console.log(this.res.style.paddingLeft);
+			// console.log(arr);
+			// console.log(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 (arr.includes("all")){
+				this.res.style.padding = value;
+					}
+				
+			
+			return this;
+		}
+	
+		arrayMargin(arr, value) {
+			//alert("PP")
+			console.log(arr);
+				if (arr.includes("left")){
+					this.res.style.marginLeft = value;
+				}
+		
+				// console.log("PAD");
+				// console.log(this.res.style.paddingLeft);
+				// console.log(arr);
+				// console.log(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;
+						}
+					
+				
+				return this;
+			}
+			
+        
+          margin(val){
+        this.res.style.margin = val;
+        return this;
+    }
+        
+        responsive(){
+            let query = window.matchMedia("(max-device-width: 415px)");
+           
+            // window.matchMedia(query)
+           /* if (query.matches){
+                
+                this.el.style.fontSize = "3rem";
+            } else {
+                  this.el.style.fontSize = "1rem";
+            }*/
+            
+
+                 
+			if (query.matches) {
+				this.res.style.width = "100%";
+			
+			} else {
+				
+			}
+
+            
+            return this;
+        }
+        
+        
+        
+          render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.res);
+           
+		} else {
+			return this.res;
+		}	
+	   }
+    }
+    
+    // Call without new
+   var _oldDataList = DataList;
+   DataList = function(...args) { return new _oldDataList(...args) };
+    
+    
+window.DataList = DataList;
+export { DataList };

package/layout/formComponents/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/formComponents/floatingInput.js

@@ -0,0 +1,163 @@
+
+import {Animator} from "../animator.js";
+
+ class FloatingInput extends Animator {
+        constructor(){
+            super();
+            this.el = null;
+           // this.setup();
+        }
+        
+        
+        
+        set(obj){        
+    this.options = obj;
+let div =  document.createElement("div");
+    
+let label =  document.createElement("label");
+    label.style.position = "relative";
+label.style.display = "block";
+    
+let node = document.createTextNode(obj.title);
+label.appendChild(node);
+label.style.opacity = 0;
+    
+    
+var input = document.createElement("input");
+            
+            
+            if (obj.type === "textarea"){
+               input = document.createElement("textarea");
+            }
+            
+            
+            
+            
+    input.style.position = "relative";
+    input.placeholder = obj.title;
+
+            
+            
+            input.style.fontSize = "1rem";
+            input.style.padding = ".4rem .75rem";
+
+           
+    
+div.appendChild(label);
+div.appendChild(input);
+
+this.res = div;
+obj.mar && this.mar(obj.mar);
+obj.pad && this.pad(obj.pad);
+            
+    
+input.addEventListener("focus", () => {
+    label.style.transition = "transform ease 0.2s";
+    label.style.transform = "scale(0.80)";
+    label.style.textTransform = "uppercase";
+    label.style.transformOrigin = "left top";
+    label.style.fontWeight = "bold";
+    input.placeholder = "";
+    label.style.opacity = "1.0"; // 220654
+
+    if (obj.font){
+        label.style.fontFamily = obj.font;
+    }
+
+    if (obj.color){
+        label.style.color = obj.color;
+    }
+
+    if (obj.exact){
+        label.style.fontSize = obj.exact;
+    }
+
+});
+    
+input.addEventListener("focusout", () => {
+     label.style.transform = "scale(1.0)";
+     input.placeholder = obj.title;
+     label.style.opacity = "0.0";
+});
+
+obj.name && input.setAttribute("name", obj.name);            
+            
+            
+            
+             let query = window.matchMedia("(max-device-width: 415px)");
+           
+            // window.matchMedia(query)
+            if (query.matches){
+              //  input.style.fontSize = "1rem";
+         
+                //input.style.width = "100%";
+             //  input.style.fontSize = "3em";
+              //  label.style.fontSize = "1.20em";
+              input.style.width = "100%";
+              div.style.width = "100%";
+                
+            }
+            
+            // saviour
+         //   input.style.width = "100%";
+          //  div.style.width = "100%";
+            input.style.fontSize = "1rem"
+
+            
+            
+            this.el = div;
+            
+            
+            
+             
+            
+          //  this.responsive();
+            
+            
+            return this;
+        }
+
+        getValue(){
+            return this.el.children[1].value;
+        }
+
+        toCode() {
+            let objString = JSON.stringify(this.options, null, 4);
+            objString = objString.replace(/"(\w+)"(?=\s*:)/g, '$1');
+            return [`new FloatingInput().set(${objString})`];
+        }
+     
+     
+     margin(amount){
+         this.el.style.margin = amount;
+         return this;
+     }
+     
+     
+   /* responsive(){ HANDLED ABOVE
+            let query = window.matchMedia("(max-device-width: 415px)");
+           
+            // window.matchMedia(query)
+            if (query.matches){
+                this.el.style.fontSize = "2rem";
+            }
+            
+            return this;
+        } */
+     
+     
+     
+        
+        render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.el);
+           
+		} else {
+			return this.el;
+		}	
+	   }
+    }
+    
+    // 31/01/25 22:06:50 works
+window.FloatingInput = FloatingInput;
+export { FloatingInput };

package/layout/formComponents/form-all.js

@@ -0,0 +1,161 @@
+import {Animator} from "./animator.js";
+
+class Wrappera extends Base {
+    constructor(){
+	  super();
+        this.state = {
+            time: '',
+            timeValid: false
+        };
+      document.querySelector("body").style.backgroundColor = "#c4cccf";
+	}
+    
+render() {
+let rg = new RadioGroup()
+    .set({
+        items: ["Male", "Female", "Third shit"],
+        multiple: false,
+        font: "Arial"
+    })
+    
+    
+let fp = new FilePickera()
+.set({
+    id: "A",
+    title: "Add profile picture",
+    background: "#3498DB",
+    color: "white",
+    font: "Arial",
+    radius: "3rem"
+})
+
+let items = [["none", "select a car---"], ["tesla", "Tesla"], ["audi", "Audi"]];
+    
+let pc = new Picker()
+.set({
+    items: items,
+    font: "Arial",
+    arrayPadding: ({sides: ["all"], value: "0.5rem"}),
+    rounded: true
+})
+
+
+    
+let r = new Range().set({
+    min: 100,
+    max: 1000,
+    step: 10,
+   // plain: true,
+    width: "80%",
+    style: {
+        trackColor: "#1abc9c",
+        thumbColor: "#3498db"
+    },
+    arrayMargin: {sides: ["all"], value: "1rem"},
+    font: "Arial"
+});
+
+   
+let dataList = DataList()
+            .set({
+                placeholder: "Test",
+                data:["Czech Republic", "Kongo", "Peru"],
+                arrayMargin: {sides: ["all"], value: "1rem"}
+            });
+    
+    
+    let timeInput = new TextField().set({
+         type: "text",
+         placeholder: "Enter swimming time",
+         arrayMargin: {sides: ["all"], value: "1rem"}
+        });
+
+        let floatTime = new FloatingInput()
+        .set({
+                title: "Your name",
+                type: "input"
+            });
+    
+    return Center().items([ 
+        
+        Text("Create an account")
+        .fluid("S1")
+        .font("Arial")
+        .color("#3498db"),
+        
+        Text("Select your gender")
+        .fluid("S3")
+        .font("Arial"),
+        
+        rg,
+        fp,
+        
+        floatTime,
+		
+        timeInput.onChange(current => {
+            const regex = /^[0-5]?\d:[0-5]\d$/;
+            let valid = regex.test(current);
+            timeInput.setValid(valid, current);
+            this.state.time = current;
+            this.state.timeValid = valid;
+        }),  
+        
+        dataList,
+        pc,
+        r,
+
+        new Button("Submit")
+                .set({
+                    fluidc: "S6",
+                    arrpad: {sides: ["all"], value: "1rem"},
+                    arrayMargin: {sides: ["all"], value: "1rem"},
+                    onTap: () => {
+
+                       
+
+                        if (!fp.hasFile){
+                            fp.highlight(); // highlights file picker
+                            alert("No file");
+                        }
+
+                        if (this.state.timeValid === false){
+                            alert("Time is innvalid.");
+                        }
+
+                        
+                        this.add({
+                            a: this.state.time,
+                            b: fp.file,
+                            c: pc.el.options[pc.el.selectedIndex].value,
+                            d: rg.getCheckedValues(),
+                            e: r.value(),
+                            g: dataList.getValue(),
+                            h: floatTime.getValue()
+                        });
+                    },
+                    color: "white",
+                    background: "#3498db",
+              
+                }),
+      
+        new Text("By signing up, you agree with terms of use.")
+           ]);
+  }
+    
+    add(data){
+        // perform sign up operations :D
+        console.clear();
+        console.log("Creating account with data:");
+        console.log(data.a);
+        console.log(data.b);
+        console.log(data.c);
+        console.log(data.d);
+        console.log(data.e);
+        console.log(data.g);
+        console.log(data.h);
+    }
+}
+
+new Wrappera().mount("#res");
+window.Wrappera = Wrappera;
+export { Wrappera };

package/layout/formComponents/form.js

@@ -0,0 +1,76 @@
+
+import {Animator} from "../animator.js";
+
+class Form {
+    constructor(action = "", method = "POST") {
+      this.action = action;
+      this.method = method;
+      this.elements = [];
+      this.formElement = document.createElement("form");
+      this.formElement.action = this.action;
+      this.formElement.method = this.method;
+    }
+  
+    add(elements) {
+    this.elements = elements;
+    console.log("CODEA");
+    console.log(this.elements);
+    console.log(this.elements.length );
+  
+      elements.forEach((element) => {
+        if (element && typeof element.render === "function") {
+          //this.elements.push(element);
+          this.formElement.appendChild(element.render());
+        } else {
+          throw new Error("Each element in the array must have a render method that returns an HTML DOM element.");
+        }
+      });
+
+      console.log(this.elements);
+
+      return this;
+    }
+
+  toCode(){
+   
+    let mapped = this.elements.map(e => e.toCode());
+   
+
+    let setCode = Object.entries(this.obj)
+    .map(([key, value]) => {
+      let formattedValue = typeof value === "string" ? `"${value}"` : value;
+      return `${key}: ${formattedValue}`;
+    })
+    .join(", ");
+
+    console.log("FORM DQ");
+    console.log(mapped);
+    return [`new Form().set({${setCode}}).add([ \n ${mapped.join(", \n")}])`];
+  }
+
+  set(obj) {
+    this.obj = obj;
+    obj.action && this.setAction(obj.action);
+    obj.method && this.setMethod(obj.method);
+    return this;
+  }
+
+    setAction(action) {
+      this.action = action;
+      this.formElement.action = this.action;
+    }
+  
+    setMethod(method) {
+      this.method = method;
+      this.formElement.method = this.method;
+    }
+  
+    render(el) {
+        if (el){
+            document.querySelector(el).appendChild(this.formElement);
+        }
+      return this.formElement;
+    }
+  }
+
+  export {Form};