nodality 1.0.0-beta.2 → 1.0.0-beta.21

package/lib/designer.js

@@ -52,6 +52,12 @@ import { LinkStyler } from "../lib/linkGetter.js";
 import { CardGen } from "../lib/cardGetter.js";
 import {Simple} from "../layout/gridSwitcher.js";
 
+// ANIM
+import {KeyframeAnim} from "../lib/appleAnim.js";
+import {TransformAnim} from "../lib/transformanim.js";
+import {Stacker} from "../lib/stacker.js";
+import {ScrollVideo} from "../lib/scrollvideo.js";
+console.log("SO");
 // Audio, progress, TextField, import navFactor
 class Des {
     constructor() {
@@ -82,8 +88,46 @@ class Des {
         },
 
        complex: {
-            code: `new Wrapper()
-                  .set({...}) // Rest of the code omitted for brevity`
+            code: `new Wrapper() 
+	.set({
+		
+		responsive: {
+			ranges: ["700px", "1200px", "1400px"],
+			sequence: "col-row-col"
+		}
+	})
+	.add([
+		new Image("img/wix.jpeg").set({
+			width: "100%",
+			height: "200px",
+             objectFit: "cover"
+		}),
+
+        new Wrapper().set({
+        responsive: {
+			ranges: ["700px", "1200px", "1400px"],
+			sequence: "col-col-row"
+		}
+        }).add([
+            new Text("Running in the desert").set({
+                size: "S3",
+                font: "Arial",
+                color: "orange"
+            }),
+
+              new Text("This is example content").set({
+                exact: "1rem",
+                font: "Arial"
+            }),
+
+
+            new Image("img/wix.jpeg").set({
+                width: "100%",
+                height: "300px",
+                objectFit: "cover"
+            })
+        ])
+	])`
         }, ops: {
             miami: {
                 blast: {
@@ -127,7 +171,144 @@ class Des {
         },
 
         grid: {
-            code: `new Simple().set({...}).react([...]).add([...])`, // Rest omitted for brevity
+            code: ` new Simple()
+    .set({
+        gap: "1rem"
+    })
+    .react([{
+            at: "0px",
+            template: [
+                "eeeeee",
+                "eeeeee",
+                "abbbbb",
+                "abbbbb",
+                "abbbbb",
+                "cccccc",
+                "cccccc",
+                "dddddd"
+            ]
+        },
+
+        {
+            at: "900px",
+            color: "orange",
+            template: [
+                "aaaccc",
+                "aaaccc",
+                "bbbbbb",
+                "dddddd",
+                "eeeeee"
+            ]
+        },
+
+        {
+            at: "1200px",
+            color: "purple",
+            template: [
+                "cccaaa",
+                "cccaaa",
+                "bbbbbb",
+                "dddddd",
+                "eeeeee"
+            ]
+        },
+    ])
+    .add([
+        new Wrapper().set({
+            pad: [{
+                a: 20
+            }],
+            background: "#ecf0f1",
+            radius: "1.7rem"
+        }).add([
+            new Text("NEW PRODUCT").set({
+                exact: "1rem",
+                font: "Oswald",
+                width: "100%"
+            }),
+            new Text("Feel").set({
+                fluidc: "S2",
+                font: "Oswald",
+                width: "100%",
+                color: "black"
+            }),
+            new Text("Speed").set({
+                exact: "7rem",
+                font: "Oswald",
+                width: "100%",
+                color: "#3498db"
+            }),
+        ]),
+
+        new Wrapper().set({
+            pad: [{
+                a: 20
+            }],
+            background: "#ecf0f1",
+            radius: "1.7rem"
+        }).add([
+            new Text("TOP QUALITY").set({
+                exact: "1rem",
+                font: "Oswald",
+                width: "100%"
+            }),
+            new Text("Amazing animals").set({
+                fluidc: "S2",
+                font: "Oswald",
+                width: "100%",
+                color: "black"
+            }),
+
+            new Text("Seals are intelligent, agile marine mammals found in oceans around the world, known for their streamlined bodies, flippers, and ability to thrive both in water and on land. Belonging to the pinniped family, they are divided into true seals, which lack external ears, and eared seals like sea lions, which are more mobile on land. Seals feed primarily on fish and squid, using their sensitive whiskers to detect prey underwater, and can dive to great depths while holding their breath for extended periods. Adapted to cold environments with thick blubber for insulation, seals play a crucial role in marine ecosystems but face threats from climate change, pollution, and human activity, making conservation efforts increasingly important.")
+            .set({
+                font: "Arial",
+                exact: "1.3rem"
+            })
+
+        ]),
+
+        new Wrapper().set({
+            radius: "1.7rem",
+            overflow: "hidden"
+
+        }).add([
+
+            new Image("https://cdn.pixabay.com/photo/2017/02/09/18/40/seal-2053165_640.jpg", "exact").set({
+                width: "100%",
+                height: "420px",
+                minHeight: "100px",
+                objectFit: "cover"
+
+            })
+        ]),
+
+        new Wrapper().set({
+            pad: [{
+                a: 20
+            }],
+            background: "#ecf0f1",
+            radius: "1.7rem",
+        }).add([
+            new Text("Welcome seals").set({
+                fluidc: "S3",
+                font: "Oswald",
+                color: "black"
+            }),
+           
+        ]),
+        new Wrapper().set({
+            mc: true,
+            pad: [{
+                a: 20
+            }],
+            background: "#ecf0f1",
+            radius: "1.7rem",
+
+        }).add([new Text("Top line").set({
+            font: "Arial",
+            exact: "1.3rem"
+        }), ]),
+    ])`, // Rest omitted for brevity
         },
 
         flexRow: (colat) => ({
@@ -135,7 +316,23 @@ class Des {
                 code: `new FlexRow().set({border: ["all", "3px"], colat: "600px"}).items([new Image(...), new Image(...), new Image(...)])`,
             },
             text: {
-                code: `new FlexRow().set({...}).items([new Text(...), new Text(...), new Text(...)])`,
+                code: `new FlexRow().set({}).items([
+
+new Text("This").set({
+    size: "S3"
+}), 
+
+new Text("is").set({
+    size: "S3",
+    text: "Hello"
+}), 
+
+new Text("row.").set({
+    size: "S3",
+    text: "Hello"
+})
+    
+])`,
             },
         }),
 
@@ -561,7 +758,7 @@ console.log(duration);
             console.log(`----------------------------LLL ${i} ${customOptions.length}`);
            
 
-            const matchEls = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(el.type) || el.type === "img" || el.type === "a" || /*el.type == "modal" ||*/ el.type == "slider" || el.type == "table";
+            const matchEls = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(el.type) || el.type === "img" || el.type === "a" || /*el.type == "modal" ||*/ el.type == "slider" /*|| el.type == "table"*/;
            
             if (matchEls) {
              
@@ -580,6 +777,29 @@ console.log(duration);
                 this.ready2Render.push(ela);
                 ela = ela.render();
 
+            } else if (el.type === "table"){
+ this.code.push(`
+    new Table()
+        .add([
+            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" },
+            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" },
+            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" }
+          ])
+          .set({
+              cellPadding: "0.3em",
+              cellAlign: "center",
+              style: {
+                  font: "Arial"
+              },
+              headStyle: {
+                  color: "white",
+                  background: "#ff6d22"
+              },
+              border: "2px solid black",
+              center: true,
+              borderRadius: 2.2
+          })
+    `);
             } else if (el.type === "grid") {
                 this.code.push(
                     this.stor.grid.code
@@ -842,6 +1062,7 @@ console.log(duration);
 
         let preo = document.createElement("pre");
         preo.style.marginTop = "100px";
+        preo.style.overflow = "scroll";
         return this;
     }
 
@@ -862,11 +1083,34 @@ console.log(duration);
             }
         }
 
+        const layout = {
+  Text, Image, Link, FlexRow, UINavBar, Free, Audio, Progress, Center, Code,
+  Stack, Wrapper, MetaAdder, Table, Dropdown, Modal, TextField, Card,
+  Wrap, FlexGrid, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, Spacer,
+};
+
+const formComponents = {
+  FloatingInput, Range, RadioGroup, Picker, FilePickera,
+  DataList, Base, Form, Button, Slider, Video, Checkbox,
+};
+
+const libs = {
+  ElementMapper, Animator, LinkStyler, CardGen, Simple,
+};
+
+
+const components = {
+  ...layout,
+  ...formComponents,
+  ...libs,
+};
+
         for (var i = 0; i < this.code.length; i++) {
             let sub = this.code[i];
             console.log("SUBO");
             console.log(sub);
-            eval(`${sub}`);
+            new Function(...Object.keys(components), sub)(...Object.values(components));
+         //   eval(`${sub}`);
         }
     }
 }

package/lib/elementMapper.js

@@ -58,9 +58,9 @@ class ElementMapper { // 22:09:58 04/11/2024
             return this.protoNav(obj);
         } else if (obj.el.type === "sideNav"){
             return this.sideNav(obj);
-        } else if (obj.el.type === "row"){
+        } /*else if (obj.el.type === "row"){
             return this.row(obj);
-        } else if (obj.el.type === "dropdown"){
+        } */ else if (obj.el.type === "dropdown"){
             return this.dropdown(obj);
         } else if (obj.el.type === "modal"){
             return this.modal(obj);
@@ -103,7 +103,7 @@ class ElementMapper { // 22:09:58 04/11/2024
             return this.stack(obj);
          } else if (obj.el.type === "simple"){
             return this.simple(obj);
-         }
+         } 
     }
 
 
@@ -244,29 +244,6 @@ class ElementMapper { // 22:09:58 04/11/2024
           return new Slider(texts, null);//.render("#mount");
     }
 
-    static table(obj){
-        return new Table()
-        .add([
-            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" },
-            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" },
-            { abbr: "AUIUI/AK9PT", name: "Pokročilé mobilní technologie", grade: "A", date: "09.01.2024" }
-          ])
-          .set({
-              cellPadding: "0.3em",
-              cellAlign: "center",
-              style: {
-                  font: "Arial"
-              },
-              headStyle: {
-                  color: "white",
-                  background: "#ff6d22"
-              },
-              border: "2px solid black",
-              center: true,
-              borderRadius: 2.2
-          })
-    }
-
     static dropdown(obj){
         if (!obj.el.items){
             obj.el.items = ["Flower", "Car", "Maseratti"];
@@ -334,9 +311,9 @@ class ElementMapper { // 22:09:58 04/11/2024
         ])
     }
 
-    static row(obj){
+  /*  static row(obj){
         const customOptions = obj.customOptions;
-
+alert("PP")
       let ret =  new FlexRow()
       .set({
           borderObj: {
@@ -366,7 +343,7 @@ class ElementMapper { // 22:09:58 04/11/2024
 
   return ret;
        
-    }
+    }*/
 
     static protoNav(obj){
 
@@ -1082,6 +1059,7 @@ if (obj.el.dropdown){
                 backgroundOp: this.filtero("background", el.id, obj.customOptions),
                 marginOp: this.filtero("margin", el.id, obj.customOptions),
                 transform: this.filtero("transform", el.id, obj.customOptions),
+                filtera: this.filtero("filter", el.id, obj.customOptions),
             });
     }
 

package/lib/scrollvideo.js

@@ -0,0 +1,125 @@
+
+
+class ScrollVideo {
+    constructor() {
+        this.frameNumber = 0; // Start video at frame 0
+        this.res = document.createElement("div");
+        this.vid = null;
+        this.minScrollHeight = 0; // Default minimum scroll height
+        this.maxScrollHeight = 1000; // Default maximum scroll height
+        this.videoUrl = ""; // Default video URL
+    }
+
+    set({ minScrollHeight = 0, maxScrollHeight = 1000, videoUrl = "" } = {}) {
+        this.minScrollHeight = minScrollHeight;
+        this.maxScrollHeight = maxScrollHeight;
+        this.videoUrl = videoUrl;
+
+        // Create elements after settings are provided
+        this.createElements("V0");
+
+        // Select video element after creation
+        this.vid = this.res.children[0];
+
+        // Initialize event listeners and behavior
+        this.init();
+        return this; // Allow chaining
+    }
+
+    createElements(videoElementId) {
+        // Create and style the video element
+        const video = document.createElement("video");
+        video.id = videoElementId;
+        video.setAttribute("tabindex", "0");
+        video.setAttribute("autobuffer", "autobuffer");
+        video.setAttribute("preload", "preload");
+        video.style.position = "sticky";
+        video.style.top = "0";
+        video.style.left = "0";
+        video.style.width = "100%";
+        video.style.height = "100vh";
+        video.style.border = "1px solid orange";
+
+        // Create and append the source element to the video
+        const source = document.createElement("source");
+        source.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+        source.src = this.videoUrl;
+        video.appendChild(source);
+
+        // Append the video element to the container
+        this.res.appendChild(video);
+
+        // Create and style the paragraph element
+        const paragraph = document.createElement("p");
+        paragraph.id = "time";
+        paragraph.style.fontFamily = "Helvetica, Arial, sans-serif";
+        paragraph.style.fontSize = "24px";
+        this.res.appendChild(paragraph);
+
+        // Create and style the set-height div element
+        const setHeight = document.createElement("div");
+        setHeight.id = "set-height";
+        setHeight.style.display = "block";
+        this.setop = setHeight;
+        this.res.appendChild(setHeight);
+    }
+
+    sticky() {
+        this.res.style.position = "sticky";
+        this.res.style.top = 0;
+        return this;
+    }
+
+    init() {
+        // Set up event listener for when the video metadata is loaded
+        this.vid.addEventListener("loadedmetadata", () => {
+            // Dynamically set the page height based on video duration
+            const setHeight = this.setop;//document.getElementById("set-height");
+            if (setHeight) {
+                const scrollableHeight = this.maxScrollHeight - this.minScrollHeight;
+                setHeight.style.height = `${scrollableHeight}px`;
+            } else {
+                console.error("Error: 'set-height' element not found.");
+            }
+        });
+
+        // Start the scroll-play functionality
+        this.scrollPlay();
+    }
+    scrollPlay() {
+        // Ensure the video duration is loaded before trying to calculate currentTime
+        if (!this.vid || isNaN(this.vid.duration)) {
+            window.requestAnimationFrame(() => this.scrollPlay());
+            return;
+        }
+    
+        // Calculate the frame number based on scroll position
+        const scrollPosition = Math.max(
+            this.minScrollHeight,
+            Math.min(window.pageYOffset, this.maxScrollHeight)
+        );
+    
+        const scrollRange = this.maxScrollHeight - this.minScrollHeight;
+        const normalizedScroll = (scrollPosition - this.minScrollHeight) / scrollRange;
+    
+        // Update the video currentTime property
+        this.vid.currentTime = normalizedScroll * this.vid.duration;
+    
+        // Request the next animation frame for smooth playback
+        window.requestAnimationFrame(() => this.scrollPlay());
+    }
+    
+    toCode() {
+        return [""];
+    }
+    render(div) {
+        if (div){
+            document.querySelector(div).appendChild(this.res);
+            return;
+        }
+        // Return the container div with all elements
+        return this.res;
+    }
+}
+
+export { ScrollVideo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -16,9 +16,16 @@
     }
   },
   "scripts": {
-    "build": "webpack --config webpack.config.js"
+    "build": "webpack --config webpack.config.js",
+    "test": "jest",
+  "postpublish": "git add . && git commit -m \"release: v$npm_package_version\" && git tag v$npm_package_version && git push --force --set-upstream origin main && git push --force origin v$npm_package_version"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
   },
-  "dependencies": {},
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,5 +42,12 @@
     "library",
     "declarative",
     "nodality"
-  ]
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  }
 }