mutation observer

shama · shama · commit 1b6e42fc4d63 · 2018-05-14T15:03:18.000-07:00
diff --git a/javascript-mutation-observer/README.md b/javascript-mutation-observer/README.md
@@ -0,0 +1,10 @@
+# JavaScript Mutation Observer
+
+> [https://youtu.be/Hn2zzi_lquA](https://youtu.be/Hn2zzi_lquA)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-mutation-observer/bears.js b/javascript-mutation-observer/bears.js
@@ -0,0 +1,13 @@
+const theOnlyBearsIKnow = ['Polar', 'Brown', 'Grizzly']
+
+setTimeout(function addBear () {
+  const bears = document.querySelector('ul.bears')
+  const bear = document.createElement('li')
+  bear.textContent = theOnlyBearsIKnow[parseInt(Math.random() * theOnlyBearsIKnow.length, 10)]
+  bears.appendChild(bear)
+}, Math.random() * 2000)
+
+setTimeout(function removeBear () {
+  const bears = document.querySelector('ul.bears')
+  bears.removeChild(bears.querySelector('li'))
+}, Math.random() * 2000 + 2000)
diff --git a/javascript-mutation-observer/index.html b/javascript-mutation-observer/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>MutationObserver</title>
+</head>
+<body>
+  <ul class="bears">
+  </ul>
+
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/javascript-mutation-observer/index.js b/javascript-mutation-observer/index.js
@@ -0,0 +1,40 @@
+require('./bears.js')
+require('./sizer.js')
+
+const observer = new MutationObserver(function (mutations) {
+  mutations.forEach(function (mutation) {
+    if (mutation.attributeName === 'style') {
+      centerModal()
+    }
+    if (mutation.addedNodes.length) {
+      console.log('Added', mutation.addedNodes[0])
+    }
+    if (mutation.removedNodes.length) {
+      console.log('Removed', mutation.removedNodes[0])
+    }
+  })
+})
+const bears = document.querySelector('ul.bears')
+observer.observe(bears, {
+  childList: false,
+  attributes: true
+})
+
+function centerModal () {
+  const width = parseInt(bears.offsetWidth, 10)
+  const height = parseInt(bears.offsetHeight, 10)
+  Object.assign(bears.style, {
+    top: '50%',
+    left: '50%',
+    marginTop: -(height / 2) + 'px',
+    marginLeft: -(width / 2) + 'px',
+  })
+}
+
+// const poller = setInterval(function () {
+//   const bear = document.querySelector('ul.bears li')
+//   if (bear) {
+//     console.log(bear)
+//     clearInterval(poller)
+//   }
+// }, 1000)
diff --git a/javascript-mutation-observer/package.json b/javascript-mutation-observer/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "javascript-mutation-observer",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js:bundle.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.0"
+  }
+}
diff --git a/javascript-mutation-observer/sizer.js b/javascript-mutation-observer/sizer.js
@@ -0,0 +1,13 @@
+setInterval(function sizer () {
+  const bears = document.querySelector('ul.bears')
+  Object.assign(bears.style, {
+    position: 'absolute',
+    border: '1px solid #ddd',
+    width: (Math.random() * 200) + 'px',
+    height: (Math.random() * 200) + 'px',
+    boxShadow: '0px 0px 5px 0px rgba(0,0,0,.3)',
+    overflow: 'hidden',
+    padding: '20px',
+    listStyle: 'none'
+  })
+}, 1000)
