learninglab-dev · 1aurend · Jun 18, 2020 · Jun 22, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}
diff --git a/docs/notes/add-babel.md b/docs/notes/add-babel.md
@@ -0,0 +1,18 @@
+# Babel
+
+## LD Steps
+
+1. `npm i @babel/core @babel/present-env`
+2. `npm i --save-dev @babel/node`
+3. add .babelrc
+```json
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}
+```
+4. update `devstart` script to `nodemon --exec babel-node ./bin/www`
+
+## Resources
+
+[https://www.robinwieruch.de/minimal-node-js-babel-setup](https://www.robinwieruch.de/minimal-node-js-babel-setup)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,19 @@
   "private": true,
   "scripts": {
     "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www"
+    "devstart": "nodemon --exec babel-node ./bin/www"
   },
   "dependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
     "cookie-parser": "~1.4.4",
     "debug": "~2.6.9",
     "ejs": "~2.6.1",
     "express": "~4.16.1",
     "http-errors": "~1.6.3",
     "morgan": "~1.9.1"
+  },
+  "devDependencies": {
+    "@babel/node": "^7.10.1"
   }
 }
diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/public/people/.DS_Store b/public/people/.DS_Store
diff --git a/public/people/ld/.DS_Store b/public/people/ld/.DS_Store
diff --git a/public/people/ld/chaining.js b/public/people/ld/chaining.js
@@ -0,0 +1,10 @@
+
+const obj = {
+  blue: true,
+  orange: false
+}
+
+if (!obj.green?.test) {
+  const element = document.getElementById('babel-test')
+  element.textContent = 'green'
+}
diff --git a/public/people/ld/index.html b/public/people/ld/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="index.css"/>
+</head>
+<body>
+  <div id="container">
+    <h1>ld testing things</h1>
+    <ul>
+      <li>
+        <a href="scrollytelling/sticky-overlay.html">remake of Scrollama's sticky overlay demo</a>
+        <ul>
+          <li>
+            <a href="../../reference/scrollytelling/scrollama/sticky-overlay/index.html">original</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="observable-test.html">import observables</a>
+      </li>
+    </ul>
+    <h3>if this says hello, we're importing script modules</h3>
+    <div id="module-test"></div>
+    <h3>if this says green, optional chaining works</h3>
+    <div id="babel-test"></div>
+  </div>
+  <script src="module.js" type="module"></script>
+  <script src="chaining.js"></script>
+</body>
+</html>
diff --git a/public/people/ld/module.js b/public/people/ld/module.js
@@ -0,0 +1,4 @@
+import sayHello from './test.js'
+
+const element = document.getElementById('module-test')
+sayHello(element)
diff --git a/public/people/ld/observable-test.html b/public/people/ld/observable-test.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+<head>
+  <link rel="stylesheet" href="observable.css"/>
+</head>
+<body>
+  <div id="observablehq-5dbc9487"></div>
+  <script type="module">
+    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
+    import define from "https://api.observablehq.com/d/26fd41dc443d772f.js?v=3";
+    const inspect = Inspector.into("#observablehq-5dbc9487");
+    (new Runtime).module(define, name => name === "chart" ? inspect() : undefined);
+  </script>
+  <div id="observablehq-fc71ba22"></div>
+  <script type="module">
+  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
+  import define from "https://api.observablehq.com/@d3/learn-d3-interaction.js?v=3";
+  const inspect = Inspector.into("#observablehq-fc71ba22");
+  (new Runtime).module(define, name => name === "viewof hover" ? inspect() : undefined);
+  </script>
+</body>
+</html>
diff --git a/public/people/ld/observable.css b/public/people/ld/observable.css
@@ -0,0 +1,10 @@
+#observablehq-5dbc9487 {
+  width: 70vw;
+  position: relative;
+  top: 10vh;
+  margin-bottom: 20vh;
+}
+
+#observablehq-fc71ba22 {
+  width: 80vw;
+}
diff --git a/public/people/ld/scrollytelling/sticky-overlay.css b/public/people/ld/scrollytelling/sticky-overlay.css
@@ -0,0 +1,79 @@
+#background {
+  background: white;
+  min-width: 100vw;
+  min-height: 270vh;
+}
+
+#target {
+  border-top: 5px dashed black;
+  position: fixed;
+  top: 25%;
+  width: 100vw;
+  z-index: 4;
+}
+
+#top-padding {
+  position: relative;
+  top: 0;
+  height: 60vh;
+}
+
+#bottom-padding {
+  position: relative;
+  bottom: 0;
+  height: 80vh;
+}
+
+#sticky {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 20%;
+  height: 50vh;
+  width: 90vw;
+  margin-left: 5vw;
+  margin-right: 5vw;
+  background: #3D4849;
+  z-index: 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+}
+
+ h1 {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 10em;
+  color: white;
+}
+
+.box {
+  height: 30vh;
+  width: 40vw;
+  left: 30vw;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  transition: left .5s ease-in;
+  z-index: 1;
+  position: absolute;
+  opacity: .5;
+}
+
+#one {
+  top: 120vh;
+  background: gray;
+}
+
+#two {
+  top: 155vh;
+  background: gray;
+  height: 50vh;
+}
+
+#three {
+  top: 210vh;
+  background: gray;
+  height: 60vh;
+}
diff --git a/public/people/ld/scrollytelling/sticky-overlay.html b/public/people/ld/scrollytelling/sticky-overlay.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <link rel="stylesheet" href="sticky-overlay.css"/>
+  </head>
+  <body>
+    <div id="background">
+      <div id="top-padding"></div>
+      <div id="sticky">
+        <h1 id="label-num">0</h1>
+      </div>
+      <div id="target">
+        <p>target line</p>
+      </div>
+      <div class="box" id="one"></div>
+      <div class="box" id="two"></div>
+      <div class="box" id="three"></div>
+    </div>
+      <div id="bottom-padding"></div>
+    <script>
+      window.addEventListener('scroll', () => {
+        const target = window.innerHeight/4
+        const boxes = document.getElementsByClassName('box')
+        const num = document.getElementById('label-num')
+        Array.prototype.forEach.call(boxes, (box, i) => {
+          const top = box.getBoundingClientRect().top
+          const bottom = box.getBoundingClientRect().bottom
+          if (target > top && bottom > target) {
+            box.setAttribute('style', 'background:yellow;')
+            num.innerHTML = i+1
+            return
+          }
+          box.setAttribute('style', 'background:gray')
+        })
+        const zero = document.getElementById('one').getBoundingClientRect().top
+        if (target < zero) {
+          num.innerHTML = 0
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/public/people/ld/test.js b/public/people/ld/test.js
@@ -0,0 +1,4 @@
+export default function test(element) {
+  element.textContent = 'hello'
+  console.log('here')
+}