nodality 1.0.0-beta.1

package/layout/formComponents/imagePicker.js

@@ -0,0 +1,266 @@
+import {Animator} from "../animator.js";
+
+class FilePickera extends Animator {
+    constructor(){
+        super();
+        this.el = null;
+        this.file = null;
+    }
+    
+    set(obj){
+        this.options = obj;
+        this.okayColor = obj.okayColor;
+        
+        let query = window.matchMedia("(max-device-width: 415px)");
+        
+        let wrap = document.createElement("div"); 
+        wrap.style.paddingBottom = "1em";
+        wrap.style.display = "flex";        
+        
+        let allWrap = document.createElement("div");
+        
+        let nameField = document.createElement("input");
+        nameField.setAttribute("type", "text");
+        nameField.style.display = "none";
+        nameField.style.margin = "0.5em";
+        
+		let card = document.createElement("input");
+	    card.setAttribute("type", "file");
+        card.setAttribute("name", obj.name);
+        obj.accept && (card.accept = obj.accept);
+        card.setAttribute("id", obj.id);
+        card.style.visibility = "hidden";
+        card.style.display = "none";
+        
+        
+        let queryB = window.matchMedia("(max-device-width: 415px)");
+			if (queryB.matches) {
+				card.style.fontSize = '1rem';
+			}
+        
+        let label = document.createElement("label");
+	    label.setAttribute("for", obj.id);
+        label.innerText = obj.title;
+        label.style.marginRight = 12;
+        label.style.padding = "0.5em";
+        
+        if (obj.color){
+              label.style.color = obj.color;
+        }
+    
+         if (obj.background){
+            label.style.background = obj.background;
+            label.style.padding = "10";
+        }    
+
+        
+         card.addEventListener("change", () => {
+          
+             
+             
+             
+                   nameField.style.display = "block";
+             
+             
+             if (obj.hideField){
+                  nameField.style.display = "none";
+             }
+             
+             
+             label.innerText = "Change";
+             this.file = card.files[0];
+             this.onLoad(this.file);
+            // this.loadCall(this.func);
+            // this.getLoaded(this.file);
+             data[obj.index] = this.file;
+             
+             nameField.setAttribute("value", this.file.name);
+             nameField.setAttribute("readonly", "true");
+             
+             
+             
+             
+             
+             this.getLoaded();
+             this.highlight();
+            // obj.cb(data);
+            // console.log(this.file);
+            
+        })
+        
+        wrap.appendChild(card);
+        wrap.appendChild(label);
+        wrap.appendChild(nameField);
+        
+		this.el = wrap;	
+        
+        
+      //  this.auto();
+
+      obj.font && this.font(obj.font);
+      obj.radius && this.borderRadius(obj.radius);
+		return this;	
+    }
+    
+
+    borderRadius(radius){
+        this.el.style.borderRadius = radius;
+       // console.warn(this.res);
+        return this;
+    }
+	
+    // 5:00 (2 min) 4km 3:35 (2 min) 3km (3:25) 2km (3:15), 1km ke (03:00)
+   
+    
+    addClass(classa){
+        this.el.setAttribute("class", classa);
+        return this;
+    }
+    
+    
+    font(font){
+        this.el.style.fontFamily = font;
+        return this;
+    }
+    
+    bold(){
+        
+        
+        this.el.style.fontWeight = "bold";
+        return this;
+    }
+    
+    
+    rounded(){
+       // this.el.style.borderRadius = `${padding}px`;
+         this.el.children[1].style.borderRadius = `8px`;
+        return this;
+    }
+    
+    
+    
+    highlight(){
+        if (this.file === null){
+            this.hasFile = false;
+            this.el.children[1].style.background = "red";
+                      //  alert("A");
+                    } else {
+                        this.hasFile = true;
+                        
+                        if (this.okayColor){
+                            this.el.children[1].style.background = this.okayColor;
+                        } else {
+                            this.el.children[1].style.background = "#1abc9c";
+                        }
+                         
+                    }
+        
+        
+        return this;
+    }
+    
+    
+    
+    
+    
+     auto() {
+		const adj = () => {
+			let query = window.matchMedia("(max-device-width: 415px)");
+			if (query.matches) {
+			//	this.el.style.fontSize = '3rem';
+			} else {
+			//	this.el.style.fontSize = '1rem';
+			}
+		}
+
+		adj();
+		window.addEventListener("resize", adj);
+		return this;
+	}
+    
+    onLoad(file){
+        
+      //  console.log(this.file);
+        this.returnObject(this.file);
+        return this;
+    }
+    
+    
+    
+    
+    
+    getLoaded(){
+    return this.file;    
+    }
+    
+    returnObject(file){
+      //  console.log("NOW");
+        return file;
+    }
+    
+    loadCall(func){
+        this.func = func;
+        this.func(this.file);
+        return this;
+    }
+
+    toCode() {
+        let objString = JSON.stringify(this.options, null, 4);
+        objString = objString.replace(/"(\w+)"(?=\s*:)/g, '$1');
+        return [`new FilePickera().set(${objString})`];
+    }
+    
+    render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.el);
+            return this;
+		} else {
+			return this.el;
+		}	
+	}
+}
+
+
+
+
+var data = []; // Has to be called data!
+/*
+new FilePickera()
+.setup({
+    index: 0,
+    id: "A",
+    title: "Select picture A"
+}).render("#res");*/
+
+ /*new FilePicker()
+.setup({
+    index: 1,
+    id: "B",
+    title: "Select picture B"
+}).render("#res");
+
+*/
+
+
+
+/*
+class Appa extends Base {
+    constructor(){
+        super();
+    }
+    
+    render(){
+        return new Text("Q")
+    }
+}*/
+
+
+// new Appa().mount("#res");
+
+
+
+
+
+
+export { FilePickera
+ };

package/layout/formComponents/picker.js

@@ -0,0 +1,208 @@
+import {Animator} from "../animator.js";
+
+
+class Picker extends Animator {
+    constructor(){
+        super();
+        this.el = null;
+        this.file = null;
+        this.selected = "";
+    }
+    
+    
+  
+    
+    
+    
+    setup(obj, name){
+        let wrap = document.createElement("div");
+        
+		let card = document.createElement("select");
+	     card.setAttribute("type", "file");
+         card.setAttribute("name", name);
+        
+        
+        
+        card.addEventListener("change", () => {
+         
+            let picked = card.options[card.selectedIndex].value;
+          //  console.log(picked);
+        });
+        
+ 
+        /*var z = document.createElement("option");
+  z.setAttribute("value", "volvocar");
+  var t = document.createTextNode("Volvo");
+  z.appendChild(t);
+      */  
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        for (var i = 0; i < obj.length; i++){
+             card.appendChild(this.addNode(obj[i][0], obj[i][1]));
+        }
+        
+  /*card.appendChild(this.addNode("audi", "Audi"));
+         card.appendChild(this.addNode("audi", "Audi"));
+         card.appendChild(this.addNode("audi", "Audi"));
+        */
+        
+        this.el = card;
+        return this;
+    }
+    
+    set(obj){
+        this.options = obj;
+        obj.items && this.setup(obj.items, obj.name);
+        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);
+
+        obj.radius && (this.el.style.borderRadius = obj.radius);
+        obj.background && (this.el.style.background = obj.background);
+        return this;
+    }
+
+    arrayPadding(arr, value) {
+	//alert("PP")
+    //console.log(arr);
+		if (arr.includes("left")){
+			this.el.style.paddingLeft = value;
+		}
+
+		// console.log("PAD");
+		// console.log(this.res.style.paddingLeft);
+		// console.log(arr);
+		// console.log(value);
+		
+		if (arr.includes("right")){
+			this.el.style.paddingRight = value;
+		}
+		
+		if (arr.includes("top")){
+			this.el.style.paddingTop = value;
+		}
+		
+		if (arr.includes("bottom")){
+			this.el.style.paddingBottom = value;
+		}
+
+		if (arr.includes("all")){
+			this.el.style.padding = value;
+				}
+			
+		
+		return this;
+	}
+
+    arrayMargin(arr, value) {
+        //alert("PP")
+      //  console.log(arr);
+            if (arr.includes("left")){
+                this.el.style.marginLeft = value;
+            }
+    
+            // console.log("PAD");
+            // console.log(this.res.style.paddingLeft);
+            // console.log(arr);
+            // console.log(value);
+            
+            if (arr.includes("right")){
+                this.el.style.marginRight = value;
+            }
+            
+            if (arr.includes("top")){
+                this.el.style.marginTop = value;
+            }
+            
+            if (arr.includes("bottom")){
+                this.el.style.marginBottom = value;
+            }
+    
+            if (arr.includes("all")){
+                this.el.style.margin = value;
+                    }
+                
+            
+            return this;
+        }
+        
+    
+    
+addNode(value, text){
+  var z = document.createElement("option");
+  z.setAttribute("value", value);
+  var t = document.createTextNode(text);
+  z.appendChild(t);
+    return z;
+    }
+    
+    padding(val){
+        this.el.style.padding = val;
+        return this;
+    }
+    
+    
+    font(font){
+        this.el.style.fontFamily = font;
+        return this;
+    }
+    
+    margin(val){
+        this.el.style.margin = val;
+        return this;
+    }
+
+    toCode() {
+        let objString = JSON.stringify(this.options, null, 4);
+        objString = objString.replace(/"(\w+)"(?=\s*:)/g, '$1');
+        return [`new Picker().set(${objString})`];
+    }
+    
+    
+    rounded(el){
+        this.el.style.borderRadius = "4px";
+        return this;
+    }
+    
+     auto() {
+		const adj = () => {
+			let query = window.matchMedia("(max-device-width: 415px)");
+			if (query.matches) {
+				this.el.style.fontSize = '3rem';
+			} else {
+				this.el.style.fontSize = '1rem';
+			}
+		}
+
+		adj();
+		window.addEventListener("resize", adj);
+		return this;
+	}
+    
+     render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.el);
+           
+		} else {
+			return this.el;
+		}	
+	}
+}
+
+
+
+
+
+
+
+window.Picker = Picker;
+export { Picker };

package/layout/formComponents/radio.js

@@ -0,0 +1,231 @@
+import {Animator} from "../animator.js";
+
+class RadioGroup /*extends Animator*/ {
+     constructor(){
+       // super();
+        this.el = null;
+        this.radioCount = 0;
+       // this.setup();
+    }
+    
+    set(objects){
+        
+        this.options = objects;
+        console.log("ORARA");
+        console.log(this.options);
+      
+        
+        this.radioCount = objects.items.length;
+        
+        let wrap = document.createElement("div");
+	
+        
+        let obj = objects.items;
+        
+        for (var i = 0; i < obj.length; i++){
+        
+        
+        let label = document.createElement("label"); 
+
+        if (obj.font){
+            label.style.font = obj.font;
+        }
+
+        if (obj.color){
+            label.style.color = obj.color;
+        }
+
+        if (obj.exact){
+            label.style.fontSize = obj.exact;
+        }
+
+
+
+
+        let node = document.createTextNode(obj[i]);
+        label.appendChild(node);
+        label.setAttribute("for", obj[i]); 
+        
+		let card = document.createElement("input");      
+        card.setAttribute("type", "radio");
+        card.setAttribute("id", `S${i}`);
+        card.setAttribute("value", obj[i].split(" ").join(""));   
+
+        card.style.appearance = 'none';
+        card.style.width = '20px';
+        card.style.height = '20px';
+        card.style.border = this.options.tint ? `2px solid ${this.options.tint}` : '2px solid #007BFF';
+        card.style.borderRadius = '50%';
+        card.style.outline = 'none';
+        card.style.cursor = 'pointer';
+        card.style.transition = '0.3s';
+
+    //    card.addEventListener('change', () => {
+       //     alert("change");
+          /*  if (card.checked) {
+                card.style.backgroundColor = '#007BFF';
+                card.style.boxShadow = '0 0 0 2px #0056b3 inset';
+            } else {
+                card.style.backgroundColor = 'transparent';
+                card.style.boxShadow = 'none';
+            }*/
+      //  });
+            
+        this.options.font && (label.style.fontFamily = this.options.font);
+            
+           if (objects.multiple){
+                card.setAttribute("name", obj[i].split(" ").join(""));   
+            } else {
+                card.setAttribute("name", objects.name);
+              //  card.setAttribute("name", "same");
+            } 
+            
+            
+       /* card.addEventListener("change", () => {
+            let picked = card.options[card.selectedIndex].value;
+            console.log(picked);
+        });*/
+            
+            
+             wrap.appendChild(card);
+             wrap.appendChild(label);
+             wrap.innerHTML += "</br>";
+        
+        }
+        
+        this.el = wrap;
+        
+        this.responsive();
+        return this;
+    } 
+
+    
+    
+     padding(val){
+        this.el.style.padding = val;
+        return this;
+    }
+    
+    getCheckedValues(){
+        console.log("NOW");
+        
+        var values = [];
+        
+        for (var i = 0; i < this.radioCount; i++){
+            
+           
+            if (document.querySelector(`#S${i}`).checked) {
+            let value = document.querySelector(`#S${i}`);
+            console.log("VALUE IS " + value.value);    
+            values.push(value.value);
+                }
+        }
+        
+        
+        
+        return values;
+    }
+
+    toCode() {
+        /*let objString = JSON.stringify(
+            this.options,
+            (key, value) => (typeof key === "string" && key !== "" ? value : value),
+            4
+        );*/
+
+        // 155735 preventing problem, no removal 
+        let objString = JSON.stringify(this.options, null, 4);
+        objString = objString.replace(/"(\w+)"(?=\s*:)/g, '$1');
+        return [`new RadioGroup().set(${objString})`];
+    }
+    
+    
+    
+    responsive(){
+            let query = window.matchMedia("(max-device-width: 415px)");
+           
+            // window.matchMedia(query)
+            if (query.matches){
+                this.el.style.fontSize = "1.7em";
+            }
+            
+            return this;
+        }
+    
+    
+    
+     render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.el);
+
+
+          
+           
+		} else {
+
+
+
+
+            console.log("MULA");
+        //    console.log(this.el.children[0]);
+
+      
+
+        for (var i = 0; i < this.el.children.length; i++){
+
+            let card =  this.el.children[i];
+           // console.log(card.toString());
+
+          
+
+
+           if (card.toString() === "[object HTMLInputElement]") {
+            card.addEventListener('change', () => {
+                if (card.checked) {
+                    card.style.backgroundColor = this.options.tint ? this.options.tint : '#007BFF';
+                    card.style.boxShadow = this.options.tint ?`0 0 0 2px ${this.options.tint} inset` : '0 0 0 2px #0056b3 inset';
+        
+                    // Reset styles for other radio buttons in the group
+                    for (let j = 0; j < this.el.children.length; j++) {
+                        const sibling = this.el.children[j];
+                      //  alert(this.options.multiple);
+                        // Check if the sibling is an input element
+                        if (sibling.tagName === 'INPUT' && sibling.type === 'radio') {
+                            // Avoid resetting the current radio button
+                            if (this.options.multiple === false && sibling !== card) {
+                                sibling.style.backgroundColor = 'transparent';
+                                sibling.style.boxShadow = 'none';
+                            }
+                        }
+                    }
+                } else {
+                    card.style.backgroundColor = 'transparent';
+                    card.style.boxShadow = 'none';
+                }
+            });
+        }
+        
+      
+
+        }
+
+  
+         
+
+
+
+
+            
+			return this.el;
+		}	
+
+	}
+}
+
+
+
+
+
+
+window.RadioGroup = RadioGroup;
+export { RadioGroup };