nodality 1.0.0-beta.1

package/layout/audio.js

@@ -0,0 +1,145 @@
+import {Animator} from "./animator.js";
+
+/*class Wrap {
+	constructor(){
+		this.setup();
+	}
+	
+	setup(){
+		let gr = document.createElement("div");
+		gr.style.padding = 0;
+		gr.style.margin = 0;
+		this.res = gr;
+	}
+	
+	width(w, shouldCenter){
+		this.res.style.width = w;
+		
+		if (shouldCenter){
+		this.res.style.marginLeft = "auto";
+		this.res.style.marginRight = "auto";
+		}
+		return this;
+	}
+	
+	padding(value){
+		this.res.style.padding = `${value}px`;
+		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;
+	}
+	
+	items(els){
+		for (var i = 0; i < els.length; i++){
+			this.res.appendChild(els[i].render().render());
+		}
+		return this;
+	}
+	
+	
+	
+	border(color, width){
+		this.res.style.border = `${width}px solid ${color}`;
+		return this;
+	}
+	
+	render(el){
+		if (el){
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+		
+	}
+}*/
+
+
+
+	class Audio extends Animator {
+	constructor(url, /*obj*/) {
+		super();
+		this.url = url;
+		this.res = null;
+		//this.setup(obj);
+		
+		this.setup();
+	}
+		
+		
+		
+		
+		
+		setup(){
+			this.res = document.createElement("audio");
+			this.res.setAttribute("src", this.url);
+			this.res.setAttribute("controls", "controls");
+			
+			
+			/*var x = document.createElement("VIDEO");
+
+  if (x.canPlayType("video/mp4")) {
+    x.setAttribute("src","movie.mp4");
+  } else {
+    x.setAttribute("src","movie.ogg");
+  }
+
+  x.setAttribute("width", "320");
+  x.setAttribute("height", "240");
+  x.setAttribute("controls", "controls");
+  document.body.appendChild(x);
+		
+		
+		
+		
+		*/
+		}
+		
+		
+		
+		size(w/*, h*/) {
+			
+			this.res.style.width = w;
+			//this.res.style.height = w;
+			
+			
+		/*if (w && h) {
+			this.res.style.width = w;
+			this.res.style.height = h;
+		} else {
+			this.res.style.width = w;
+			this.res.style.height = w;
+		}*/
+
+		return this;
+	}
+		
+		
+		render(el) {
+		if (el) {
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+	}
+	}
+	
+
+export { Audio };

package/layout/audionew.js

@@ -0,0 +1,70 @@
+import {Animator} from "./animator.js";
+
+
+	
+	// NExt
+	
+	class Audio extends Animator {
+		constructor(url) {
+			super();
+			this.url = url;
+			this.res = null;
+			this.setup();
+		}
+
+		setup() {
+			this.res = document.createElement("audio");
+			this.res.setAttribute("src", this.url);
+			this.res.setAttribute("controls", "controls");
+			
+		}
+
+
+		set(obj) {
+			this.options = obj;
+			obj.background && this.background(obj.background);
+			return this;
+		}
+
+		
+
+		background(obj) {
+			const style = document.createElement("style");
+			style.type = "text/css";
+			style.textContent = `
+	audio::-webkit-media-controls-panel {
+		background-color: ${obj};
+	}
+`;
+			document.head.appendChild(style);
+			return this;
+		}
+
+		toCode() {
+			const objString = JSON.stringify(this.options, null, 4);
+			return [`new Audio("${this.url}")`];
+		}
+
+
+		size(w/*, h*/) {
+			this.res.style.width = w;
+			return this;
+		}
+
+
+		render(el) {
+			if (el) {
+				document.querySelector(el).appendChild(this.res);
+			} else {
+				return this.res;
+			}
+		}
+	}
+
+ 
+
+
+//var _oldAudio = Audio;
+//Audio = function(...args) { return new _oldAudio(...args) };
+
+export { Audio };

package/layout/base-2.js

@@ -0,0 +1,92 @@
+import {Animator} from "./animator.js";
+
+class Base { 
+	constructor(items){
+		this.items = items ?? [];
+		Base.prototype.items = items;
+		this.oldLength = 0;
+	}
+	
+	set itemso(itemsa) {
+		 this.items = itemsa;// (itemsa);
+		Base.prototype.items = itemsa;
+	}
+	
+	
+	Proxima(a) {
+		var me = this;
+		return new Proxy(a, {
+			get(target, property, receiver) { // GETTER FIRES THIS BEFORE WE GET DATA USING (this.items.push())
+				/*
+				me.itemso = a[property].map(t => String(t));
+				return a[property];*/
+
+				return a[property];
+			},
+			set(T, P, V, R) {
+				 console.warn("PUSHED REACTIVELY :D");
+				me.itemso = a[P].map(t => String(t));
+				return a[P];
+			},
+			has(t, p) {
+				return Reflect.has(t, p);
+			}
+		});
+	}
+
+	observe(obj) {
+		return this.Proxima(obj);
+	}
+	
+	
+	adjustState(newData){
+		if (newData.data.length > this.oldLength){
+			let node = document.querySelector(this.el);
+			
+			while (node.firstChild){
+				node.removeChild(node.lastChild);
+			}
+			
+			this.render(this.el).render(this.el);	 // rendra ===> build
+			this.oldLength = newData.data.length;
+		}
+	}
+	
+	
+	
+	
+	 toNode(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+
+  // Change this to div.childNodes to support multiple top-level nodes
+  return div.firstChild; 
+}
+	
+	reactState(){
+		
+		/*let nodess = document.querySelector(this.el);
+			
+			while (nodess.firstChild){
+				nodess.removeChild(nodess.lastChild);
+			}*/
+		
+		
+		let node = document.querySelector("#res");
+		alert(this.render());
+		
+		
+		let nodes = this.toNode(this.toHTML());
+		node.appendChild(nodes);
+	}
+	
+	mount(el){
+		this.el = el;
+		this.render(el).render(el); // // this.render === function inside component
+	}
+	
+	toHTML(el){
+		return this.render(el).render(el).innerHTML; // // rendra ===> build
+	}
+}
+export { Base };

package/layout/base.js

@@ -0,0 +1,161 @@
+import {Animator} from "./animator.js";
+
+class Base {
+	constructor(/*items*/){
+		//this.items = items ?? [];
+		//Base.prototype.items = items;
+		this.oldLength = 0;
+	}
+	
+	
+	/*set itemso(itemsa) {
+		 this.items = itemsa;// (itemsa);
+		Base.prototype.items = itemsa;
+	}*/
+	
+	
+	observe(obj) {
+		this.initialState = obj//.data;
+		return this.Proxima(obj);
+	}
+	
+	Proxima(a) {
+		var me = this;
+		return new Proxy(a, {
+			set(target, prop, key, value) {
+				 alert(`Setting ${key} to ${value}`);
+				target[key] = value;
+				
+				
+				this.initialState.data.push(key);
+				
+				 if (prop !== 'length') {
+					 me.refreshUI("Added");
+				 }
+				return true;//a[P];
+			},
+			has(target, prop, key, value) {
+				
+				if (prop !== 'length') {
+					 me.refreshUI("Deleted");
+				}
+				return Reflect.has(target, prop);
+			}
+		});
+	}
+
+	
+	refreshUI(op){
+		let data = this.initialState;
+		this.adjustState(data);
+		//alert(`${op} ${data.join(", ")}`);
+	}
+	
+	
+	
+	loadState(data, id){
+		this.loadEl = id;
+		this.initialState = data;
+		alert(this.initialState.data);
+		
+		return this.observe(this.state.data);
+		
+		// Find what elements changed, and insert the node
+	}
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	// node should only be added, not removed
+	
+	// use template().render()
+	 adjustState(newData){
+		
+		let node = document.querySelector(this.loadEl);
+			
+		let latestText = newData[newData.length - 1];
+		
+		let p = document.createElement("p");
+		let textNode = document.createTextNode(latestText);
+		p.appendChild(textNode);
+		
+		 // p
+		 
+		 
+		//node.insertBefore(p, node.childNodes[node.childNodes.length]);
+		document.body.appendChild(p);
+	}
+	
+	
+	
+	
+	
+	/*adjustState(newData){
+		
+		let node = document.querySelector(this.el);
+			
+		
+		alert("LENAX " + node.childNodes[0].children.length);
+		
+		
+		var lenax = node.childNodes[0].children.length;
+		
+		//var len = node.childNodes[0];// 1
+		alert(node.childNodes[0]);
+			while (node.firstChild){
+				node.removeChild(node.lastChild);
+			}
+			
+			this.render(this.el).render(this.el);	 // rendra ===> build
+	}*/
+	
+	
+	
+	
+	 toNode(htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+
+  // Change this to div.childNodes to support multiple top-level nodes
+  return div.firstChild; 
+}
+	
+	reactState(){
+		
+		/*let nodess = document.querySelector(this.el);
+			
+			while (nodess.firstChild){
+				nodess.removeChild(nodess.lastChild);
+			}*/
+		
+		
+		let node = document.querySelector("#res");
+		alert(this.render());
+		
+		
+		let nodes = this.toNode(this.toHTML());
+		node.appendChild(nodes);
+	}
+	
+	mount(el){
+		this.el = el;
+		this.render(el).render(el); // // this.render === function inside component
+	}
+
+	toCode(){
+		return [""];
+	}
+	
+	toHTML(el){
+		return this.render(el).render(el).innerHTML; // // rendra ===> build
+	}
+}
+export { Base };

package/layout/betaDesktopBar.js

@@ -0,0 +1,126 @@
+import {Animator} from "./animator.js";
+class /*Beta*/DesktopBar extends Animator { // add set method for background color and try to publish
+    constructor() {
+        super();
+        this.navbar = document.createElement('nav');
+        this.navbar.classList.add('desktop-navbar');
+
+        this.navbarHeader = document.createElement('div');
+        this.navbarHeader.classList.add('navbar-header');
+
+        this.brand = document.createElement('div');
+        this.brand.classList.add('navbar-brand');
+
+        this.navContent = document.createElement('div');
+        this.navContent.classList.add('navbar-content');
+        this.navContent.style.width = "100%";
+
+        this.navbarHeader.appendChild(this.brand);
+        this.navbarHeader.appendChild(this.navContent);
+        this.navbar.appendChild(this.navbarHeader);
+        this.res = this.navbar;
+       
+    }
+
+    set(obj){
+        console.warn(obj);
+        this.obj = obj;
+        obj.background && (this.res.style.backgroundColor = obj.background);
+        obj.mar && super.mar(obj.mar);
+        obj.brand && this.setBrand(obj.brand);
+        obj.radius && (this.res.style.borderRadius = obj.radius);
+        // THANK YOU 215756!!!
+        obj.maxHeight && (this.res.style.maxHeight = obj.maxHeight);
+
+        if (obj.hamburgerColour) {
+            this.hamburgerColour = obj.hamburgerColour;
+        }
+        // {
+       // [{"a": 21}]
+       this.setStyles();
+        return this;
+    }
+
+    setStyles() {
+        this.navbar.style.display = 'flex';
+        this.navbar.style.flexDirection = 'column';
+        this.navbar.style.padding = '1rem';
+        this.navbar.style.backgroundColor = '#333';
+        this.navbar.style.color = 'white';
+
+        this.navbarHeader.style.display = 'flex';
+        this.navbarHeader.style.alignItems = 'center';
+        this.navbarHeader.style.justifyContent = 'space-between';
+        this.navbarHeader.style.width = '100%';
+
+        this.brand.style.fontSize = '1.5rem';
+
+        this.navContent.style.display = 'flex';
+        this.navContent.style.gap = '1rem';
+
+    
+    }
+
+    setBrand(brandElement) {
+        console.warn("SETA");
+        console.log(brandElement);
+        this.brand.innerHTML = '';
+        this.brand.appendChild(brandElement);
+        return this;
+    }
+
+    /*addNavItem(navItemElement) {
+        this.navContent.appendChild(navItemElement);
+        return this;
+    }*/
+
+    add(ele){
+        this.items = ele;
+        for (var i = 0; i < ele.length; i++){
+            let item = ele[i];
+            this.navContent.appendChild(ele[i].render());
+        }
+
+        return this;
+    }
+
+    toCode(){
+        console.warn(this.items);
+        let items = this.items.map(it => it.toCode()).flatMap(x => x);
+
+        console.log("ITSA");
+        console.log(items); // links should not be split in teo
+        // console.warn(items.join("").replace(/}\)/g, '}),'));
+      /* console.log(this.items[3]);
+        console.log(this.items[3].toCode());
+
+        if (this.items[3].toCode().length != 1){
+            alert("Wrong link codegen");
+        }*/
+
+        //   ${items.join("")}
+        console.log(`${items.join(",")}`);
+        return `new DesktopBar().set(${this.removeQuotesFromFirstWord(JSON.stringify(this.obj))}).add([
+                  ${items.join(",")}
+
+                      
+                    
+
+                    ])`
+    }
+
+    /*
+    .replace(/}\)/g, '}),').replace("Spacer(true)", "Spacer(true),").replace(/,,/g, ",").replace(/}\),\./g, "}).")
+    */
+    render(container) {
+        if (container){
+            document.querySelector(container).appendChild(this.navbar);
+        }
+
+        return this.navbar;
+       // container.appendChild(this.navbar);
+    }
+}
+
+
+export {/*Beta*/DesktopBar}