Merge pull request 'Dialog-based dropdown' (#36) from dialog-based-dropdown into main

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

app.js

@@ -2,19 +2,21 @@ import { Layout } from "/components/layout.js"
 import { Page } from "/components/page.js"
 import { Header } from "/components/header.js"
 import { NavMenu } from "/components/nav-menu.js"
-import { PageMenu } from "/components/page-menu.js"
 import { Dialog } from "/components/dialog.js"
 import { ButtonGroup } from "/forms/button-group.js"
+import { Dropdown } from "/menu/dropdown.js"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
 customElements.define('m-header', Header)
 customElements.define('m-nav-menu', NavMenu)
-customElements.define('m-page-menu', PageMenu)
 customElements.define('m-dialog', Dialog)
 customElements.define(
   'm-forms-button-group', ButtonGroup
 )
+customElements.define(
+  'm-menu-dropdown', Dropdown
+)
 
 class Setup {
   async run() {

components/header.js

@@ -47,11 +47,14 @@ export class Header extends HTMLElement {
     this.language = navigator.language
     this.editing = false
     this.attachShadow({mode: 'open'})
+    this.appBar = document.createElement('div')
+    this.appBar.classList.add('app-bar')
+    this.shadowRoot.appendChild(this.appBar)
     this.addButton(this.icons.menu, 'nav', () => {
       this.menu.pages = this.getPages()
       this.menuPanel.classList.add('open')
       this.overlay.classList.add('open')
-    })
+    }).classList.add('left-end')
     this.addButton(this.icons.add, 'add', () => {
       this.addPage()
     })
@@ -61,12 +64,16 @@ export class Header extends HTMLElement {
         'click-edit', {bubbles: true}
       ))
     })
-    this.addButton(this.icons.dot, 'page', () => {
+    this.pageButton = this.addButton(
-      this.pageMenuPanel.classList.add('open')
+      this.icons.dot,
-      this.overlay.classList.add('open')
+      'page',
-    })
+      () => {
-    this.addMenu()
+        this.pageMenu.open(this.pageButton)
+      }
+    )
+    this.pageButton.classList.add('right-end')
     this.addPageMenu()
+    this.addMenu()
     this.dialogWrap = document.createElement('div')
     this.shadowRoot.appendChild(this.dialogWrap)
   }
@@ -77,9 +84,17 @@ export class Header extends HTMLElement {
       :host {
         background: #111;
         color: #ddd;
-        display: grid;
+        display: flex;
-        grid-template-columns: min-content min-content 1fr min-content min-content;
+        flex-direction: column;
-        padding: 0 4px;
+        align-items: stretch;
+      }
+      div.app-bar {
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+      }
+      div.divider {
+        flex-grow: 1;
       }
       button {
         border: none;
@@ -88,6 +103,12 @@ export class Header extends HTMLElement {
         font-size: 30px;
         padding: 0 8px;
       }
+      button.left-end {
+        padding-right: 12px;
+      }
+      button.right-end {
+        padding-right: 12px;
+      }
       div.menu {
         position: fixed;
         top: 0;
@@ -117,37 +138,10 @@ export class Header extends HTMLElement {
         left: 0;
         opacity: 15%;
       }
-      button.page {
-        position: relative;
-      }
-      div.page-menu {
-        position: fixed;
-        top: 34px;
-        right: 0;
-        display: flex;
-        align-items: flex-end;
-        margin-right: 0;
-        display: none;
-      }
-      div.page-menu.open {
-        display: block;
-      }
       svg {
         width: 20px;
         height: 20px;
       }
-      div.dialog-panel {
-        position: fixed;
-        top: 34px;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        align-items: flex-end;
-      }
-      div.page-menu.open {
-        display: block;
-      }
       m-dialog::part(footer) {
         padding-top: 15px;
       }
@@ -163,7 +157,7 @@ export class Header extends HTMLElement {
     const b = document.createElement('button')
     b.innerHTML = html
     b.classList.add(cls)
-    this.shadowRoot.appendChild(b)
+    this.appBar.appendChild(b)
     if (onClick) {
       b.addEventListener('click', onClick)
     }
@@ -173,7 +167,7 @@ export class Header extends HTMLElement {
   addDivider() {
     const d = document.createElement('div')
     d.classList.add('divider')
-    this.shadowRoot.appendChild(d)
+    this.appBar.appendChild(d)
   }
 
   addMenu() {
@@ -194,7 +188,9 @@ export class Header extends HTMLElement {
   }
 
   addPageMenu() {
-    this.pageMenu = document.createElement('m-page-menu')
+    this.pageMenu = document.createElement(
+      'm-menu-dropdown'
+    )
     this.pageMenu.add(this.text.download, () => {
       const text = localStorage.getItem(this.path)
       const sp = this.path.split('/')
@@ -212,7 +208,9 @@ export class Header extends HTMLElement {
       this.shadowRoot.removeChild(el)
     })
     this.pageMenu.add(this.text.rename, () => {
-      const dialog = document.createElement('m-dialog')
+      const dialog = document.createElement(
+        'm-dialog'
+      )
       this.dialogWrap.replaceChildren(dialog)
       const input = document.createElement('input')
       input.value = this.path
@@ -241,7 +239,7 @@ export class Header extends HTMLElement {
         )
         localStorage.removeItem(this.path)
         dialog.close()
-        location.hash = newPath
+        vlocation.hash = newPath
       })
       bGroup.addCancel(this.text.cancel, () => {
         dialog.close()
@@ -250,7 +248,9 @@ export class Header extends HTMLElement {
       dialog.open()
     })
     this.pageMenu.add(this.text.delete, () => {
-      const dialog = document.createElement('m-dialog')
+      const dialog = document.createElement(
+        'm-dialog'
+      )
       this.dialogWrap.replaceChildren(dialog)
       const p = document.createElement('p')
       p.innerText = this.text.confirmDelete(
@@ -263,7 +263,7 @@ export class Header extends HTMLElement {
       )
       bGroup.addPrimary(this.text.delete, () => {
         localStorage.removeItem(this.path)
-        location.hash = '/'
+        vlocation.hash = '/'
         dialog.close()
       })
       bGroup.addCancel(this.text.cancel, () => {
@@ -272,21 +272,13 @@ export class Header extends HTMLElement {
       dialog.footerEl.appendChild(bGroup)
       dialog.open()
     })
-    this.pageMenu.addEventListener('close-menu', () => {
+    this.shadowRoot.appendChild(this.pageMenu)
-      this.close()
-    })
-
-    this.pageMenuPanel = document.createElement('div')
-    this.pageMenuPanel.appendChild(this.pageMenu)
-    this.pageMenuPanel.classList.add('page-menu')
-    this.shadowRoot.appendChild(this.pageMenuPanel)
   }
 
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
     this.menuPanel.classList.remove('open')
-    this.pageMenuPanel.classList.remove('open')
     setTimeout(() => {
       this.overlay.classList.remove('closing')
     }, 250)
@@ -323,7 +315,7 @@ export class Header extends HTMLElement {
     )
     bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
-      location.hash = newPath
+      vlocation.hash = newPath
       dialog.close()
     })
     bGroup.addCancel(this.text.cancel, () => {

components/page-menu.js

@@ -1,42 +0,0 @@
-export class PageMenu extends HTMLElement {
-  constructor() {
-    super()
-    this.attachShadow({mode: 'open'})
-  }
-
-  connectedCallback() {
-    const style = document.createElement('style')
-    style.textContent = `
-      :host {
-        background: #222;
-        color: #ddd;
-        padding: 3px;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        min-width: 180px;
-      }
-      button {
-        background: #222;
-        font-size: 120%;
-        border: none;
-        color: inherit;
-        padding: 4px 10px;
-        text-align: left;
-      }
-    `
-    this.shadowRoot.append(style)
-  }
-
-  add(text, handler) {
-    const btn = document.createElement('button')
-    btn.innerText = text
-    this.shadowRoot.appendChild(btn)
-    btn.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent(
-        'close-menu', {bubbles: true}
-      ))
-      handler()
-    })
-  }
-}

sw.js

@@ -8,9 +8,9 @@ async function initCache() {
     '/components/layout.js',
     '/components/header.js',
     '/components/nav-menu.js',
-    '/components/page-menu.js',
     '/components/dialog.js',
-    '/forms/button-group.js',
+    '/forms/button-group.js,
+    '/menu/dropdown.js,
   ])
 }