You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.7 KiB
62 lines
1.7 KiB
7 years ago
|
<!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>
|