misc: restructure contents

2025-07-28 12:43:12 +08:00 · 2019-07-14 18:52:41 -07:00
parent 2e84bea6ba
commit c19c9626d1
83 changed files with 373 additions and 344 deletions
--- a/experimental/domain/async-loading/index.html
+++ b/experimental/domain/async-loading/index.html
@ -0,0 +1,61 @@
+<!doctype html>
+<head>
+  <style>
+    body {
+      font-family: 'Helvetica', sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <div id="chapters">
+    </div>
+  </div>
+  <script>
+    (() => {
+      const DOM = {
+        $chapters: document.getElementById('chapters'),
+      };
+      const URL = 'https://raw.githubusercontent.com/googlesamples/web-fundamentals/gh-pages/fundamentals/getting-started/primers';
+
+      function getJSON(url) {
+        return new Promise((resolve, reject) => {
+          const req = new XMLHttpRequest();
+          req.open('GET', url);
+          req.onload = () => {
+            if (req.status === 200) {
+              resolve(JSON.parse(req.response));
+              return;
+            }
+            reject(req.responseText);
+          }
+          req.onerror = (err) => {
+            reject(err);
+          }
+          req.send();
+        });
+      }
+
+      function init() {
+        getJSON(`${URL}/story.json`).then(story => {
+          const $heading = document.createRange().createContextualFragment(story.heading);
+          DOM.$chapters.before($heading);
+          return Promise.all(story.chapterUrls.map((url, index) => {
+            return getJSON(`${URL}/${url}`);
+          }));
+        }).then(chapters => {
+          const $chapters = document.createDocumentFragment();
+          chapters.forEach(chapter => {
+            $chapters.appendChild(document.createRange().createContextualFragment(chapter.html));
+          });
+          DOM.$chapters.appendChild($chapters);
+        }).catch(err => {
+          console.warn(err);
+        });
+      }
+
+      document.addEventListener('DOMContentLoaded', init);
+    })();
+  </script>
+</body>
+</html>