Merge pull request 'update-header' (#31) from update-header into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/31

components/header.js

@@ -12,6 +12,9 @@ export class Header extends HTMLElement {
 </svg>`,
     check: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
       <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/>
+</svg>`,
+    add: `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
 </svg>`,
   }
 
@@ -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()
+        }
       })
       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
   }

sw.js

@@ -10,7 +10,7 @@ async function initCache() {
     '/components/nav-menu.js',
     '/components/page-menu.js',
     '/components/dialog.js',
-  ]) //4
+  ]) //5
 }
 
 self.addEventListener("install", event => {