diff --git a/assets/step.css b/assets/step.css index c71b651..3036130 100644 --- a/assets/step.css +++ b/assets/step.css @@ -3,17 +3,19 @@ body { display: flex; + box-sizing: border-box; margin: 0; padding: 0; } #app { - flex: 1; + flex: 1 1 40%; padding: 50px; } #markdownReadme { - flex: 1; + box-sizing: border-box; + flex: 1 1 60%; background: #efefef; padding: 50px; margin: 0 auto; diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts index 73f9286..8679add 100644 --- a/markdownReadme/src/index.ts +++ b/markdownReadme/src/index.ts @@ -32,13 +32,32 @@ async function run() { }); } - // Set the renderer to marked. - // marked.setOptions({ renderer }); - if (div) { const response = await fetch('../README.md'); const markdownText = await response.text(); div.innerHTML = marked(markdownText, { baseUrl: '../' }); + restoreScroll(div); + } + + div.addEventListener('scroll', evt => { + saveScroll(div); + }); + + window.addEventListener('resize', evt => { + saveScroll(div); + }); +} + +const scrollKey = `${window.location.pathname}_scrolltop`; + +function saveScroll(div: HTMLElement) { + window.localStorage.setItem(scrollKey, String(div.scrollTop)); +} + +function restoreScroll(div: HTMLElement) { + const scrollTop = window.localStorage.getItem(scrollKey); + if (scrollTop) { + div.scrollTop = parseInt(scrollTop); } } diff --git a/step2-08/demo/src/components/TodoHeader.tsx b/step2-08/demo/src/components/TodoHeader.tsx index 280baff..35f0623 100644 --- a/step2-08/demo/src/components/TodoHeader.tsx +++ b/step2-08/demo/src/components/TodoHeader.tsx @@ -29,7 +29,7 @@ class TodoHeader extends React.Component { - + Add