Merge pull request 'Add location box with navigate' (#66) from location-box into main

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

components/header.js

@@ -28,6 +28,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Single File',
     newPage: 'New Page',
+    go: 'Go',
   }
 
   textEs = {
@@ -40,6 +41,7 @@ export class Header extends HTMLElement {
     htmlCss: 'HTML/CSS',
     singleFile: 'Archivo único',
     newPage: 'Nueva Página',
+    go: 'Ir',
   }
 
   constructor() {
@@ -186,6 +188,13 @@ export class Header extends HTMLElement {
     this.menu.addEventListener('close-menu', () => {
       this.close()
     })
+    this.menu.addEventListener(
+      'click-location',
+      () => {
+        this.close()
+        this.navPage()
+      },
+    )
   }
 
   addPageMenu() {
@@ -196,6 +205,7 @@ export class Header extends HTMLElement {
   }
 
   openNav() {
+    this.menu.location = this.path
     this.menu.pages = this.getPages()
     this.menu.storageUse = this.getStorageUse()
     this.menuPanel.classList.add('open')
@@ -319,6 +329,30 @@ export class Header extends HTMLElement {
     dialog.open()
   }
 
+  navPage() {
+    const dialog = document.createElement('m-dialog')
+    this.dialogWrap.replaceChildren(dialog)
+    const input = document.createElement('input')
+    input.value = this.path
+    input.style.minWidth = '300px'
+    dialog.bodyEl.appendChild(input)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.go, () => {
+      dialog.close()
+      location.hash = (
+        input.value.startsWith('/') ?
+        input.value : '/'
+      )
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
   get language() {
     return this._language
   }

components/nav-menu.js

@@ -30,6 +30,18 @@ export class NavMenu extends HTMLElement {
         height: 100dvh;
         max-height: 100dvh;
       }
+      .location-bar {
+        padding: 5px 25px;
+        display: flex;
+        flex-direction: row;
+      }
+      .location-box {
+        border: 2px solid #aaa;
+        border-radius: 3px;
+        flex-grow: 1;
+        padding: 5px;
+        font-size: 14px;
+      }
       h1 {
         width: 100%;
         text-align: center;
@@ -51,6 +63,29 @@ export class NavMenu extends HTMLElement {
       }
     `
     this.shadowRoot.append(style)
+    this.locationBar = document.createElement(
+      'div'
+    )
+    this.locationBar.classList.add(
+      'location-bar'
+    )
+    this.locationBox = document.createElement(
+      'div'
+    )
+    this.locationBox.classList.add(
+      'location-box'
+    )
+    this.locationBar.append(this.locationBox)
+    this.locationBox.addEventListener(
+      'click',
+      () => {
+        this.dispatchEvent(new CustomEvent(
+          'click-location', {bubbles: true}
+        ))
+      }
+    )
+    this.shadowRoot.append(this.locationBar)
+    this.renderLocation()
     this.header = document.createElement('h1')
     this.header.innerText = this.text.pages
     this.shadowRoot.append(this.header)
@@ -93,6 +128,21 @@ export class NavMenu extends HTMLElement {
     return /^es\b/.test(this.language)
   }
 
+  set location(location) {
+    this._location = location
+    if (this.locationBox) {
+      this.renderLocation()
+    }
+  }
+
+  get location() {
+    return this._location
+  }
+
+  renderLocation() {
+    this.locationBox.innerText = this.location
+  }
+
   set pages(pages) {
     this._pages = pages
     if (this.pageList) {

sw.js

@@ -19,7 +19,7 @@ async function initCache() {
     '/loader/editor-build.js',
     '/menu/dropdown.js',
     '/settings/page-settings.js',
-  ]) //6
+  ]) //7
 }
 
 self.addEventListener("install", event => {