npm/now-and-later
2
0
Fork 0
Code Pull requests Releases Packages 1 Activity

Compare commits

base: npm:main
Branches Tags
npm:main
npm:1.0.1
npm:1.0.0
..
compare: npm:1.0.1
Branches Tags
npm:main
npm:1.0.1
npm:1.0.0

No commits in common. "main" and "1.0.1" have entirely different histories.
main ... 1.0.1

2 changed files with 8 additions and 11 deletions
Show stats Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@digicomp/now-and-later", "name": "@digicomp/now-and-later",
"version": "1.0.3", "version": "1.0.1",
"description": "an easy API for DOM MutationObserver", "description": "an easy API for DOM MutationObserver",
"main": "src/nowAndLater.js", "main": "src/nowAndLater.js",
"scripts": { "scripts": {

17
src/nowAndLater.js
View file

@ -16,11 +16,7 @@ export default function nowAndLater(selector, callback)
const nodes = document.querySelectorAll(selector); const nodes = document.querySelectorAll(selector);
const id = Date.now() + '_' + lateInits.length; const id = Date.now() + '_' + lateInits.length;
const wrappedCallback = (node) => { const wrappedCallback = (node) => {
if (node.dataset.nowAndLater === undefined) { node.dataset['nowAndLater' + id] = '';
node.dataset.nowAndLater = id;
} else {
node.dataset.nowAndLater += ',' + id;
}
callback(node, selector); callback(node, selector);
}; };
if (nodes.length > 0) { if (nodes.length > 0) {
@ -39,15 +35,16 @@ const observer = new MutationObserver(function (mutationsList)
if (addedNode['querySelector'] === undefined) { // lets filter out text and comment nodes if (addedNode['querySelector'] === undefined) { // lets filter out text and comment nodes
continue; continue;
} }
const selector = lateInit.selector + `:not([data-now-and-later~="${lateInit.id}"])`; const selector = lateInit.selector + ':not([data-now-and-later' + lateInit.id + '])';
// If the added node matches itself, it will not be found by querySelectorAll, so we have to check first // If the added node matches itself, it will not be found by querySelectorAll, so we have to check first
if (addedNode.matches(selector)) { if (addedNode.matches(selector)) {
lateInit.callback(addedNode); lateInit.callback(addedNode);
} }
const childNodes = addedNode.querySelectorAll(selector); // NOTE: the added not selector prevents double calls
[...childNodes].forEach(node => { const nodes = addedNode.querySelectorAll(selector);
lateInit.callback(node); if (nodes.length > 0) {
}); [...nodes].forEach(node => lateInit.callback(node));
}
} }
} }
} }