diff --git a/README.md b/README.md index 5eee0eacb..5135a2ee6 100644 --- a/README.md +++ b/README.md @@ -163,6 +163,7 @@ average(1, 2, 3); * [`hasClass`](#hasclass) * [`hide`](#hide) * [`httpsRedirect`](#httpsredirect) +* [`observeMutations`](#observemutations-) * [`off`](#off) * [`on`](#on) * [`onUserInputChange`](#onuserinputchange-) @@ -2228,6 +2229,48 @@ httpsRedirect(); // If you are on http://mydomain.com, you are redirected to htt
[⬆ Back to top](#table-of-contents) +### observeMutations ![advanced](/advanced.svg) + +Returns a new MutationObserver and runs the provided callback for each mutation on the specified element. + +Use a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe mutations on the given element. +Use `Array.forEach()` to run the callback for each mutation that is observed. +Omit the third argument, `options`, to use the default [options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) (all `true`). + +```js +const observeMutations = (element, callback, options) => { + const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m))); + observer.observe( + element, + Object.assign( + { + childList: true, + attributes: true, + attributeOldValue: true, + characterData: true, + characterDataOldValue: true, + subtree: true + }, + options + ) + ); + return observer; +}; +``` + +
+Examples + +```js +const obs = observeMutations(document, console.log); // Logs all mutations that happen on the page +obs.disconnect(); // Disconnects the observer and stops logging mutations on the page +``` + +
+ +
[⬆ Back to top](#table-of-contents) + + ### off Removes an event listener from an element. diff --git a/docs/index.html b/docs/index.html index 23b326733..205434aa1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -50,7 +50,7 @@ scrollToTop(); } }, false); - }

logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Adapter

call

Given a key and a set of arguments, call them when given a context. Primarily useful in composition.

Use a closure to call a stored key with stored arguments.

const call = (key, ...args) => context => context[key](...args);
+      }
logo 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
 
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
 
Promise.resolve([1, 2, 3])
   .then(call('map', x => 2 * x))
   .then(console.log); //[ 2, 4, 6 ]
@@ -448,6 +448,26 @@ hub.offif (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
 };
 
httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com
+
observeMutationsadvanced
Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.
Use a MutationObserver to observe mutations on the given element. Use Array.forEach() to run the callback for each mutation that is observed. Omit the third argument, options, to use the default options (all true).
const observeMutations = (element, callback, options) => {
+  const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
+  observer.observe(
+    element,
+    Object.assign(
+      {
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        characterData: true,
+        characterDataOldValue: true,
+        subtree: true
+      },
+      options
+    )
+  );
+  return observer;
+};
+
const obs = observeMutations(document, console.log); // Logs all mutations that happen on the page
+obs.disconnect(); // Disconnects the observer and stops logging mutations on the page
 
off
Removes an event listener from an element.
Use EventTarget.removeEventListener() to remove an event listener from an element. Omit the fourth argument opts to use false or specify it based on the options used when the event listener was added.
const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
 
const fn = () => console.log('!');
 document.body.addEventListener('click', fn);
diff --git a/snippets/observeMutations.md b/snippets/observeMutations.md
index 7af06f90c..9ccc56f43 100644
--- a/snippets/observeMutations.md
+++ b/snippets/observeMutations.md
@@ -9,16 +9,22 @@ Omit the third argument, `options`, to use the default [options](https://develop
 ```js
 const observeMutations = (element, callback, options) => {
   const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
-  observer.observe(element, Object.assign({
-    childList: true,
-    attributes: true,
-    attributeOldValue: true,
-    characterData: true,
-    characterDataOldValue: true,
-    subtree: true
-  }, options)); 
+  observer.observe(
+    element,
+    Object.assign(
+      {
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        characterData: true,
+        characterDataOldValue: true,
+        subtree: true
+      },
+      options
+    )
+  );
   return observer;
-}
+};
 ```
 
 ```js