@fivelab/web-utils 1.0.0 → 1.0.2
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/dom/dom-changes.js +6 -3
- package/dist/dom/dom-changes.js.map +1 -1
- package/dist/dom/dom-events.js +6 -3
- package/dist/dom/dom-events.js.map +1 -1
- package/dist/dom/dom-ready.js +4 -2
- package/dist/dom/dom-ready.js.map +1 -1
- package/dist/dom/dom-visibility.d.ts +2 -0
- package/dist/dom/dom-visibility.js +9 -0
- package/dist/dom/dom-visibility.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +14 -3
package/dist/dom/dom-changes.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { onDomReady } from './dom-ready';
|
|
2
|
-
|
|
1
|
+
import { onDomReady } from './dom-ready.js';
|
|
2
|
+
|
|
3
|
+
function onDomChanges(options, callback) {
|
|
3
4
|
if (options.selector && options.selectors) {
|
|
4
5
|
throw new Error('Only one option must be provided: either selector or selectors, not both.');
|
|
5
6
|
}
|
|
@@ -73,4 +74,6 @@ export function onDomChanges(options, callback) {
|
|
|
73
74
|
}
|
|
74
75
|
});
|
|
75
76
|
}
|
|
76
|
-
|
|
77
|
+
|
|
78
|
+
export { onDomChanges };
|
|
79
|
+
//# sourceMappingURL=dom-changes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-changes.js","
|
|
1
|
+
{"version":3,"file":"dom-changes.js","sources":["../../src/dom/dom-changes.ts"],"sourcesContent":["import { onDomReady } from './dom-ready';\n\ntype BaseDomChangeOptions = MutationObserverInit & {\n readonly onDomReady?: boolean; // execute handler after dom ready?\n readonly target?: string; // where we must see changes?\n}\n\ntype SelectorDomChangeOptions = BaseDomChangeOptions & {\n readonly selector?: string; // what element we find?\n selectors?: never;\n}\n\ntype SelectorsDomChangeOptions = BaseDomChangeOptions & {\n readonly selectors?: DomChangeCallbacks; // each selector must contain callback function\n selector?: never;\n}\n\ntype DomChangeOptions = SelectorsDomChangeOptions | SelectorDomChangeOptions;\n\nexport type DomChangeCallback = (target: Element, item?: MutationRecord) => void;\nexport type DomChangeCallbacks = Record<string, DomChangeCallback>;\n\nexport function onDomChanges(options: SelectorDomChangeOptions, callback: DomChangeCallback): void;\nexport function onDomChanges(options: SelectorsDomChangeOptions): void;\n\nexport function onDomChanges(options: DomChangeOptions, callback?: DomChangeCallback): void {\n if (options.selector && options.selectors) {\n throw new Error('Only one option must be provided: either selector or selectors, not both.');\n }\n\n if (options.selectors && callback) {\n throw new Error('Only one option must be provided: either selectors or callback, not both.');\n }\n\n function changesOnElementWithSelector(element: HTMLElement, handler: DomChangeCallback, item?: MutationRecord, selector?: string): void {\n if (selector) {\n if (element.matches(selector)) {\n handler.call(null, element, item);\n } else {\n element.querySelectorAll(selector).forEach((innerElement) => {\n handler.call(null, innerElement, item);\n });\n }\n } else {\n handler.call(null, element, item);\n }\n }\n\n function changesOnElementWithSelectors(element: HTMLElement, selectors: DomChangeCallbacks, item?: MutationRecord): void {\n Object.entries(selectors).forEach(([selector, handler]) => {\n changesOnElementWithSelector.call(null, element, handler, item, selector);\n });\n }\n\n let selectors: DomChangeCallbacks | undefined = undefined;\n\n if (options.selectors) {\n selectors = options.selectors;\n } else if (options.selector) {\n if (!callback) {\n throw new Error('Missed callback.');\n }\n\n selectors = {};\n selectors[options.selector] = callback;\n }\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((item) => {\n item.addedNodes.forEach((node) => {\n if (!(node instanceof HTMLElement)) {\n return;\n }\n\n if (selectors) {\n changesOnElementWithSelectors(node, selectors, item);\n } else {\n if (!callback) {\n throw new Error('Missed callback.');\n }\n\n changesOnElementWithSelector(node, callback, item);\n }\n });\n\n if (item.attributeName) {\n callback?.call(null, <Element>item.target, item);\n }\n });\n });\n\n onDomReady(() => {\n const target = <HTMLElement>(options.target ? document.querySelector(options.target) : document.body);\n\n if (!target) {\n console.debug(`The target with selector \"${options.target}\" for listen page changes was not found.`);\n\n return;\n }\n\n observer.observe(target, options);\n\n if (options.onDomReady) {\n if (!selectors) {\n throw new Error('Selector or selectors is required for enable \"on dom ready\".');\n }\n\n changesOnElementWithSelectors(target, selectors);\n }\n });\n}\n"],"names":[],"mappings":"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"}
|
package/dist/dom/dom-events.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { onDomReady } from './dom-ready';
|
|
2
|
-
|
|
1
|
+
import { onDomReady } from './dom-ready.js';
|
|
2
|
+
|
|
3
|
+
function onDomEvents(eventName, options, handler) {
|
|
3
4
|
if (typeof options === 'string') {
|
|
4
5
|
options = {
|
|
5
6
|
selector: options,
|
|
@@ -48,4 +49,6 @@ export function onDomEvents(eventName, options, handler) {
|
|
|
48
49
|
});
|
|
49
50
|
});
|
|
50
51
|
}
|
|
51
|
-
|
|
52
|
+
|
|
53
|
+
export { onDomEvents };
|
|
54
|
+
//# sourceMappingURL=dom-events.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-events.js","
|
|
1
|
+
{"version":3,"file":"dom-events.js","sources":["../../src/dom/dom-events.ts"],"sourcesContent":["import { onDomReady } from './dom-ready';\n\nexport type EventHandler = (element: Element, event: Event) => void;\nexport type EventHandlers = Record<string, EventHandler>;\n\ntype EventName = 'click' | 'change';\ntype Selector = string;\n\ntype BaseListenOptions = {\n readonly target?: string | HTMLElement;\n}\n\ntype SelectorListenOptions = BaseListenOptions & {\n readonly selector: Selector;\n selectors?: never;\n}\n\ntype SelectorsListenOptions = BaseListenOptions & {\n readonly selectors: EventHandlers;\n selector?: never;\n}\n\nexport function onDomEvents(eventName: EventName, options: SelectorListenOptions | string, handler: EventHandler): void;\nexport function onDomEvents(eventName: EventName, options: SelectorsListenOptions): void;\n\nexport function onDomEvents(eventName: EventName, options: SelectorListenOptions | SelectorsListenOptions | string, handler?: EventHandler): void {\n if (typeof options === 'string') {\n options = <SelectorListenOptions>{\n selector: options,\n };\n }\n\n if (options.selectors && handler) {\n throw new Error('Only one option must be provided: either selectors or callback, not both.');\n }\n\n let selectors: EventHandlers;\n\n if (options.selectors) {\n selectors = options.selectors;\n } else {\n if (!handler) {\n throw new Error('Missed handler');\n }\n\n selectors = {};\n selectors[options.selector] = handler;\n }\n\n const findHandler = (selectors: EventHandlers, element: HTMLElement): [HTMLElement, EventHandler] | null => {\n for (const [selector, handler] of Object.entries(selectors)) {\n if (element.matches(selector)) {\n return [element, handler];\n }\n\n const parent = <HTMLElement>element.closest(selector);\n\n if (parent) {\n return [parent, handler];\n }\n }\n\n return null;\n };\n\n onDomReady(() => {\n let target: Element | null = document.body;\n\n if (options.target) {\n target = options.target instanceof Element ? options.target : document.querySelector(options.target);\n\n if (!target) {\n throw new Error(`Missed target element by selector \"${options.target}\".`);\n }\n }\n\n target.addEventListener(eventName, (event): void => {\n const target = <HTMLElement>event.target;\n const entry = findHandler(selectors, target);\n\n if (entry) {\n entry[1].call(null, entry[0], event);\n }\n });\n });\n}\n"],"names":[],"mappings":";;SAyBgB,WAAW,CAAC,SAAoB,EAAE,OAAgE,EAAE,OAAsB,EAAA;AACtI,IAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAO,GAA0B;AAC7B,YAAA,QAAQ,EAAE,OAAO;SACpB;IACL;AAEA,IAAA,IAAI,OAAO,CAAC,SAAS,IAAI,OAAO,EAAE;AAC9B,QAAA,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC;IAChG;AAEA,IAAA,IAAI,SAAwB;AAE5B,IAAA,IAAI,OAAO,CAAC,SAAS,EAAE;AACnB,QAAA,SAAS,GAAG,OAAO,CAAC,SAAS;IACjC;SAAO;QACH,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;QACrC;QAEA,SAAS,GAAG,EAAE;AACd,QAAA,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO;IACzC;AAEA,IAAA,MAAM,WAAW,GAAG,CAAC,SAAwB,EAAE,OAAoB,KAAwC;AACvG,QAAA,KAAK,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;AACzD,YAAA,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;AAC3B,gBAAA,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC;YAC7B;YAEA,MAAM,MAAM,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;YAErD,IAAI,MAAM,EAAE;AACR,gBAAA,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;YAC5B;QACJ;AAEA,QAAA,OAAO,IAAI;AACf,IAAA,CAAC;IAED,UAAU,CAAC,MAAK;AACZ,QAAA,IAAI,MAAM,GAAmB,QAAQ,CAAC,IAAI;AAE1C,QAAA,IAAI,OAAO,CAAC,MAAM,EAAE;YAChB,MAAM,GAAG,OAAO,CAAC,MAAM,YAAY,OAAO,GAAG,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;YAEpG,IAAI,CAAC,MAAM,EAAE;gBACT,MAAM,IAAI,KAAK,CAAC,CAAA,mCAAA,EAAsC,OAAO,CAAC,MAAM,CAAA,EAAA,CAAI,CAAC;YAC7E;QACJ;QAEA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,KAAU;AAC/C,YAAA,MAAM,MAAM,GAAgB,KAAK,CAAC,MAAM;YACxC,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,EAAE,MAAM,CAAC;YAE5C,IAAI,KAAK,EAAE;AACP,gBAAA,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;YACxC;AACJ,QAAA,CAAC,CAAC;AACN,IAAA,CAAC,CAAC;AACN;;;;"}
|
package/dist/dom/dom-ready.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
function onDomReady(callback) {
|
|
2
2
|
let wrap;
|
|
3
3
|
if (Array.isArray(callback)) {
|
|
4
4
|
wrap = () => callback.forEach((c) => c.call(null));
|
|
@@ -15,4 +15,6 @@ export function onDomReady(callback) {
|
|
|
15
15
|
wrap.call(null);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
|
|
18
|
+
|
|
19
|
+
export { onDomReady };
|
|
20
|
+
//# sourceMappingURL=dom-ready.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dom-ready.js","
|
|
1
|
+
{"version":3,"file":"dom-ready.js","sources":["../../src/dom/dom-ready.ts"],"sourcesContent":["export type DomReadyCallback = () => void;\n\nexport function onDomReady(callback: DomReadyCallback): void;\nexport function onDomReady(callback: Array<DomReadyCallback>): void\n\nexport function onDomReady(callback: DomReadyCallback | Array<DomReadyCallback>): void {\n let wrap: DomReadyCallback;\n\n if (Array.isArray(callback)) {\n wrap = () => callback.forEach((c) => c.call(null));\n } else {\n wrap = callback;\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', wrap, {\n once: true,\n });\n } else {\n wrap.call(null);\n }\n}\n"],"names":[],"mappings":"AAKM,SAAU,UAAU,CAAC,QAAoD,EAAA;AAC3E,IAAA,IAAI,IAAsB;AAE1B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACzB,IAAI,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtD;SAAO;QACH,IAAI,GAAG,QAAQ;IACnB;AAEA,IAAA,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE;AACnC,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,EAAE;AAChD,YAAA,IAAI,EAAE,IAAI;AACb,SAAA,CAAC;IACN;SAAO;AACH,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACnB;AACJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom-visibility.js","sources":["../../src/dom/dom-visibility.ts"],"sourcesContent":["export function showElement(element: HTMLElement): void {\n element.classList.remove('d-none');\n}\n\nexport function hideElement(element: HTMLElement): void {\n element.classList.add('d-none');\n}\n"],"names":[],"mappings":"AAAM,SAAU,WAAW,CAAC,OAAoB,EAAA;AAC5C,IAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC;AACtC;AAEM,SAAU,WAAW,CAAC,OAAoB,EAAA;AAC5C,IAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;AACnC;;;;"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { onDomReady } from './dom/dom-ready.js';
|
|
2
|
+
export { onDomChanges } from './dom/dom-changes.js';
|
|
3
|
+
export { onDomEvents } from './dom/dom-events.js';
|
|
4
|
+
export { hideElement, showElement } from './dom/dom-visibility.js';
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fivelab/web-utils",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "The helpers for easy manipulate with dom.",
|
|
@@ -20,20 +20,31 @@
|
|
|
20
20
|
],
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"devDependencies": {
|
|
23
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
24
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
23
25
|
"@typescript-eslint/eslint-plugin": "~8.50",
|
|
24
26
|
"@typescript-eslint/parser": "~8.50",
|
|
25
27
|
"eslint": "~9.39",
|
|
26
28
|
"jsdom": "~27.3",
|
|
29
|
+
"rollup": "^4.53.5",
|
|
30
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
27
31
|
"typescript": "~5.9",
|
|
28
32
|
"vitest": "~4.0"
|
|
29
33
|
},
|
|
30
34
|
"scripts": {
|
|
31
35
|
"clean": "rm -rf dist/*",
|
|
32
|
-
"build": "
|
|
33
|
-
"build:
|
|
36
|
+
"build:js": "rollup -c",
|
|
37
|
+
"build:types": "tsc -p tsconfig.types.json",
|
|
38
|
+
"build": "npm run clean && npm run build:js && npm run build:types",
|
|
34
39
|
"test": "vitest run",
|
|
35
40
|
"test:watch": "vitest",
|
|
36
41
|
"lint": "eslint src",
|
|
37
42
|
"prepublishOnly": "npm run clean && npm run lint && npm run test && npm run build"
|
|
43
|
+
},
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"tslib": "^2.8.1"
|
|
38
49
|
}
|
|
39
50
|
}
|