diff --git a/components/header.js b/components/header.js index acd274d..8b3d6fa 100644 --- a/components/header.js +++ b/components/header.js @@ -12,6 +12,9 @@ export class Header extends HTMLElement { `, check: ` +`, + add: ` + `, } @@ -24,6 +27,7 @@ export class Header extends HTMLElement { ), cancel: 'Cancel', alreadyExists: 'There is already a page with that name.', + createPage: 'Create Page', } textEs = { @@ -35,6 +39,7 @@ export class Header extends HTMLElement { ), cancel: 'Cancelar', alreadyExists: 'Ya existe una página con ese nombre.', + createPage: 'Crear Página', } constructor() { @@ -47,6 +52,9 @@ export class Header extends HTMLElement { this.menuPanel.classList.add('open') this.overlay.classList.add('open') }) + this.addButton(this.icons.add, 'add', () => { + this.addPage() + }) this.addDivider() this.editBtn = this.addButton(this.editIcon, 'edit', () => { this.dispatchEvent(new CustomEvent( @@ -151,6 +159,10 @@ export class Header extends HTMLElement { this.shadowRoot.append(style) } + encodePath(path) { + return path + } + addButton(html, cls, onClick) { const b = document.createElement('button') b.innerHTML = html @@ -207,7 +219,8 @@ export class Header extends HTMLElement { const dialog = document.createElement('m-dialog') this.dialogWrap.replaceChildren(dialog) const input = document.createElement('input') - input.style.width = '85%' + input.value = this.path + input.style.minWidth = '300px' dialog.bodyEl.appendChild(input) const cancelBtn = document.createElement('button') cancelBtn.innerText = this.text.cancel @@ -219,15 +232,19 @@ export class Header extends HTMLElement { confirmBtn.style.marginLeft = '3px' confirmBtn.addEventListener('click', () => { const newPath = input.value + const exists = localStorage.getItem(newPath) + if (exists ?? true === true) { + return + } if (newPath !== this.path) { localStorage.setItem( newPath, localStorage.getItem(this.path) ) + localStorage.removeItem(this.path) + window.location.hash = newPath + dialog.close() } - localStorage.removeItem(this.path) - window.location.hash = newPath - dialog.close() }) dialog.footerEl.replaceChildren( cancelBtn, confirmBtn @@ -299,6 +316,42 @@ export class Header extends HTMLElement { return this.editing ? this.icons.check : this.icons.edit } + addPage() { + const dialog = document.createElement('m-dialog') + this.dialogWrap.replaceChildren(dialog) + const input = document.createElement('input') + input.value = '/' + input.style.minWidth = '300px' + dialog.bodyEl.appendChild(input) + const cancelBtn = document.createElement('button') + cancelBtn.innerText = this.text.cancel + cancelBtn.addEventListener('click', () => { + dialog.close() + }) + const confirmBtn = document.createElement('button') + confirmBtn.innerText = this.text.createPage + confirmBtn.style.marginLeft = '3px' + confirmBtn.addEventListener('click', () => { + const newPath = this.encodePath(input.value) + const exists = localStorage.getItem(newPath) + if (exists ?? true === true) { + return + } + if (newPath !== this.path) { + localStorage.setItem( + newPath, + '' + ) + } + window.location.hash = newPath + dialog.close() + }) + dialog.footerEl.replaceChildren( + cancelBtn, confirmBtn + ) + dialog.open() + } + get language() { return this._language }