nodality 1.0.0-beta.1

package/layout/grid-new.js

@@ -0,0 +1,299 @@
+import {Animator} from "./animator.js";
+
+ class Modal {
+	constructor(){
+		this.el = null;
+		this.obj = null;
+	}
+	
+	setup(obj){
+		let el = document.createElement("div");
+		el.style.width = "100vw";
+		el.style.height = "160vh";
+		el.style.backgroundColor = obj.background;//"rgba(70,157,115,0.8)";
+	   // el.style.backgroundColor = "#3498db";
+		el.style.zIndex = "1";
+		//el.style.opacity = 0.90;
+		el.style.position = "absolute";
+		el.style.overflowY = "scroll";
+		el.style.display = "block";
+		
+		this.obj = obj;
+		this.res = el;
+		return this;
+	}
+
+	
+	
+	
+	
+	close(){
+		this.res.style.display = "none";
+		return this;
+	}
+	
+	show(){
+		 this.res.style.display = "block";
+		return this;
+	}
+	
+	
+	add(els){
+		
+		
+		
+		
+		let el = document.createElement("div");
+		el.style.marginTop = "60px";
+		el.style.width = this.obj.width; //"60%";
+		el.style.height = "auto";
+		el.style.marginLeft = "auto";
+		el.style.marginRight = "auto";
+		el.style.backgroundColor = "white"; // "#3498db";
+		el.style.opacity = 1.0;
+		el.style.zIndex = "2";
+		el.style.borderRadius = "16px";
+	  //  el.style.padding = "2em";
+		
+		
+		let mq = window.matchMedia("(max-device-width: 415px)");
+		if (mq.matches){
+			el.style.marginTop = "200px";
+			 el.style.width = "100%";
+		}
+			
+		
+	   
+		for (var i = 0; i < els.length; i++){
+			console.log(els[i]);
+			el.appendChild(els[i].render());
+		}
+		
+		
+		
+		
+		  this.res.appendChild(el);
+		
+	  /*  let inner = new Text("WOW");
+	   let ren = inner.render();
+		ren.style.zIndex = "2";
+		
+		this.res.appendChild(ren);
+		*/
+		
+		
+		
+		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;
+	}
+}
+	
+	
+}
+
+
+class GridNew {
+	constructor(frs, saveEl) {
+		this.saveEl = saveEl;
+		this.frs = frs;
+		this.res = null;
+		this.setup();
+	}
+
+	setup() {
+		let parent = document.createElement("div");
+		parent.setAttribute("id", "ABC34");
+		this.parent = parent;
+
+		let grid = document.createElement("div");
+		grid.style.margin = 0;
+		grid.style.padding = 0;
+		grid.style.display = "flex";
+		grid.style.flexWrap = "wrap";
+		
+		
+		/*
+		if (this.frs){
+			grid.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+		}
+		grid.style.gridTemplateColumns = "repeat(auto-fit, minmax(250px, 1fr))";
+		*/
+		this.res = grid;
+		return this;
+	}
+	
+	absolute(){
+		// this.res.style.position = "absolute";
+		return this;
+	}
+
+	setAreas(areas){
+		console.log(areas);
+		this.res.children[0].style.gridArea = "a";
+		this.res.children[1].style.gridArea = "b";
+		this.res.style.gridTemplateAreas = `"a a a b"`;
+		console.warn(this.res.style.gridTemplateAreas);
+		
+	
+		return this;
+	}
+
+	detailView(){
+		/*let detail = document.createElement("img");
+		
+		detail.setAttribute("src", "https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png");
+detail.style.width = "400px";
+detail.style.marginLeft = "auto";
+detail.style.marginRight = "auto";
+detail.style.position = "absolute";
+
+
+		detail.style.zIndex = 2;
+
+
+
+		this.parent.appendChild(detail);*/
+		this.parent.appendChild(this.res);
+		return this;
+
+	}
+
+
+
+
+	
+	stretchFit() {
+		this.res.style.height = "auto";
+		this.res.style.width = "100%";
+		return this;
+	}
+
+	size(w, h) {
+		if (w === "wide") {
+			this.res.style.width = "100%";
+		} else {
+			this.res.style.width = w;
+		}
+
+		if (h === "fit") {
+			this.res.style.height = "auto";
+		} else {
+			this.res.style.height = h;
+		}
+
+		return this;
+	}
+
+	border(){
+		this.res.style.border = "3px solid green";
+		return this;
+	}
+
+	items(arr) {
+		console.warn(arr);
+		for (var i = 0; i < arr.length; i++) {
+			this.res.appendChild(arr[i].render());
+		}
+		return this;
+	}
+
+
+	center() {
+		this.res.style.justifyItems = "center";
+		return this;
+	}
+
+	padding(val, direction) {
+		if (direction) {
+			if (direction == "left") {
+				this.res.style.paddingLeft = val;
+			} else if (direction == "top") {
+				this.res.style.paddingTop = val;
+			}
+		} else {
+			this.res.style.padding = val;
+		}
+
+		return this;
+	}
+
+	onTap(e) {
+		this.res.addEventListener("click", e);
+		return this;
+	}
+
+	gap(value){
+		this.gap = `${value}px`;
+		return this;
+	}
+
+	setColumns(obj) { // (count, h)
+		
+		
+		
+		let count = obj.count;
+		let h = obj.width;
+		
+			//let media = window.matchMedia(`(max-width: 600px)`);
+		let query = window.matchMedia("(max-device-width: 415px)");
+		
+		if (window.innerWidth < h || query.matches) {
+			this.res.style.gridTemplateColumns = Array(count).fill("1fr").join(" ");
+			this.res.style.gridGap = this.gap; //"30px";
+		} else {
+			this.res.style.gridGap = this.gap; // "30px";
+			this.res.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+		}
+
+
+		const adjust = () => {
+
+			if (window.innerWidth < h) {
+				this.res.style.gridTemplateColumns = Array(count).fill("1fr").join(" ");
+				this.res.style.gridGap = this.gap; //"30px";
+			} else {
+				this.res.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+				this.res.style.gridGap = this.gap;   // "30px";
+			}
+		}
+
+		
+		
+		window.addEventListener("resize", adjust);
+		
+		
+		return this;
+	}
+
+	render(el) {
+		if (el){
+			document.querySelector(el).appendChild(this.parent);
+		} else {
+			return this.parent;
+		}
+		
+	}
+}
+
+
+
+
+
+
+
+window.Modal
+GridNew = Modal
+GridNew;
+export { Modal
+GridNew };

package/layout/grid.js

@@ -0,0 +1,190 @@
+import {Animator} from "./animator.js";
+
+ 
+class Grid {
+	constructor(frs, saveEl) {
+		this.saveEl = saveEl;
+		this.frs = frs;
+		this.res = null;
+		this.setup();
+	}
+
+	getType(){
+		return "GridLayoutElement";
+	}
+
+	setup() {
+		let parent = document.createElement("div");
+		this.parent = parent;
+
+
+		let grid = document.createElement("div");
+		grid.style.margin = 0;
+		grid.style.padding = 0;
+		grid.style.display = "grid";
+		
+		if (this.frs){
+			grid.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+		}
+		
+		this.res = grid;
+		return this;
+	}
+
+	freeAreas(){
+		this.res.style.gridTemplateAreas = `"a a a b c"`;
+		return this;
+	}
+	
+	
+	setAreas(areas){
+		console.log(areas);
+		this.res.children[0].style.gridArea = "a";
+		this.res.children[1].style.gridArea = "b";
+		this.res.style.gridTemplateAreas = `"a a a b"`;
+		console.warn(this.res.style.gridTemplateAreas);
+		return this;
+	}
+
+	detailView(){
+		let detail = document.createElement("img");
+		detail.setAttribute("src", "https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png");
+		detail.style.width = "400px";
+		detail.style.marginLeft = "auto";
+		detail.style.marginRight = "auto";
+
+//this.res.style.zIndex = -1;
+
+		detail.style.zIndex = 2;
+
+
+
+		this.res.appendChild(detail);
+		return this;
+
+	}
+
+
+
+
+	
+	stretchFit() {
+		this.res.style.height = "auto";
+		this.res.style.width = "100%";
+		return this;
+	}
+
+	size(w, h) {
+		if (w === "wide") {
+			this.res.style.width = "100%";
+		} else {
+			this.res.style.width = w;
+		}
+
+		if (h === "fit") {
+			this.res.style.height = "auto";
+		} else {
+			this.res.style.height = h;
+		}
+
+		return this;
+	}
+
+	border(){
+		this.res.style.border = "3px solid green";
+		return this;
+	}
+
+	items(arr) {
+		console.warn(arr);
+		for (var i = 0; i < arr.length; i++) {
+			this.res.appendChild(arr[i].render());
+		}
+		return this;
+	}
+
+
+	center() {
+		this.res.style.justifyItems = "center";
+		return this;
+	}
+
+	padding(val, direction) {
+		if (direction) {
+			if (direction == "left") {
+				this.res.style.paddingLeft = val;
+			} else if (direction == "top") {
+				this.res.style.paddingTop = val;
+			}
+		} else {
+			this.res.style.padding = val;
+		}
+
+		return this;
+	}
+
+	onTap(e) {
+		this.res.addEventListener("click", e);
+		return this;
+	}
+
+	gap(value){
+		this.gap = `${value}px`;
+		return this;
+	}
+
+	setColumns(obj) { // (count, h)
+		
+		
+		
+		let count = obj.count;
+		let h = obj.width;
+		
+			//let media = window.matchMedia(`(max-width: 600px)`);
+		let query = window.matchMedia("(max-device-width: 415px)");
+		
+		if (window.innerWidth < h || query.matches) {
+			this.res.style.gridTemplateColumns = Array(count).fill("1fr").join(" ");
+			this.res.style.gridGap = this.gap; //"30px";
+		} else {
+			this.res.style.gridGap = this.gap; // "30px";
+			this.res.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+		}
+
+
+		const adjust = () => {
+
+			if (window.innerWidth < h) {
+				this.res.style.gridTemplateColumns = Array(count).fill("1fr").join(" ");
+				this.res.style.gridGap = this.gap; //"30px";
+			} else {
+				this.res.style.gridTemplateColumns = Array(this.frs).fill("1fr").join(" ");
+				this.res.style.gridGap = this.gap;   // "30px";
+			}
+		}
+
+		
+		
+		window.addEventListener("resize", adjust);
+		
+		
+		return this;
+	}
+
+	render(el) {
+		if (el){
+			document.querySelector(el).appendChild(this.res);
+		} else {
+			return this.res;
+		}
+		
+	}
+}
+
+
+
+
+
+
+
+export { Grid };

package/layout/gridSwitcher.js

@@ -0,0 +1,188 @@
+class Simple {
+    constructor() {
+      
+      this.gridContainer = document.createElement("div");
+      this.gridContainer.classList.add("grid-container");
+      this.gridContainer.style.display = "grid";
+    //  this.gridContainer.style.gridAutoRows = "1fr"; EVIL LINE
+    }
+
+    set(obj){
+      obj.gap &&  (this.gridContainer.style.gap = obj.gap);
+      obj.height && (this.gridContainer.style.height = obj.height);
+      obj.width && (this.gridContainer.style.width = obj.width);
+      return this;
+    }
+
+    /*
+    [
+                   {
+                     at: "default",
+                     template: [
+                     "abbbbb",
+                     "abbbbb",
+                     "abbbbb",
+                     "cccccc",
+                     "cccccc",
+                     "dddddd",
+                     "eeeeee",
+                     "eeeeee"
+                   ] 
+                   },
+    */
+    react(arr){
+      const reacta = () => {
+        console.log(arr.length);
+for (var i = 0; i < arr.length - 1; i++){
+ // alert(parseInt(arr[i].at))
+ console.warn(window.innerWidth);
+ //console.warn("BETWEEN" + parseInt(arr[i].at) + " - " + parseInt(arr[i + 1].at) );
+
+ let from = parseInt(arr[i].at);
+ let to = parseInt(arr[i + 1].at);
+
+
+  if ( window.innerWidth > from && window.innerWidth < to ){
+//alert("O")
+console.log("FROM    " + from + "    TO  " + to);
+    let obj = arr[i].template;
+
+     let withSpaceObj = obj.map(str => str.split('').join(' '));
+     const outputString = withSpaceObj.map(row => `"${row}"`).join(" ");
+     this.gridContainer.style.gridTemplateAreas = outputString;
+ 
+     this.gridContainer.style.border = `3px solid ${arr[i].color}`;
+ 
+    } else if (window.innerWidth > to) {
+      this.gridContainer.style.border = `3px solid ${arr[arr.length - 1].color}`;
+      console.log("BIGGER THAN"  +  " "  + to);
+      //alert("P")
+      // This always fires
+      let obj = arr[arr.length - 1].template;
+
+      let withSpaceObj = obj.map(str => str.split('').join(' '));
+      const outputString = withSpaceObj.map(row => `"${row}"`).join(" ");
+      this.gridContainer.style.gridTemplateAreas = outputString;
+  
+    }
+
+
+}
+//return this;
+      }
+      reacta();
+     window.addEventListener("resize", reacta);
+     return this;
+    }
+  
+     add(items){
+      console.log(items);
+  
+   //   let withSpaceObj = obj.map(str => str.split('').join(' '));
+   //   const outputString = withSpaceObj.map(row => `"${row}"`).join(" ");
+   //   this.gridContainer.style.gridTemplateAreas = outputString;//'"a a a" "b b b" "c d d" "c d d"';
+     // Function to generate alphabetic sequences
+  const generateAlphabeticSequence = (count) => {
+    const chars = [];
+    for (let i = 0; i < count; i++) {
+      let str = '';
+      let num = i;
+      do {
+        str = String.fromCharCode(65 + (num % 26)) + str; // Generate character
+        num = Math.floor(num / 26) - 1;
+      } while (num >= 0);
+      chars.push(str);
+    }
+    return chars;
+  };
+
+  // Generate 'els' array dynamically
+  let els = generateAlphabeticSequence(items.length); // ['A', 'B', ..., 'Z', 'AA', 'AB', ...]
+
+  for (let i = 0; i < items.length; i++) {
+    let e = items[i].render();
+    e.style.border = "1px solid gray";
+    e.style.gridArea = els[i].toLowerCase(); // e.g., 'a', 'b', 'aa', 'ab', ...
+
+    const gridItem = document.createElement("div");
+    gridItem.textContent = items[i].text;
+    gridItem.style.gridArea = els[i].toLowerCase();
+    this.gridContainer.appendChild(e);
+  }
+  
+    return this;
+     }
+
+
+     render(el) {
+      el && document.querySelector(el).appendChild(this.gridContainer);
+      return this.gridContainer;
+    }
+
+      toCode(){
+      return `new Simple().set({}).react([])`;
+    }
+  }
+  
+  // Usage example:
+  //const simpleGrid = new Simple();
+  //document.body.appendChild(simpleGrid.render());
+  
+  
+  class GridSwitcher {
+    constructor(){
+     this.el = document.createElement("div");
+     this.gridWrap = document.createElement("div");
+    }
+  
+    DOMAdd(dom){
+      this.domStr = dom;
+      this.domEl = document.querySelector(dom);
+      return this;
+    }
+  
+    items(arr){
+      this.items = arr;
+      return this;
+    }
+  
+    dynamicItems(arr){
+      this.dynamicItems = arr;
+      return this;
+    }
+    switch(breakpoints){
+      const innerSwitch = () => {
+          for (let i = 0; i < breakpoints.length; i++){
+              const val = breakpoints[i];
+              let mq = window.matchMedia(`(max-width: ${val.at})`).matches;
+              if ((mq || val.at == "default") && mq !== this.lastMq){
+                  const update = new Simple().set(val.template, this.dynamicItems).render();
+                  this.el = update;
+                  this.el.style.border  = "1px solid black";
+                  this.render(this.domStr);
+                  this.lastMq = mq;
+              }
+          }
+      }
+      innerSwitch();
+      window.addEventListener("resize", innerSwitch);
+      return this;
+  }
+  
+    render(div){
+      this.gridWrap.innerHTML = "";
+      this.gridWrap.appendChild(this.el);
+
+   // document.querySelector(div).removeChild(this.el);
+  if (div){
+    document.querySelector(div).appendChild(this.gridWrap);
+  } 
+
+  return this.gridWrap;
+
+   // return this.el;
+      // Just return this.el it normally
+    }
+  }
+  
+  export {Simple};