nodality 1.0.128 → 1.0.130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animator.cjs.js +1 -1
- package/dist/animator.esm.js +1 -1
- package/dist/audionew.cjs.js +1 -1
- package/dist/audionew.esm.js +1 -1
- package/dist/beta-desktop-bar.cjs.js +1 -1
- package/dist/beta-desktop-bar.esm.js +1 -1
- package/dist/beta-mobile-bar.cjs.js +1 -1
- package/dist/beta-mobile-bar.esm.js +1 -1
- package/dist/bundle.umd.js +1 -1
- package/dist/button.cjs.js +1 -1
- package/dist/button.esm.js +1 -1
- package/dist/center.cjs.js +1 -1
- package/dist/center.esm.js +1 -1
- package/dist/checkbox.cjs.js +1 -1
- package/dist/checkbox.esm.js +1 -1
- package/dist/code.cjs.js +1 -1
- package/dist/code.esm.js +1 -1
- package/dist/container.cjs.js +1 -1
- package/dist/container.esm.js +1 -1
- package/dist/designer.cjs.js +1 -1
- package/dist/designer.esm.js +1 -1
- package/dist/dropdown.cjs.js +1 -1
- package/dist/dropdown.esm.js +1 -1
- package/dist/element-mapper.cjs.js +1 -1
- package/dist/element-mapper.esm.js +1 -1
- package/dist/finalresult.esm.js +1 -1
- package/dist/flex-card.cjs.js +1 -1
- package/dist/flex-card.esm.js +1 -1
- package/dist/flex-grid.cjs.js +1 -1
- package/dist/flex-grid.esm.js +1 -1
- package/dist/flex-row.cjs.js +1 -1
- package/dist/flex-row.esm.js +1 -1
- package/dist/floating-input.cjs.js +1 -1
- package/dist/floating-input.esm.js +1 -1
- package/dist/free.cjs.js +1 -1
- package/dist/free.esm.js +1 -1
- package/dist/image-picker.cjs.js +1 -1
- package/dist/image-picker.esm.js +1 -1
- package/dist/image.cjs.js +1 -1
- package/dist/image.esm.js +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/link-getter.cjs.js +1 -1
- package/dist/link-getter.esm.js +1 -1
- package/dist/link.cjs.js +1 -1
- package/dist/link.esm.js +1 -1
- package/dist/multiswitcher.cjs.js +1 -1
- package/dist/multiswitcher.esm.js +1 -1
- package/dist/new-nav-bar.cjs.js +1 -1
- package/dist/new-nav-bar.esm.js +1 -1
- package/dist/picker.cjs.js +1 -1
- package/dist/picker.esm.js +1 -1
- package/dist/side-nav-bar.cjs.js +1 -1
- package/dist/side-nav-bar.esm.js +1 -1
- package/dist/simple-bar.cjs.js +1 -1
- package/dist/simple-bar.esm.js +1 -1
- package/dist/slider-2025.cjs.js +1 -1
- package/dist/slider-2025.esm.js +1 -1
- package/dist/table.cjs.js +1 -1
- package/dist/table.esm.js +1 -1
- package/dist/text-field.cjs.js +1 -1
- package/dist/text-field.esm.js +1 -1
- package/dist/text.cjs.js +1 -1
- package/dist/text.esm.js +1 -1
- package/dist/ulist.cjs.js +1 -1
- package/dist/ulist.esm.js +1 -1
- package/dist/video.cjs.js +1 -1
- package/dist/video.esm.js +1 -1
- package/dist/zoom-card.cjs.js +1 -1
- package/dist/zoom-card.esm.js +1 -1
- package/layout/animator.js +2 -2
- package/layout/audio.js +1 -1
- package/layout/audionew.js +1 -1
- package/layout/base-2.js +1 -1
- package/layout/base.js +1 -1
- package/layout/beta-desktop-bar.js +1 -1
- package/layout/beta-mobile-bar.js +1 -1
- package/layout/box.js +1 -1
- package/layout/button.js +1 -1
- package/layout/cards.js +1 -1
- package/layout/center.js +1 -1
- package/layout/checkbox.js +1 -1
- package/layout/circle.js +1 -1
- package/layout/clean-row.js +1 -1
- package/layout/code.js +1 -1
- package/layout/container.js +1 -1
- package/layout/custom.js +1 -1
- package/layout/div-image.js +1 -1
- package/layout/dropdown-2025.js +39 -37
- package/layout/dropdown.js +1 -1
- package/layout/empty-element.js +1 -1
- package/layout/external-stylesheet.js +1 -1
- package/layout/flex-card.js +1 -1
- package/layout/flex-grid.js +1 -1
- package/layout/flex-row.js +1 -1
- package/layout/footer.js +1 -1
- package/layout/form-components/custom.js +1 -1
- package/layout/form-components/data-list.js +1 -1
- package/layout/form-components/floating-input.js +1 -1
- package/layout/form-components/form-all.js +1 -1
- package/layout/form-components/form.js +1 -1
- package/layout/form-components/image-picker.js +1 -1
- package/layout/form-components/picker.js +1 -1
- package/layout/form-components/radio.js +1 -1
- package/layout/form-components/radiogroup.js +1 -1
- package/layout/form-components/range.js +1 -1
- package/layout/free.js +1 -1
- package/layout/grid-new.js +1 -1
- package/layout/grid-switcher.js +1 -1
- package/layout/grid.js +1 -1
- package/layout/group.js +1 -1
- package/layout/header.js +1 -1
- package/layout/horizontal-scroller.js +1 -1
- package/layout/image-old.js +1 -1
- package/layout/image.js +1 -1
- package/layout/index.js +1 -1
- package/layout/label.js +1 -1
- package/layout/link.js +1 -1
- package/layout/list-OLD.js +1 -1
- package/layout/list.js +1 -1
- package/layout/meta-adder.js +1 -1
- package/layout/modal-2025.js +1 -1
- package/layout/modernwrap.js +1 -1
- package/layout/multiswitcher.js +1 -1
- package/layout/multiswitcherBeta.js +1 -1
- package/layout/nav-bar.js +1 -1
- package/layout/nav-factor/custom-div.js +1 -1
- package/layout/navBar-OLD.js +1 -1
- package/layout/new-flat-adder.js +1 -1
- package/layout/new-nav-bar.js +1 -1
- package/layout/offset-container.js +1 -1
- package/layout/polygon.js +1 -1
- package/layout/progress.js +1 -1
- package/layout/row.js +1 -1
- package/layout/saved-new-nav-bar.js +1 -1
- package/layout/scroll-video.js +1 -1
- package/layout/side-bar.js +1 -1
- package/layout/side-nav-bar.js +1 -1
- package/layout/simple-bar.js +1 -1
- package/layout/slider-2025.js +1 -1
- package/layout/spacer.js +1 -1
- package/layout/stack.js +1 -1
- package/layout/styler.js +1 -1
- package/layout/switcher.js +1 -1
- package/layout/table.js +1 -1
- package/layout/text-field.js +1 -1
- package/layout/text.js +1 -1
- package/layout/ulist.js +1 -1
- package/layout/video.js +1 -1
- package/layout/without-new.js +1 -1
- package/layout/wrap.js +1 -1
- package/layout/zoom-card.js +1 -1
- package/lib/card-getter.js +1 -1
- package/lib/designer.js +1 -1
- package/lib/element-mapper.js +1 -1
- package/lib/keyframe-animation.js +1 -1
- package/lib/link-getter.js +1 -1
- package/lib/scroll-video.js +1 -1
- package/lib/stacker.js +1 -1
- package/lib/theme.js +1 -1
- package/lib/transform-anim.js +1 -1
- package/package.json +1 -1
package/layout/button.js
CHANGED
package/layout/cards.js
CHANGED
package/layout/center.js
CHANGED
package/layout/checkbox.js
CHANGED
package/layout/circle.js
CHANGED
package/layout/clean-row.js
CHANGED
package/layout/code.js
CHANGED
package/layout/container.js
CHANGED
package/layout/custom.js
CHANGED
package/layout/div-image.js
CHANGED
package/layout/dropdown-2025.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* nodality v1.0.
|
|
2
|
+
* nodality v1.0.130
|
|
3
3
|
* (c) 2026 Filip Vabrousek
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -10,39 +10,38 @@ class Dropdown extends Animator {
|
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
12
12
|
this.res = document.createElement("div");
|
|
13
|
-
|
|
13
|
+
this.res.style.position = "relative";
|
|
14
|
+
|
|
14
15
|
// Wrapper for the collapsed dropdown
|
|
15
16
|
this.toggleWrap = document.createElement("div");
|
|
16
|
-
// this.toggleWrap.style.background = "olive";
|
|
17
17
|
this.toggleWrap.style.zIndex = 9999;
|
|
18
18
|
this.toggleWrap.style.borderRadius = "0.3rem";
|
|
19
|
-
//this.toggleWrap.style.width = "200px"; // Explicit width for collapsed dropdown
|
|
20
|
-
// this.toggleWrap.style.height = "40px"; // Fixed height for collapsed dropdown
|
|
21
19
|
this.toggleWrap.style.cursor = "pointer";
|
|
22
20
|
this.toggleWrap.style.display = "flex";
|
|
23
21
|
this.toggleWrap.style.alignItems = "center";
|
|
24
22
|
this.toggleWrap.style.justifyContent = "center";
|
|
25
23
|
this.res.appendChild(this.toggleWrap);
|
|
26
24
|
|
|
27
|
-
// Container for dropdown content
|
|
25
|
+
// Container for dropdown content — appended to body to escape overflow clipping
|
|
28
26
|
this.contentWrap = document.createElement("div");
|
|
29
|
-
this.contentWrap.style.position = "
|
|
27
|
+
this.contentWrap.style.position = "fixed";
|
|
30
28
|
this.contentWrap.style.background = "#ecf0f1";
|
|
31
29
|
this.contentWrap.style.borderRadius = "0.3rem";
|
|
32
30
|
this.contentWrap.style.boxShadow = "0 2px 5px rgba(0, 0, 0, 0.15)";
|
|
33
|
-
this.contentWrap.style.
|
|
34
|
-
this.contentWrap.style.
|
|
35
|
-
this.contentWrap.style.
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
this.contentWrap.style.width = "250px";
|
|
32
|
+
this.contentWrap.style.display = "none";
|
|
33
|
+
this.contentWrap.style.zIndex = 99999;
|
|
34
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
35
|
+
document.body.appendChild(this.contentWrap);
|
|
36
|
+
});
|
|
37
|
+
// Fallback if DOM is already loaded
|
|
38
|
+
if (document.body) {
|
|
39
|
+
document.body.appendChild(this.contentWrap);
|
|
40
|
+
}
|
|
38
41
|
|
|
39
42
|
this.styles = {};
|
|
40
43
|
this.children = [];
|
|
41
44
|
this.isExpanded = false;
|
|
42
|
-
|
|
43
|
-
// this.toggleWrap.addEventListener("click", () => this.toggle());
|
|
44
|
-
|
|
45
|
-
|
|
46
45
|
}
|
|
47
46
|
|
|
48
47
|
set(obj) {
|
|
@@ -68,21 +67,28 @@ class Dropdown extends Animator {
|
|
|
68
67
|
this.contentWrap.style.borderRadius = obj.radius;
|
|
69
68
|
}
|
|
70
69
|
|
|
71
|
-
|
|
70
|
+
if (obj.behaviour) {
|
|
72
71
|
const ev = obj.behaviour;
|
|
73
72
|
|
|
73
|
+
const positionContent = () => {
|
|
74
|
+
const rect = this.toggleWrap.getBoundingClientRect();
|
|
75
|
+
this.contentWrap.style.top = (rect.bottom + 4) + "px";
|
|
76
|
+
this.contentWrap.style.left = rect.left + "px";
|
|
77
|
+
};
|
|
78
|
+
|
|
74
79
|
if (ev === "mouseover" || ev === "mouseenter") {
|
|
75
80
|
let hoverTimeout;
|
|
76
81
|
|
|
77
82
|
const show = () => {
|
|
78
83
|
clearTimeout(hoverTimeout);
|
|
84
|
+
positionContent();
|
|
79
85
|
this.contentWrap.style.display = "block";
|
|
80
86
|
};
|
|
81
87
|
|
|
82
88
|
const hide = () => {
|
|
83
89
|
hoverTimeout = setTimeout(() => {
|
|
84
90
|
this.contentWrap.style.display = "none";
|
|
85
|
-
}, 200);
|
|
91
|
+
}, 200);
|
|
86
92
|
};
|
|
87
93
|
|
|
88
94
|
this.toggleWrap.addEventListener("mouseenter", show);
|
|
@@ -91,18 +97,28 @@ class Dropdown extends Animator {
|
|
|
91
97
|
this.contentWrap.addEventListener("mouseleave", hide);
|
|
92
98
|
|
|
93
99
|
} else if (ev === "click") {
|
|
94
|
-
this.res.addEventListener("click", () =>
|
|
100
|
+
this.res.addEventListener("click", () => {
|
|
101
|
+
positionContent();
|
|
102
|
+
this.toggle();
|
|
103
|
+
});
|
|
95
104
|
|
|
96
105
|
} else {
|
|
97
|
-
// fallback: use the custom event directly on the wrapper
|
|
98
106
|
this.res.addEventListener(ev, () => {
|
|
107
|
+
positionContent();
|
|
99
108
|
this.contentWrap.style.display = "block";
|
|
100
109
|
});
|
|
101
110
|
}
|
|
102
111
|
|
|
103
112
|
} else {
|
|
104
|
-
|
|
105
|
-
|
|
113
|
+
const positionContent = () => {
|
|
114
|
+
const rect = this.toggleWrap.getBoundingClientRect();
|
|
115
|
+
this.contentWrap.style.top = (rect.bottom + 4) + "px";
|
|
116
|
+
this.contentWrap.style.left = rect.left + "px";
|
|
117
|
+
};
|
|
118
|
+
this.res.addEventListener("click", () => {
|
|
119
|
+
positionContent();
|
|
120
|
+
this.toggle();
|
|
121
|
+
});
|
|
106
122
|
}
|
|
107
123
|
|
|
108
124
|
|
|
@@ -114,21 +130,7 @@ class Dropdown extends Animator {
|
|
|
114
130
|
obj.resmar && this.resmar(obj.resmar);
|
|
115
131
|
// this.commonMethods(obj); not yet
|
|
116
132
|
|
|
117
|
-
|
|
118
|
-
// alert("OBJA");
|
|
119
|
-
// alert(obj.breakpoint);
|
|
120
|
-
let media2 = window.matchMedia(`(max-device-width: 415px)`);
|
|
121
|
-
let smallScreen = window.matchMedia(`(max-width: ${obj.breakpoint ?? "600px"})`); // was 600px
|
|
122
|
-
|
|
123
|
-
if (media2.matches || smallScreen.matches) {
|
|
124
|
-
this.contentWrap.style.position = "relative";
|
|
125
|
-
} else {
|
|
126
|
-
this.contentWrap.style.position = "absolute";
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
window.addEventListener("resize", adjust);
|
|
131
|
-
adjust();
|
|
133
|
+
// Position is always fixed (appended to body), no breakpoint adjustment needed
|
|
132
134
|
|
|
133
135
|
|
|
134
136
|
return this;
|
package/layout/dropdown.js
CHANGED
package/layout/empty-element.js
CHANGED
package/layout/flex-card.js
CHANGED
package/layout/flex-grid.js
CHANGED
package/layout/flex-row.js
CHANGED
package/layout/footer.js
CHANGED
package/layout/free.js
CHANGED
package/layout/grid-new.js
CHANGED
package/layout/grid-switcher.js
CHANGED
package/layout/grid.js
CHANGED
package/layout/group.js
CHANGED
package/layout/header.js
CHANGED
package/layout/image-old.js
CHANGED
package/layout/image.js
CHANGED
package/layout/index.js
CHANGED
package/layout/label.js
CHANGED
package/layout/link.js
CHANGED
package/layout/list-OLD.js
CHANGED
package/layout/list.js
CHANGED
package/layout/meta-adder.js
CHANGED
package/layout/modal-2025.js
CHANGED
package/layout/modernwrap.js
CHANGED
package/layout/multiswitcher.js
CHANGED
package/layout/nav-bar.js
CHANGED
package/layout/navBar-OLD.js
CHANGED
package/layout/new-flat-adder.js
CHANGED
package/layout/new-nav-bar.js
CHANGED
package/layout/polygon.js
CHANGED
package/layout/progress.js
CHANGED
package/layout/row.js
CHANGED
package/layout/scroll-video.js
CHANGED
package/layout/side-bar.js
CHANGED
package/layout/side-nav-bar.js
CHANGED
package/layout/simple-bar.js
CHANGED
package/layout/slider-2025.js
CHANGED
package/layout/spacer.js
CHANGED