@medyll/idae-dom-events 0.5.31 → 0.6.0
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/htmlDom.d.ts +1 -0
- package/dist/htmlDom.js +28 -21
- package/package.json +1 -1
package/dist/htmlDom.d.ts
CHANGED
|
@@ -65,6 +65,7 @@ declare class DomObserver {
|
|
|
65
65
|
export declare const Htmlu: DomObserver;
|
|
66
66
|
export declare const htmlDom: DomObserver;
|
|
67
67
|
type OnMutationType = {
|
|
68
|
+
onResize?: (element: Node, mutation: MutationRecord, observer: MutationObserver) => void;
|
|
68
69
|
onChange?: (element: Node, mutation: MutationRecord, observer: MutationObserver) => void;
|
|
69
70
|
onAttributesChange?: undefined | ((element: Node, mutation: MutationRecord, observer: MutationObserver) => void);
|
|
70
71
|
onChildListChange?: undefined | ((element: Node, mutation: MutationRecord, observer: MutationObserver) => void);
|
package/dist/htmlDom.js
CHANGED
|
@@ -11,7 +11,7 @@ class DomObserver {
|
|
|
11
11
|
useSubtree: true,
|
|
12
12
|
debounceTime: 0,
|
|
13
13
|
errorHandler: console.error,
|
|
14
|
-
...options
|
|
14
|
+
...options,
|
|
15
15
|
};
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
@@ -34,7 +34,7 @@ class DomObserver {
|
|
|
34
34
|
*/
|
|
35
35
|
attach(opts) {
|
|
36
36
|
const optionsArray = Array.isArray(opts) ? opts : [opts];
|
|
37
|
-
if (typeof window ==
|
|
37
|
+
if (typeof window == "undefined" || !optionsArray)
|
|
38
38
|
return;
|
|
39
39
|
const elementsToObserve = [];
|
|
40
40
|
for (const option of optionsArray) {
|
|
@@ -66,7 +66,7 @@ class DomObserver {
|
|
|
66
66
|
let [selectorParam, attributeFilter, paramOnMutationType] = [
|
|
67
67
|
selector,
|
|
68
68
|
attributeFilterOrMutationType,
|
|
69
|
-
mutationsTypes
|
|
69
|
+
mutationsTypes,
|
|
70
70
|
].reverse();
|
|
71
71
|
// Set selectorParam to attributeFilter if it is null or undefined
|
|
72
72
|
selectorParam = selectorParam ?? attributeFilter;
|
|
@@ -90,15 +90,20 @@ class DomObserver {
|
|
|
90
90
|
if (paramOnMutationType.onCharacterDataChange) {
|
|
91
91
|
selectorCallback.characterData = (element, mutation, observer) => paramOnMutationType.onCharacterDataChange(element, mutation, observer);
|
|
92
92
|
}
|
|
93
|
+
if (paramOnMutationType.onResize) {
|
|
94
|
+
selectorCallback.characterData = (element, mutation, observer) => paramOnMutationType.onCharacterDataChange(element, mutation, observer);
|
|
95
|
+
}
|
|
93
96
|
if (!selectorParam)
|
|
94
|
-
return console.error(
|
|
97
|
+
return console.error("No selector provided");
|
|
95
98
|
const observerParameters = {
|
|
96
99
|
attributeFilter: attributeFilter ?? this.options.defaultAttributeFilter,
|
|
97
|
-
attributes: Boolean(attributeFilter) ||
|
|
100
|
+
attributes: Boolean(attributeFilter) ||
|
|
101
|
+
Boolean(paramOnMutationType.onAttributesChange),
|
|
98
102
|
childList: Boolean(paramOnMutationType.onChildListChange),
|
|
99
103
|
subtree: this.options.useSubtree &&
|
|
100
|
-
(Boolean(attributeFilter) ||
|
|
101
|
-
|
|
104
|
+
(Boolean(attributeFilter) ||
|
|
105
|
+
Boolean(paramOnMutationType.onChildListChange)),
|
|
106
|
+
characterData: Boolean(paramOnMutationType.onCharacterDataChange),
|
|
102
107
|
};
|
|
103
108
|
// Attach the observer in debounce mode with the specified selector, mutation types, and callback functions
|
|
104
109
|
const debouncedAttach = this.options.debounceTime
|
|
@@ -106,25 +111,25 @@ class DomObserver {
|
|
|
106
111
|
selectors: [
|
|
107
112
|
{
|
|
108
113
|
element: selectorParam,
|
|
109
|
-
mutations: { attributes: attributeFilter }
|
|
110
|
-
}
|
|
114
|
+
mutations: { attributes: attributeFilter },
|
|
115
|
+
},
|
|
111
116
|
],
|
|
112
117
|
selectorCallback: () => selectorCallback,
|
|
113
|
-
observerParameters
|
|
118
|
+
observerParameters,
|
|
114
119
|
}), this.options.debounceTime)
|
|
115
120
|
: () => this.attach({
|
|
116
121
|
selectors: [
|
|
117
122
|
{
|
|
118
123
|
element: selectorParam,
|
|
119
|
-
mutations: { attributes: attributeFilter }
|
|
120
|
-
}
|
|
124
|
+
mutations: { attributes: attributeFilter },
|
|
125
|
+
},
|
|
121
126
|
],
|
|
122
127
|
selectorCallback: () => selectorCallback,
|
|
123
|
-
observerParameters
|
|
128
|
+
observerParameters,
|
|
124
129
|
});
|
|
125
130
|
debouncedAttach();
|
|
126
131
|
return {
|
|
127
|
-
untrack: () => this.detach(selector)
|
|
132
|
+
untrack: () => this.detach(selector),
|
|
128
133
|
};
|
|
129
134
|
}
|
|
130
135
|
debounce(func, wait) {
|
|
@@ -143,15 +148,16 @@ class DomObserver {
|
|
|
143
148
|
return observer;
|
|
144
149
|
}
|
|
145
150
|
catch (error) {
|
|
146
|
-
console.error(
|
|
151
|
+
console.error("Error in observe method", error);
|
|
147
152
|
}
|
|
148
153
|
function callback(mutations) {
|
|
149
154
|
for (const mutation of mutations) {
|
|
150
155
|
if (mutation.type &&
|
|
151
156
|
observedElement.mutationConfig[mutation.type] &&
|
|
152
|
-
typeof observedElement?.mutationCallback ==
|
|
157
|
+
typeof observedElement?.mutationCallback == "function") {
|
|
153
158
|
const callbackResult = observedElement.mutationCallback(observedElement.element, mutations, observer);
|
|
154
|
-
if (callbackResult &&
|
|
159
|
+
if (callbackResult &&
|
|
160
|
+
typeof callbackResult[mutation.type] === "function") {
|
|
155
161
|
callbackResult[mutation.type](observedElement.element, mutation, observer);
|
|
156
162
|
}
|
|
157
163
|
}
|
|
@@ -166,14 +172,15 @@ class DomObserver {
|
|
|
166
172
|
if (element instanceof Node) {
|
|
167
173
|
return [element];
|
|
168
174
|
}
|
|
169
|
-
else if (element instanceof NodeList ||
|
|
175
|
+
else if (element instanceof NodeList ||
|
|
176
|
+
element instanceof HTMLCollection) {
|
|
170
177
|
return Array.from(element);
|
|
171
178
|
}
|
|
172
|
-
else if (typeof element ===
|
|
179
|
+
else if (typeof element === "string") {
|
|
173
180
|
return Array.from(document.querySelectorAll(element));
|
|
174
181
|
}
|
|
175
182
|
else if (Array.isArray(element)) {
|
|
176
|
-
return element.flatMap((sel) => typeof sel ===
|
|
183
|
+
return element.flatMap((sel) => typeof sel === "string"
|
|
177
184
|
? Array.from(document.querySelectorAll(sel))
|
|
178
185
|
: sel instanceof Node
|
|
179
186
|
? [sel]
|
|
@@ -218,7 +225,7 @@ export const htmlDom = instance;
|
|
|
218
225
|
const defaultMutationConfig = {
|
|
219
226
|
attributeFilter: undefined,
|
|
220
227
|
childList: false,
|
|
221
|
-
subtree: false
|
|
228
|
+
subtree: false,
|
|
222
229
|
};
|
|
223
230
|
/**
|
|
224
231
|
* Represents an observed element for the MutationObserverInterface.
|