export class Header extends HTMLElement {
icons = {
menu: ``,
dot: ``,
edit: ``,
check: ``,
}
constructor() {
super()
this.editing = false
this.attachShadow({mode: 'open'})
this.addButton(this.icons.menu, 'nav', () => {
this.menu.pages = this.getPages()
this.menuPanel.classList.add('open')
this.overlay.classList.add('open')
})
this.addDivider()
this.editBtn = this.addButton(this.editIcon, 'edit', () => {
this.dispatchEvent(new CustomEvent(
'click-edit', {bubbles: true}
))
})
this.addButton(this.icons.dot, 'page', () => {
this.pageMenuPanel.classList.add('open')
this.overlay.classList.add('open')
})
this.addMenu()
this.addPageMenu()
}
addButton(html, cls, onClick) {
const b = document.createElement('button')
b.innerHTML = html
b.classList.add(cls)
this.shadowRoot.appendChild(b)
if (onClick) {
b.addEventListener('click', onClick)
}
return b
}
addDivider() {
const d = document.createElement('div')
d.classList.add('divider')
this.shadowRoot.appendChild(d)
}
addMenu() {
this.overlay = document.createElement('div')
this.overlay.classList.add('overlay')
this.shadowRoot.appendChild(this.overlay)
this.menuPanel = document.createElement('div')
this.menuPanel.classList.add('menu')
this.menu = document.createElement('m-nav-menu')
this.menuPanel.appendChild(this.menu)
this.shadowRoot.appendChild(this.menuPanel)
this.overlay.addEventListener('click', () => {
this.close()
})
this.menu.addEventListener('close-menu', () => {
this.close()
})
}
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-menu', () => {
this.close()
})
this.pageMenuPanel = document.createElement('div')
this.pageMenuPanel.appendChild(this.pageMenu)
this.pageMenuPanel.classList.add('page-menu')
this.shadowRoot.appendChild(this.pageMenuPanel)
}
close() {
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)
}
connectedCallback() {
const style = document.createElement('style')
style.textContent = `
:host {
width: 100%;
background: #111;
color: #ddd;
display: flex;
flex-direction: row;
}
button {
border: none;
background: inherit;
color: inherit;
font-size: 24px;
width: 30px;
}
div.divider {
flex-grow: 1;
}
div.menu {
position: fixed;
top: 0;
left: -90vw;
height: 100vh;
width: 90vw;
background-color: #fff;
transition: left .25s ease-in-out;
}
div.menu.open {
left: 0;
}
div.overlay {
position: fixed;
top: 0;
left: -100vw;
height: 100vh;
width: 100vw;
opacity: 0%;
transition: opacity .25s ease-in;
background: #777;
}
div.overlay.closing {
left: 0;
}
div.overlay.open {
left: 0;
opacity: 15%;
}
button.page {
position: relative;
}
div.page-menu {
position: fixed;
top: 34px;
right: 0;
display: flex;
align-items: flex-end;
margin-right: 0;
display: none;
}
div.page-menu.open {
display: block;
}
svg {
width: 20px;
height: 20px;
}
`
this.shadowRoot.append(style)
}
getPages() {
return Object.keys(localStorage).slice().sort()
}
set editing(value) {
this._editing = value
if (this.editBtn) {
this.editBtn.innerHTML = this.editIcon
}
}
get editing() {
return this._editing
}
get editIcon() {
return this.editing ? this.icons.check : this.icons.edit
}
}