nodality 1.0.0-beta.1

package/layout/formComponents/radiogroup.js

@@ -0,0 +1,231 @@
+import {Animator} from "../animator.js";
+
+class RadioGroup /*extends Animator*/ {
+     constructor(){
+       // super();
+        this.el = null;
+        this.radioCount = 0;
+       // this.setup();
+    }
+    
+    set(objects){
+        
+        this.options = objects;
+        console.log("ORARA");
+        console.log(this.options);
+      
+        
+        this.radioCount = objects.items.length;
+        
+        let wrap = document.createElement("div");
+	
+        
+        let obj = objects.items;
+        
+        for (var i = 0; i < obj.length; i++){
+        
+        
+        let label = document.createElement("label"); 
+
+        if (obj.font){
+            label.style.font = obj.font;
+        }
+
+        if (obj.color){
+            label.style.color = obj.color;
+        }
+
+        if (obj.exact){
+            label.style.fontSize = obj.exact;
+        }
+
+
+
+
+        let node = document.createTextNode(obj[i]);
+        label.appendChild(node);
+        label.setAttribute("for", obj[i]); 
+        
+		let card = document.createElement("input");      
+        card.setAttribute("type", "radio");
+        card.setAttribute("id", `S${i}`);
+        card.setAttribute("value", obj[i].split(" ").join(""));   
+
+        card.style.appearance = 'none';
+        card.style.width = '20px';
+        card.style.height = '20px';
+        card.style.border = this.options.tint ? `2px solid ${this.options.tint}` : '2px solid #007BFF';
+        card.style.borderRadius = '50%';
+        card.style.outline = 'none';
+        card.style.cursor = 'pointer';
+        card.style.transition = '0.3s';
+
+    //    card.addEventListener('change', () => {
+       //     alert("change");
+          /*  if (card.checked) {
+                card.style.backgroundColor = '#007BFF';
+                card.style.boxShadow = '0 0 0 2px #0056b3 inset';
+            } else {
+                card.style.backgroundColor = 'transparent';
+                card.style.boxShadow = 'none';
+            }*/
+      //  });
+            
+        this.options.font && (label.style.fontFamily = this.options.font);
+            
+           if (objects.multiple){
+                card.setAttribute("name", obj[i].split(" ").join(""));   
+            } else {
+                card.setAttribute("name", objects.name);
+              //  card.setAttribute("name", "same");
+            } 
+            
+            
+       /* card.addEventListener("change", () => {
+            let picked = card.options[card.selectedIndex].value;
+            console.log(picked);
+        });*/
+            
+            
+             wrap.appendChild(card);
+             wrap.appendChild(label);
+             wrap.innerHTML += "</br>";
+        
+        }
+        
+        this.el = wrap;
+        
+        this.responsive();
+        return this;
+    } 
+
+    
+    
+     padding(val){
+        this.el.style.padding = val;
+        return this;
+    }
+    
+    getCheckedValues(){
+        console.log("NOW");
+        
+        var values = [];
+        
+        for (var i = 0; i < this.radioCount; i++){
+            
+           
+            if (document.querySelector(`#S${i}`).checked) {
+            let value = document.querySelector(`#S${i}`);
+            console.log("VALUE IS " + value.value);    
+            values.push(value.value);
+                }
+        }
+        
+        
+        
+        return values;
+    }
+
+    toCode() {
+        /*let objString = JSON.stringify(
+            this.options,
+            (key, value) => (typeof key === "string" && key !== "" ? value : value),
+            4
+        );*/
+
+        // 155735 preventing problem, no removal 
+        let objString = JSON.stringify(this.options, null, 4);
+        objString = objString.replace(/"(\w+)"(?=\s*:)/g, '$1');
+        return [`new RadioGroup().set(${objString})`];
+    }
+    
+    
+    
+    responsive(){
+            let query = window.matchMedia("(max-device-width: 415px)");
+           
+            // window.matchMedia(query)
+            if (query.matches){
+                this.el.style.fontSize = "1.7em";
+            }
+            
+            return this;
+        }
+    
+    
+    
+     render(div){
+		if (div){
+			document.querySelector(div).appendChild(this.el);
+
+
+          
+           
+		} else {
+
+
+
+
+            console.log("MULA");
+        //    console.log(this.el.children[0]);
+
+      
+
+        for (var i = 0; i < this.el.children.length; i++){
+
+            let card =  this.el.children[i];
+           // console.log(card.toString());
+
+          
+
+
+           if (card.toString() === "[object HTMLInputElement]") {
+            card.addEventListener('change', () => {
+                if (card.checked) {
+                    card.style.backgroundColor = this.options.tint ? this.options.tint : '#007BFF';
+                    card.style.boxShadow = this.options.tint ?`0 0 0 2px ${this.options.tint} inset` : '0 0 0 2px #0056b3 inset';
+        
+                    // Reset styles for other radio buttons in the group
+                    for (let j = 0; j < this.el.children.length; j++) {
+                        const sibling = this.el.children[j];
+                      //  alert(this.options.multiple);
+                        // Check if the sibling is an input element
+                        if (sibling.tagName === 'INPUT' && sibling.type === 'radio') {
+                            // Avoid resetting the current radio button
+                            if (this.options.multiple === false && sibling !== card) {
+                                sibling.style.backgroundColor = 'transparent';
+                                sibling.style.boxShadow = 'none';
+                            }
+                        }
+                    }
+                } else {
+                    card.style.backgroundColor = 'transparent';
+                    card.style.boxShadow = 'none';
+                }
+            });
+        }
+        
+      
+
+        }
+
+  
+         
+
+
+
+
+            
+			return this.el;
+		}	
+
+	}
+}
+
+
+
+
+
+
+window.RadioGroup = RadioGroup;
+export { RadioGroup };

package/layout/formComponents/range.js

@@ -0,0 +1,158 @@
+import {Animator} from "../animator.js";
+
+class Range {
+    constructor(obj) {
+        this.el = null;
+        this.minLabel = null;
+        this.maxLabel = null;
+        this.currentLabel = null;
+       // this.setup(obj);
+    }
+
+    padding(val) {
+        this.el.style.padding = val;
+        return this;
+    }
+
+    toCode() {
+        const objString = JSON.stringify(this.options, null, 4);
+        return [`new Range().set(${objString})`];
+    }
+
+    set(obj) {
+        this.options = obj;
+        // Create slider input
+        let slider = document.createElement("input");
+        slider.setAttribute("id", "slider");
+        slider.setAttribute("type", "range");
+        slider.setAttribute("min", obj.min);
+        slider.setAttribute("max", obj.max);
+        slider.setAttribute("value", obj.min);
+
+        slider.style.width = obj.width ?? "100%";
+        
+       
+            
+
+        if (!obj.plain){
+            // Default slider styling
+            slider.style.setProperty("-webkit-appearance", "none");
+            slider.style.appearance = "none";
+            slider.style.height = "9px";
+            slider.style.background =  obj.style.trackColor ?? "orange";
+            slider.style.borderRadius = "5px";
+          
+        
+
+        // Create and append thumb styles
+        const thumbCSS = `
+            #slider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                width: 25px;
+                height: 25px;
+                border-radius: 50%;
+                background: ${obj.style.thumbColor ?? "4CAF50"};
+                cursor: pointer;
+            }
+        `;
+        const style = document.createElement('style');
+        style.appendChild(document.createTextNode(thumbCSS));
+        document.head.appendChild(style);
+        }
+
+        // Create labels
+        let wrapper = document.createElement("div");
+        wrapper.style.display = "flex";
+        wrapper.style.flexDirection = "column";
+        wrapper.style.alignItems = "center";
+        wrapper.style.width = "100%";
+
+        let labelWrapper = document.createElement("div");
+        labelWrapper.style.display = "flex";
+        labelWrapper.style.justifyContent = "space-between";
+       // labelWrapper.style.width = "100%";
+       labelWrapper.style.width = obj.width ?? "100%";
+
+        this.minLabel = document.createElement("span");
+        this.minLabel.textContent = obj.min;
+
+        this.maxLabel = document.createElement("span");
+        this.maxLabel.textContent = obj.max;
+
+        this.currentLabel = document.createElement("span");
+        this.currentLabel.textContent = slider.value;
+
+        obj.font && (this.currentLabel.style.fontFamily = obj.font);
+        obj.font && (this.minLabel.style.fontFamily = obj.font);
+        obj.font && (this.maxLabel.style.fontFamily = obj.font);
+
+        if (!obj.plain){
+            labelWrapper.appendChild(this.minLabel);
+            labelWrapper.appendChild(this.currentLabel);
+            labelWrapper.appendChild(this.maxLabel);
+        }
+
+        // Update current label on slider input
+        slider.addEventListener("input", () => {
+            this.currentLabel.textContent = slider.value;
+        });
+
+        // Mobile-specific styles
+        let query = window.matchMedia("(max-device-width: 415px)");
+        if (query.matches) {
+            if (!obj.plain){
+            slider.style.height = "20px";
+            slider.style.background = obj.style.trackColor ?? "1abc9C";
+            slider.style.borderRadius = "10px";
+            slider.style.fontSize = "3rem";
+            slider.style.width = "80%";
+
+            const mobileThumbCSS = `
+                #slider::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    width: 25px;
+                    height: 25px;
+                    border-radius: 50%;
+                    background: ${obj.style.thumbColor ?? "blue"};
+                    cursor: pointer;
+                }
+            `;
+            
+            const mobileStyle = document.createElement('style');
+            mobileStyle.appendChild(document.createTextNode(mobileThumbCSS));
+            document.head.appendChild(mobileStyle);
+            } else {
+                slider.style.width = "80%";
+            }
+        }
+
+        wrapper.appendChild(labelWrapper);
+        wrapper.appendChild(slider);
+
+        this.el = wrapper;
+        return this;
+    }
+
+    value() {
+        return this.el.querySelector("#slider").value;
+    }
+
+    render(div) {
+        if (div) {
+            document.querySelector(div).appendChild(this.el);
+        } else {
+            return this.el;
+        }
+    }
+}
+
+
+
+
+
+
+
+window.Range = Range;
+export { Range };

package/layout/free.js

@@ -0,0 +1,232 @@
+import {Animator} from "./animator.js";
+
+class Free extends Animator {
+    constructor(){
+        super();
+        this.res = document.createElement("div");
+        this.res.style.display = "grid";
+        this.attributes = {};
+    }
+
+    set(obj){
+        this.options = obj;
+        this.attributes = obj;
+        this.templateCols = obj.templateCols;
+       // alert(this.templateCols);
+
+        if (obj.templateCols) { // condition wrong
+            this.res.style.gridTemplateColumns = `repeat(${obj.templateCols.cols}, 1fr)`;
+            this.res.style.gridTemplateRows = `repeat(${obj.templateCols.cols}, 1fr)`;
+        }
+
+ 
+        this.res.style.height = obj.height ? obj.height : "600px";
+
+        obj.positions && (this.storedPositions = obj.positions); //this.generateGridPositions(obj.position);
+
+        return this;
+    }
+
+
+// move this function into free class
+ generateGridPositions(attractions, rows = 30, cols = 50) {
+    const container = document.createElement("div");
+    container.classList.add("container");
+    container.style.display = "grid";
+    container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`; 
+    container.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+    container.style.width = "100%";
+    container.style.height = "100vh";
+
+    let defaultPositions = attractions.map((_, index) => ({
+        row: Math.floor(rows / 2) + index, // Slightly offset to avoid exact overlap
+        col: Math.floor(cols / 2) + index
+    }));
+
+    // Function to compute resulting force vector for a specific element
+    function computeForceVector(targetIndex) {
+        let forceX = 0;
+        let forceY = 0;
+
+        attractions.forEach((attr, index) => {
+            const { weight, direction } = attr;
+            const targetPosition = defaultPositions[targetIndex];
+            const attractionPosition = defaultPositions[index];
+
+            // Calculate the distance between the target and the attraction
+            const dx = targetPosition.col - attractionPosition.col;
+            const dy = targetPosition.row - attractionPosition.row;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            // Add a softening factor: make the force fall off gradually with distance
+            const scalingFactor = 1 / (distance + 1); // Smaller influence for greater distance
+
+            // Scale the force by the weight and the softening factor
+            const scaledWeight = weight * scalingFactor;
+
+            // Apply the force
+            switch (direction) {
+                case "L":
+                    forceX -= scaledWeight;
+                    break;
+                case "R":
+                    forceX += scaledWeight;
+                    break;
+                case "U":
+                    forceY -= scaledWeight;
+                    break;
+                case "B":
+                    forceY += scaledWeight;
+                    break;
+            }
+        });
+
+        return { forceX, forceY };
+    }
+
+    attractions.forEach((attr, index) => {
+        let { row, col } = defaultPositions[index];
+
+        // Compute the force vector for the current element
+        const { forceX, forceY } = computeForceVector(index);
+
+        // Apply the force to determine new position (apply moderate force)
+        col = Math.max(1, Math.min(cols, col + Math.round(forceX)));
+        row = Math.max(1, Math.min(rows, row + Math.round(forceY)));
+ 
+console.log(this.items.map(el => el.id));
+console.log(attr.attract.slice(1));
+      //  alert("#" + attr.attract.slice(1));
+        const element = this.items.filter(el => el.id === attr.attract.slice(1))[0].render(); //Array(this.res.children).filter(el => el.getAttribute("id") === attr.attract.slice(1)); //this.res.querySelector("#" + attr.attract.slice(1));//document.createElement("div");
+        console.log(element);
+   
+        //  element.id = attr.attract.slice(1);
+        element.style.gridRowStart = row;
+        element.style.gridRowEnd = row + 3; // Example height of 3 grid cells
+        element.style.gridColumnStart = col;
+        element.style.gridColumnEnd = col + 5; // Example width of 5 grid cells
+
+        element.style.border = `3px solid #${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;//[]
+       
+       /*if (element.toString() === "[HTMLParagaphElement]"){
+        element.style.width = "fit-content";
+       }*/
+
+        // Optional: Add some content or styles for better visibility
+       // element.textContent = `${attr.attract.slice(1)}`
+        
+        //\n(${forceX.toFixed(2)}, ${forceY.toFixed(2)})`;
+        element.style.display = "flex";
+        element.style.alignItems = "center";
+        element.style.justifyContent = "center";
+        element.style.fontWeight = "bold";
+        element.style.color = "white";
+       // alert(element)
+        this.res.appendChild(element);
+
+       // this.res.style.border = "3px solid #1abc9c";
+    });
+
+   // document.body.appendChild(container);
+   console.log("ARAO");
+   console.log(this.res.children.length);
+   return this;
+}
+
+
+    add(items){
+      this.items = items;
+        
+        // Render each component in the grid container
+        for (const component of items) {
+            this.res.appendChild(component.render());
+           // alert("PP");
+       //    console.log("ORAA");
+       //    console.log(this.res.children.length);
+        }
+
+           //   alert("PP");
+     //  alert(this.res);
+
+        if (this.storedPositions){
+            this.generateGridPositions(this.storedPositions);
+            
+        }
+
+        console.log("MORAA");
+            console.log(this.res.children.length);
+       
+        return this;
+    }
+
+   /* toCode(){
+        let codeStr = `new Free()`;
+
+        // 16:01:09 09/11/24 What????
+        // Convert attributes to .set({...}) format if there are any attributes
+        if (Object.keys(this.attributes).length > 0) {
+            codeStr += `.set(${JSON.stringify(this.attributes, null, 2).replace(/"([^"]+)":/g, '$1:')})`;
+
+          //  codeStr += `.set(${JSON.stringify(this.attributes, null, 2)})`;
+        } else {
+            codeStr += `.set({})`;
+        }
+    
+        codeStr += `.add([\n`;
+    
+        // Generate the code for each item and join with commas only between items
+        codeStr += this.items
+            .map(item => item.toCode().join("").trim()) // Trim any line breaks or whitespace around the item code
+            .join(",\n"); // Insert commas only between items
+    
+        codeStr += `\n])`;
+    
+
+        return codeStr;
+    }*/
+
+        toCode() {
+            if (this.excludeFromCodeTrue){
+                // this.code = ["new Text('').set({})"];
+                return [""];
+            }
+    
+            const objString = JSON
+                .stringify(this.options, null, 4)
+                .replace(/"([^"]+)":/g, '$1:');
+    
+
+                var codeStr = "";
+                codeStr += `.add([\n`;
+    
+                // Generate the code for each item and join with commas only between items
+                codeStr += this.items
+                    .map(item => item.toCode().join("").trim()) // Trim any line breaks or whitespace around the item code
+                    .join(",\n"); // Insert commas only between items
+            
+                codeStr += `\n])`;
+
+                
+            return [`new Free().set(${objString})${codeStr}`];
+        }
+
+    render(div){
+
+        // ARE THERE CHILDREN
+      console.log("CHILDREN IN RENDER");
+      console.log(this.res.children.length);
+
+
+        if (div){
+            document.querySelector(div).appendChild(this.res);
+            return;
+        }
+
+        
+
+     //   alert("PP");
+     //  alert(this.res);
+        return this.res;
+    }
+}
+export { Free };