nodality 1.0.0-beta.98 → 1.0.0

package/layout/table.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -64,6 +64,11 @@ class Table extends Animator {
     ) {
       if (obj.gradient) {
         this.globalGradient = obj.gradient.op.gradient;
+    
+        if (obj.gradient.op.direction === "radial") {
+					this.globalGradient = "radial-gradient(circle at center, orange, green)";
+				}
+    
       }
 
       if (obj.stroke) {

package/layout/text.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -63,9 +63,7 @@ class Text extends Animator {
 	}
 
 	toCode(){
-
 		if (this.excludeFromCodeTrue){
-			// this.code = ["new Text('').set({})"];
 			return [""];
 		}
 
@@ -77,8 +75,6 @@ class Text extends Animator {
 			.stringify(cleanedObj, null, 4)
 			.replace(/"([^"]+)":/g, '$1:');
 
-			console.log("OCO")
-console.log(objString);
         return [`new Text("${this.text}").set(${objString})`];
 	}
 

package/layout/textField.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/ulist.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/video.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/withoutNew.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/wrap.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/zoomCard.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/AppleAnim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/KeyframeAnimation.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/Stacker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/TransformAnim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/cardGetter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -421,7 +421,6 @@ customOptions.forEach(item => {
 //customOptions = updated;
 
 
-
         for (var i = 0; i < arr.length; i++) {
             let el = arr[i];
             let ela = null;
@@ -513,9 +512,9 @@ customOptions.forEach(item => {
                         values: [ // This can be empty or have any order of values
                             "ty:-20px",
                             "scale(3)",
-                            "rotate(30deg)",
-                            "skew(40deg, 0deg)",
-                            "perspective(500px)",
+                            "rotate(3deg)",
+                            "skew(3deg, 0deg)",
+                            "perspective(100px)",
                             "matrix(1, 0, 0, 1, 50, 50)"
                         ],
                     }
@@ -760,15 +759,16 @@ customOptions.forEach(item => {
 
                     else {
                         opts = [ // This can be empty or have any order of values
-                            "ty:-20px",
-                            "scale(3)",
-                            "rotate(30deg)",
+                            "ty:20px",
+                            "tx:30px",
+                         //   "scale(3)",
+                            "rotate(3deg)",
                             "skew(40deg, 0deg)",
-                            "perspective(500px)",
-                            "matrix(1, 0, 0, 1, 50, 50)"
+                           // "perspective(500px)",
+                       //     "matrix(1, 0, 0, 1, 50, 50)"
                         ];
                     }
-
+/*
 if (duration === "default"){
     duration = "MEDIUM";
 }
@@ -779,7 +779,7 @@ if (duration === "default"){
                         duration = "6s-ease-in-out";
                     } else if (duration === "SLOW"){
                         duration = "10s-ease-in-out";
-                    } 
+                    } */
 
 
 if (/*q == i*/ true){ // 23:07.20 Nice!!!! 23:04 bef
@@ -835,6 +835,66 @@ console.log(duration);
             console.log(`----------------------------LLL ${i} ${customOptions.length}`);
            
 
+
+            function replaceMedium(obj) {
+  /*for (let key in obj) {
+    if (typeof obj[key] === "object") {
+      replaceMedium(obj[key]); // dive deeper
+    } else if (obj[key] === "medium") {
+      obj[key] = "6s-ease-in-out";
+    } else if (obj[key] === "fast") {
+      obj[key] = "3s-ease-in-out";
+    }  else if (obj[key] === "slow") {
+      obj[key] = "9s-ease-in-out";
+    } else if (obj[key] === "default"){
+        alert("PP")
+       delete obj[key];
+    }
+  }*/
+
+   /*  for (let key of Object.keys(obj)) {
+    if (typeof obj[key] === "object" && obj[key] !== null) {
+      replaceMedium(obj[key]); // dive deeper
+    } else if (obj[key] && obj[key].toLowerCase() === "medium") {
+      obj[key] = "6s-ease-in-out";
+    } else if (obj[key] && obj[key].toLowerCase() === "fast") {
+      obj[key] = "3s-ease-in-out";
+    } else if (obj[key] && obj[key].toLowerCase() === "slow") {
+      obj[key] = "9s-ease-in-out";
+    } else if (obj[key] && obj[key].toLowerCase() === "default") {
+     // alert("PP");
+      delete obj[key]; // works now
+    }
+  }*/
+
+    for (let key of Object.keys(obj)) {
+  if (typeof obj[key] === "object" && obj[key] !== null) {
+    replaceMedium(obj[key]); // dive deeper
+  } else if (typeof obj[key] === "string") {
+    switch (obj[key].toLowerCase()) {
+      case "medium":
+        obj[key] = "6s-ease-in-out";
+        break;
+      case "fast":
+        obj[key] = "3s-ease-in-out";
+        break;
+      case "slow":
+        obj[key] = "9s-ease-in-out";
+        break;
+      case "default":
+        delete obj[key];
+        break;
+    }
+  }
+}
+}
+
+replaceMedium(customOptions);
+
+            console.log("SENDING CUSTOM OPTIONS");
+           
+ console.log(customOptions);
+
             const matchEls = ["h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(el.type) || el.type === "img" || el.type === "a";
            
             if (matchEls) { 

package/lib/elementMapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.0-beta.98
+ * nodality v1.0.0
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -772,13 +772,14 @@ if (obj.el.dropdown){
                breakpoints: [ // 172800 almost
                    {
                        at: "0px", view: new MobileBar().set({
-                           background: "green", 
+                           background: "#ecf0f1", 
                            mar: [{ "a": 21 }],
-                           brand: new Text("A").set({size: "S1"}),
+                           brand: new Text("Company").set({size: "S6", font: "Helvetica"}),
                           hamburgerColour: "#3498db",
                           radius: "1rem",
                        }).add([
-                       new Link("A").set({text: "A", url: "#a"}),//.render()
+
+                       new Link().set({text: "About", url: "#a"}),//.render()
                      
 
 
@@ -795,7 +796,7 @@ if (obj.el.dropdown){
                         height: "auto",
                    
                     }).add([
-                        new Text("First")
+                        new Text("More")
                             .set({
                                 cursor: "hand",
                                 icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -807,7 +808,7 @@ if (obj.el.dropdown){
 
                             }),
 
-                            new Text("Firsti")
+                            new Text("Our story")
                             .set({
                                 cursor: "hand",
                                // icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -819,7 +820,7 @@ if (obj.el.dropdown){
 
                             }),
 
-                            new Text("Firstiuu")
+                            new Text("Team")
                             .set({
                                 cursor: "hand",
                                // icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -835,14 +836,14 @@ if (obj.el.dropdown){
 
 
 
-                       new Link("B").set({text: "B", url: "#b"}),//.render()
-                       new Link("C").set({text: "C", url: "https://www.abcnews.com"})//.render()
+                       new Link("B").set({text: "About", url: "#b"}),//.render()
+                       new Link("C").set({text: "Contact", url: "https://www.abcnews.com"})//.render()
                        ])//.addNavItem(new Link("C").set({}).render())
                    },
    
                    {
                        at: "1200px", view: new DesktopBar().set({
-                           background: "green",
+                           background: "#ecf0f1",
                            mar: [{ "a": 21 }],
                            maxHeight: "100px",
                            radius: "1rem"
@@ -851,7 +852,7 @@ if (obj.el.dropdown){
                        })
                      //  .setBrand(new Text("A").set({}).render())
                        .add([
-                        new Text("A").set({size: "S1"}),
+                        new Text("Company").set({size: "S6", font: "Helvetica"}),
                         new Spacer(true),
 
                        // new Link("O").set({text: "O", url: "#a"}),
@@ -868,7 +869,7 @@ if (obj.el.dropdown){
                                radius: "30px",
                                 width: "130px"
                            }).add([
-                               new Text("First")
+                               new Text("More")
                                    .set({
                                        cursor: "hand",
                                        icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -883,7 +884,7 @@ if (obj.el.dropdown){
 
 new Wrapper().set({
     flexDir: "column", 
-    background: "orange", 
+   // background: "orange", 
     mar: [{"t": "10px"}],
     radius: ".3rem"}).add([
 
@@ -891,7 +892,7 @@ new Wrapper().set({
 
                                    new Link("")
                                    .set({
-                                    text: "A", // BEWARE
+                                    text: "Who we are", // BEWARE
                                     url: "jk",
                                        cursor: "hand",
                                       // icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -904,7 +905,7 @@ new Wrapper().set({
 
                                    new Link("")
                                    .set({
-                                    text: "Kivi new TV", 
+                                    text: "Info", 
                                     url: "#u",
                                        cursor: "hand",
                                       // icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -918,7 +919,7 @@ new Wrapper().set({
 
                                    new Link("")
                                    .set({
-                                    text: "Thanks GPT", 
+                                    text: "About", 
                                     url: "#u",
                                        cursor: "hand",
                                       // icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
@@ -947,9 +948,9 @@ new Wrapper().set({
 
 
 
-                       new Link("Desktop bar").set({text: "Desktop bar", url: "#a"}),//.render()
-                       new Link("B").set({text: "B", url: "#a"}),//.render()
-                       new Link("C").set({text: "C", url: "#a"})//.render()
+                       new Link().set({ text: "About", url: "#a"}),//.render()
+                       new Link().set({ text: "Services", url: "#a"}),//.render()
+                       new Link().set({ text: "Contact", url: "#a"})//.render()
                     //   new Link("C").set({})//.render()
                        ])
                            /*.addNavItem(
@@ -1012,82 +1013,91 @@ new Wrapper().set({
             font: "Arial",
             pad: [{a:20}], 
             bold: true,
-            align: "left" // 21:04:58
+             tags: {open: "sidebar:open", close: "sidebar:closed"},
+            align: "left", // 21:04:58
+             hover: { 
+	            color: "wheat", 
+	            animation: 0.3 
+            }
         }));
 
 
         const dropdown = new Dropdown().set({
             behaviour: "mouseover",
-      pad: [{"a":40}],
-      //socenter: true,
-      padding: "10px",
-      border: "1px solid black",
-      animation: { // also works without animation block
-        range: ["0px", "1900px"],
-        op: {
-            name: "animation",
-            color: "green", // 102410 19/11/24 staggered
-            width: "1px",
-            keyframesOpen: [ // staggered effect 
-                { transform: `translate(100%, ${1*10}%)`, opacity: 0 },
-                { transform: `translate(0%)`, opacity: 1  }
-            ], 
-            keyframesClose: [ // put where approprriate
-                { transform: 'translate(0%)', opacity: 1 },
-                { transform: `translate(100%, ${1*10}%)`, opacity: 0 }
-            ], 
-            openOptions: {
-                duration: 300,
-                fill: 'forwards',
-                delay: 1000 // 1000
-            },
-            closeOptions:{
-                duration: 1, // 1 should be acceptable here when I close
-                fill: 'forwards',
-                delay: 1000 // 1000 why does 3000 work during open but not during close??
+            pad: [{ "a": 40 }],
+            //socenter: true,
+            padding: "10px",
+          //  border: "1px solid black",
+            animation: { // also works without animation block
+                range: ["0px", "1900px"],
+                op: {
+                    name: "animation",
+                    color: "green", // 102410 19/11/24 staggered
+                    width: "1px",
+                    keyframesOpen: [ // staggered effect 
+                        { transform: `translate(100%, ${1 * 10}%)`, opacity: 0 },
+                        { transform: `translate(0%)`, opacity: 1 }
+                    ],
+                    keyframesClose: [ // put where approprriate
+                        { transform: 'translate(0%)', opacity: 1 },
+                        { transform: `translate(100%, ${1 * 10}%)`, opacity: 0 }
+                    ],
+                    openOptions: {
+                        duration: 300,
+                        fill: 'forwards',
+                        delay: 1000 // 1000
+                    },
+                    closeOptions: {
+                        duration: 1, // 1 should be acceptable here when I close
+                        fill: 'forwards',
+                        delay: 1000 // 1000 why does 3000 work during open but not during close??
+                    },
+                },
             },
-        },
-    },
-          }).add([
-     new Text("First")
-     .set({
-     cursor: "hand",
-     icon: {padding:30,url:"https://cdn-icons-png.flaticon.com/512/60/60995.png"},
-     fluidc: "S6",
-     pad: [{l:10,r:10}], 
-     font: "Arial",
-     align: "center",
-     weight: "bold", 
-     
-     })
-     
-    ,
-     new Wrapper() 
-    .set({centerColumn: true,
-     radius: "0.7rem",background: "#1abc9c",
-     makeResponsiveBehaviour: "undefined",})
-    .add([ 
-    
-     new Link()
-     .set({
-     pad: [{a:10}],
-     font: "Arial",
-     hover: {color:"wheat",animation:0.3},
-     bold: true,
-     link: "https://www.apple.com",
-     text: "Second",
-     icon: {padding:30,url:"https://cdn-icons-png.flaticon.com/512/32/32339.png"},}) 
-    ,
-     new Link()
-     .set({
-     pad: [{a:10}],
-     font: "Arial",
-     hover: {color:"wheat",animation:0.3},
-     bold: true,
-     link: "https://www.apple.com",
-     text: "Third",
-     icon: {padding:30,url:"https://cdn-icons-png.flaticon.com/512/32/32339.png"},}) 
-    ])]);
+        }).add([
+            new Text("More")
+                .set({
+                    cursor: "hand",
+                    icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/60/60995.png" },
+                    fluidc: "S6",
+                    pad: [{ l: 10, r: 10 }],
+                    font: "Arial",
+                    align: "center",
+                    weight: "bold",
+
+                })
+
+            ,
+            new Wrapper()
+                .set({
+                    centerColumn: true,
+                    radius: "0.7rem", background: "#1abc9c",
+                    makeResponsiveBehaviour: "undefined",
+                })
+                .add([
+
+                    new Link()
+                        .set({
+                            pad: [{ a: 10 }],
+                            font: "Arial",
+                            hover: { color: "wheat", animation: 0.3 },
+                            bold: true,
+                            link: "https://www.apple.com",
+                            text: "Second",
+                            icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/32/32339.png" },
+                        })
+                    ,
+                    new Link()
+                        .set({
+                            pad: [{ a: 10 }],
+                            font: "Arial",
+                            hover: { color: "wheat", animation: 0.3 },
+                            bold: true,
+                            link: "https://www.apple.com",
+                            text: "Third",
+                            icon: { padding: 30, url: "https://cdn-icons-png.flaticon.com/512/32/32339.png" },
+                        })
+                ])]);
 
 
        
@@ -1099,12 +1109,17 @@ new Wrapper().set({
             text: i.title,
             link: i.link,
             isNavA: true,
-            url: "#e",
+            url: "#myURL",
             id: "#" + i.title.toLowerCase(),
             font: "Arial",
             pad: [{a:20}], 
             bold: true,
+             tags: {open: "sidebar:open", close: "sidebar:closed"},
             align: "left", // 21:04:58
+            hover: { 
+	            color: "wheat", 
+	            animation: 0.3 
+            },
             animation: { // also works without animation block
                 range: ["0px", "1900px"],
                 op: {
@@ -1143,14 +1158,14 @@ if (obj.el.dropdown){
 
         // Always require link wrapper
         const linkWrapper = new Wrapper().set({column: true}).add([
-            new Text("Ultra Reckoning")
+            new Text("Sidebar")
              .set({   
-                   fluidc: "S6",
+                   size: "S6",
                    font: "Arial",
                    id: "#olod",
                    italic: true,
                    animation: {range:["0px","1900px"],op:{name:"animation",color:"green",width:"1px"}},
-                   pad: [{l:40}, {t:20}], // Insert in the right plce
+                   pad: [{l:20}, {t:20}], // Insert in the right plce
                  //  pad: {sides: ["all"], value: "1rem"}
                 }),
 
@@ -1159,7 +1174,7 @@ if (obj.el.dropdown){
             obj.el.animation ? animatedLinks[2] : links[2],
             (obj.el.animation && obj.el.dropdown) ? animatedLinks[3] : new Text("").set({}).excludeFromCode(),
 
-            new Text("Paramount, 2024")
+            new Text("Company, 2025")
             .set({ // no ID, no animation
                 pad: [{a: 20}],
                 animation: {range:["0px","1900px"],op:{name:"animation",color:"green",width:"1px"}},
@@ -1196,6 +1211,8 @@ if (obj.el.dropdown){
             background: "#ecf0f1",
             hamColour: {opened: "#1abc9c", closed: "#e67e22"},
             mobileSize: "1.2em",
+            fixed: true,
+            tags: {open: "sidebar:open", close: "sidebar:closed"}
         }).items(obj.el.offcanvas ? offCanvas : linkWrapper );
 
 
@@ -1224,7 +1241,7 @@ if (obj.el.dropdown){
                     templateCols = null;
                 }
 5
-                if (ft.op.value === "image-overlay-text"){ // 17:43:03
+                if (ft.op.value === "img-overlay-text"){ // 17:43:03
                     spanObjects = {
                         text: {row: "1 / span 2", col: "3 / span 2"},
                         image: {row: "2 / span 3", col: "3 / 3"}
@@ -1232,7 +1249,7 @@ if (obj.el.dropdown){
                 }
 
                 // react on by value to control amount
-                if (ft.op.value === "image-leftof-text") { // no 3-6
+                if (ft.op.value === "img-leftof-text") { // no 3-6
                     spanObjects = {
                         text: {row: "1", col: "1 / 3"},
                         image: {row: "1", col: "3 / 4"}
@@ -1253,16 +1270,17 @@ if (obj.el.dropdown){
                     new Text("I am free")
                         .set({ 
                              border: "3px solid green",
-                             "font": "Arial", // 23:11:24 08/11/24 "font" works also?
-                             fluidc: "S1",
+                             font: "Arial", // 23:11:24 08/11/24 "font" works also?
+                             size: "S1",
                              color: "#1abc9c",
                              gpos: spanObjects != null ? (spanObjects.text) : null, // "span 2" can also work here as string 
                              zIndex: 1
                             }),
 
-                    new Image("https://www.cruisemapper.com/images/ships/2183-e9681865a61.jpg")
+                    new Image()
                       .set({
-                         url: "https://www.cruisemapper.com/images/ships/2183-e9681865a61.jpg", 
+                        url: "https://upload.wikimedia.org/wikipedia/commons/a/ac/MSC_World_Europa_-_Saint-Nazaire_-_June_2022.jpg",
+                        // url: "https://www.cruisemapper.com/images/ships/2183-e9681865a61.jpg", 
                          width: "400px",
                          height: "auto",
                          gpos:  spanObjects != null ? (spanObjects.image) : null,
@@ -1500,7 +1518,8 @@ const blast    = this.filtero("blast", el.id, obj.customOptions);
                     background: "#3498db", 
                     pad: [{ lr: "0.5rem", tb: "1rem" }], 
                     radius: "0.4rem", 
-                    color: "white"
+                    color: "white",
+                    mar: [{"a": 21}]
                 })
             ])`;