generated from shgysk8zer0/npm-template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
attributeObserver.js
163 lines (145 loc) · 5.17 KB
/
attributeObserver.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
const registry = new WeakMap();
const observer = new MutationObserver(records => {
const timestamp = performance.now();
for (const { target, attributeName: name, oldValue } of records) {
if (registry.has(target)) {
const map = registry.get(target);
if (map.has(name)) {
const newValue = target.getAttribute(name);
const args = Object.freeze({ target, name, oldValue, newValue, timestamp });
map.get(name).forEach(callback => callback.call(target, args));
}
}
}
});
export function observeAttribute(target, attributeName, callback, { signal, base = document.body } = {}) {
if (typeof target === 'string') {
observeAttribute(base.querySelector(target), attributeName, callback, { signal });
} else if (! (target instanceof Element)) {
throw new TypeError('Target must be an element.');
} else if (typeof attributeName !== 'string' || attributeName.length === 0) {
throw new TypeError('Attribute name must be a non-empty string.');
} else if (! (callback instanceof Function)) {
throw new TypeError('Callback must be a function.');
} else if (signal instanceof AbortSignal && signal.aborted) {
throw signal.reason;
} else {
let addedAttr = false;
if (! registry.has(target)) {
// New target & new Attribute
registry.set(target, new Map([[attributeName, new Set([callback])]]));
addedAttr = true;
} else {
registry.get(target).emplace(attributeName, {
insert: () => {
// New attribute not already observed
addedAttr = true;
return new Set([callback]);
},
update: callbacks => callbacks.add(callback),
});
}
// Only touch observer if target or attributes changed
if (addedAttr) {
observer.observe(target, {
attributes: true,
attributeFilter: Array.from(registry.get(target).keys()),
attributeOldValue: true,
});
}
if (signal instanceof AbortSignal) {
signal.addEventListener('abort', () => {
unobserveAttribute(target, attributeName, callback);
}, { once: true });
}
}
}
export function observeAttributes(target, attrs,{ base = document.body, signal } = {}) {
if (typeof target === 'string') {
observeAttributes(base.querySelector(target), attrs, { signal });
} else if (! (target instanceof Element)) {
throw new TypeError('Target must be an element.');
} else if (typeof attrs !== 'object' || attrs === null) {
throw new TypeError('Attrs must be a `{ attribute: callback } object.');
} else if (signal instanceof AbortSignal && signal.aborted) {
throw signal.reason;
} else {
let addedAttr = false;
Object.entries(attrs).forEach(([attributeName, callback]) => {
if (typeof attributeName !== 'string' || attributeName.length === 0) {
throw new TypeError('Attribute name must be a non-empty string.');
} else if (! (callback instanceof Function)) {
throw new TypeError('Callback must be a function.');
} else if (! registry.has(target)) {
// New target & new Attribute
registry.set(target, new Map([[attributeName, new Set([callback])]]));
addedAttr = true;
} else {
registry.get(target).emplace(attributeName, {
insert: () => {
// New attribute not already observed
addedAttr = true;
return new Set([callback]);
},
update: (callbacks) => callbacks.add(callback),
});
}
});
// Only touch observer if target or attributes changed
if (addedAttr) {
observer.observe(target, {
attributes: true,
attributeFilter: Array.from(registry.get(target).keys()),
attributeOldValue: true,
});
}
if (signal instanceof AbortSignal) {
signal.addEventListener('abort', () => {
Object.entries(attrs).forEach(([attributeName, callback]) => {
unobserveAttribute(target, attributeName, callback);
});
}, { once: true });
}
}
}
export function unobserveAttribute(target, attributeName, callback, { base = document.body } = {}) {
if (typeof target === 'string') {
return unobserveAttribute(base.querySelector(target), attributeName, callback);
} else if (! (target instanceof Element)) {
throw new TypeError('Target must be an element.');
} else if (typeof attributeName !== 'string' || attributeName.length === 0) {
throw new TypeError('Attribute name must be a non-empty string.');
} else if (! (callback instanceof Function)) {
throw new TypeError('Callback must be a function.');
} else if (! registry.has(target)) {
return false;
} else {
const registered = registry.get(target);
if (! registered.has(attributeName)) {
return false;
} else {
// Callbacks - [[attr, callback], [attr, callback], ...]
const callbacks = registered.get(attributeName);
if (! callbacks.has(callback)) {
return false;
} else if (callbacks.size !== 1) {
// Deleting callback leaves non-empty set of callbacks
callbacks.delete(callback);
return true;
} else {
// No callbacks will remain for attr, so change the observed attributes
registered.delete(attributeName);
observer.observe(target, {
attributes: true,
attributeFilter: Array.from(registered.keys()),
attributeOldValue: true,
});
// If there are no attributes to observe, remove the target from reg
if (registered.size === 0) {
registry.delete(target);
}
return true;
}
}
}
}