diff --git a/components/header.js b/components/header.js index 670d438..1d00e14 100644 --- a/components/header.js +++ b/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 } diff --git a/components/nav-menu.js b/components/nav-menu.js index 4194eb9..e187c61 100644 --- a/components/nav-menu.js +++ b/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) { diff --git a/sw.js b/sw.js index fdf4a11..2141dd3 100644 --- a/sw.js +++ b/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 => {