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
}