nodality 1.0.0-beta.1

package/layout/list.js

@@ -0,0 +1,127 @@
+import {Animator} from "./animator.js";
+
+// 13:28 07/04/2020 - BEGIN NOTHING GONNA STOP US NOW  Lets go!
+class List {
+	constructor() {
+		this.tasks = [];
+		this.setup();
+	}
+
+	set tasks(tasks) {
+		this.items(tasks);
+	}
+
+	setup() {
+		this.wrapper = document.createElement("div");
+		this.wrapper.style.display = "flex";
+		this.wrapper.style.flexDirection = "column";
+		this.wrapper.style.padding = 0;
+		this.wrapper.style.margin = 0;
+		this.wrapCopy = this.wrapper;
+		this.tasks = {};
+	//	var copy = this.tasks;
+		return this;
+	}
+
+	padding(val) {
+		this.ele.style.padding = val;
+		return this;
+	}
+
+	margin(val) {
+		this.ele.style.margin = val;
+		return this;
+	}
+
+	border(w, color) {
+		this.ele.style.border = `${w}px solid ${color}`;
+		return this;
+	}
+
+	set itemso(itemsa) {
+		this.items(itemsa);
+	}
+	
+	setItem(item){
+		this.item = item;
+		return this;
+	}
+
+	items(tasks) {
+		if (this.wrapper) {
+			while (this.wrapper.firstChild) {
+				this.wrapper.removeChild(this.wrapper.lastChild);
+			}
+		}
+
+		for (var i = 0; i < tasks.length; i++) {
+			let cell = this.item.render(); 
+			this.wrapper.appendChild(new Text(tasks[i]).render());
+		}
+		return this;
+	}
+
+	render(div) {
+		if (div) {
+			document.querySelector(div).appendChild(this.wrapper);
+		} else {
+			return this.wrapper;
+		}
+
+		return this;
+	}
+
+	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) {
+				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);
+	}
+}
+
+
+
+class Cell {
+	constructor(){
+		this.res = null;
+		this.setup();
+	}
+	
+	setup(){
+	  let el = document.createElement("div");
+	  el.style.border = "2px solid gray";
+	  this.res = el;
+	  return this;
+	}
+	
+	child(el){
+		this.res.appendChild(el.render());
+		return this;
+	}
+	
+	render(){
+		return this.res;
+	}
+}
+window.List
+Cell = List
+Cell;
+export { List
+Cell };

package/layout/metaAdder.js

@@ -0,0 +1,17 @@
+import {Animator} from "./animator.js";
+
+class MetaAdder{
+    constructor(){ 
+        this.res = document.createElement("meta");
+        this.res.setAttribute("name", "viewport");
+        this.res.setAttribute("content", "width=device-width, initial-scale=1");
+        this.charset = document.createElement("meta");
+        this.charset.setAttribute("charset", "UTF-8");
+    }
+    
+    add(){
+        document.head.appendChild(this.res);
+        document.head.appendChild(this.charset);
+    }
+}
+export { MetaAdder };

package/layout/modal2025.js

@@ -0,0 +1,142 @@
+import {Animator} from "./animator.js";
+
+
+class Modal {
+    constructor(){
+        this.el = null;
+        this.obj = null;
+    }
+    
+    
+    set(obj){
+        let el = document.createElement("div");
+        el.style.width = "100vw";
+        el.style.height = "100vh";
+        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";
+      
+       
+        this.obj = obj;
+        this.res = el;
+        obj.close && this.close();
+        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.width = this.obj.width; 
+        el.style.height = "auto";
+        el.style.marginLeft = "auto";
+        el.style.marginRight = "auto";
+        el.style.backgroundColor = "white";
+
+
+        let mq = window.matchMedia("(max-device-width: 415px)");
+        if (mq.matches){
+            el.style.marginTop = "200px";
+             el.style.width = "100%";
+        }
+
+        
+       /* 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.overflow = "hidden"; // User wrapper instead of this?
+     */
+     
+     
+        //  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;
+    }
+}
+    
+    
+}
+
+
+
+
+
+// var firstLong = "Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point. Its elevation (snow height) of 8,848.86 m (29,031.7 ft) was most recently established in 2020 by the Nepali and Chinese authorities. Mount Everest attracts many climbers, including highly experienced mountaineers. There are two main climbing routes, one approaching the summit from the southeast in Nepal (known as the standard route) and the other from the north in Tibet. While not posing substantial technical climbing challenges on the standard route, Everest presents dangers such as altitude sickness, weather, and wind, as well as significant hazards from avalanches and the Khumbu Icefall. As of 2019, over 300 people have died on Everest, many of whose bodies remain on the mountain.";
+
+
+// var secondLong = "Mount Everest (Chinese: 珠穆朗玛 Zhūmùlǎngmǎ; Nepali: सगरमाथा, romanized: Sagarmāthā; Tibetan: Chomolungma ཇོ་མོ་གླང་མ) is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point. Its elevation (snow height) of 8,848.86 m (29,031.7 ft) was most recently established in 2020 by the Nepali and Chinese authorities. Mount Everest attracts many climbers, including highly experienced mountaineers. There are two main climbing routes, one approaching the summit from the southeast in Nepal (known as the standard route) and the other from the north in Tibet. While not posing substantial technical climbing challenges on the standard route, Everest presents dangers such as altitude sickness, weather, and wind, as well as significant hazards from avalanches and the Khumbu Icefall. As of 2019, over 300 people have died on Everest, many of whose bodies remain on the mountain. The first recorded efforts to reach Everest's summit were made by British mountaineers. As Nepal did not allow foreigners to enter the country at the time, the British made several attempts on the north ridge route from the Tibetan side. After the first reconnaissance expedition by the British in 1921 reached 7,000 m (22,970 ft) on the North Col, the 1922 expedition pushed the north ridge route up to 8,320 m (27,300 ft), marking the first time a human had climbed above 8,000 m (26,247 ft). The 1924 expedition resulted in one of the greatest mysteries on Everest to this day: George Mallory and Andrew Irvine made a final summit attempt on 8 June but never returned, sparking debate as to whether or not they were the first to reach the top. Tenzing Norgay and Edmund Hillary made the first official ascent of Everest in 1953, using the southeast ridge route. Norgay had reached 8,595 m (28,199 ft) the previous year as a member of the 1952 Swiss expedition. The Chinese mountaineering team of Wang Fuzhou, Gonpo, and Qu Yinhua made the first reported ascent of the peak from the north ridge on 25 May 1960.";
+
+
+
+
+
+
+
+
+export { Modal };

package/layout/modernwrap.js

@@ -0,0 +1,92 @@
+import {Animator} from "./animator.js";
+
+
+
+
+class ModernWrap {
+    
+    setup(options){
+		let gr = document.createElement("div");
+		gr.style.padding = 0;
+		gr.style.margin = 0;
+		this.res = gr;
+        return this;
+	}
+    
+    
+	add(els){
+		for (var i = 0; i < els.length; i++){
+			this.res.appendChild(els[i].render().render());
+            console.log("NIONOIBOIBIO")
+		}
+        return this;
+	}
+	
+	
+	
+	/*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;
+		}
+		
+	}
+}
+
+
+
+export { ModernWrap };

package/layout/multiswitcher.js

@@ -0,0 +1,224 @@
+import {Animator} from "./animator.js";
+
+class /*Multi*/Switcher extends Animator {
+  constructor(/*it*/) {
+    super();
+    this.breakpoints = [];
+    this.container = null;
+    this.currentView = null;
+    this.internalDiv = null;
+    this.resizeListener = null;
+   // this.internalID = it;
+  }
+
+  set({ breakpoints }) {
+
+    this.options = {breakpoints: breakpoints};
+
+    if (!Array.isArray(breakpoints)) {
+      throw new Error("Breakpoints should be an array of objects with 'at' and 'view' properties.");
+    }
+
+    this.breakpoints = breakpoints.map(bp => {
+      if (typeof bp.at !== "string" || !(bp.view.render() instanceof HTMLElement)) {
+        throw new Error("Each breakpoint must have 'at' as a string and 'view' as an HTMLElement.");
+      }
+      return { ...bp, at: parseInt(bp.at, 10) };
+    });
+
+    this.breakpoints.sort((a, b) => a.at - b.at);
+    return this;
+  }
+
+
+  toCode() {
+    //  return ["new Text('A').set({})"];
+      const objStringa = JSON.stringify(this.options.breakpoints.map(o => o.view.toCode()).flat(), null,4);
+      const objStringas = JSON.stringify(this.options.breakpoints.map(o => o.at), null,4);
+
+      const objString = JSON.stringify(this.options.breakpoints, null,4);
+      // console.log("OMHELLOA");
+      // console.log(this.options);
+      // console.log(objStringa);
+      // console.log(objStringas);
+
+
+      let str = "";
+      for (var i = 0; i < this.options.breakpoints.length; i++){
+str += `{ at: "${this.options.breakpoints[i].at}", view: ${this.options.breakpoints[i].view.toCode()} }, \n` }
+
+   //   console.log(str);
+
+      return [`new Switcher().set({
+        breakpoints: [
+        ${str}
+        ]
+      })`];
+  }
+
+/*
+  render(selector) {
+  alert(selector); // undefined
+
+
+    this.container = document.querySelector(selector);
+
+  //  if (!this.container) { // Why does this condition fire???
+   //   alert("APPLY MOUNt"); // undefined
+      this.container = document.querySelector(this.internalID "#mount");
+    //  throw new Error(`No element found matching selector: ${selector}`);
+   // }
+
+    // Create an internal div for switching content
+    this.internalDiv = document.createElement("div");
+    this.container.appendChild(this.internalDiv);
+
+    this.applyView();
+
+    this.resizeListener = this.applyView.bind(this);
+    window.addEventListener("resize", this.resizeListener);
+
+    return this.container;
+  }*/
+
+    render(val) {
+      //alert(val)
+      // Create an internal div for switching content
+      this.internalDiv = document.createElement("div");
+    
+      // Apply the initial view
+      this.applyView();
+    
+      // Set up the resize listener to update views dynamically
+      this.resizeListener = this.applyView.bind(this);
+      window.addEventListener("resize", this.resizeListener);
+    
+
+      if (val !== undefined){ // 18/01/2025 13:10:11 Yes!!!
+        document.querySelector(val).appendChild(this.internalDiv);
+      }
+      // Return the internal div so it can be mounted manually
+      return this.internalDiv;
+    }
+    
+
+    createRanges(array, max = 99999) {
+      let ranges = [];
+      for (let i = 0; i < array.length; i++) {
+          ranges.push({
+              from: array[i],
+              to: (i < array.length - 1 ? array[i + 1] - 1 : max)
+          });
+      }
+      return ranges;
+  }
+
+  addRanges(objects, rangeStarts, max = 99999) {
+    return objects.map((obj, index) => {
+        const from = rangeStarts[index];
+        const to = index < rangeStarts.length - 1 ? rangeStarts[index + 1] - 1 : max;
+        return { 
+            ...obj, 
+            range: { from, to }
+        };
+    });
+}
+
+  applyView() {
+
+// check if we are in range
+    console.log("MAKE RANGES"); // 23:45:30 Thanks GPT!!!!
+    
+    const width = window.innerWidth;
+    console.log(this.breakpoints);
+    console.log(this.breakpoints.map(el => el.at));
+
+    let rstart = this.breakpoints.map(el => el.at);
+
+    let mapped = this.breakpoints.map(el => el.at);
+    let transformed = this.createRanges(mapped);
+    let added = this.addRanges(this.breakpoints, rstart);
+    console.log(added);
+
+
+    added.forEach(r => {
+      const query = `(min-width: ${r.range.from}px) and (max-width: ${r.range.to}px)`;
+      const mediaQuery = window.matchMedia(query);
+  
+      console.warn(query);
+      if (mediaQuery.matches) {
+          console.log(`Viewport width is within the range: ${r.range.from}px to ${r.range.to}px`);
+          // Add your logic for this range
+     
+     
+
+          if (this.currentView !== r.view.render()) {
+            this.internalDiv.innerHTML = "";
+            this.internalDiv.appendChild(r.view.render());
+            this.currentView = r.view.render();
+          }
+     
+     
+        }
+  });
+
+
+
+  //  if (window.matchMedia("(max-width"))
+    
+   /* const matchingBreakpoint = this.breakpoints.reduce((prev, current) => {
+      return width >= current.at ? current : prev;
+    }, this.breakpoints[0]);*/
+
+  //  console.log("MB");
+  //  console.log(matchingBreakpoint);
+
+
+//const width = window.innerWidth || document.documentElement.clientWidth;
+console.log("MBO");
+// Ensure `breakpoints` array is structured correctly
+/*this.breakpoints = [
+    { at: 0, view: "mobileView" },
+    { at: 1200, view: "desktopView" }
+];*/
+
+// Find the matching breakpoint
+/*const matchingBreakpoint = this.breakpoints.reduce((prev, current) => {
+    return width >= current.at ? current : prev;
+}, this.breakpoints[0]);
+*/
+//console.log(matchingBreakpoint);
+
+
+
+
+ 
+  }
+
+  destroy() {
+    if (this.resizeListener) {
+      window.removeEventListener("resize", this.resizeListener);
+      this.resizeListener = null;
+    }
+    if (this.internalDiv && this.container) {
+      this.container.removeChild(this.internalDiv);
+    }
+    this.container = null;
+    this.currentView = null;
+    this.internalDiv = null;
+  }
+}
+
+/*
+// Example usage:
+const switcher = new MultiSwitcher()
+  .set({
+    breakpoints: [
+      { at: "0px", view: Object.assign(document.createElement("h1"), { textContent: "Small View" }) },
+      { at: "700px", view: Object.assign(document.createElement("h1"), { textContent: "Medium View" }) },
+      { at: "800px", view: Object.assign(document.createElement("h1"), { textContent: "Large View" }) },
+    ],
+  })
+  .render("#myDiv");
+*/
+export { /*Multi*/Switcher };

package/layout/multiswitcherBeta.js

@@ -0,0 +1,63 @@
+import {Animator} from "./animator.js";
+
+class MultiSwitcherBeta {
+    constructor() {
+        this.views = [];
+        this.container = null;
+    }
+
+    switchViews(views) {
+        this.views = views;
+        return this;
+    }
+
+    render(selector) {
+        this.container = selector ? document.querySelector(selector) : document.createElement("div");
+
+        if (!this.container) {
+            console.error(`Container ${selector} not found`);
+            return;
+        }
+
+        // Sort views by window width
+        this.views.sort((a, b) => parseInt(a.at) - parseInt(b.at));
+
+        // Add resize event listener
+        window.addEventListener('resize', this.updateView.bind(this));
+
+        // Initial render
+        this.updateView();
+
+        return this.container;
+    }
+/*
+    updateView() {
+        const windowWidth = window.innerWidth;
+
+        for (let i = this.views.length - 1; i >= 0; i--) {
+            if (windowWidth >= parseInt(this.views[i].at)) {
+               // this.container.innerHTML = ''; // Clear current view
+                this.container.appendChild(this.views[i].view); // Set new view
+                break;
+            }
+        }
+    }*/
+
+        updateView() { // GPT 4o
+            const windowWidth = window.innerWidth;
+
+            for (let i = this.views.length - 1; i >= 0; i--) {
+                if (windowWidth >= parseInt(this.views[i].at)) {
+                    if (this.container.firstChild !== this.views[i].view) {
+                        if (this.container.firstChild) {
+                            this.container.replaceChild(this.views[i].view, this.container.firstChild);
+                        } else {
+                            this.container.appendChild(this.views[i].view);
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+} 
+export { MultiSwitcherBeta };