nodality 1.0.0-beta.1

package/layout/group.js

@@ -0,0 +1,163 @@
+import {Animator} from "./animator.js";
+
+class Group extends Animator { 
+	
+	constructor(els){
+		super();
+		this.setup();
+		
+		if (els){
+			for (var i = 0; i < els.length; i++){
+			this.res.appendChild(els[i].render());
+		}
+		}
+	}
+
+	
+
+	color(color){
+		for (var i = 0; i < this.res.children.length; i++){
+			this.res.children[i].style.color = color;
+		}
+		return this;
+	}
+
+	
+	align(direction){
+		this.res.style.display = "flex";
+		this.res.style.flexDirection = "column";
+
+		if (direction === "left"){
+			this.res.style.alignItems = "flex-start"
+		}
+		
+		return this;
+	}
+	
+	setup(){
+		let gr = document.createElement("div");
+		gr.style.padding = 0;
+		gr.style.margin = 0;
+		this.res = gr;
+	}
+
+	centerContent(){
+		
+		this.res.style.display = "flex";
+		this.res.style.flexDirection = "column";
+
+		this.res.style.alignItems = "center";
+		this.res.style.justifyContent = "spaceAround";
+		this.res.style.width = "100vw";
+		return this;
+	}
+	
+	width(w, shouldCenter){
+		this.res.style.width = w;
+		
+		if (shouldCenter){
+		this.res.style.marginLeft = "auto";
+		this.res.style.marginRight = "auto";
+		}
+		return this;
+	}
+
+	background(value){
+		this.res.style.backgroundColor = value;
+		return this;
+	}	
+	
+	padding(value){
+		this.res.style.padding = `${value}px`;
+		return this;
+	}
+	
+	arrayPadding(arr, value) {
+		if (arr.includes("left")){
+			this.res.style.paddingLeft = 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;
+		}
+			
+		
+		return this;
+	}
+
+	arrayMargin(arr, value) {
+		if (arr.includes("left")){
+			this.res.style.marginLeft = 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;
+		}
+			
+		
+		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());
+		}
+		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;
+		}
+		
+	}
+}
+export { Group };

package/layout/header.js

@@ -0,0 +1,175 @@
+import {Animator} from "./animator.js";
+
+
+class Header extends Animator {
+	constructor(){
+		super();
+		this.ele = null;
+		// this.setup();
+	}
+
+	
+	setup(obj){
+		let d = document.createElement("div");
+		d.style.width = "100%";
+
+		if (obj.width){
+			d.style.width = obj.width;
+		}
+        
+		// Add
+        d.style.marginLeft = "auto";
+		d.style.marginRight = "auto";
+        
+        if (obj.height){
+            d.style.height = obj.height;
+        }
+
+
+		
+        
+		this.ele = d;
+        
+        
+        this.globalHeight = obj.height;
+        this.gRound = obj.round;
+        
+        
+        if (obj.url){
+            this.url(obj.url, 0, obj);
+        }
+        
+
+
+
+
+
+		if (obj.fixedScale){
+			
+			this.ele.children[0].style.backgroundSize = "contain";
+			this.ele.children[0].style.backgroundRepeat = "no-repeat";
+
+
+			if (obj.width){
+				d.style.width = obj.width;
+			}
+		}
+
+		
+		return this;
+	}
+
+
+	
+
+	fadeIn(){
+		this.ele.animate(
+			[{ opacity: 0 }, 
+				{ opacity: 1 }],
+			{
+			  duration: 1000,
+			  easing: 'linear',
+			},
+		  );
+		return this;
+	}
+	
+	url(url, round, obj){
+		let flex = document.createElement("div");
+		flex.style.display = "flex";
+		flex.style.flexDirection = "column";
+		flex.style.justifyContent = "center";
+		flex.style.alignItems = "center";
+		flex.style.height = `${this.globalHeight}px`;
+		flex.style.width = "100%";
+		flex.style.backgroundImage = `url("${url}")`;
+
+
+		if (obj.radius){
+			flex.style.borderRadius = "1.4rem";
+		}
+		
+		// NEW
+		flex.style.backgroundPosition = "center";
+
+		// flex.style.filter = "blur(8px)";
+		flex.style.backgroundSize = "cover";
+		if (this.gRound) {
+			flex.style.borderRadius = `16px`;
+		}
+		
+		this.ele.appendChild(flex);
+		return this;
+	}
+	
+
+	urlImage(url, round){
+		let image = document.createElement("img");
+		
+		 image.setAttribute("src", url);
+		 image.style.filter = "blur(8px)";
+		
+		if (this.gRound) {
+			image.style.borderRadius = `16px`;
+		}
+		
+		this.ele.appendChild(image);
+		return this;
+	}
+	
+
+	elements(els){
+		for (var i = 0; i < els.length; i++){
+			var res = els[i].render().render(); // TWICE RENDER HACK
+			this.ele.childNodes[0].appendChild(res);
+			//this.ele.appendChild(res);
+		}
+	
+		return this;
+	}
+	
+	
+
+	round(value){
+		this.ele.style.borderRadius = `${value}px`;
+		return this;
+		}
+	
+
+	onTap(e){
+		this.ele.addEventListener("click", e);
+		return this;
+	}
+	
+	/*em(n){
+		this.ele.style.fontSize = `${n}em`;
+		return this;
+	}*/
+	
+	render(div){
+		document.querySelector("body").style.margin = 0;
+		document.querySelector("body").style.padding = 0;
+		
+		if (div){
+			document.querySelector(div).appendChild(this.ele);
+		} else {
+			return this.ele; // this.ele();
+		}
+			return this;
+	}
+} 
+
+
+
+
+
+
+
+
+
+
+
+
+// ----------------------------------------------------------------
+
+export { Header };

package/layout/hello.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Right Overlay Side Navigation</title>
+
+<style>
+  /* Basic reset */
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+
+
+  /* Sidebar container */
+  .sidenav {
+    height: 100vh;
+    width: 400px; /* Full width */
+    position: fixed;
+    top: 0;
+    right: 0; /* Position sidebar on the right */
+    background-color: rgba(51, 51, 51, 0.9); /* Dark background with slight transparency */
+    transform: translateX(100%); /* Initially hidden off the screen */
+    transition: transform 0.3s ease; /* Smooth transition for sliding effect */
+    padding-top: 20px;
+    z-index: 1000; /* Ensure the sidebar overlays the content */
+  }
+
+  /* Sidebar links */
+  .sidenav a {
+    padding: 15px 20px;
+    text-decoration: none;
+    font-size: 18px;
+    color: #f1f1f1;
+    display: block;
+    transition: 0.3s;
+  }
+
+  /* Hover effect */
+  .sidenav a:hover {
+    background-color: #575757;
+    color: #fff;
+  }
+
+  /* Main content */
+  .main-content {
+    padding: 20px;
+  }
+
+  /* Button to open/close sidebar */
+  #toggleBtn {
+    font-size: 20px;
+    cursor: pointer;
+    position: fixed;
+    top: 10px;
+    right: 10px; /* Position button on the right */
+    background-color: #333;
+    color: #f1f1f1;
+    padding: 10px 15px;
+    border: none;
+    z-index: 1001; /* Ensure button stays above overlay */
+    transition: 0.3s;
+  }
+
+  /* Style the button on hover */
+  #toggleBtn:hover {
+    background-color: #575757;
+  }
+</style>
+</head>
+<body>
+
+<!-- Toggle button -->
+<button id="toggleBtn" onclick="toggleNav()">☰ Open Sidebar</button>
+
+<!-- Side navigation menu -->
+<div id="mySidenav" class="sidenav">
+  <a href="#home">Home</a>
+  <a href="#services">Services</a>
+  <a href="#clients">Clients</a>
+  <a href="#contact">Contact</a>
+</div>
+
+<!-- Main content -->
+<div id="mainContent" class="main-content">
+  <h2>Right Overlay Side Navigation Example</h2>
+  <p>Click the button to toggle the sidebar. The sidebar will overlay the main content and slide in from the right.</p>
+</div>
+
+<script>
+  let isOpen = false;
+
+  // Toggle the sidebar open and closed
+  function toggleNav() {
+    const sidenav = document.getElementById("mySidenav");
+    const toggleBtn = document.getElementById("toggleBtn");
+
+    if (isOpen) {
+      // Close the sidebar using the animation API
+      sidenav.animate(
+        [{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }],
+        { duration: 300, fill: 'forwards' }
+      ).onfinish = function() {
+        // After the animation finishes, set the sidebar transform to off-screen
+       // sidenav.style.transform = 'translateX(100%)';
+        toggleBtn.innerHTML = "☰ Open Sidebar"; // Change button text
+        isOpen = false; // Set isOpen to false
+      };
+    } else {
+      // Open the sidebar immediately
+      sidenav.style.transform = 'translateX(0)';
+      sidenav.animate(
+        [{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
+        { duration: 300, fill: 'forwards' }
+      );
+      toggleBtn.innerHTML = "✖ Close Sidebar"; // Change button text
+      isOpen = true; // Set isOpen to true
+    }
+  }
+</script>
+
+</body>
+</html>

package/layout/horizontalScroller.js

@@ -0,0 +1,222 @@
+import {Animator} from "./animator.js";
+
+ 
+class HScroller {
+    constructor() {
+        this.setupa();
+       // this.seto();
+      
+    }
+
+    seto(obj){
+        this.e = obj.a;
+
+        obj.speed && (this.divisor = obj.speed);
+        return this;
+    }
+
+    setupa(){
+        this.parallaxIDs(["#rta"]);
+        this.divisor(1.0);
+        return this;
+    }
+
+    add(items){
+        this.items = items;
+        this.setup();
+        return this;
+    }
+
+
+    parallaxIDs(ids){
+        this.parallaxIDs = ids;
+        return this;
+    }
+
+    divisor(divi){
+        this.divisor = divi;
+        return this;
+    }
+
+    setup() {
+
+        
+     //  alert(this.e);
+
+  
+
+        this.pts = 0;
+
+        let wrap = document.createElement("div");
+        wrap.style.width = "100%";
+        wrap.style.height = "100%";
+
+        let div = document.createElement("div");//document.querySelector("div");
+        div.style.display = "flex";
+        div.style.width = "100%";
+
+       
+
+        for (var i = 0; i < this.items.length; i++) {
+            let t = this.items[i].render(); /* new Text("Hello")
+                .set({
+                    fluidc: "S1",
+                    background: "orange",
+                    font: "Arial"
+                }).render();*/
+            div.appendChild(t);
+        }
+
+        wrap.appendChild(div);
+
+        let pts = window.localStorage.getItem("pts");
+        if (pts !== null){
+            this.pts = pts;
+        } // 16:36:39 10/03/24
+
+        wrap.addEventListener("wheel", (event) => {
+           // console.log("SL" + event.deltaY);
+           // console.log("SLA" + event.scrollLeft);
+
+           
+            if (event.deltaY < 0) {
+                console.log('Scrolling up');
+                this.pts--;
+            } else if (event.deltaY > 0) {
+                console.log('Scrolling down');
+                this.pts++;
+            }
+
+            window.localStorage.setItem("pts", this.pts);
+            event.preventDefault();
+  
+            for (var i = 0; i < div.childNodes.length; i++) {
+                console.log(div.childNodes[i].toString().substr(7));
+
+                let child = div.childNodes[i];
+
+                let parallax = this.parallaxIDs;  //["#rta"];
+                if (parallax.includes(child.id)){
+                    child.style.transform = `translateX(${this.pts / this.divisor}%)`; 
+                }
+            }
+
+            div.style.transform = `translateX(${this.pts / this.divisor}%)`;
+            window.localStorage.setItem("translation", this.pts / this.divisor);
+           
+
+        });
+
+        let t = window.localStorage.getItem("translation");
+        if (t !== null){
+            div.style.transform = `translateX(${t}%)`;
+        }
+
+        // Make this vertical on mobile, scrolling won't work
+        // Simple CSS rule
+        // Don't complicate too much
+        this.div = wrap;
+    }
+
+    render(div) {
+		if (div) {
+			document.querySelector(div).appendChild(this.div);
+		} else {
+			return this.div;
+		}
+
+       // document.body.appendChild(this.div);
+    }
+}
+
+/*  new T()
+.parallaxIDs(["#rta"])
+.divisor(2.2)
+.add([
+
+// Nest more views
+    new Text("Sail")
+        .set({
+            color: "#1abc9c",
+            fluidc: "S1",
+            font: "Arial",
+            stroke: {range:["0px","3000px"],op:{name:"blast",color:"#1abc9c",width:"3px"}}
+        }),
+
+        new Text("Wave").set({
+            em: 10,
+            font: "Arial",
+            weight: "bold",
+            zIndex: -1,
+            absolute: true,
+            stroke: {range:["0px","3000px"],op:{name:"blast",color:"#a1dae330",width:"3px"}},
+            opacity: 0.6
+        }),
+       
+        new Text("the")
+        .set({
+            color: "#1abc9c",
+            fluidc: "S1",
+          //  background: "orange",
+            font: "Arial",
+            arrayMargin: {sides: ["top"], value: "3rem"},
+            stroke: {range:["0px","3000px"],op:{name:"blast",color:"#1abc9c",width:"3px"}}
+        }),
+
+        new Image("https://media.cnn.com/api/v1/images/stellar/prod/ap24002766263400.jpg?c=original")
+        .set({
+           width: "400px",
+           height: "100%",
+           arrayMargin: {sides: ["left", "bottom"], value: "-1.7rem"},
+           arrpad: {sides: ["top"], value: "3rem"},
+           opacity: 0.7,
+           zIndex: -1,
+           id: "#rta"
+        }), 
+
+
+    new Wrapper().set({}).add([
+        new Text("Seven seas")
+            .set({
+                fluidc: "S1",
+                color: "#1abc9c",
+                font: "Arial"
+            }),
+
+        new Text("This is wonderful offer")
+    ]),
+      
+
+        new Text("Welcome")
+        .set({
+            fluidc: "S1",
+          //  background: "orange",
+            font: "Arial"
+        }),
+
+        new Text("onboard")
+        .set({
+            fluidc: "S1",
+          // background: "orange",
+            font: "Arial"
+        }),
+
+        new Wrapper().set({}).add([
+        new Text("Get in touch.")
+            .set({
+                fluidc: "S1",
+             //   background: "orange",
+                font: "Arial"
+            }),
+
+        new Image("https://media.cnn.com/api/v1/images/stellar/prod/ap24002766263400.jpg?c=original")
+            .set({
+                width: "400px",
+                opacity: 0.7,
+                zIndex: -1
+            }),
+    ]),
+])
+.render();
+*/
+export { HScroller };