refactor: Simplify code. Remove legacy code.

Author: tmcw

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
   },
   rules: {
     "no-console": 0,
-    "prefer-const": 2,
+    "prefer-const": 0,
     "no-var": 2
   }
 };

README.md

@@ -1,5 +1,7 @@
 # Big
 
+[Get started on Glitch](https://glitch.com/edit/#!/remix/clone-from-repo?REPO_URL=https://github.com/tmcw/big.git)
+
 <p align="center">
   <img width="540" src='.github/logo.png' />
 </p>
@@ -231,4 +233,4 @@ At the very least, themes are CSS files. You can pick a theme by picking one in
 - **light**: like dark, but flipped.
 - **white**: instead of tastefully off-white and off-black, this theme uses stark, literal black & white colors.
 
-[![](https://circleci.com/gh/tmcw/big/tree/gh-pages.svg?style=shield&circle-token=2963848e42fe67b8a66a2ad2d6dd99d05bdde6a4 "Circle CI")](https://circleci.com/gh/tmcw/big/tree/gh-pages)
+[![](https://circleci.com/gh/tmcw/big/tree/gh-pages.svg?style=shield&circle-token=2963848e42fe67b8a66a2ad2d6dd99d05bdde6a4 "Circle CI")](https://circleci.com/gh/tmcw/big/tree/gh-pages)

big.js

@@ -1,56 +1,61 @@
-const ASPECT_RATIO =
-  window.BIG_ASPECT_RATIO === undefined ? 1.6 : window.BIG_ASPECT_RATIO;
+let ASPECT_RATIO = window.BIG_ASPECT_RATIO === undefined ? 1.6 : window.BIG_ASPECT_RATIO;
 
 function parseHash() {
   return parseInt(window.location.hash.substring(1), 10);
 }
 
+function emptyNode(node) {
+  while (node.hasChildNodes()) node.removeChild(node.lastChild);
+}
+
 function ce(type, klass = "") {
-  const element = document.createElement(type);
+  let element = document.createElement(type);
   element.className = klass;
   return element;
 }
 
 addEventListener("load", function() {
-  let slideDivs = Array.from(document.querySelectorAll("body > div")),
-    timeoutInterval;
-
-  const forward = () => go(big.current + 1);
-  const reverse = () => go(big.current - 1);
-  const { body } = document,
-    { className: initialBodyClass } = body,
-    notes = slideDivs.map(slide =>
-      Array.from(slide.querySelectorAll("notes"), noteElement => {
-        noteElement.parentNode.removeChild(noteElement);
-        return noteElement.innerHTML.trim();
-      })
-    ),
-    big = {
-      current: -1,
-      mode: "talk",
-      forward: forward,
-      reverse: reverse,
-      go: go,
-      length: slideDivs.length
-    },
-    pc = body.appendChild(ce("div", "presentation-container"));
-
-  slideDivs = slideDivs.map(slide => {
+  let slideDivs = Array.from(document.querySelectorAll("body > div"));
+  let pc = document.body.appendChild(ce("div", "presentation-container"));
+  slideDivs = slideDivs.map((slide, _i) => {
     slide.setAttribute("tabindex", 0);
     slide.classList.add("slide");
 
     if (slide.hasAttribute("data-background-image")) {
-      const preloadLink = document.createElement("link");
+      let preloadLink = document.createElement("link");
       preloadLink.href = slide.getAttribute("data-background-image");
       preloadLink.rel = "preload";
       preloadLink.as = "image";
       document.head.appendChild(preloadLink);
     }
 
-    const sc = pc.appendChild(ce("div", "slide-container"));
+    let sc = pc.appendChild(ce("div", "slide-container"));
     sc.appendChild(slide);
-    return sc;
+    return Object.assign(sc, {
+      _notes: Array.from(slide.querySelectorAll("notes"), noteElement => {
+        noteElement.parentNode.removeChild(noteElement);
+        return noteElement.innerHTML.trim();
+      }),
+      _i
+    });
   });
+  let timeoutInterval,
+    { body } = document,
+    { className: initialBodyClass } = body,
+    big = (window.big = {
+      current: -1,
+      mode: "talk",
+      forward: forward,
+      reverse: reverse,
+      go: go,
+      length: slideDivs.length
+    });
+  function forward() {
+    go(big.current + 1);
+  }
+  function reverse() {
+    go(big.current - 1);
+  }
 
   body.className = "talk-mode " + initialBodyClass;
   window.matchMedia("print").addListener(onPrint);
@@ -60,18 +65,13 @@ addEventListener("load", function() {
   addEventListener("hashchange", onHashChange);
   addEventListener("resize", onResize);
   window.big = big;
-  console.log(
-    "This is a big presentation. You can: \n\n* press j to jump to a slide\n" +
-      "* press p to see the print view\n* press t to go back to the talk view"
-  );
+  console.log("This is a big presentation. You can: \n\n* press j to jump to a slide\n" + "* press p to see the print view\n* press t to go back to the talk view");
   go(parseHash() || big.current);
 
   function useDataImageAsBackground(sc) {
-    const { firstChild } = sc;
+    let { firstChild } = sc;
     if (firstChild.hasAttribute("data-background-image")) {
-      sc.style.backgroundImage = `url("${firstChild.getAttribute(
-        "data-background-image"
-      )}")`;
+      sc.style.backgroundImage = `url("${firstChild.getAttribute("data-background-image")}")`;
       return firstChild.classList.add("imageText");
     }
     sc.style.backgroundImage = "";
@@ -82,59 +82,40 @@ addEventListener("load", function() {
     n = Math.max(0, Math.min(big.length - 1, n));
     if (!force && big.current === n) return;
     big.current = n;
-    const sc = slideDivs[n];
-    const slideDiv = sc.firstChild;
-    if (notes[n].length) {
+    let sc = slideDivs[n],
+      slideDiv = sc.firstChild;
+    if (sc._notes.length) {
       console.group(n);
-      for (const note of notes[n]) {
-        console.log(
-          "%c%s",
-          "padding:5px;font-family:serif;font-size:18px;line-height:150%;",
-          note
-        );
-      }
+      for (let note of sc._notes) console.log("%c%s", "padding:5px;font-family:serif;font-size:18px;line-height:150%;", note);
       console.groupEnd();
     }
     slideDivs.forEach((slide, i) => {
       slide.style.display = i === n ? "flex" : "none";
     });
-    body.className = `talk-mode ${slideDiv.getAttribute("data-bodyclass") ||
-      ""} ${initialBodyClass}`;
+    body.className = `talk-mode ${slideDiv.getAttribute("data-bodyclass") || ""} ${initialBodyClass}`;
     useDataImageAsBackground(sc);
-    if (timeoutInterval !== undefined) {
-      window.clearInterval(timeoutInterval);
-      timeoutInterval = undefined;
-    }
-    if (slideDiv.hasAttribute("data-time-to-next")) {
-      const timeToNext = parseFloat(slideDiv.getAttribute("data-time-to-next"));
-      timeoutInterval = window.setTimeout(forward, timeToNext * 1000);
-    }
-    slideDiv.focus();
+    window.clearInterval(timeoutInterval);
+    if (slideDiv.hasAttribute("data-time-to-next")) timeoutInterval = window.setTimeout(forward, parseFloat(slideDiv.getAttribute("data-time-to-next")) * 1000);
     onResize();
     if (window.location.hash !== n) window.location.hash = n;
-    document.title = slideDiv.textContent || slideDiv.innerText;
+    document.title = slideDiv.textContent;
   }
 
   function resizeTo(sc, width, height) {
-    const slideDiv = sc.firstChild;
-    const padding = Math.min(width * 0.04);
-    let fontSize = height;
+    let slideDiv = sc.firstChild,
+      padding = Math.min(width * 0.04),
+      fontSize = height;
     sc.style.width = `${width}px`;
     sc.style.height = `${height}px`;
     slideDiv.style.padding = `${padding}px`;
-    if (getComputedStyle(slideDiv).display === "grid")
-      slideDiv.style.height = `${height - padding * 2}px`;
-    for (const step of [100, 50, 10, 2]) {
+    if (getComputedStyle(slideDiv).display === "grid") slideDiv.style.height = `${height - padding * 2}px`;
+    for (let step of [100, 50, 10, 2]) {
       for (; fontSize > 0; fontSize -= step) {
         slideDiv.style.fontSize = `${fontSize}px`;
         if (
           slideDiv.scrollWidth <= width &&
           slideDiv.offsetHeight <= height &&
-          Array.from(slideDiv.querySelectorAll("div")).every(
-            elem =>
-              elem.scrollWidth <= elem.clientWidth &&
-              elem.scrollHeight <= elem.clientHeight
-          )
+          Array.from(slideDiv.querySelectorAll("div")).every(elem => elem.scrollWidth <= elem.clientWidth && elem.scrollHeight <= elem.clientHeight)
         ) {
           break;
         }
@@ -143,31 +124,24 @@ addEventListener("load", function() {
     }
   }
 
-  function emptyNode(node) {
-    while (node.hasChildNodes()) node.removeChild(node.lastChild);
-  }
-
   function onPrint() {
     if (big.mode === "print") return;
     body.className = `print-mode ${initialBodyClass}`;
     emptyNode(pc);
-    slideDivs.forEach((sc, i) => {
-      const subContainer = pc.appendChild(ce("div", "sub-container")),
-        sbc = subContainer.appendChild(
-          ce("div", sc.firstChild.getAttribute("data-bodyclass") || "")
-        );
+    for (let sc of slideDivs) {
+      let subContainer = pc.appendChild(ce("div", "sub-container")),
+        sbc = subContainer.appendChild(ce("div", sc.firstChild.getAttribute("data-bodyclass") || ""));
       sbc.appendChild(sc);
       sc.style.display = "flex";
       useDataImageAsBackground(sc);
       resizeTo(sc, 512, 320);
-      if (notes[i].length) {
-        const notesUl = subContainer.appendChild(ce("ul", "notes-list"));
-        for (const note of notes[i]) {
-          const li = notesUl.appendChild(ce("li"));
-          li.innerText = note;
-        }
+      if (!sc._notes.length) return;
+      let notesUl = subContainer.appendChild(ce("ul", "notes-list"));
+      for (let note of sc._notes) {
+        let li = notesUl.appendChild(ce("li"));
+        li.innerText = note;
       }
-    });
+    }
     big.mode = "print";
   }
 
@@ -176,29 +150,25 @@ addEventListener("load", function() {
     big.mode = "talk";
     body.className = `talk-mode ${initialBodyClass}`;
     emptyNode(pc);
-    for (const sc of slideDivs) pc.appendChild(sc);
-    let goTo = big.current;
-    if (typeof i === "number") goTo = i;
-    go(goTo, true);
+    for (let sc of slideDivs) pc.appendChild(sc);
+    go(i, true);
   }
 
   function onJump() {
     if (big.mode === "jump") return;
     big.mode = "jump";
     body.className = "jump-mode " + initialBodyClass;
     emptyNode(pc);
-    slideDivs.forEach((sc, i) => {
-      const subContainer = pc.appendChild(ce("div", "sub-container"));
+    slideDivs.forEach(sc => {
+      let subContainer = pc.appendChild(ce("div", "sub-container"));
       subContainer.addEventListener("keypress", e => {
         if (e.key !== "Enter") return;
         subContainer.removeEventListener("click", onClickSlide);
         e.stopPropagation();
         e.preventDefault();
-        onTalk(i);
+        onTalk(sc._i);
       });
-      const sbc = subContainer.appendChild(
-        ce("div", sc.firstChild.getAttribute("data-bodyclass") || "")
-      );
+      let sbc = subContainer.appendChild(ce("div", sc.firstChild.getAttribute("data-bodyclass") || ""));
       sbc.appendChild(sc);
       sc.style.display = "flex";
       useDataImageAsBackground(sc);
@@ -207,7 +177,7 @@ addEventListener("load", function() {
         subContainer.removeEventListener("click", onClickSlide);
         e.stopPropagation();
         e.preventDefault();
-        onTalk(i);
+        onTalk(sc._);
       }
       subContainer.addEventListener("click", onClickSlide);
     });
@@ -236,17 +206,17 @@ addEventListener("load", function() {
         onPrint();
         break;
       case "t":
-        onTalk();
+        onTalk(big.current);
         break;
       case "j":
         onJump();
         break;
     }
     if (big.mode !== "jump") return;
-    const { activeElement } = document;
+    let { activeElement } = document;
     if (activeElement && activeElement.classList.contains("slide")) {
-      const startIndex = slideDivs.indexOf(activeElement.parentNode);
-      const columnIndexes = getColumnIndexes(activeElement);
+      let startIndex = slideDivs.indexOf(activeElement.parentNode),
+        columnIndexes = getColumnIndexes(activeElement);
       jumpFocus(
         e,
         {
@@ -262,8 +232,8 @@ addEventListener("load", function() {
   }
 
   function getColumnIndexes(activeElement) {
-    const { left } = activeElement.getBoundingClientRect();
-    let lastIndex,
+    let { left } = activeElement.getBoundingClientRect(),
+      lastIndex,
       foundSelf = false;
     for (let i = 0; i < slideDivs.length; i++) {
       if (slideDivs[i].firstChild.getBoundingClientRect().left === left) {
@@ -279,24 +249,25 @@ addEventListener("load", function() {
   }
 
   function jumpFocus(e, i) {
-    if (slideDivs[i]) {
-      e.preventDefault();
-      slideDivs[i].firstChild.focus();
-    }
+    if (!slideDivs[i]) return;
+    e.preventDefault();
+    slideDivs[i].firstChild.focus();
   }
 
   function onTouchStart(e) {
     if (big.mode !== "talk") return;
-    const { pageX: startingPageX } = e.changedTouches[0];
-    document.addEventListener("touchend", onTouchEnd, { once: true });
-
-    function onTouchEnd(e2) {
-      const distanceTraveled = e2.changedTouches[0].pageX - startingPageX;
-      // Don't navigate if the person didn't swipe by fewer than 4 pixels
-      if (Math.abs(distanceTraveled) < 4) return;
-      if (distanceTraveled < 0) forward();
-      else reverse();
-    }
+    let { pageX: startingPageX } = e.changedTouches[0];
+    document.addEventListener(
+      "touchend",
+      function(e2) {
+        let distanceTraveled = e2.changedTouches[0].pageX - startingPageX;
+        // Don't navigate if the person didn't swipe by fewer than 4 pixels
+        if (Math.abs(distanceTraveled) < 4) return;
+        if (distanceTraveled < 0) forward();
+        else reverse();
+      },
+      { once: true }
+    );
   }
 
   function onHashChange() {

index.html

@@ -5,12 +5,12 @@
   <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
   <title>Big</title>
   <link href='big.css' rel='stylesheet' type='text/css' />
-  <style>
-    .new-shiny { background: #aaaaaa; }
-  </style>
   <script src='big.js'></script>
 </head>
 <body class='light'>
-  <div>Your presentation goes here</div>
+  <div>
+    Your presentation goes here
+    <notes>Speakers notes go here.</notes>
+  </div>
 </body>
 </html>