@ulu/frontend 0.2.0-beta.9 → 0.2.1
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/README.dev.md +36 -13
- package/README.md +3 -1
- package/dist/es/core/events.js +36 -25
- package/dist/es/core/settings.js +33 -22
- package/dist/es/index.js +47 -45
- package/dist/es/ui/dialog.js +57 -46
- package/dist/es/ui/index.d.ts +1 -0
- package/dist/es/ui/modal-builder.js +39 -28
- package/dist/es/ui/overflow-scroller.js +30 -24
- package/dist/es/ui/proxy-click.js +37 -26
- package/dist/es/ui/resizer.js +57 -49
- package/dist/es/ui/slider.d.ts.map +1 -1
- package/dist/es/ui/slider.js +90 -67
- package/dist/es/ui/tab-manager.d.ts +145 -0
- package/dist/es/ui/tab-manager.d.ts.map +1 -0
- package/dist/es/ui/tab-manager.js +155 -0
- package/dist/es/ui/tabs.d.ts +5 -5
- package/dist/es/ui/tabs.d.ts.map +1 -1
- package/dist/es/ui/tabs.js +34 -51
- package/dist/es/ui/theme-toggle.js +80 -69
- package/dist/es/ui/tooltip.js +53 -44
- package/dist/es/utils/floating-ui.js +35 -24
- package/dist/umd/frontend.css +1 -0
- package/dist/umd/ulu-frontend.umd.js +40 -47
- package/lib/js/exports.md +1 -0
- package/lib/js/ui/index.js +4 -0
- package/lib/js/ui/slider.js +3 -3
- package/lib/js/ui/tab-manager.js +324 -0
- package/lib/js/ui/tabs.js +33 -92
- package/lib/scss/_breakpoint.scss +3 -3
- package/lib/scss/_button.scss +3 -3
- package/lib/scss/_color.scss +3 -2
- package/lib/scss/_element.scss +10 -4
- package/lib/scss/_layout.scss +11 -4
- package/lib/scss/_selector.scss +2 -1
- package/lib/scss/_typography.scss +9 -10
- package/lib/scss/_utils.scss +52 -19
- package/lib/scss/base/_elements.scss +1 -1
- package/lib/scss/components/_basic-hero.scss +1 -1
- package/lib/scss/components/_button-verbose.scss +2 -2
- package/lib/scss/components/_callout.scss +3 -4
- package/lib/scss/components/_css-icon.scss +2 -2
- package/lib/scss/components/_data-grid.scss +5 -5
- package/lib/scss/components/_flipcard.scss +3 -2
- package/lib/scss/components/_index.scss +6 -0
- package/lib/scss/components/_panel.scss +1 -1
- package/lib/scss/components/_popover.scss +9 -6
- package/lib/scss/components/_tabs.scss +20 -5
- package/lib/scss/components/_tagged.scss +59 -0
- package/package.json +25 -35
- package/dist/umd/style.css +0 -1
- package/lib/js/ui/dialog.todo +0 -3
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
var I = Object.defineProperty;
|
|
2
|
+
var m = Object.getOwnPropertySymbols;
|
|
3
|
+
var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var p = (s, t, e) => t in s ? I(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, $ = (s, t) => {
|
|
5
|
+
for (var e in t || (t = {}))
|
|
6
|
+
E.call(t, e) && p(s, e, t[e]);
|
|
7
|
+
if (m)
|
|
8
|
+
for (var e of m(t))
|
|
9
|
+
v.call(t, e) && p(s, e, t[e]);
|
|
10
|
+
return s;
|
|
11
|
+
};
|
|
12
|
+
import { ComponentInitializer as R } from "../core/component.js";
|
|
2
13
|
import { wrapSettingString as d } from "../core/settings.js";
|
|
3
|
-
import { getCoreEventName as
|
|
4
|
-
import { Resizer as
|
|
5
|
-
import {
|
|
6
|
-
import { createElementFromHtml as
|
|
7
|
-
const n = new
|
|
14
|
+
import { getCoreEventName as f } from "../core/events.js";
|
|
15
|
+
import { Resizer as w } from "./resizer.js";
|
|
16
|
+
import { baseAttribute as A, closeAttribute as g, defaults as D } from "./dialog.js";
|
|
17
|
+
import { createElementFromHtml as O, getElement as M } from "@ulu/utils/browser/dom.js";
|
|
18
|
+
const n = new R({
|
|
8
19
|
type: "modal-builder",
|
|
9
20
|
baseAttribute: "data-ulu-modal-builder"
|
|
10
|
-
}),
|
|
21
|
+
}), B = {
|
|
11
22
|
title: null,
|
|
12
23
|
titleIcon: null,
|
|
13
24
|
titleClass: "",
|
|
@@ -70,7 +81,7 @@ const n = new C({
|
|
|
70
81
|
${t.titleIcon ? `<span class="${e}__title-icon ${t.titleIcon}" aria-hidden="true"></span>` : ""}
|
|
71
82
|
<span class="${e}__title-text">${t.title}</span>
|
|
72
83
|
</h2>
|
|
73
|
-
<button class="${e}__close ${t.classClose}" aria-label="Close modal" ${
|
|
84
|
+
<button class="${e}__close ${t.classClose}" aria-label="Close modal" ${g} autofocus>
|
|
74
85
|
${t.templateCloseIcon(t)}
|
|
75
86
|
</button>
|
|
76
87
|
</header>
|
|
@@ -84,53 +95,53 @@ const n = new C({
|
|
|
84
95
|
`;
|
|
85
96
|
}
|
|
86
97
|
};
|
|
87
|
-
let c = {
|
|
88
|
-
function
|
|
98
|
+
let c = $({}, B);
|
|
99
|
+
function x(s) {
|
|
89
100
|
c = Object.assign({}, c, s);
|
|
90
101
|
}
|
|
91
|
-
function
|
|
102
|
+
function q() {
|
|
92
103
|
n.init({
|
|
93
104
|
withData: !0,
|
|
94
105
|
coreEvents: ["pageModified"],
|
|
95
106
|
setup({ element: s, data: t }) {
|
|
96
|
-
|
|
107
|
+
H(s, t);
|
|
97
108
|
}
|
|
98
109
|
});
|
|
99
110
|
}
|
|
100
|
-
function
|
|
111
|
+
function H(s, t) {
|
|
101
112
|
const e = Object.assign({}, c, t), { position: i } = e;
|
|
102
113
|
if (e.debug && n.log(e, s), !s.id)
|
|
103
114
|
throw new Error("Missing ID on modal");
|
|
104
|
-
const r = e.template(s.id, e), o =
|
|
105
|
-
if (s.removeAttribute("id"), s.removeAttribute("hidden"), s.removeAttribute(n.getAttribute()), s.parentNode.replaceChild(o, s), u.appendChild(s), o.setAttribute(
|
|
106
|
-
const l =
|
|
115
|
+
const r = e.template(s.id, e), o = O(r.trim()), a = (l) => o.querySelector(n.attributeSelector(l)), u = a("body"), h = a("resizer"), z = S(e);
|
|
116
|
+
if (s.removeAttribute("id"), s.removeAttribute("hidden"), s.removeAttribute(n.getAttribute()), s.parentNode.replaceChild(o, s), u.appendChild(s), o.setAttribute(A, JSON.stringify(z)), e.footerElement) {
|
|
117
|
+
const l = M(e.footerElement);
|
|
107
118
|
l && (l.classList.add(`${e.baseClass}__footer`), u.after(l));
|
|
108
119
|
}
|
|
109
120
|
let b;
|
|
110
|
-
const
|
|
121
|
+
const C = ["left", "right", "center"], _ = i === "center", y = i === "right";
|
|
111
122
|
if (e.allowResize)
|
|
112
|
-
if (
|
|
113
|
-
const l =
|
|
114
|
-
b = new
|
|
123
|
+
if (C.includes(i)) {
|
|
124
|
+
const l = _ ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: y ? "left" : "right" };
|
|
125
|
+
b = new w(o, h, l);
|
|
115
126
|
} else
|
|
116
127
|
console.warn(`${i} is not supported for resizing`);
|
|
117
128
|
if (e.print) {
|
|
118
129
|
let l;
|
|
119
|
-
document.addEventListener(
|
|
130
|
+
document.addEventListener(f("beforePrint"), () => {
|
|
120
131
|
l = s.cloneNode(!0), o.after(l);
|
|
121
|
-
}), document.addEventListener(
|
|
132
|
+
}), document.addEventListener(f("afterPrint"), () => {
|
|
122
133
|
l.remove();
|
|
123
134
|
});
|
|
124
135
|
}
|
|
125
136
|
return { modal: o, resizer: b };
|
|
126
137
|
}
|
|
127
|
-
function
|
|
128
|
-
return Object.keys(
|
|
138
|
+
function S(s) {
|
|
139
|
+
return Object.keys(D).reduce((t, e) => (e in s && (t[e] = s[e]), t), {});
|
|
129
140
|
}
|
|
130
141
|
export {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
142
|
+
H as buildModal,
|
|
143
|
+
B as defaults,
|
|
144
|
+
q as init,
|
|
134
145
|
n as initializer,
|
|
135
|
-
|
|
146
|
+
x as setDefaults
|
|
136
147
|
};
|
|
@@ -1,31 +1,37 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
var x = Object.defineProperty;
|
|
2
|
+
var f = Object.getOwnPropertySymbols;
|
|
3
|
+
var E = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var u = (i, s, t) => s in i ? x(i, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[s] = t, p = (i, s) => {
|
|
5
|
+
for (var t in s || (s = {}))
|
|
6
|
+
E.call(s, t) && u(i, t, s[t]);
|
|
7
|
+
if (f)
|
|
8
|
+
for (var t of f(s))
|
|
9
|
+
L.call(s, t) && u(i, t, s[t]);
|
|
10
|
+
return i;
|
|
11
|
+
};
|
|
12
|
+
var m = (i, s, t) => u(i, typeof s != "symbol" ? s + "" : s, t);
|
|
13
|
+
import { wrapSettingString as v } from "../core/settings.js";
|
|
14
|
+
import { hasRequiredProps as g } from "@ulu/utils/object.js";
|
|
15
|
+
import { logError as C } from "../utils/class-logger.js";
|
|
16
|
+
const S = [
|
|
8
17
|
"track",
|
|
9
18
|
"controls"
|
|
10
19
|
], c = class c {
|
|
11
20
|
constructor(s, t) {
|
|
12
|
-
this.options = Object.assign({}, c.defaults, t),
|
|
13
|
-
...s,
|
|
14
|
-
...this.createControls(s.controls)
|
|
15
|
-
}, this.nextEnabled = !0, this.previousEnabled = !0, this.scrollHandler = (e) => this.onScroll(e), this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: !0 }), this.checkOverflow(), this.onScroll();
|
|
21
|
+
this.options = Object.assign({}, c.defaults, t), g(S) || C(this, "Missing a required Element"), this.elements = p(p({}, s), this.createControls(s.controls)), this.nextEnabled = !0, this.previousEnabled = !0, this.scrollHandler = (e) => this.onScroll(e), this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: !0 }), this.checkOverflow(), this.onScroll();
|
|
16
22
|
}
|
|
17
23
|
checkOverflow() {
|
|
18
24
|
const { track: s } = this.elements;
|
|
19
25
|
this.hasOverflow = s.scrollWidth > s.clientWidth;
|
|
20
26
|
}
|
|
21
27
|
createControls(s) {
|
|
22
|
-
const t = document.createElement("ul"), e = document.createElement("li"), o = document.createElement("li"), n = this.createControlButton("previous"),
|
|
23
|
-
return o.classList.add(
|
|
28
|
+
const t = document.createElement("ul"), e = document.createElement("li"), o = document.createElement("li"), n = this.createControlButton("previous"), l = this.createControlButton("next"), r = this.getClass("controls-item");
|
|
29
|
+
return o.classList.add(r), o.classList.add(r + "--next"), e.classList.add(r), e.classList.add(r + "--previous"), t.classList.add(this.getClass("controls")), e.appendChild(n), o.appendChild(l), t.appendChild(e), t.appendChild(o), n.addEventListener("click", this.previous.bind(this)), l.addEventListener("click", this.next.bind(this)), s.appendChild(t), {
|
|
24
30
|
controls: t,
|
|
25
31
|
previousItem: e,
|
|
26
32
|
nextItem: o,
|
|
27
33
|
previous: n,
|
|
28
|
-
next:
|
|
34
|
+
next: l
|
|
29
35
|
};
|
|
30
36
|
}
|
|
31
37
|
createControlButton(s) {
|
|
@@ -43,16 +49,16 @@ const x = [
|
|
|
43
49
|
this.hasOverflow && this.onScrollHorizontal();
|
|
44
50
|
}
|
|
45
51
|
onScrollHorizontal() {
|
|
46
|
-
const { nextEnabled: s, previousEnabled: t } = this, { track: e } = this.elements, { offsetStart: o, offsetEnd: n } = this.options, { scrollWidth:
|
|
47
|
-
|
|
52
|
+
const { nextEnabled: s, previousEnabled: t } = this, { track: e } = this.elements, { offsetStart: o, offsetEnd: n } = this.options, { scrollWidth: l, clientWidth: r, scrollLeft: d } = e, a = d <= o, h = l - d - n <= r;
|
|
53
|
+
a && t ? this.setControlState("previous", !1) : !a && !t && this.setControlState("previous", !0), h && s ? this.setControlState("next", !1) : !h && !s && this.setControlState("next", !0);
|
|
48
54
|
}
|
|
49
55
|
setControlState(s, t) {
|
|
50
|
-
const e = s === "next", { next: o, nextItem: n, previous:
|
|
51
|
-
d.classList[h](this.getClass("controls-item--disabled")),
|
|
56
|
+
const e = s === "next", { next: o, nextItem: n, previous: l, previousItem: r } = this.elements, d = e ? n : r, a = e ? o : l, h = t ? "remove" : "add";
|
|
57
|
+
d.classList[h](this.getClass("controls-item--disabled")), a.classList[t ? "remove" : "add"](this.getClass("control--disabled")), t ? a.removeAttribute("disabled") : a.setAttribute("disabled", ""), this[e ? "nextEnabled" : "previousEnabled"] = t;
|
|
52
58
|
}
|
|
53
59
|
resolveAmount(s) {
|
|
54
60
|
const t = s === "next", { amount: e } = this.options, { scrollLeft: o, offsetWidth: n } = this.elements.track;
|
|
55
|
-
return e === "auto" ? t ? o + n : o - n : typeof e == "function" ? e(this, s) : typeof e == "number" ? t ? o + e : o - e : (
|
|
61
|
+
return e === "auto" ? t ? o + n : o - n : typeof e == "function" ? e(this, s) : typeof e == "number" ? t ? o + e : o - e : (C("Unable to resolve amount for scroll"), 500);
|
|
56
62
|
}
|
|
57
63
|
next() {
|
|
58
64
|
this.elements.track.scrollTo({
|
|
@@ -73,7 +79,7 @@ const x = [
|
|
|
73
79
|
return `${t}__${s}`;
|
|
74
80
|
}
|
|
75
81
|
};
|
|
76
|
-
|
|
82
|
+
m(c, "instances", []), m(c, "defaults", {
|
|
77
83
|
namespace: "OverflowScroller",
|
|
78
84
|
events: {},
|
|
79
85
|
horizontal: !0,
|
|
@@ -81,10 +87,10 @@ u(c, "instances", []), u(c, "defaults", {
|
|
|
81
87
|
offsetEnd: 100,
|
|
82
88
|
amount: "auto",
|
|
83
89
|
buttonClasses: ["button", "button--icon"],
|
|
84
|
-
iconClassPrevious:
|
|
85
|
-
iconClassNext:
|
|
90
|
+
iconClassPrevious: v("iconClassPrevious"),
|
|
91
|
+
iconClassNext: v("iconClassNext")
|
|
86
92
|
});
|
|
87
|
-
let
|
|
93
|
+
let b = c;
|
|
88
94
|
export {
|
|
89
|
-
|
|
95
|
+
b as OverflowScroller
|
|
90
96
|
};
|
|
@@ -1,44 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
var v = Object.defineProperty;
|
|
2
|
+
var l = Object.getOwnPropertySymbols;
|
|
3
|
+
var P = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var u = (t, o, e) => o in t ? v(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e, d = (t, o) => {
|
|
5
|
+
for (var e in o || (o = {}))
|
|
6
|
+
P.call(o, e) && u(t, e, o[e]);
|
|
7
|
+
if (l)
|
|
8
|
+
for (var e of l(o))
|
|
9
|
+
b.call(o, e) && u(t, e, o[e]);
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { ComponentInitializer as m } from "../core/component.js";
|
|
13
|
+
const x = new m({
|
|
3
14
|
type: "proxy-click",
|
|
4
15
|
baseAttribute: "data-ulu-proxy-click"
|
|
5
|
-
}),
|
|
16
|
+
}), y = {
|
|
6
17
|
selector: "[data-ulu-proxy-click-source]",
|
|
7
18
|
selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
|
|
8
19
|
selectorPrevent: "",
|
|
9
20
|
mousedownDurationPrevent: 250
|
|
10
21
|
};
|
|
11
|
-
let c = {
|
|
12
|
-
function
|
|
13
|
-
c = Object.assign({}, c,
|
|
22
|
+
let c = d({}, y);
|
|
23
|
+
function E(t) {
|
|
24
|
+
c = Object.assign({}, c, t);
|
|
14
25
|
}
|
|
15
|
-
function
|
|
16
|
-
|
|
26
|
+
function $() {
|
|
27
|
+
x.init({
|
|
17
28
|
withData: !0,
|
|
18
29
|
coreEvents: ["pageModified"],
|
|
19
|
-
setup({ element:
|
|
20
|
-
|
|
30
|
+
setup({ element: t, data: o, initialize: e }) {
|
|
31
|
+
h(t, o), e();
|
|
21
32
|
}
|
|
22
33
|
});
|
|
23
34
|
}
|
|
24
|
-
function
|
|
25
|
-
const
|
|
26
|
-
s ?
|
|
35
|
+
function h(t, o) {
|
|
36
|
+
const e = Object.assign({}, c, o), s = t.querySelector(e.selector);
|
|
37
|
+
s ? k(t, s, e) : console.error("Unable to locate proxy click source", e.selector);
|
|
27
38
|
}
|
|
28
|
-
function
|
|
29
|
-
const { selectorPreventBase: s, selectorPrevent: i } =
|
|
39
|
+
function k(t, o, e) {
|
|
40
|
+
const { selectorPreventBase: s, selectorPrevent: i } = e, p = `${s}${i ? `, ${i}` : ""}`;
|
|
30
41
|
let a, n;
|
|
31
|
-
|
|
32
|
-
n = !1, r.matches(
|
|
33
|
-
}),
|
|
34
|
-
n && r - a <
|
|
35
|
-
}),
|
|
42
|
+
t.addEventListener("mousedown", ({ target: r, timeStamp: f }) => {
|
|
43
|
+
n = !1, r.matches(p) || (n = !0, a = f);
|
|
44
|
+
}), t.addEventListener("mouseup", ({ timeStamp: r }) => {
|
|
45
|
+
n && r - a < e.mousedownDurationPrevent && o.click();
|
|
46
|
+
}), t.style.cursor = "pointer";
|
|
36
47
|
}
|
|
37
48
|
export {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
k as attachHandlers,
|
|
50
|
+
y as defaults,
|
|
51
|
+
$ as init,
|
|
52
|
+
x as initializer,
|
|
53
|
+
E as setDefaults,
|
|
54
|
+
h as setupProxy
|
|
44
55
|
};
|
package/dist/es/ui/resizer.js
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var V = Object.defineProperty;
|
|
2
|
+
var k = Object.getOwnPropertySymbols;
|
|
3
|
+
var C = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
|
|
4
|
+
var H = (n) => {
|
|
3
5
|
throw TypeError(n);
|
|
4
6
|
};
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
var L = (n, e, t) => e in n ? V(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, S = (n, e) => {
|
|
8
|
+
for (var t in e || (e = {}))
|
|
9
|
+
C.call(e, t) && L(n, t, e[t]);
|
|
10
|
+
if (k)
|
|
11
|
+
for (var t of k(e))
|
|
12
|
+
W.call(e, t) && L(n, t, e[t]);
|
|
13
|
+
return n;
|
|
14
|
+
};
|
|
15
|
+
var T = (n, e, t) => L(n, typeof e != "symbol" ? e + "" : e, t), x = (n, e, t) => e.has(n) || H("Cannot " + t);
|
|
16
|
+
var i = (n, e, t) => (x(n, e, "read from private field"), t ? t.call(n) : e.get(n)), u = (n, e, t) => e.has(n) ? H("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), a = (n, e, t, r) => (x(n, e, "write to private field"), r ? r.call(n, t) : e.set(n, t), t), p = (n, e, t) => (x(n, e, "access private method"), t);
|
|
17
|
+
import { createUluEvent as $ } from "../core/events.js";
|
|
9
18
|
import { logError as I, log as b } from "../utils/class-logger.js";
|
|
10
|
-
var z, v, f, d, y, w, g, E, R, l, X,
|
|
19
|
+
var z, v, f, d, y, w, g, E, R, l, X, A, D, K;
|
|
11
20
|
const Y = class Y {
|
|
12
21
|
/**
|
|
13
22
|
* @param {Node} container Container to be resized
|
|
@@ -25,7 +34,7 @@ const Y = class Y {
|
|
|
25
34
|
* @param {boolean} [config.enablePointerResizing=true] If true, pointer events will enable resizing.
|
|
26
35
|
* @param {boolean} [config.enableKeyboardResizing=true] If true, keyboard events will enable resizing.
|
|
27
36
|
*/
|
|
28
|
-
constructor(
|
|
37
|
+
constructor(e, t, r) {
|
|
29
38
|
u(this, l);
|
|
30
39
|
// Declare private fields without initial assignments
|
|
31
40
|
u(this, z);
|
|
@@ -37,12 +46,12 @@ const Y = class Y {
|
|
|
37
46
|
u(this, g);
|
|
38
47
|
u(this, E);
|
|
39
48
|
u(this, R);
|
|
40
|
-
if (!
|
|
49
|
+
if (!t || !e) {
|
|
41
50
|
I(this, "Missing required elements: control, container");
|
|
42
51
|
return;
|
|
43
52
|
}
|
|
44
53
|
const s = Object.assign({}, Y.defaults, r);
|
|
45
|
-
this.options = s, this.container =
|
|
54
|
+
this.options = s, this.container = e, this.control = t, this.debug = s.debug;
|
|
46
55
|
const o = ["left", "right"], c = ["top", "bottom"], { fromX: h, fromY: m } = s;
|
|
47
56
|
if (!o.includes(h) && h !== null) {
|
|
48
57
|
I(this, `Invalid fromX: ${h} (left|right|null)`);
|
|
@@ -56,55 +65,55 @@ const Y = class Y {
|
|
|
56
65
|
I(this, "Invalid fromX/fromY, failed to setup resizer (at least one of fromX or fromY must be set)");
|
|
57
66
|
return;
|
|
58
67
|
}
|
|
59
|
-
this.resizeHorizontal = s.fromX !== null, this.resizeVertical = s.fromY !== null, s.manageEvents && (a(this, z, this.onPointerdown.bind(this)), a(this, v, this.onKeydown.bind(this)), s.enablePointerResizing &&
|
|
68
|
+
this.resizeHorizontal = s.fromX !== null, this.resizeVertical = s.fromY !== null, s.manageEvents && (a(this, z, this.onPointerdown.bind(this)), a(this, v, this.onKeydown.bind(this)), s.enablePointerResizing && t.addEventListener("pointerdown", i(this, z)), s.enableKeyboardResizing && t.addEventListener("keydown", i(this, v))), p(this, l, X).call(this), s.manageAriaLabel && t.setAttribute("aria-label", this.getAriaLabel());
|
|
60
69
|
}
|
|
61
70
|
/**
|
|
62
71
|
* Cleans up event listeners and internal state to prevent memory leaks.
|
|
63
72
|
*/
|
|
64
73
|
destroy() {
|
|
65
|
-
const { control:
|
|
66
|
-
|
|
74
|
+
const { control: e, options: t } = this;
|
|
75
|
+
t.manageEvents && (t.enablePointerResizing && e.removeEventListener("pointerdown", i(this, z)), t.enableKeyboardResizing && e.removeEventListener("keydown", i(this, v))), i(this, f) && clearTimeout(i(this, f)), p(this, l, X).call(this), t.manageAriaLabel && e.removeAttribute("aria-label"), b(this, "Resizer destroyed.");
|
|
67
76
|
}
|
|
68
77
|
/**
|
|
69
78
|
* Public handler for pointerdown events. Call this method from your own event listeners
|
|
70
79
|
* if `manageEvents` is false. Its logic will only execute if `enablePointerResizing` is true.
|
|
71
80
|
* @param {PointerEvent} e The pointerdown event.
|
|
72
81
|
*/
|
|
73
|
-
onPointerdown(
|
|
82
|
+
onPointerdown(e) {
|
|
74
83
|
if (!this.options.enablePointerResizing) {
|
|
75
84
|
b(this, "Pointer resizing disabled. Ignoring pointerdown event.");
|
|
76
85
|
return;
|
|
77
86
|
}
|
|
78
|
-
|
|
79
|
-
const
|
|
80
|
-
a(this, E,
|
|
87
|
+
e.preventDefault();
|
|
88
|
+
const t = document.documentElement;
|
|
89
|
+
a(this, E, e.clientX), a(this, R, e.clientY), p(this, l, A).call(this, {
|
|
81
90
|
inputType: "pointer",
|
|
82
|
-
startX:
|
|
83
|
-
startY:
|
|
84
|
-
pointerId:
|
|
85
|
-
}), this.control.setPointerCapture(
|
|
91
|
+
startX: e.clientX,
|
|
92
|
+
startY: e.clientY,
|
|
93
|
+
pointerId: e.pointerId
|
|
94
|
+
}), this.control.setPointerCapture(e.pointerId);
|
|
86
95
|
const r = (o) => {
|
|
87
96
|
const c = o.clientX - i(this, E), h = o.clientY - i(this, R);
|
|
88
|
-
p(this, l,
|
|
97
|
+
p(this, l, K).call(this, c, h, o);
|
|
89
98
|
}, s = (o) => {
|
|
90
|
-
|
|
99
|
+
t.removeEventListener("pointermove", r, !1), t.removeEventListener("pointerup", s, { capture: !0, once: !0 }), this.control.hasPointerCapture(o.pointerId) && this.control.releasePointerCapture(o.pointerId), p(this, l, D).call(this);
|
|
91
100
|
};
|
|
92
|
-
|
|
101
|
+
t.addEventListener("pointermove", r, !1), t.addEventListener("pointerup", s, { capture: !0, once: !0 });
|
|
93
102
|
}
|
|
94
103
|
/**
|
|
95
104
|
* Public handler for keydown events. Call this method from your own event listeners
|
|
96
105
|
* if `manageEvents` is false. Its logic will only execute if `enableKeyboardResizing` is true.
|
|
97
106
|
* @param {KeyboardEvent} e The keydown event.
|
|
98
107
|
*/
|
|
99
|
-
onKeydown(
|
|
108
|
+
onKeydown(e) {
|
|
100
109
|
if (!this.options.enableKeyboardResizing) {
|
|
101
110
|
b(this, "Keyboard resizing disabled. Ignoring keydown event.");
|
|
102
111
|
return;
|
|
103
112
|
}
|
|
104
|
-
const { key:
|
|
113
|
+
const { key: t } = e, { keyboardStep: r, keyboardDebounceTime: s } = this.options;
|
|
105
114
|
let o = 0, c = 0, h = !1;
|
|
106
|
-
this.resizeHorizontal && (
|
|
107
|
-
p(this, l,
|
|
115
|
+
this.resizeHorizontal && (t === "ArrowLeft" ? (o = -r, h = !0) : t === "ArrowRight" && (o = r, h = !0)), this.resizeVertical && (t === "ArrowUp" ? (c = -r, h = !0) : t === "ArrowDown" && (c = r, h = !0)), h && (e.preventDefault(), e.stopPropagation(), (!i(this, g) || i(this, f) === null) && p(this, l, A).call(this, { inputType: "keyboard", keyboardKey: t }), a(this, y, i(this, y) + o), a(this, w, i(this, w) + c), p(this, l, K).call(this, i(this, y), i(this, w), e), i(this, f) && clearTimeout(i(this, f)), a(this, f, setTimeout(() => {
|
|
116
|
+
p(this, l, D).call(this), a(this, f, null);
|
|
108
117
|
}, s)));
|
|
109
118
|
}
|
|
110
119
|
/**
|
|
@@ -113,7 +122,7 @@ const Y = class Y {
|
|
|
113
122
|
* @returns {string} The suggested aria-label for the control.
|
|
114
123
|
*/
|
|
115
124
|
getAriaLabel() {
|
|
116
|
-
const { fromY:
|
|
125
|
+
const { fromY: e, fromX: t } = this.options, r = [e, t].filter((s) => s);
|
|
117
126
|
return r.length === 0 ? "Resize control" : `Resize from ${r.join(" ")} edge`;
|
|
118
127
|
}
|
|
119
128
|
/**
|
|
@@ -121,8 +130,8 @@ const Y = class Y {
|
|
|
121
130
|
* @param {string} type The event type (e.g., "resizer:start", "resizer:update", "resizer:end").
|
|
122
131
|
* @param {Object} [data={}] Optional data to attach to the event's detail property.
|
|
123
132
|
*/
|
|
124
|
-
dispatchEvent(
|
|
125
|
-
this.container.dispatchEvent(
|
|
133
|
+
dispatchEvent(e, t = {}) {
|
|
134
|
+
this.container.dispatchEvent($(e, t));
|
|
126
135
|
}
|
|
127
136
|
};
|
|
128
137
|
z = new WeakMap(), v = new WeakMap(), f = new WeakMap(), d = new WeakMap(), y = new WeakMap(), w = new WeakMap(), g = new WeakMap(), E = new WeakMap(), R = new WeakMap(), l = new WeakSet(), /**
|
|
@@ -138,24 +147,23 @@ X = function() {
|
|
|
138
147
|
* @param {Object} eventDetails Additional details about the initiating event.
|
|
139
148
|
* @private
|
|
140
149
|
*/
|
|
141
|
-
|
|
142
|
-
const { container:
|
|
150
|
+
A = function(e) {
|
|
151
|
+
const { container: t, options: r } = this;
|
|
143
152
|
if (i(this, g)) {
|
|
144
|
-
r.overrideMaxDimensions && (this.resizeHorizontal && (
|
|
153
|
+
r.overrideMaxDimensions && (this.resizeHorizontal && (t.style.maxWidth = "none"), this.resizeVertical && (t.style.maxHeight = "none"));
|
|
145
154
|
return;
|
|
146
155
|
}
|
|
147
|
-
const o = document.defaultView.getComputedStyle(
|
|
148
|
-
i(this, d).width = parseInt(o.width, 10), i(this, d).height = parseInt(o.height, 10), r.overrideMaxDimensions && (this.resizeHorizontal && (
|
|
156
|
+
const o = document.defaultView.getComputedStyle(t);
|
|
157
|
+
i(this, d).width = parseInt(o.width, 10), i(this, d).height = parseInt(o.height, 10), r.overrideMaxDimensions && (this.resizeHorizontal && (t.style.maxWidth = "none"), this.resizeVertical && (t.style.maxHeight = "none")), a(this, g, !0), this.dispatchEvent("resizer:start", e), b(this, "Resize started.", S({
|
|
149
158
|
initialWidth: i(this, d).width,
|
|
150
|
-
initialHeight: i(this, d).height
|
|
151
|
-
|
|
152
|
-
});
|
|
159
|
+
initialHeight: i(this, d).height
|
|
160
|
+
}, e));
|
|
153
161
|
}, /**
|
|
154
162
|
* Ends a resize operation.
|
|
155
163
|
* Dispatches 'resizer:end' event and resets internal state.
|
|
156
164
|
* @private
|
|
157
165
|
*/
|
|
158
|
-
|
|
166
|
+
D = function() {
|
|
159
167
|
i(this, g) && (this.dispatchEvent("resizer:end"), p(this, l, X).call(this), b(this, "Resize ended."));
|
|
160
168
|
}, /**
|
|
161
169
|
* Core logic for calculating and applying the new size of the container.
|
|
@@ -166,19 +174,19 @@ A = function() {
|
|
|
166
174
|
* @param {Event} originalEvent The original DOM event (PointerEvent or KeyboardEvent) that triggered the update.
|
|
167
175
|
* @private
|
|
168
176
|
*/
|
|
169
|
-
|
|
177
|
+
K = function(e, t, r) {
|
|
170
178
|
let s = i(this, d).width, o = i(this, d).height;
|
|
171
179
|
const { fromX: c, fromY: h, multiplier: m } = this.options;
|
|
172
|
-
this.resizeHorizontal && (c === "right" ? s = i(this, d).width +
|
|
173
|
-
const
|
|
180
|
+
this.resizeHorizontal && (c === "right" ? s = i(this, d).width + e * m : c === "left" && (s = i(this, d).width - e * m), this.container.style.width = `${Math.max(0, s)}px`), this.resizeVertical && (h === "bottom" ? o = i(this, d).height + t * m : h === "top" && (o = i(this, d).height - t * m), this.container.style.height = `${Math.max(0, o)}px`);
|
|
181
|
+
const P = {
|
|
174
182
|
newWidth: s,
|
|
175
183
|
newHeight: o,
|
|
176
|
-
totalDeltaX:
|
|
177
|
-
totalDeltaY:
|
|
184
|
+
totalDeltaX: e,
|
|
185
|
+
totalDeltaY: t,
|
|
178
186
|
event: r
|
|
179
187
|
};
|
|
180
|
-
this.dispatchEvent("resizer:update",
|
|
181
|
-
},
|
|
188
|
+
this.dispatchEvent("resizer:update", P), b(this, "Resizing update.", P);
|
|
189
|
+
}, T(Y, "defaults", {
|
|
182
190
|
debug: !1,
|
|
183
191
|
/**
|
|
184
192
|
* Amount to increase size by (ie. pointer movement * multiplier)
|
|
@@ -236,7 +244,7 @@ D = function(t, e, r) {
|
|
|
236
244
|
*/
|
|
237
245
|
enableKeyboardResizing: !0
|
|
238
246
|
});
|
|
239
|
-
let
|
|
247
|
+
let M = Y;
|
|
240
248
|
export {
|
|
241
|
-
|
|
249
|
+
M as Resizer
|
|
242
250
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/slider.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/slider.js"],"names":[],"mappings":"AAgEA;;GAEG;AACH,6BASC;AAED;;;;GAIG;AACH,uCAHW,IAAI,WACJ,MAAM,QAiBhB;AA1DD;;GAEG;AACH,+CAGG;AAsDH;;GAEG;AACH;IACE,wBAAsB;IACtB,mCAAkC;IAClC,6BAA4B;IAE5B,kCAYC;IACD;;OAEG;IACH;;;;;;;;;;;;;;;;MAgBC;IACD,wCAoCC;IAjCC,aAAsB;IACtB;;;;aAAiB;IACjB,WAAiB;IACjB,mBAAyB;IACzB,6CAAyB;IACzB,kDAA8B;IAC9B,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;wBACgF;IAMlF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,2CAqChB;IACD;;OAEG;IACH,kDASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,kDAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;sBAOC;IACD,qDA2CC;IACD,cAmBC;IACD,mBAsBC;IACD,0BAMC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,kCAEC;IACD,iCAIC;CACF;qCA1iBoC,sBAAsB"}
|