@ulu/frontend 0.2.0-beta.1 → 0.2.0-beta.11
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/README.md +12 -0
- package/dist/{types/js → es}/core/component.d.ts +3 -9
- package/dist/es/core/component.d.ts.map +1 -0
- package/dist/es/core/component.js +134 -0
- package/dist/{types/js → es}/core/events.d.ts +1 -1
- package/dist/es/core/events.d.ts.map +1 -0
- package/dist/es/core/events.js +45 -0
- package/dist/es/core/index.d.ts +4 -0
- package/dist/{types/js/ui → es/core}/index.d.ts.map +1 -1
- package/dist/{types/js → es}/core/settings.d.ts +1 -1
- package/dist/es/core/settings.d.ts.map +1 -0
- package/dist/es/core/settings.js +44 -0
- package/dist/es/index.d.ts +4 -0
- package/dist/{types/js → es}/index.d.ts.map +1 -1
- package/dist/es/index.js +125 -0
- package/dist/{types/js → es}/ui/breakpoints.d.ts +5 -3
- package/dist/es/ui/breakpoints.d.ts.map +1 -0
- package/dist/es/ui/breakpoints.js +194 -0
- package/dist/{types/js → es}/ui/collapsible.d.ts +28 -7
- package/dist/es/ui/collapsible.d.ts.map +1 -0
- package/dist/es/ui/collapsible.js +140 -0
- package/dist/{types/js → es}/ui/details-group.d.ts +1 -1
- package/dist/es/ui/details-group.d.ts.map +1 -0
- package/dist/es/ui/details-group.js +49 -0
- package/dist/{types/js → es}/ui/dialog.d.ts +3 -3
- package/dist/es/ui/dialog.d.ts.map +1 -0
- package/dist/es/ui/dialog.js +112 -0
- package/dist/{types/js → es}/ui/flipcard.d.ts +1 -1
- package/dist/es/ui/flipcard.d.ts.map +1 -0
- package/dist/es/ui/flipcard.js +97 -0
- package/dist/{types/js → es}/ui/grid.d.ts +2 -2
- package/dist/es/ui/grid.d.ts.map +1 -0
- package/dist/es/ui/grid.js +18 -0
- package/dist/{types/js → es}/ui/index.d.ts +22 -21
- package/dist/{types/js/core → es/ui}/index.d.ts.map +1 -1
- package/dist/{types/js → es}/ui/modal-builder.d.ts +21 -16
- package/dist/es/ui/modal-builder.d.ts.map +1 -0
- package/dist/es/ui/modal-builder.js +136 -0
- package/dist/es/ui/overflow-scroller-pager.d.ts.map +1 -0
- package/dist/es/ui/overflow-scroller-pager.js +28 -0
- package/dist/{types/js → es}/ui/overflow-scroller.d.ts +3 -3
- package/dist/es/ui/overflow-scroller.d.ts.map +1 -0
- package/dist/es/ui/overflow-scroller.js +90 -0
- package/dist/es/ui/page.d.ts.map +1 -0
- package/dist/es/ui/page.js +7 -0
- package/dist/{types/js → es}/ui/popover.d.ts +3 -3
- package/dist/es/ui/popover.d.ts.map +1 -0
- package/dist/es/ui/popover.js +77 -0
- package/dist/es/ui/print-details.d.ts.map +1 -0
- package/dist/es/ui/print-details.js +22 -0
- package/dist/es/ui/print.d.ts.map +1 -0
- package/dist/es/ui/print.js +34 -0
- package/dist/{types/js → es}/ui/programmatic-modal.d.ts +1 -1
- package/dist/es/ui/programmatic-modal.d.ts.map +1 -0
- package/dist/es/ui/programmatic-modal.js +55 -0
- package/dist/{types/js → es}/ui/proxy-click.d.ts +4 -4
- package/dist/es/ui/proxy-click.d.ts.map +1 -0
- package/dist/es/ui/proxy-click.js +44 -0
- package/dist/{types/js → es}/ui/resizer.d.ts +16 -16
- package/dist/es/ui/resizer.d.ts.map +1 -0
- package/dist/es/ui/resizer.js +242 -0
- package/dist/{types/js → es}/ui/scroll-slider.d.ts +1 -1
- package/dist/es/ui/scroll-slider.d.ts.map +1 -0
- package/dist/es/ui/scroll-slider.js +29 -0
- package/dist/{types/js → es}/ui/scrollpoint.d.ts +79 -11
- package/dist/es/ui/scrollpoint.d.ts.map +1 -0
- package/dist/es/ui/scrollpoint.js +178 -0
- package/dist/{types/js → es}/ui/slider.d.ts +11 -8
- package/dist/es/ui/slider.d.ts.map +1 -0
- package/dist/es/ui/slider.js +290 -0
- package/dist/{types/js → es}/ui/tabs.d.ts +2 -2
- package/dist/es/ui/tabs.d.ts.map +1 -0
- package/dist/es/ui/tabs.js +64 -0
- package/dist/{types/js → es}/ui/theme-toggle.d.ts +4 -4
- package/dist/es/ui/theme-toggle.d.ts.map +1 -0
- package/dist/es/ui/theme-toggle.js +190 -0
- package/dist/{types/js → es}/ui/tooltip.d.ts +5 -5
- package/dist/es/ui/tooltip.d.ts.map +1 -0
- package/dist/es/ui/tooltip.js +184 -0
- package/dist/{types/js → es}/utils/class-logger.d.ts +4 -4
- package/dist/es/utils/class-logger.d.ts.map +1 -0
- package/dist/es/utils/class-logger.js +37 -0
- package/dist/es/utils/css.d.ts.map +1 -0
- package/dist/es/utils/css.js +6 -0
- package/dist/{types/js → es}/utils/dom.d.ts +1 -1
- package/dist/es/utils/dom.d.ts.map +1 -0
- package/dist/es/utils/dom.js +29 -0
- package/dist/es/utils/file-save.d.ts.map +1 -0
- package/dist/es/utils/file-save.js +46 -0
- package/dist/{types/js → es}/utils/floating-ui.d.ts +1 -1
- package/dist/es/utils/floating-ui.d.ts.map +1 -0
- package/dist/es/utils/floating-ui.js +46 -0
- package/dist/es/utils/font-awesome.d.ts.map +1 -0
- package/dist/es/utils/font-awesome.js +13 -0
- package/dist/es/utils/id.d.ts.map +1 -0
- package/dist/es/utils/id.js +11 -0
- package/dist/{types/js → es}/utils/index.d.ts +7 -7
- package/dist/{types/js → es}/utils/index.d.ts.map +1 -1
- package/dist/es/utils/pause-youtube-video.d.ts.map +1 -0
- package/dist/es/utils/pause-youtube-video.js +27 -0
- package/dist/umd/style.css +1 -0
- package/dist/umd/ulu-frontend.umd.js +70 -0
- package/lib/js/ui/breakpoints.js +13 -5
- package/lib/js/ui/index.js +4 -0
- package/lib/js/ui/modal-builder.js +5 -3
- package/lib/js/ui/slider.js +22 -13
- package/lib/scss/_element.scss +10 -4
- package/lib/scss/components/_accordion.scss +1 -7
- package/lib/scss/components/_button.scss +11 -2
- package/lib/scss/components/_card.scss +5 -6
- package/lib/scss/components/_form-theme.scss +3 -3
- package/lib/scss/components/_menu-stack.scss +1 -0
- package/lib/scss/components/_modal.scss +13 -13
- package/lib/scss/helpers/_utilities.scss +0 -3
- package/package.json +54 -45
- package/dist/style.css +0 -1
- package/dist/types/js/core/component.d.ts.map +0 -1
- package/dist/types/js/core/events.d.ts.map +0 -1
- package/dist/types/js/core/index.d.ts +0 -4
- package/dist/types/js/core/settings.d.ts.map +0 -1
- package/dist/types/js/index.d.ts +0 -4
- package/dist/types/js/ui/breakpoints.d.ts.map +0 -1
- package/dist/types/js/ui/collapsible.d.ts.map +0 -1
- package/dist/types/js/ui/details-group.d.ts.map +0 -1
- package/dist/types/js/ui/dialog.d.ts.map +0 -1
- package/dist/types/js/ui/flipcard.d.ts.map +0 -1
- package/dist/types/js/ui/grid.d.ts.map +0 -1
- package/dist/types/js/ui/modal-builder.d.ts.map +0 -1
- package/dist/types/js/ui/overflow-scroller-pager.d.ts.map +0 -1
- package/dist/types/js/ui/overflow-scroller.d.ts.map +0 -1
- package/dist/types/js/ui/page.d.ts.map +0 -1
- package/dist/types/js/ui/popover.d.ts.map +0 -1
- package/dist/types/js/ui/print-details.d.ts.map +0 -1
- package/dist/types/js/ui/print.d.ts.map +0 -1
- package/dist/types/js/ui/programmatic-modal.d.ts.map +0 -1
- package/dist/types/js/ui/proxy-click.d.ts.map +0 -1
- package/dist/types/js/ui/resizer.d.ts.map +0 -1
- package/dist/types/js/ui/scroll-slider.d.ts.map +0 -1
- package/dist/types/js/ui/scrollpoint.d.ts.map +0 -1
- package/dist/types/js/ui/slider.d.ts.map +0 -1
- package/dist/types/js/ui/tabs.d.ts.map +0 -1
- package/dist/types/js/ui/theme-toggle.d.ts.map +0 -1
- package/dist/types/js/ui/tooltip.d.ts.map +0 -1
- package/dist/types/js/utils/class-logger.d.ts.map +0 -1
- package/dist/types/js/utils/css.d.ts.map +0 -1
- package/dist/types/js/utils/dom.d.ts.map +0 -1
- package/dist/types/js/utils/file-save.d.ts.map +0 -1
- package/dist/types/js/utils/floating-ui.d.ts.map +0 -1
- package/dist/types/js/utils/font-awesome.d.ts.map +0 -1
- package/dist/types/js/utils/id.d.ts.map +0 -1
- package/dist/types/js/utils/pause-youtube-video.d.ts.map +0 -1
- package/dist/ulu-frontend.es.js +0 -5737
- package/dist/ulu-frontend.umd.js +0 -77
- package/lib/scss/components/_card-before-no-position-relative.TRASH.scss +0 -576
- /package/dist/{types/js → es}/ui/overflow-scroller-pager.d.ts +0 -0
- /package/dist/{types/js → es}/ui/page.d.ts +0 -0
- /package/dist/{types/js → es}/ui/print-details.d.ts +0 -0
- /package/dist/{types/js → es}/ui/print.d.ts +0 -0
- /package/dist/{types/js → es}/utils/css.d.ts +0 -0
- /package/dist/{types/js → es}/utils/file-save.d.ts +0 -0
- /package/dist/{types/js → es}/utils/font-awesome.d.ts +0 -0
- /package/dist/{types/js → es}/utils/id.d.ts +0 -0
- /package/dist/{types/js → es}/utils/pause-youtube-video.d.ts +0 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { ComponentInitializer as d } from "../core/component.js";
|
|
2
|
+
const p = new d({
|
|
3
|
+
type: "proxy-click",
|
|
4
|
+
baseAttribute: "data-ulu-proxy-click"
|
|
5
|
+
}), f = {
|
|
6
|
+
selector: "[data-ulu-proxy-click-source]",
|
|
7
|
+
selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
|
|
8
|
+
selectorPrevent: "",
|
|
9
|
+
mousedownDurationPrevent: 250
|
|
10
|
+
};
|
|
11
|
+
let c = { ...f };
|
|
12
|
+
function m(e) {
|
|
13
|
+
c = Object.assign({}, c, e);
|
|
14
|
+
}
|
|
15
|
+
function x() {
|
|
16
|
+
p.init({
|
|
17
|
+
withData: !0,
|
|
18
|
+
coreEvents: ["pageModified"],
|
|
19
|
+
setup({ element: e, data: o, initialize: t }) {
|
|
20
|
+
v(e, o), t();
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function v(e, o) {
|
|
25
|
+
const t = Object.assign({}, c, o), s = e.querySelector(t.selector);
|
|
26
|
+
s ? P(e, s, t) : console.error("Unable to locate proxy click source", t.selector);
|
|
27
|
+
}
|
|
28
|
+
function P(e, o, t) {
|
|
29
|
+
const { selectorPreventBase: s, selectorPrevent: i } = t, l = `${s}${i ? `, ${i}` : ""}`;
|
|
30
|
+
let a, n;
|
|
31
|
+
e.addEventListener("mousedown", ({ target: r, timeStamp: u }) => {
|
|
32
|
+
n = !1, r.matches(l) || (n = !0, a = u);
|
|
33
|
+
}), e.addEventListener("mouseup", ({ timeStamp: r }) => {
|
|
34
|
+
n && r - a < t.mousedownDurationPrevent && o.click();
|
|
35
|
+
}), e.style.cursor = "pointer";
|
|
36
|
+
}
|
|
37
|
+
export {
|
|
38
|
+
P as attachHandlers,
|
|
39
|
+
f as defaults,
|
|
40
|
+
x as init,
|
|
41
|
+
p as initializer,
|
|
42
|
+
m as setDefaults,
|
|
43
|
+
v as setupProxy
|
|
44
|
+
};
|
|
@@ -77,24 +77,24 @@ export class Resizer {
|
|
|
77
77
|
* @param {boolean} [config.enableKeyboardResizing=true] If true, keyboard events will enable resizing.
|
|
78
78
|
*/
|
|
79
79
|
constructor(container: Node, control: HTMLElement, config: {
|
|
80
|
-
debug?: boolean;
|
|
81
|
-
multiplier?: boolean;
|
|
82
|
-
overrideMaxDimensions?: boolean;
|
|
83
|
-
fromX?: "left" | "right" | null;
|
|
84
|
-
fromY?: "top" | "bottom" | null;
|
|
85
|
-
keyboardStep?: number;
|
|
86
|
-
keyboardDebounceTime?: number;
|
|
87
|
-
manageEvents?: boolean;
|
|
88
|
-
manageAriaLabel?: boolean;
|
|
89
|
-
enablePointerResizing?: boolean;
|
|
90
|
-
enableKeyboardResizing?: boolean;
|
|
80
|
+
debug?: boolean | undefined;
|
|
81
|
+
multiplier?: boolean | undefined;
|
|
82
|
+
overrideMaxDimensions?: boolean | undefined;
|
|
83
|
+
fromX?: "left" | "right" | null | undefined;
|
|
84
|
+
fromY?: "top" | "bottom" | null | undefined;
|
|
85
|
+
keyboardStep?: number | undefined;
|
|
86
|
+
keyboardDebounceTime?: number | undefined;
|
|
87
|
+
manageEvents?: boolean | undefined;
|
|
88
|
+
manageAriaLabel?: boolean | undefined;
|
|
89
|
+
enablePointerResizing?: boolean | undefined;
|
|
90
|
+
enableKeyboardResizing?: boolean | undefined;
|
|
91
91
|
});
|
|
92
92
|
options: never;
|
|
93
|
-
container: Node;
|
|
94
|
-
control: HTMLElement;
|
|
93
|
+
container: Node | undefined;
|
|
94
|
+
control: HTMLElement | undefined;
|
|
95
95
|
debug: any;
|
|
96
|
-
resizeHorizontal: boolean;
|
|
97
|
-
resizeVertical: boolean;
|
|
96
|
+
resizeHorizontal: boolean | undefined;
|
|
97
|
+
resizeVertical: boolean | undefined;
|
|
98
98
|
/**
|
|
99
99
|
* Cleans up event listeners and internal state to prevent memory leaks.
|
|
100
100
|
*/
|
|
@@ -122,7 +122,7 @@ export class Resizer {
|
|
|
122
122
|
* @param {string} type The event type (e.g., "resizer:start", "resizer:update", "resizer:end").
|
|
123
123
|
* @param {Object} [data={}] Optional data to attach to the event's detail property.
|
|
124
124
|
*/
|
|
125
|
-
dispatchEvent(type: string, data?:
|
|
125
|
+
dispatchEvent(type: string, data?: Object): void;
|
|
126
126
|
#private;
|
|
127
127
|
}
|
|
128
128
|
//# sourceMappingURL=resizer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resizer.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/resizer.js"],"names":[],"mappings":"AAUA;;GAEG;AACH;IACE;;QAEE;;WAEG;;QAEH;;WAEG;;QAEH;;;;;WAKG;eAJO,MAAM,GAAC,OAAO,GAAC,IAAI;QAM7B;;;;;WAKG;eAJO,KAAK,GAAC,QAAQ,GAAC,IAAI;QAM7B;;WAEG;;QAEH;;WAEG;;QAEH;;;;;;WAMG;;QAEH;;;;;WAKG;;QAEH;;;WAGG;;QAEH;;;WAGG;;MAEH;IAaF;;;;;;;;;;;;;;;OAeG;IACH,uBAfW,IAAI,WACJ,WAAW,UAEnB;QAAyB,KAAK;QACL,UAAU;QACV,qBAAqB;QACT,KAAK;QACL,KAAK;QAClB,YAAY;QACZ,oBAAoB;QACnB,YAAY;QACZ,eAAe;QACf,qBAAqB;QACrB,sBAAsB;KACjD,EAkDA;IA3CC,eAAsB;IACtB,4BAA0B;IAC1B,iCAAsB;IACtB,WAA0B;IAmB1B,sCAA8C;IAC9C,oCAA4C;IAqC9C;;OAEG;IACH,gBAsBC;IAwGD;;;;OAIG;IACH,iBAFW,YAAY,QAyCtB;IAED;;;;OAIG;IACH,aAFW,aAAa,QA4DvB;IAED;;;;OAIG;IACH,gBAFa,MAAM,CAYlB;IAED;;;;OAIG;IACH,oBAHW,MAAM,SACN,MAAM,QAIhB;;CACF"}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
var S = Object.defineProperty;
|
|
2
|
+
var P = (n) => {
|
|
3
|
+
throw TypeError(n);
|
|
4
|
+
};
|
|
5
|
+
var T = (n, t, e) => t in n ? S(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
|
|
6
|
+
var k = (n, t, e) => T(n, typeof t != "symbol" ? t + "" : t, e), L = (n, t, e) => t.has(n) || P("Cannot " + e);
|
|
7
|
+
var i = (n, t, e) => (L(n, t, "read from private field"), e ? e.call(n) : t.get(n)), u = (n, t, e) => t.has(n) ? P("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, e), a = (n, t, e, r) => (L(n, t, "write to private field"), r ? r.call(n, e) : t.set(n, e), e), p = (n, t, e) => (L(n, t, "access private method"), e);
|
|
8
|
+
import { createUluEvent as M } from "../core/events.js";
|
|
9
|
+
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, x, A, D;
|
|
11
|
+
const Y = class Y {
|
|
12
|
+
/**
|
|
13
|
+
* @param {Node} container Container to be resized
|
|
14
|
+
* @param {HTMLElement} control Resize handle element (should be focusable like a button)
|
|
15
|
+
* @param {Object} config Options to configure the resizer.
|
|
16
|
+
* @param {Boolean} [config.debug=false] Enable non-essential debugging logs.
|
|
17
|
+
* @param {Boolean} [config.multiplier=1] Amount to increase size by (ie. pointer movement * multiplier).
|
|
18
|
+
* @param {Boolean} [config.overrideMaxDimensions=false] When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them.
|
|
19
|
+
* @param {"left"|"right"|null} [config.fromX=null] Horizontal resizing direction.
|
|
20
|
+
* @param {"top"|"bottom"|null} [config.fromY=null] Vertical resizing direction.
|
|
21
|
+
* @param {number} [config.keyboardStep=10] The step in pixels for keyboard resizing.
|
|
22
|
+
* @param {number} [config.keyboardDebounceTime=200] Debounce time for keyboard resize end.
|
|
23
|
+
* @param {boolean} [config.manageEvents=true] If true, the Resizer will automatically bind its own events.
|
|
24
|
+
* @param {boolean} [config.manageAriaLabel=false] If true, the Resizer will manage the control's aria-label.
|
|
25
|
+
* @param {boolean} [config.enablePointerResizing=true] If true, pointer events will enable resizing.
|
|
26
|
+
* @param {boolean} [config.enableKeyboardResizing=true] If true, keyboard events will enable resizing.
|
|
27
|
+
*/
|
|
28
|
+
constructor(t, e, r) {
|
|
29
|
+
u(this, l);
|
|
30
|
+
// Declare private fields without initial assignments
|
|
31
|
+
u(this, z);
|
|
32
|
+
u(this, v);
|
|
33
|
+
u(this, f);
|
|
34
|
+
u(this, d);
|
|
35
|
+
u(this, y);
|
|
36
|
+
u(this, w);
|
|
37
|
+
u(this, g);
|
|
38
|
+
u(this, E);
|
|
39
|
+
u(this, R);
|
|
40
|
+
if (!e || !t) {
|
|
41
|
+
I(this, "Missing required elements: control, container");
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const s = Object.assign({}, Y.defaults, r);
|
|
45
|
+
this.options = s, this.container = t, this.control = e, this.debug = s.debug;
|
|
46
|
+
const o = ["left", "right"], c = ["top", "bottom"], { fromX: h, fromY: m } = s;
|
|
47
|
+
if (!o.includes(h) && h !== null) {
|
|
48
|
+
I(this, `Invalid fromX: ${h} (left|right|null)`);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (!c.includes(m) && m !== null) {
|
|
52
|
+
I(this, `Invalid fromY: ${m} (top|bottom|null)`);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (!h && !m) {
|
|
56
|
+
I(this, "Invalid fromX/fromY, failed to setup resizer (at least one of fromX or fromY must be set)");
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
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 && e.addEventListener("pointerdown", i(this, z)), s.enableKeyboardResizing && e.addEventListener("keydown", i(this, v))), p(this, l, X).call(this), s.manageAriaLabel && e.setAttribute("aria-label", this.getAriaLabel());
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* Cleans up event listeners and internal state to prevent memory leaks.
|
|
63
|
+
*/
|
|
64
|
+
destroy() {
|
|
65
|
+
const { control: t, options: e } = this;
|
|
66
|
+
e.manageEvents && (e.enablePointerResizing && t.removeEventListener("pointerdown", i(this, z)), e.enableKeyboardResizing && t.removeEventListener("keydown", i(this, v))), i(this, f) && clearTimeout(i(this, f)), p(this, l, X).call(this), e.manageAriaLabel && t.removeAttribute("aria-label"), b(this, "Resizer destroyed.");
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Public handler for pointerdown events. Call this method from your own event listeners
|
|
70
|
+
* if `manageEvents` is false. Its logic will only execute if `enablePointerResizing` is true.
|
|
71
|
+
* @param {PointerEvent} e The pointerdown event.
|
|
72
|
+
*/
|
|
73
|
+
onPointerdown(t) {
|
|
74
|
+
if (!this.options.enablePointerResizing) {
|
|
75
|
+
b(this, "Pointer resizing disabled. Ignoring pointerdown event.");
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
t.preventDefault();
|
|
79
|
+
const e = document.documentElement;
|
|
80
|
+
a(this, E, t.clientX), a(this, R, t.clientY), p(this, l, x).call(this, {
|
|
81
|
+
inputType: "pointer",
|
|
82
|
+
startX: t.clientX,
|
|
83
|
+
startY: t.clientY,
|
|
84
|
+
pointerId: t.pointerId
|
|
85
|
+
}), this.control.setPointerCapture(t.pointerId);
|
|
86
|
+
const r = (o) => {
|
|
87
|
+
const c = o.clientX - i(this, E), h = o.clientY - i(this, R);
|
|
88
|
+
p(this, l, D).call(this, c, h, o);
|
|
89
|
+
}, s = (o) => {
|
|
90
|
+
e.removeEventListener("pointermove", r, !1), e.removeEventListener("pointerup", s, { capture: !0, once: !0 }), this.control.hasPointerCapture(o.pointerId) && this.control.releasePointerCapture(o.pointerId), p(this, l, A).call(this);
|
|
91
|
+
};
|
|
92
|
+
e.addEventListener("pointermove", r, !1), e.addEventListener("pointerup", s, { capture: !0, once: !0 });
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Public handler for keydown events. Call this method from your own event listeners
|
|
96
|
+
* if `manageEvents` is false. Its logic will only execute if `enableKeyboardResizing` is true.
|
|
97
|
+
* @param {KeyboardEvent} e The keydown event.
|
|
98
|
+
*/
|
|
99
|
+
onKeydown(t) {
|
|
100
|
+
if (!this.options.enableKeyboardResizing) {
|
|
101
|
+
b(this, "Keyboard resizing disabled. Ignoring keydown event.");
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
const { key: e } = t, { keyboardStep: r, keyboardDebounceTime: s } = this.options;
|
|
105
|
+
let o = 0, c = 0, h = !1;
|
|
106
|
+
this.resizeHorizontal && (e === "ArrowLeft" ? (o = -r, h = !0) : e === "ArrowRight" && (o = r, h = !0)), this.resizeVertical && (e === "ArrowUp" ? (c = -r, h = !0) : e === "ArrowDown" && (c = r, h = !0)), h && (t.preventDefault(), t.stopPropagation(), (!i(this, g) || i(this, f) === null) && p(this, l, x).call(this, { inputType: "keyboard", keyboardKey: e }), a(this, y, i(this, y) + o), a(this, w, i(this, w) + c), p(this, l, D).call(this, i(this, y), i(this, w), t), i(this, f) && clearTimeout(i(this, f)), a(this, f, setTimeout(() => {
|
|
107
|
+
p(this, l, A).call(this), a(this, f, null);
|
|
108
|
+
}, s)));
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* Generates an accessible label for the resize control based on its configuration.
|
|
112
|
+
* This is a convenience function that can be used by the consumer if `manageAriaLabel` is false.
|
|
113
|
+
* @returns {string} The suggested aria-label for the control.
|
|
114
|
+
*/
|
|
115
|
+
getAriaLabel() {
|
|
116
|
+
const { fromY: t, fromX: e } = this.options, r = [t, e].filter((s) => s);
|
|
117
|
+
return r.length === 0 ? "Resize control" : `Resize from ${r.join(" ")} edge`;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Dispatches a custom event on the container element.
|
|
121
|
+
* @param {string} type The event type (e.g., "resizer:start", "resizer:update", "resizer:end").
|
|
122
|
+
* @param {Object} [data={}] Optional data to attach to the event's detail property.
|
|
123
|
+
*/
|
|
124
|
+
dispatchEvent(t, e = {}) {
|
|
125
|
+
this.container.dispatchEvent(M(t, e));
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
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(), /**
|
|
129
|
+
* Resets all internal state properties to their default/inactive values.
|
|
130
|
+
* This centralizes state cleanup and initial setup.
|
|
131
|
+
* @private
|
|
132
|
+
*/
|
|
133
|
+
X = function() {
|
|
134
|
+
a(this, f, null), a(this, d, { width: 0, height: 0 }), a(this, y, 0), a(this, w, 0), a(this, g, !1), a(this, E, 0), a(this, R, 0);
|
|
135
|
+
}, /**
|
|
136
|
+
* Initiates a resize operation.
|
|
137
|
+
* This sets initial dimensions and dispatches the 'resizer:start' event.
|
|
138
|
+
* @param {Object} eventDetails Additional details about the initiating event.
|
|
139
|
+
* @private
|
|
140
|
+
*/
|
|
141
|
+
x = function(t) {
|
|
142
|
+
const { container: e, options: r } = this;
|
|
143
|
+
if (i(this, g)) {
|
|
144
|
+
r.overrideMaxDimensions && (this.resizeHorizontal && (e.style.maxWidth = "none"), this.resizeVertical && (e.style.maxHeight = "none"));
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
const o = document.defaultView.getComputedStyle(e);
|
|
148
|
+
i(this, d).width = parseInt(o.width, 10), i(this, d).height = parseInt(o.height, 10), r.overrideMaxDimensions && (this.resizeHorizontal && (e.style.maxWidth = "none"), this.resizeVertical && (e.style.maxHeight = "none")), a(this, g, !0), this.dispatchEvent("resizer:start", t), b(this, "Resize started.", {
|
|
149
|
+
initialWidth: i(this, d).width,
|
|
150
|
+
initialHeight: i(this, d).height,
|
|
151
|
+
...t
|
|
152
|
+
});
|
|
153
|
+
}, /**
|
|
154
|
+
* Ends a resize operation.
|
|
155
|
+
* Dispatches 'resizer:end' event and resets internal state.
|
|
156
|
+
* @private
|
|
157
|
+
*/
|
|
158
|
+
A = function() {
|
|
159
|
+
i(this, g) && (this.dispatchEvent("resizer:end"), p(this, l, X).call(this), b(this, "Resize ended."));
|
|
160
|
+
}, /**
|
|
161
|
+
* Core logic for calculating and applying the new size of the container.
|
|
162
|
+
* This method is called by both pointer and keyboard event handlers.
|
|
163
|
+
*
|
|
164
|
+
* @param {number} totalDeltaX The total horizontal displacement from the start of the resize.
|
|
165
|
+
* @param {number} totalDeltaY The total vertical displacement from the start of the resize.
|
|
166
|
+
* @param {Event} originalEvent The original DOM event (PointerEvent or KeyboardEvent) that triggered the update.
|
|
167
|
+
* @private
|
|
168
|
+
*/
|
|
169
|
+
D = function(t, e, r) {
|
|
170
|
+
let s = i(this, d).width, o = i(this, d).height;
|
|
171
|
+
const { fromX: c, fromY: h, multiplier: m } = this.options;
|
|
172
|
+
this.resizeHorizontal && (c === "right" ? s = i(this, d).width + t * m : c === "left" && (s = i(this, d).width - t * m), this.container.style.width = `${Math.max(0, s)}px`), this.resizeVertical && (h === "bottom" ? o = i(this, d).height + e * m : h === "top" && (o = i(this, d).height - e * m), this.container.style.height = `${Math.max(0, o)}px`);
|
|
173
|
+
const K = {
|
|
174
|
+
newWidth: s,
|
|
175
|
+
newHeight: o,
|
|
176
|
+
totalDeltaX: t,
|
|
177
|
+
totalDeltaY: e,
|
|
178
|
+
event: r
|
|
179
|
+
};
|
|
180
|
+
this.dispatchEvent("resizer:update", K), b(this, "Resizing update.", K);
|
|
181
|
+
}, k(Y, "defaults", {
|
|
182
|
+
debug: !1,
|
|
183
|
+
/**
|
|
184
|
+
* Amount to increase size by (ie. pointer movement * multiplier)
|
|
185
|
+
*/
|
|
186
|
+
multiplier: 1,
|
|
187
|
+
/**
|
|
188
|
+
* Remove max-width, max-height
|
|
189
|
+
*/
|
|
190
|
+
overrideMaxDimensions: !1,
|
|
191
|
+
/**
|
|
192
|
+
* @type {"left"|"right"|null}
|
|
193
|
+
* Specifies the horizontal edge from which resizing occurs.
|
|
194
|
+
* `null` means no horizontal resizing.
|
|
195
|
+
* - Default null
|
|
196
|
+
*/
|
|
197
|
+
fromX: null,
|
|
198
|
+
/**
|
|
199
|
+
* @type {"top"|"bottom"|null}
|
|
200
|
+
* Specifies the vertical edge from which resizing occurs.
|
|
201
|
+
* - `null` means no vertical resizing.
|
|
202
|
+
* - Default null
|
|
203
|
+
*/
|
|
204
|
+
fromY: null,
|
|
205
|
+
/**
|
|
206
|
+
* The step in pixels for keyboard resizing with arrow keys.
|
|
207
|
+
*/
|
|
208
|
+
keyboardStep: 10,
|
|
209
|
+
/**
|
|
210
|
+
* Debounce time in milliseconds for ending a keyboard resize.
|
|
211
|
+
*/
|
|
212
|
+
keyboardDebounceTime: 200,
|
|
213
|
+
/**
|
|
214
|
+
* If true, the Resizer instance will automatically bind its own DOM event listeners
|
|
215
|
+
* (pointerdown, keydown) to the control element. If `false`, the user is
|
|
216
|
+
* responsible for calling `resizerInstance.onPointerdown(event)` and
|
|
217
|
+
* `resizerInstance.onKeydown(event)` from their own listeners.
|
|
218
|
+
* Default: true
|
|
219
|
+
*/
|
|
220
|
+
manageEvents: !0,
|
|
221
|
+
/**
|
|
222
|
+
* If true, the Resizer instance will automatically manage the `aria-label`
|
|
223
|
+
* attribute of the control element. If `false`, the user is responsible
|
|
224
|
+
* for setting this attribute.
|
|
225
|
+
* Default: false
|
|
226
|
+
*/
|
|
227
|
+
manageAriaLabel: !1,
|
|
228
|
+
/**
|
|
229
|
+
* If true, pointer events (mouse/touch) will enable resizing.
|
|
230
|
+
* Default: true
|
|
231
|
+
*/
|
|
232
|
+
enablePointerResizing: !0,
|
|
233
|
+
/**
|
|
234
|
+
* If true, keyboard events (arrow keys) will enable resizing.
|
|
235
|
+
* Default: true
|
|
236
|
+
*/
|
|
237
|
+
enableKeyboardResizing: !0
|
|
238
|
+
});
|
|
239
|
+
let H = Y;
|
|
240
|
+
export {
|
|
241
|
+
H as Resizer
|
|
242
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* Initialize everything in document
|
|
3
4
|
* - This will only initialize elements once, it is safe to call on page changes
|
|
@@ -7,5 +8,4 @@ export function init(): void;
|
|
|
7
8
|
* Scroll Slider Component Initializer
|
|
8
9
|
*/
|
|
9
10
|
export const initializer: ComponentInitializer;
|
|
10
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
11
11
|
//# sourceMappingURL=scroll-slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll-slider.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/scroll-slider.js"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,6BASC;AA5BD;;GAEG;AACH,+CAGG;qCAVkC,sBAAsB"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ComponentInitializer as n } from "../core/component.js";
|
|
2
|
+
import { OverflowScroller as i } from "./overflow-scroller.js";
|
|
3
|
+
import { createPager as l } from "./overflow-scroller-pager.js";
|
|
4
|
+
const o = new n({
|
|
5
|
+
type: "scroll-slider",
|
|
6
|
+
baseAttribute: "data-ulu-scroll-slider"
|
|
7
|
+
}), s = o.attributeSelector("track"), a = o.attributeSelector("control-context"), u = [], p = {
|
|
8
|
+
amount: l()
|
|
9
|
+
};
|
|
10
|
+
function b() {
|
|
11
|
+
o.init({
|
|
12
|
+
withData: !0,
|
|
13
|
+
coreEvents: ["pageModified"],
|
|
14
|
+
setup({ element: t, data: e, initialize: r }) {
|
|
15
|
+
f(t, e), r();
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function f(t, e) {
|
|
20
|
+
const r = Object.assign({}, p, e), c = {
|
|
21
|
+
track: t.querySelector(s),
|
|
22
|
+
controls: t.querySelector(a)
|
|
23
|
+
};
|
|
24
|
+
u.push(new i(c, r));
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
b as init,
|
|
28
|
+
o as initializer
|
|
29
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentInitializer } from '../core/component.js';
|
|
1
2
|
/**
|
|
2
3
|
* Initialize everything in document
|
|
3
4
|
* - This will only initialize elements once, it is safe to call on page changes
|
|
@@ -20,11 +21,11 @@ export class Scrollpoint {
|
|
|
20
21
|
/**
|
|
21
22
|
* Default observer root element
|
|
22
23
|
*/
|
|
23
|
-
root:
|
|
24
|
+
root: null;
|
|
24
25
|
/**
|
|
25
26
|
* Use a selector to select the observer root element
|
|
26
27
|
*/
|
|
27
|
-
rootSelector:
|
|
28
|
+
rootSelector: null;
|
|
28
29
|
/**
|
|
29
30
|
* Log debug info to console
|
|
30
31
|
*/
|
|
@@ -79,7 +80,7 @@ export class Scrollpoint {
|
|
|
79
80
|
/**
|
|
80
81
|
* Elements that should also get active state info (classes or attributes)
|
|
81
82
|
*/
|
|
82
|
-
syncElements:
|
|
83
|
+
syncElements: never[];
|
|
83
84
|
/**
|
|
84
85
|
* Callback called when state changes
|
|
85
86
|
*/
|
|
@@ -90,13 +91,81 @@ export class Scrollpoint {
|
|
|
90
91
|
* @param {Node} element The element to create the scrollpoint for
|
|
91
92
|
* @param {Object} config Options to configure the scrollpoint see Scrollpoint.defaults for more information on settings
|
|
92
93
|
*/
|
|
93
|
-
constructor(element: Node, config:
|
|
94
|
-
options:
|
|
95
|
-
|
|
94
|
+
constructor(element: Node, config: Object);
|
|
95
|
+
options: ({
|
|
96
|
+
/**
|
|
97
|
+
* Default observer root element
|
|
98
|
+
*/
|
|
99
|
+
root: null;
|
|
100
|
+
/**
|
|
101
|
+
* Use a selector to select the observer root element
|
|
102
|
+
*/
|
|
103
|
+
rootSelector: null;
|
|
104
|
+
/**
|
|
105
|
+
* Log debug info to console
|
|
106
|
+
*/
|
|
107
|
+
debug: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Change scroll orientation to horizontal
|
|
110
|
+
*/
|
|
111
|
+
horizontal: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Margin for observer top or left (depending on orientation)
|
|
114
|
+
*/
|
|
115
|
+
marginStart: string;
|
|
116
|
+
/**
|
|
117
|
+
* Margin for observer bottom or right (depending on orientation)
|
|
118
|
+
*/
|
|
119
|
+
marginEnd: string;
|
|
120
|
+
/**
|
|
121
|
+
* Threshold for observer
|
|
122
|
+
*/
|
|
123
|
+
threshold: number[];
|
|
124
|
+
/**
|
|
125
|
+
* The point can exited (else persists)
|
|
126
|
+
*/
|
|
127
|
+
exit: boolean;
|
|
128
|
+
/**
|
|
129
|
+
* The point can exit from the end
|
|
130
|
+
*/
|
|
131
|
+
exitForward: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* The point can exit from the start
|
|
134
|
+
*/
|
|
135
|
+
exitReverse: boolean;
|
|
136
|
+
/**
|
|
137
|
+
* Set state classes
|
|
138
|
+
*/
|
|
139
|
+
setClasses: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Prefix for classes
|
|
142
|
+
*/
|
|
143
|
+
classPrefix: string;
|
|
144
|
+
/**
|
|
145
|
+
* Set attribute for state (less verbose same info as classes)
|
|
146
|
+
*/
|
|
147
|
+
setAttribute: boolean;
|
|
148
|
+
/**
|
|
149
|
+
* Attribute name to set state info in
|
|
150
|
+
*/
|
|
151
|
+
attributeName: string;
|
|
152
|
+
/**
|
|
153
|
+
* Group multiple points, one active at a time (scroll menus)
|
|
154
|
+
*/
|
|
155
|
+
/**
|
|
156
|
+
* Elements that should also get active state info (classes or attributes)
|
|
157
|
+
*/
|
|
158
|
+
syncElements: never[];
|
|
159
|
+
/**
|
|
160
|
+
* Callback called when state changes
|
|
161
|
+
*/
|
|
162
|
+
onChange(_ctx: any): void;
|
|
163
|
+
} & Object) | undefined;
|
|
164
|
+
observer: IntersectionObserver | null;
|
|
96
165
|
lastPosition: any;
|
|
97
|
-
isActive: boolean;
|
|
98
|
-
element: Node;
|
|
99
|
-
syncedElements: any[];
|
|
166
|
+
isActive: boolean | undefined;
|
|
167
|
+
element: Node | undefined;
|
|
168
|
+
syncedElements: any[] | undefined;
|
|
100
169
|
classes: {
|
|
101
170
|
enter: string;
|
|
102
171
|
enterForward: string;
|
|
@@ -104,7 +173,7 @@ export class Scrollpoint {
|
|
|
104
173
|
exit: string;
|
|
105
174
|
exitForward: string;
|
|
106
175
|
exitReverse: string;
|
|
107
|
-
};
|
|
176
|
+
} | undefined;
|
|
108
177
|
getClassname(suffix: any): string;
|
|
109
178
|
getObserverOptions(): {
|
|
110
179
|
root: any;
|
|
@@ -124,5 +193,4 @@ export class Scrollpoint {
|
|
|
124
193
|
updateStateAttribute(isActive: any, isForward: any): void;
|
|
125
194
|
destroy(): void;
|
|
126
195
|
}
|
|
127
|
-
import { ComponentInitializer } from "../core/component.js";
|
|
128
196
|
//# sourceMappingURL=scrollpoint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollpoint.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/scrollpoint.js"],"names":[],"mappings":"AA2BA;;;GAGG;AACH,6BAUC;AAtBD;;GAEG;AACH,+CAGG;AAkBH;;;;;;;GAOG;AACH;IACE;QACE;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;QAEH;;WAEG;;QAEH;;WAEG;;MAIH;IACF;;;;OAIG;IACH,qBAHW,IAAI,UACJ,MAAM,EAiChB;IArBC;QAtFA;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;QAEH;;WAEG;;QAEH;;WAEG;;4BAoBmB;IACtB,sCAAoB;IACpB,kBAAwB;IACxB,8BAAqB;IACrB,0BAAsB;IACtB,kCAGC;IACD;;;;;;;kBAOC;IAMH,kCAEC;IACD;;;;MAMC;IACD;;;OAGG;IACH,8BAkBC;IACD,sBAUC;IACD,kBAGC;IACD,8CAcC;IACD,0BAEC;IACD,mDAmBC;IACD,0DAMC;IACD,gBASC;CACF;qCAnQoC,sBAAsB"}
|