nodality 1.0.0-beta.1

package/layout/slider2025.js

@@ -0,0 +1,198 @@
+import {Animator} from "./animator.js";
+import {Button} from "./button.js";
+
+class Slider {
+    constructor(elements, buttons) {
+      this.container = document.createElement("div");//document.querySelector(containerSelector);
+      this.elements = elements;
+      this.currentSlideIndex = 0;
+  
+      this.buttons = buttons;
+  
+      if (!this.buttons){
+  
+  let buttons = { 
+      leftButton: new Button("L").set({
+              url: "https://static-00.iconduck.com/assets.00/circle-arrow-left-icon-512x512-xp8okg5c.png",
+              color: "#1abc9c",
+              frame: {width: 50, height: 50},
+              radius: "100%",
+              arrayMargin: {sides: ["all"], value: "1rem"}
+              // 10/01/2025 18:12:55 margin does not add to page width, padding does
+          }),
+  
+          rightButton: new Button("R").set({
+              url: "https://static-00.iconduck.com/assets.00/arrow-right-circle-icon-2048x2048-m0qcnetg.png",
+              color: "#1abc9c",
+              frame: {width: 50, height: 50},
+              radius: "100%",
+              arrayMargin: {sides: ["all"], value: "1rem"}
+          })
+        };
+  
+        this.buttons = buttons;
+      } 
+  
+      this.createSlider();
+      this.init();
+    }
+  
+    toCode(){
+        let code = `new Slider([${this.elements.map(el => el.toCode())}], null)`;
+        code = code.replace(/,\s*\./g, '.');
+		return [code];
+    }
+
+    createSlider() {
+      // Slider container
+      this.slider = document.createElement('div');
+      this.slider.style.width = '100%';
+      this.slider.style.height = '400px';
+      this.slider.style.margin = '20px auto';
+      this.slider.style.textAlign = 'center';
+      this.slider.style.borderRadius = '20px';
+      this.slider.style.overflow = 'hidden';
+      this.slider.style.position = 'relative';
+  
+      // Slides wrapper
+      const slidesWrapper = document.createElement('div');
+      this.slidesWrapper = slidesWrapper;
+      slidesWrapper.style.display = 'flex';
+      slidesWrapper.style.overflowX = 'scroll';
+      slidesWrapper.style.scrollBehavior = 'smooth';
+      slidesWrapper.style.scrollSnapType = 'x mandatory';
+  
+      this.elements.forEach((text, index) => {
+        const slide = document.createElement('div');
+        slide.setAttribute("class", "slide");
+        slide.style.display = 'flex';
+        slide.style.justifyContent = 'center';
+        slide.style.alignItems = 'center';
+        slide.style.flexShrink = '0';
+        slide.style.width = '100%';
+        slide.style.height = '400px';
+        slide.style.background = index % 2 === 0 ? 'rgb(250, 246, 212)' : 'white';
+        slide.style.transformOrigin = 'center center';
+        slide.style.transform = 'scale(1)';
+        slide.style.scrollSnapAlign = 'center';
+  
+        slide.appendChild(text.render());
+        slidesWrapper.appendChild(slide);
+      });
+  
+      // Navigation arrows
+      this.arrowPrev = this.buttons.leftButton.render();
+      this.arrowPrev.style.position = 'absolute';
+      this.arrowPrev.style.left = '10px';
+      this.arrowPrev.style.top = '50%';
+      this.arrowPrev.style.transform = 'translateY(-50%)';
+      this.arrowPrev.style.zIndex = '1';
+  
+      this.arrowNext = this.buttons.rightButton.render();
+      this.arrowNext.style.position = 'absolute';
+      this.arrowNext.style.right = '10px';
+      this.arrowNext.style.top = '50%';
+      this.arrowNext.style.transform = 'translateY(-50%)';
+      this.arrowNext.style.zIndex = '1';
+  
+      // Navigation dots
+      const nav = document.createElement('div');
+      nav.style.position = 'absolute';
+      nav.style.bottom = '10%';
+      nav.style.left = '50%';
+      nav.style.width = '200px';
+      nav.style.transform = 'translateX(-50%)';
+      nav.style.textAlign = 'center';
+  
+      this.elements.forEach((_, index) => {
+        const navLink = document.createElement('a');
+        navLink.style.display = 'inline-block';
+        navLink.style.height = '15px';
+        navLink.style.width = '15px';
+        navLink.style.borderRadius = '50%';
+        navLink.style.backgroundColor = 'black';
+        navLink.style.margin = '0 10px';
+        navLink.style.cursor = 'pointer';
+        navLink.dataset.index = index;
+        nav.appendChild(navLink);
+      });
+  
+      // Append elements to the slider
+      this.slider.appendChild(this.arrowPrev);
+      this.slider.appendChild(this.arrowNext);
+      this.slider.appendChild(slidesWrapper);
+      this.slider.appendChild(nav);
+  
+      // Append slider to the container
+      this.container.appendChild(this.slider);
+  
+      // Store references
+      this.slidesWrapper = slidesWrapper;
+      this.navLinks = nav.querySelectorAll('a');
+    }
+  
+    init() {
+      this.updateActiveSlide();
+      this.attachEventListeners();
+    }
+  
+    attachEventListeners() {
+      this.arrowPrev.addEventListener('click', () => {
+        this.moveToSlide(
+          this.currentSlideIndex - 1 < 0 ? this.elements.length - 1 : this.currentSlideIndex - 1
+        );
+      });
+  
+      this.arrowNext.addEventListener('click', () => {
+        this.moveToSlide((this.currentSlideIndex + 1) % this.elements.length);
+      });
+  
+      this.navLinks.forEach((navLink) => {
+        navLink.addEventListener('click', (e) => {
+          e.preventDefault();
+          const index = parseInt(navLink.dataset.index, 10);
+          this.moveToSlide(index);
+        });
+      });
+  
+       // Keydown event for left and right arrow keys
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowLeft') {
+        // Move to the previous slide
+        this.moveToSlide(
+          this.currentSlideIndex - 1 < 0 ? this.elements.length - 1 : this.currentSlideIndex - 1
+        );
+      } else if (e.key === 'ArrowRight') {
+        // Move to the next slide
+        this.moveToSlide((this.currentSlideIndex + 1) % this.elements.length);
+      }
+    });
+    }
+  
+    moveToSlide(index) {
+      this.currentSlideIndex = index;
+      this.updateActiveSlide();
+    }
+  
+    updateActiveSlide() {
+      this.navLinks.forEach((navLink, index) => {
+        navLink.style.backgroundColor = index === this.currentSlideIndex ? 'green' : 'gray';
+      });
+  
+      const slideWidth = this.slidesWrapper.querySelector('.slide').offsetWidth;
+      this.slidesWrapper.scrollTo({
+        left: this.currentSlideIndex * slideWidth,
+        behavior: 'smooth',
+      });
+    }
+  
+    render(div) {
+      if (div) {
+        document.querySelector(div).appendChild(this.slider);
+      } else {
+        return this.slider;
+      }
+    }
+  }
+   
+export { Slider };

package/layout/spacer.js

@@ -0,0 +1,44 @@
+import {Animator} from "./animator.js";
+
+class Spacer { 
+	constructor( hide) {
+        
+        
+        
+        
+		this.hide = hide;
+        
+        if (hide){
+            
+      
+    var card = document.createElement("div");
+    card.style.flex = "1";
+    this.res = card;
+        }
+        
+        
+         if (hide){
+            this.res.setAttribute("class", "innerHider");
+        }
+        
+	return this;
+        
+        
+    }
+
+	toCode(){
+		return [`new Spacer(${this.hide})`];
+	}
+	
+	render(){
+		
+        var one = document.createElement("h2");
+        one.style.display = "none !important";
+	
+	return this.res ?? one;
+	
+			
+			}
+}
+
+export { Spacer };

package/layout/stack.js

@@ -0,0 +1,76 @@
+import {Animator} from "./animator.js";
+
+class Stack {
+    constructor(st){
+       this.res = null;
+
+     this.st = st;
+    }
+    
+    setup(){
+        let grid = document.createElement("div");
+        grid.style.display = "grid";
+        this.res = grid;
+
+        if (this.st){
+            this.sticky();
+           }
+
+
+        return this;
+    }
+    
+    set(obj){
+        this.setup();
+        obj.height && (this.res.style.height = obj.height);
+        obj.sticky && this.sticky();
+        return this;
+    }
+
+    sticky(){
+        this.res.style.position = "sticky";
+        this.res.style.top = 0;
+        return this;
+    }
+
+    add(els){
+        this.children = els;
+        for (var i = 0; i < els.length; i++){
+            let el = els[i].render();
+            el.style.gridColumn = 1;
+            el.style.gridRow = 1;
+            this.res.appendChild(el);
+        }
+        
+        
+        return this;
+    }   
+
+    toCode() {
+        // Initialize the code string with the Stack setup
+        let code = `new Stack().set({})`;
+        
+        // Add child elements
+        if (this.children.length > 0) {
+            const childrenCode = this.children.map(child => child.toCode()).join(",\n");
+            code += `.add([\n \n ${childrenCode} \n \n])`;
+        }
+        
+        // Return the final code
+        return [code];
+    }
+   
+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;
+    }
+}
+}
+
+
+
+export { Stack };

package/layout/styler.js

@@ -0,0 +1,113 @@
+import {Animator} from "./animator.js";
+
+
+
+
+
+
+
+
+
+/*
+
+	
+let un = new UniStyle()
+.maxWidth(800, new Style().color("blue"));
+// write applyUniStyle for each element
+	
+
+
+*/
+
+
+
+
+// write applyUniStyleMethod
+
+
+
+
+
+
+
+class Style {
+	constructor(obj) {
+		this.width = obj.max;
+		this.min = obj.min;
+		this.max = obj.max;
+		
+		this.styles = {
+			color: "",
+			background: "",
+			fontWeight: "",
+			align: "",
+			padding: [],
+			margin: [],
+			opacity: 1,
+			fontSize: "",
+			width: "",
+			height:"",
+			gridTemplateAreas: "",
+			height: ""
+		};
+	}
+	
+	
+	height(h){
+		this.styles.height = h;
+		return this;
+	}
+	
+	arrayAreas(str){
+		this.styles.gridTemplateAreas = str;
+		return this;
+	}
+
+	color(name) {
+		this.styles.color = name;
+		return this;
+	}
+
+	background(name) {
+		this.styles.background = name;
+		return this;
+	}
+
+	bold() {
+		this.styles.fontWeight = "bold";
+		return this;
+	}
+
+	align(alignment) {
+		this.styles.align = alignment;
+		return this;
+	}
+
+	padding(L, T, R, B) {
+		this.styles.padding = [L, T, R, B];
+		return this;
+	}
+
+	margin(L, T, R, B) {
+		this.styles.margin = [L, T, R, B];
+		return this;
+	}
+
+	opacity(value) {
+		this.styles.opacity = value;
+		return this;
+	}
+	
+	
+	size(w, h) {
+		this.styles.width = w;
+		this.styles.height = w;
+		return this;
+	}
+	
+	em(val){
+		this.styles.fontSize = `${val}em`;
+		return this;
+	}
+}
+export { Style };

package/layout/switcher.js

@@ -0,0 +1,102 @@
+import {Animator} from "./animator.js";
+
+ 
+class Switcher {
+    constructor(obj){
+      this.res = null;
+      this.obj = obj;
+      this.code = [];
+      console.warn(this.obj);
+
+      if (obj.first.toCode && obj.second.toCode){
+
+      
+          this.code.push(`, new Switcher({breakpoint: "${this.obj.breakpoint}", first: ${this.obj.first.toCode()}, second: ${this.obj.second.toCode()}})`);
+     
+      }
+     // console.log(this.obj.first.toCode());
+  
+      let area = document.createElement("textarea");
+      area.style.fontWeight = "bold";
+      area.style.height = 1000;
+      area.style.width = 1000;
+  
+  
+  
+     /* te.value = te.value.replace(".mount('#mount');,", ".mount('#mount');");
+      te.value = te.value.replace(" ,new Wrapper", "new Wrapper");
+  */
+  
+  this.codeArr  = [...this.code];
+  
+     this.code =  this.code.toString().replaceAll(", .", ".")
+     .replaceAll(",.", ".")
+     .replaceAll(",,.", ".")
+     .replaceAll("{,", "{")
+     .replaceAll("[,", "[")
+     .replace(/,+/g, ',');
+  
+      area.value = this.code;
+      document.body.appendChild(area);
+  
+     
+      /* {
+        breakpoint: 700px,
+        first: element,
+        second: element,
+  
+      }*/
+  
+     this.switchElements();
+    }
+  
+   
+  switchElements(){
+
+
+    this.res = document.createElement("div"); // move out of the loop
+    // 17:27:15 29/09/23
+   
+    const innerSwitch = () => {
+
+    console.log("I")
+
+  // alert("LK")
+
+
+this.res.innerHTML = "";
+   // this.code.push(` \n .switchElements()`)
+    let mq = window.matchMedia(`(max-width: ${this.obj.breakpoint})`).matches;
+
+    if (mq){
+    //  alert("O")
+    
+      this.res.appendChild(this.obj.first.render());
+    } else {
+    
+      this.res.appendChild(this.obj.second.render());
+    }
+  }
+
+  innerSwitch();
+
+  window.addEventListener("resize", innerSwitch);
+  // 17:30:22 Nice
+
+
+
+  }
+  
+    toCode(){
+     // alert("IO0")
+     console.log(this.code);
+      return this.codeArr;
+    }
+  
+  
+    render(div){
+       document.querySelector(div).appendChild(this.res);
+      return this.res;
+    }
+  }
+export { Switcher };

package/layout/table.js

@@ -0,0 +1,155 @@
+import {Animator} from "./animator.js";
+
+class Table extends Animator {
+  constructor() {
+    super();
+    this.res = document.createElement("table");
+  }
+
+  add(data) {
+    this.data = data;
+    this.datas = data;
+    const datas = Object.keys(data[0]);
+    this.generateTable(this.res, data);
+    this.generateTableHead(this.res, datas);
+    return this;
+  }
+
+
+  style(obj) {
+    this.res.style.fontFamily = obj.font;
+    return this;
+  }
+
+  set(obj) {
+    obj.cellPadding && this.cellPadding(obj.cellPadding);
+    obj.cellAlign && this.cellAlign(obj.cellAlign);
+    obj.style && this.style(obj.style);
+    obj.headStyle && this.headStyle(obj.headStyle);
+    obj.border && this.border(obj.border);
+    obj.center && this.center(obj.center);
+    obj.borderRadius && this.borderRadius(obj.borderRadius);
+    this.obj = obj;
+    return this;
+  }
+
+  toCode() {
+    let code = `new Table().add(${JSON.stringify(this.data)}).set(${JSON.stringify(this.obj)})`;
+    code = code.replace(/"(\w+)":/g, '$1:');
+    code = code.replace(/,/g, ',\n');
+    return [code];
+  }
+
+  center() {
+    this.res.style.marginLeft = "auto";
+    this.res.style.marginRight = "auto";
+    return this;
+  }
+
+  borderRadius(num) {
+    this.res.style.borderCollapse = "separate";
+    this.res.style.borderSpacing = 0;
+    this.res.style.overflow = "hidden";
+
+    const table = this.res;
+    const cols = Object.keys(this.datas[0]).length;
+    const rows = this.datas.length + 1;
+
+    for (let i = 0; i < cols; i++) {
+      table.rows[0].cells[i].style.borderTop = `${num * 2}px solid black`;
+      table.rows[rows - 1].cells[i].style.borderBottom = `${num * 2}px solid black`;
+    }
+
+    for (let i = 0; i < rows; i++) {
+      table.rows[i].cells[0].style.borderLeft = `${num * 2}px solid black`;
+      table.rows[i].cells[cols - 1].style.borderRight = `${num * 2}px solid black`;
+    }
+
+    table.rows[0].cells[0].style.borderTopLeftRadius = "10px";
+    table.rows[0].cells[cols - 1].style.borderTopRightRadius = "10px";
+    table.rows[rows - 1].cells[0].style.borderBottomLeftRadius = "10px";
+    table.rows[rows - 1].cells[cols - 1].style.borderBottomRightRadius = "10px";
+
+    return this;
+  }
+
+  cellPadding(padding) {
+    for (let row of this.res.rows) {
+      for (let cell of row.cells) {
+        cell.style.padding = padding;
+      }
+    }
+    return this;
+  }
+
+  cellAlign(align) {
+    for (let row of this.res.rows) {
+      for (let cell of row.cells) {
+        cell.style.textAlign = align;
+      }
+    }
+    return this;
+  }
+
+  headStyle(style) {
+    const row = this.res.rows[0];
+    if (row) {
+      row.style.color = style.color;
+      if (style.background) {
+        row.style.backgroundColor = style.background;
+      }
+    }
+    return this;
+  }
+
+  border(borderStyle) {
+    this.res.style.borderCollapse = "collapse";
+    for (let row of this.res.rows) {
+      row.style.border = borderStyle;
+      for (let cell of row.cells) {
+        cell.style.border = borderStyle;
+      }
+    }
+    return this;
+  }
+
+  generateTableHead(table, data) {
+    const thead = table.createTHead();
+    const row = thead.insertRow();
+    for (let key of data) {
+      const th = document.createElement("th");
+      const text = document.createTextNode(key);
+      th.appendChild(text);
+      row.appendChild(th);
+    }
+  }
+
+  generateTable(table, data) {
+    for (let element of data) {
+      const row = table.insertRow();
+      for (let key in element) {
+        const cell = row.insertCell();
+        const text = document.createTextNode(element[key]);
+        cell.appendChild(text);
+      }
+    }
+  }
+
+  render(div) {
+    if (div) {
+      const wrapper = document.createElement("div");
+      wrapper.style.overflowX = "auto";
+      wrapper.appendChild(this.res);
+      document.querySelector(div).appendChild(wrapper);
+    } else {
+      const wrapper = document.createElement("div");
+      wrapper.style.overflowX = "auto";
+      wrapper.appendChild(this.res);
+      return wrapper;
+    }
+  }
+}
+
+
+
+export { Table };