nodality 1.0.131 → 1.0.133
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 +16 -5
- 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 +60 -16
- 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/base.js
CHANGED
package/layout/box.js
CHANGED
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.133
|
|
3
3
|
* (c) 2026 Filip Vabrousek
|
|
4
4
|
* License: MIT
|
|
5
5
|
*/
|
|
@@ -67,22 +67,52 @@ class Dropdown extends Animator {
|
|
|
67
67
|
this.contentWrap.style.borderRadius = obj.radius;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
// Center the popup under the toggle, clamp to viewport edges.
|
|
71
|
+
const positionContent = () => {
|
|
72
|
+
const tRect = this.toggleWrap.getBoundingClientRect();
|
|
73
|
+
// Ensure width is measurable even while hidden.
|
|
74
|
+
const prevDisplay = this.contentWrap.style.display;
|
|
75
|
+
const prevVisibility = this.contentWrap.style.visibility;
|
|
76
|
+
if (prevDisplay === "none") {
|
|
77
|
+
this.contentWrap.style.visibility = "hidden";
|
|
78
|
+
this.contentWrap.style.display = "block";
|
|
79
|
+
}
|
|
80
|
+
const cRect = this.contentWrap.getBoundingClientRect();
|
|
81
|
+
if (prevDisplay === "none") {
|
|
82
|
+
this.contentWrap.style.display = prevDisplay;
|
|
83
|
+
this.contentWrap.style.visibility = prevVisibility || "";
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const margin = 8;
|
|
87
|
+
const vw = window.innerWidth;
|
|
88
|
+
const toggleCenter = tRect.left + tRect.width / 2;
|
|
89
|
+
let left = toggleCenter - cRect.width / 2;
|
|
90
|
+
if (left < margin) left = margin;
|
|
91
|
+
if (left + cRect.width > vw - margin) left = vw - margin - cRect.width;
|
|
92
|
+
if (left < margin) left = margin; // if content wider than viewport
|
|
93
|
+
|
|
94
|
+
this.contentWrap.style.top = (tRect.bottom + 4) + "px";
|
|
95
|
+
this.contentWrap.style.left = left + "px";
|
|
96
|
+
};
|
|
97
|
+
this._positionContent = positionContent;
|
|
98
|
+
|
|
99
|
+
// Reposition on resize/scroll while open.
|
|
100
|
+
const maybeReposition = () => {
|
|
101
|
+
if (this.contentWrap.style.display !== "none") positionContent();
|
|
102
|
+
};
|
|
103
|
+
window.addEventListener("resize", maybeReposition);
|
|
104
|
+
window.addEventListener("scroll", maybeReposition, true);
|
|
105
|
+
|
|
70
106
|
if (obj.behaviour) {
|
|
71
107
|
const ev = obj.behaviour;
|
|
72
108
|
|
|
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
|
-
|
|
79
109
|
if (ev === "mouseover" || ev === "mouseenter") {
|
|
80
110
|
let hoverTimeout;
|
|
81
111
|
|
|
82
112
|
const show = () => {
|
|
83
113
|
clearTimeout(hoverTimeout);
|
|
84
|
-
positionContent();
|
|
85
114
|
this.contentWrap.style.display = "block";
|
|
115
|
+
positionContent();
|
|
86
116
|
};
|
|
87
117
|
|
|
88
118
|
const hide = () => {
|
|
@@ -96,28 +126,42 @@ class Dropdown extends Animator {
|
|
|
96
126
|
this.contentWrap.addEventListener("mouseenter", show);
|
|
97
127
|
this.contentWrap.addEventListener("mouseleave", hide);
|
|
98
128
|
|
|
129
|
+
// Touch / tap support (mobile has no hover)
|
|
130
|
+
this.toggleWrap.addEventListener("click", (e) => {
|
|
131
|
+
e.stopPropagation();
|
|
132
|
+
const open = this.contentWrap.style.display === "block";
|
|
133
|
+
if (open) {
|
|
134
|
+
this.contentWrap.style.display = "none";
|
|
135
|
+
} else {
|
|
136
|
+
this.contentWrap.style.display = "block";
|
|
137
|
+
positionContent();
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
document.addEventListener("click", (e) => {
|
|
141
|
+
if (this.contentWrap.style.display === "block"
|
|
142
|
+
&& !this.contentWrap.contains(e.target)
|
|
143
|
+
&& !this.toggleWrap.contains(e.target)) {
|
|
144
|
+
this.contentWrap.style.display = "none";
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
|
|
99
148
|
} else if (ev === "click") {
|
|
100
149
|
this.res.addEventListener("click", () => {
|
|
101
|
-
positionContent();
|
|
102
150
|
this.toggle();
|
|
151
|
+
if (this.contentWrap.style.display === "block") positionContent();
|
|
103
152
|
});
|
|
104
153
|
|
|
105
154
|
} else {
|
|
106
155
|
this.res.addEventListener(ev, () => {
|
|
107
|
-
positionContent();
|
|
108
156
|
this.contentWrap.style.display = "block";
|
|
157
|
+
positionContent();
|
|
109
158
|
});
|
|
110
159
|
}
|
|
111
160
|
|
|
112
161
|
} else {
|
|
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
162
|
this.res.addEventListener("click", () => {
|
|
119
|
-
positionContent();
|
|
120
163
|
this.toggle();
|
|
164
|
+
if (this.contentWrap.style.display === "block") positionContent();
|
|
121
165
|
});
|
|
122
166
|
}
|
|
123
167
|
|
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