diff --git a/components/header.js b/components/header.js index 21a7daf..06f9be1 100644 --- a/components/header.js +++ b/components/header.js @@ -59,8 +59,29 @@ export class Header extends HTMLElement { } addPageMenu() { + this.pageMenu = document.createElement('m-page-menu') + this.pageMenu.add('download', () => { + const text = localStorage.getItem(this.path) + const sp = this.path.split('/') + const filename = sp[sp.length - 1] + const el = document.createElement('a') + el.setAttribute( + 'href', + 'data:text/plain;charset=utf-8,' + + encodeURIComponent(text) + ) + el.setAttribute('download', filename) + el.style.display = 'none' + this.shadowRoot.appendChild(el) + el.click() + this.shadowRoot.removeChild(el) + }) + this.pageMenu.addEventListener('close', () => { + this.close() + }) this.pageMenuPanel = document.createElement('div') - this.pageMenuPanel.classList.add('pageMenu') + this.pageMenuPanel.appendChild(this.pageMenu) + this.pageMenuPanel.classList.add('page-menu') this.shadowRoot.appendChild(this.pageMenuPanel) } @@ -68,6 +89,7 @@ export class Header extends HTMLElement { this.overlay.classList.add('closing') this.overlay.classList.remove('open') this.menuPanel.classList.remove('open') + this.pageMenuPanel.classList.remove('open') setTimeout(() => { this.overlay.classList.remove('closing') }, 250) @@ -122,15 +144,19 @@ export class Header extends HTMLElement { left: 0; opacity: 15%; } - button.pageButton { + button.page { position: relative; } - div.pageMenuPanel { - bottom: 0px: - right: 0px; + div.page-menu { + position: fixed; + top: 28px; + right: 0; + display: flex; + align-items: flex-end; + margin-right: 0; display: none; } - div.pageMenuPanel.open { + div.page-menu.open { display: block; } `