Fixed issue when adding/removing wrapper elements of ripple elements …

…not properly registering/unregistering ripples.

README.md

@@ -21,7 +21,7 @@ Add the provided script in your HTML body element (or install via `npm`), and us
 
 ``` html
 <!-- Copy and paste the script below into the bottom of your HTML body element -->
-<script type="text/javascript" href="https://unpkg.com/@knekk/[email protected].7/dist/ripples.js"></script>
+<script type="text/javascript" href="https://unpkg.com/@knekk/[email protected].8/dist/ripples.js"></script>
 ```
 
 ### Vue.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knekk/ripples",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Ripple effect - Provides a 'ink ripple' like effect to an interacted element - Simple setup and usage.",
   "repository": {
     "type": "git",

src/index.js

@@ -1,23 +1,33 @@
 import './RippleRegister'
 import Ripple from './Ripple'
 
-// Initally bind all ripples in document
-document.body.querySelectorAll('[data-ripple]').forEach(el => new Ripple(el));
-
 // Observe document for node insertions/removals of ripple instances
 const observer = new MutationObserver((mutationsList) => {
     for (const mutation of mutationsList) {
         if (mutation.type == 'childList') {
-            mutation.addedNodes.forEach(node => node.nodeType === 1 && node.dataset.ripple != undefined && new Ripple(node));
-            mutation.removedNodes.forEach(node => RippleRegister.has(node) && RippleRegister.remove(node));
+            mutation.addedNodes.forEach(node => {
+                if (node.nodeType === 1) {
+                    if (node.dataset.ripple != undefined) new Ripple(node);
+                    else node.querySelectorAll('[data-ripple]').forEach(ripple => new Ripple(ripple));
+                }
+            });
+
+            mutation.removedNodes.forEach(node => {
+                if (node.nodeType === 1) {
+                    if (RippleRegister.has(node)) RippleRegister.remove(node);
+                    else node.querySelectorAll('[data-ripple]').forEach(ripple => RippleRegister.has(ripple) && RippleRegister.remove(ripple));
+                }
+            });
         }
 
         else if (mutation.type == 'attributes') {
-            console.log(mutation);
             mutation.attributeName == 'data-ripple' && RippleRegister.has(mutation.target) && RippleRegister.get(mutation.target).setColor(mutation.target.dataset.ripple);
             mutation.attributeName == 'data-ripple-out' && RippleRegister.has(mutation.target) && RippleRegister.get(mutation.target).setColorOut(mutation.target.dataset.rippleOut);
         }
     }
 });
 
-observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+
+// Initally bind all ripples in document
+document.body.querySelectorAll('[data-ripple]').forEach(el => new Ripple(el));