nodality 1.0.0-beta.1

package/layout/navBar-OLD.js

@@ -0,0 +1,261 @@
+import {Animator} from "./animator.js";
+
+class NavBar {
+	constructor(){
+		this.ele = null;
+		this.titleText = "";
+		this.hasHamburger = false;
+		this.setup();
+	}
+	
+	
+	setup(){
+		let el = document.createElement("div");
+		el.style.backgroundColor = "#fff";
+	
+		el.style.display = "flex";
+		el.style.justifyContent = "space-around";
+		el.style.alignItems = "center";
+		el.style.margin = 0;
+		el.style.padding = 0;
+		el.style.width = "100%";
+		//-------------DEFAULT STYLING----------
+		el.style.margin = 0;
+		el.style.paddingTop = "1em";
+		el.style.paddingBottom = "1em";
+		this.ele = el;
+		
+		window.addEventListener("resize", this.adjust.bind(this));
+		return this;
+	}
+	
+
+	
+	title(text){
+		this.titleText = text;
+		let h = document.createElement("h2");
+		let node = document.createTextNode(text);
+		h.style.margin = 0;
+		h.style.padding = 0;
+		h.style.fontFamily = "Arial";
+		h.style.fontSize = "2em";
+		h.appendChild(node);
+		this.ele.appendChild(h);
+		return this;
+	}
+	
+	
+	image(url){
+		let h = document.createElement("img");
+		h.setAttribute("src", url);
+		h.style.margin = 0;
+		h.style.padding = 0;
+		h.style.width = 50;
+		this.ele.appendChild(h);
+		return this;
+	}
+	
+	items(items){
+		this.itemCount = items.length;
+		for (var i = 0; i < items.length; i++){
+			this.ele.appendChild(items[i].render());
+		}
+		
+		this.adjust();
+		return this;
+	}
+	
+	
+	font(family){
+		
+		for (var i = 0; i < this.ele.children; i++){
+			this.ele.children[i].style.fontFamily = family;
+		}
+		
+		return this;
+	}
+	
+
+	
+	openSymbol(symbol){
+		this.symbol = symbol;
+		return this;
+	}
+	
+	
+/*--------------------------------------------------ADJUST--------------------------------------------------*/	
+	// set habmurger icon
+adjust(w) {
+	let media = window.matchMedia(`(max-width: 600px)`);
+	let media2 = window.matchMedia(`(max-device-width: 415px)`);
+
+	if (media.matches || media2.matches) {
+		this.ele.style.flexDirection = "column";
+	} else {
+		this.ele.style.flexDirection = "row";
+		this.ele.style.marginLeft = 0;
+	}
+
+	const addHamburger = () => {
+		var btn = document.createElement("button");
+		var node = document.createTextNode(this.symbol ? this.symbol : "☰");
+		btn.style.border = "none";
+		btn.style.fontWeight = "bold";
+		btn.style.color = "#3498db";
+		btn.style.backgroundColor = "#fff";
+		btn.style.fontSize = media2.matches ? "4em" : "2em";
+		btn.appendChild(node);
+		 btn.style.marginLeft = "auto";
+		
+	//	alert("ADDED HABURGER!");
+		return btn;
+	}
+
+	
+	const adjustFontSize = () => {
+		for (var i = 0; i < this.ele.children.length; i++) {
+			let el = this.ele.children[i];
+			el.style.fontSize = media2.matches ? "2.4em" : "1em";
+
+			if (el.textContent === "☰") {
+				el.style.fontSize = "2em";
+			}
+		}
+	}
+
+	const toWideScreen = () => {
+		for (var i = 0; i < this.ele.children.length; i++) {
+			
+			let child = this.ele.children[i];
+			
+			child.style.marginTop = "0em";
+			child.style.display = "block";
+			
+			if (child.textContent === this.titleText) {
+				child.style.fontSize = "2em";
+			}
+		}
+
+		if (this.ele.childNodes[0].textContent == "☰") {
+			this.ele.removeChild(this.ele.childNodes[0]);
+		}
+		
+		this.ele.style.flexDirection = "row";
+	}
+	
+
+
+	var added = false;
+	
+	const doInAdjust = () => {
+		
+		
+		
+		adjustFontSize();
+
+		var closed = false;
+		
+		
+		if (!this.hasHamburger){
+			
+		
+		var btn = addHamburger();
+	
+		
+		
+		/*console.warn("LENA");
+		console.log(this.ele.children.length);
+		console.log(this.itemCount);*/
+		
+		
+		
+		
+		if (((this.ele.children.length == this.itemCount + 1) || (this.ele.children.length == this.itemCount))) {
+			this.ele.insertBefore(btn, this.ele.firstChild);
+			this.hasHamburger = true;
+		}
+
+		this.ele.style.flexDirection = "column";
+		for (var i = 0; i < this.ele.children.length; i++) {
+			if (this.ele.children[i].textContent == "☰"){
+				this.ele.children[i].style.display = "block";
+				
+			
+				// MYCHANGE
+			}/*  else if (this.ele.children[i].textContent == "London tours"){
+				this.ele.children[i].style.display = "block";
+				this.ele.children[i].style.paddingTop = "0";
+				this.ele.children[i].style.position = "absolute";
+			} */else {
+				this.ele.children[i].style.display = "none";
+			}
+		}
+
+		btn.addEventListener("click", () => {
+			// alert
+			closed = !closed;
+
+			for (var i = 0; i < this.ele.children.length; i++) {
+				if (i != 0) {
+
+					if (!closed) {
+						this.ele.children[i].style.display = "none";
+						this.ele.children[i].style.marginTop = "0em";
+					} else {
+						this.ele.children[i].style.display = "block";
+						this.ele.children[i].style.marginTop = "3em";
+					}
+				}
+			}
+		});
+	}
+		
+		
+		
+		this.hasHamburger = true;
+	}
+
+	const adjust = () => {
+		if (media.matches || media2.matches) {
+			doInAdjust();
+		} else {
+			toWideScreen();
+		}
+	}
+
+	if (media.matches || media2.matches) {
+		doInAdjust();
+	} else {
+		toWideScreen();
+	}
+
+
+
+	window.addEventListener("resize", adjust);
+	return this;
+}
+	
+/*--------------------------------------------------ADJUST--------------------------------------------------*/	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+
+	render(div){
+		if (div){
+			document.querySelector(div).style.padding = 0;
+			document.querySelector(div).style.margin = 0;
+			document.querySelector(div).appendChild(this.ele);
+		} else {
+			return this.ele;
+		}
+			return this.ele;
+	}
+}
+	
+export { NavBar };

package/layout/navBar.js

@@ -0,0 +1,371 @@
+import {Animator} from "./animator.js";
+
+class NavBar {
+	constructor(els){
+		this.ele = null;
+		this.titleText = "";
+		this.hasHamburger = false;
+		this.setup(); // should nt be eited 2024
+		
+		if (els){
+			this.items(els);
+		}
+	}
+
+	hamburger(colour) {
+		this.hamburgerColour = colour;
+		return this;
+	}
+	
+	setup(){
+		let el = document.createElement("div");
+		el.style.backgroundColor = "#fff";
+	
+		el.style.display = "flex";
+		el.style.justifyContent = "space-around";
+		el.style.alignItems = "center";
+		el.style.margin = 0;
+		el.style.padding = 0;
+		//el.style.width = "100%";
+		//-------------DEFAULT STYLING----------
+		el.style.margin = 0;
+		el.style.paddingTop = "1em";
+		el.style.paddingBottom = "1em";
+		this.ele = el;
+		// EVIL LINE
+		// window.addEventListener("resize", this.adjust.bind(this));
+		
+		return this;
+	}
+	
+	set(styles) {
+        for (let prop in styles) {
+            if (prop === 'margin') {
+                let paddingValues = styles[prop];
+                if (Array.isArray(paddingValues) && paddingValues.length > 0) {
+                   
+					for (let pado of paddingValues){
+
+					
+					let paddingObject = pado;// paddingValues[0]; // Assuming only one object in the array
+                    if (paddingObject.hasOwnProperty('top')) {
+                        this.ele.style.marginTop = paddingObject['top'];
+                    }
+                    if (paddingObject.hasOwnProperty('right')) {
+						//alert("P")
+                        this.ele.style.marginRight = paddingObject['right'];
+                    }
+                    if (paddingObject.hasOwnProperty('bottom')) {
+                        this.ele.style.marginBottom = paddingObject['bottom'];
+                    }
+                    if (paddingObject.hasOwnProperty('left')) {
+                        this.ele.style.marginLeft = paddingObject['left'];
+                    }
+				}
+
+
+
+                }
+            }
+        }
+
+		return this;
+    }
+    
+	radius(rad){
+		this.ele.style.borderRadius = rad;
+		return this;
+	}
+    
+    
+    
+    items(items){
+        
+        
+        
+     /* var itemsa = items.filter(item => item.__proto__
+            .constructor
+            .toString()
+            .startsWith("class Spacer") === false);
+        
+        this.itemCount = itemsa.length;
+        */
+       
+        
+        
+          this.itemCount = items.length;
+        
+        
+        for (var i = 0; i < items.length; i++){
+            
+        var item = items[i];
+        var isSpacer = item.__proto__
+            .constructor
+            .toString()
+            .startsWith("class Spacer");
+            
+            
+            
+           
+                 this.ele.appendChild(item.render());
+            
+            
+       
+		}
+        
+        
+        
+        
+        
+        
+		
+		this.adjust();
+          
+        
+        
+        
+    }
+	
+	
+	/*items(items){
+		this.itemCount = items.length;
+		for (var i = 0; i < items.length; i++){
+        this.ele.appendChild(items[i].render());
+		}
+		
+		this.adjust();
+		return this;
+	}*/
+	
+	
+	
+	sticky(){
+		this.ele.style.position = "fixed";
+		return this;
+	}
+	
+	font(family){
+		
+		for (var i = 0; i < this.ele.children; i++){
+			this.ele.children[i].style.fontFamily = family;
+		}
+		
+		return this;
+	}
+	
+
+	
+	openSymbol(symbol){
+		this.symbol = symbol;
+		return this;
+	}
+    
+    
+        background(obj){
+            this.ele.style.backgroundColor = obj.color;
+              this.ele.style.opacity = obj.opacity;
+            return this;
+        }
+    
+    transluescent(){
+        this.ele.style.backgroundColor = "rgba(255,255,255,0.72)";
+        return this;
+        //background-color: rgba(255,255,255,0.72);
+    }
+    
+    
+    keepItem(item){
+        console.log("Wow");
+        this.keepItem = item;
+        return this;
+    }
+	
+/*--------------------------------------------------ADJUST--------------------------------------------------*/	
+	// set habmurger icon
+adjust(w) {
+	let media = window.matchMedia(`(max-width: 731px)`); // 600
+	let media2 = window.matchMedia(`(max-device-width: 415px)`);
+
+	if (media.matches || media2.matches) {
+		this.ele.style.flexDirection = "column";
+	} else {
+		this.ele.style.flexDirection = "row";
+		this.ele.style.marginLeft = 0;
+	}
+
+	const addHamburger = () => {
+		var btn = document.createElement("button");
+		var node = document.createTextNode(this.symbol ? this.symbol : "☰");
+		btn.style.border = "none";
+		btn.style.fontWeight = "bold";
+
+		// alert(this.hamburgerColour);
+		btn.style.color = this.hamburgerColour ?? "#3498db";
+		// btn.style.backgroundColor = "#fff"; nostalgia covid
+		btn.style.fontSize = media2.matches ? "2.2em" : "2em";
+		btn.appendChild(node);
+		 btn.style.marginLeft = "auto";
+		
+	
+		return btn;
+	}
+
+	
+	const adjustFontSize = () => {
+	//	alert("NOT USED IN VIEWPORT")
+		for (var i = 0; i < this.ele.children.length; i++) {
+			let el = this.ele.children[i];
+			 el.style.fontSize = media2.matches ? "1.2em" : "1em";
+			// el.style.fontSize = media2.matches ? "2.4em" : "1em";
+
+            
+              var isSpacer = el.__proto__
+            .constructor
+            .toString()
+            .startsWith("class Spacer");
+            
+            // console.error("---------ERROR---------");
+             console.warn(el.style.flexGrow == "1");
+            console.log(el.style.getPropertyValue("flex-grow"));
+            console.log(el.style.getPropertyValue("flex-grow") == 1);
+            console.warn(isSpacer);
+          
+            
+            if (el.style.getPropertyValue("flex-grow") == 1){
+              // alert("A")
+                // el.style.setProperty("display", "none");
+             //   el.style.marginTop = "0em";
+              //  el.style.flex = "none";
+                
+              //  console.log(el.style)
+               
+            }
+            
+            
+            
+			if (el.textContent === "☰") {
+				el.style.fontSize = "2em";
+			}
+		}
+	}
+
+	const toWideScreen = () => {
+		for (var i = 0; i < this.ele.children.length; i++) {
+			
+			let child = this.ele.children[i];
+			
+			child.style.marginTop = "0em";
+			child.style.display = "block";
+			
+			if (child.textContent === this.titleText && this.titleText.length > 0) {
+                alert(child.textContent)
+				child.style.fontSize = "2em";
+			}
+			
+		if (this.ele.childNodes[i].textContent == "☰") {
+			this.ele.removeChild(this.ele.childNodes[i]);
+		}
+		
+		}
+
+	
+		this.ele.style.flexDirection = "row";
+	}
+	
+
+
+	var added = false;
+	
+	const doInAdjust = () => {
+		adjustFontSize();
+		var closed = false;
+		var btn = addHamburger();
+		
+		 /*(((this.ele.children.length == this.itemCount + 1)||*/
+		if (this.ele.children.length == this.itemCount) {
+			this.ele.insertBefore(btn, this.ele.firstChild);
+		console.log("ADDA");
+		}
+
+		this.ele.style.flexDirection = "column";
+		for (var i = 0; i < this.ele.children.length; i++) {
+			if (this.ele.children[i].textContent == "☰" || this.ele.children[i].textContent == /*"Lands"*/ this.keepItem){
+				this.ele.children[i].style.display = "block";
+			} else {
+				this.ele.children[i].style.display = "none";
+			}
+		}
+
+		btn.addEventListener("click", () => {
+			// alert
+			closed = !closed;
+
+			for (var i = 0; i < this.ele.children.length; i++) {
+				if (i != 0 && this.ele.children[i].textContent != /*"Lands"*/ this.keepItem) {
+
+					if (!closed) {
+						this.ele.children[i].style.display = "none";
+						this.ele.children[i].style.marginTop = "0em";
+					} else {
+                        
+                        
+                        if (this.ele.children[i].getAttribute("class") === "innerHider"){
+                            // alert("WOW");
+                               this.ele.children[i].style.display = "none";
+                        } else {
+                            this.ele.children[i].style.display = "block";
+							this.ele.children[i].style.marginTop = "3em";
+                        }
+                        
+                        
+						
+					}
+				}
+			}
+		});
+	}
+
+	const adjust = () => {
+		if (media.matches || media2.matches) {
+			doInAdjust();
+		} else {
+			toWideScreen();
+		}
+	}
+
+	if (media.matches || media2.matches) {
+		doInAdjust();
+	} else {
+		toWideScreen();
+	}
+
+
+
+	window.addEventListener("resize", adjust);
+	return this;
+}
+	
+/*--------------------------------------------------ADJUST--------------------------------------------------*/	
+	render(div){
+		if (div){
+			document.querySelector(div).style.padding = 0;
+			document.querySelector(div).style.margin = 0;
+			document.querySelector(div).appendChild(this.ele);
+		} else {
+			return this.ele;
+		}
+			return this.ele;
+	}
+}
+	 
+window.NavBar
+Spacer
+Spacer
+Spacer = NavBar
+Spacer
+Spacer
+Spacer;
+export { NavBar
+Spacer
+Spacer
+Spacer };

package/layout/navFactor/customDiv.js

@@ -0,0 +1,60 @@
+
+
+class CustomDivRenderer {
+    constructor(obj, items) {
+        this.obj = obj || {};
+        this.items = items || [];
+    }
+
+     render() {
+        // Create inner div with flex display
+        let tempDiv = document.createElement("div");
+        tempDiv.style.display = "flex";
+        tempDiv.style.width = "100%";
+        tempDiv.style.justifyContent = "space-around";
+        tempDiv.setAttribute("id", "innerItemsWrapper");
+        
+        let mobileMedia = window.matchMedia(`(max-device-width: 415px)`);
+        let media = window.matchMedia(`(max-width: 600px)`);
+
+        if (mobileMedia.matches || media.matches){
+            tempDiv.style.marginTop = "3rem";
+        }
+
+      //  console.log("ITEMS ARE ORDERED");
+      //  console.log(this.items);
+
+        // Append rendered items to inner div
+        for (let i = 0; i < this.items.length; i++) {
+            const item = this.items[i];
+            tempDiv.appendChild(item.render());
+        }
+
+        // Create outer div and apply styling based on obj properties
+        let outerDiv = document.createElement("div");
+        outerDiv.style.width = this.obj.isSide ? "333px" : "100%";
+        outerDiv.style.background = this.obj.background || "white";
+        outerDiv.style.display = "flex";
+        outerDiv.style.justifyContent = "center";
+        outerDiv.style.alignItems = "center";
+        outerDiv.style.height = "100%";
+        outerDiv.setAttribute("id", "outerItemsWrapper");
+        outerDiv.appendChild(tempDiv);
+
+        // Apply custom styles if specified in obj
+        if (this.obj.customStyle) {
+            tempDiv.style.width = "auto";
+            tempDiv.style.top = "0rem";
+            tempDiv.style.borderRadius = "1rem";
+            tempDiv.style.background = this.obj.background || "white";
+            tempDiv.style.margin = "1rem";
+            tempDiv.style.position = "absolute";
+            tempDiv.style.opacity = 0.8;
+        }
+
+        return outerDiv;
+    }
+}
+
+window.CustomDivRenderer = CustomDivRenderer;
+export { CustomDivRenderer };