move page-actions to a component; fix downloading

app.js

@@ -10,6 +10,7 @@ import { Dropdown } from "/menu/dropdown.js"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
+customElements.define('m-page-actions', PageActions)
 customElements.define(
   'm-file-group-page', FileGroupPage
 )
@@ -41,7 +42,6 @@ class Setup {
     const layout = document.createElement(
       'm-layout'
     )
-    layout.pageActions = new PageActions()
     layout.csp = undefined
     layout.header.menu.handleLinks = true
     document.body.appendChild(layout)
@@ -62,11 +62,9 @@ class Setup {
   }
 
   load() {
-    const layout = document.createElement('m-layout')
-    layout.pageActions = new PageActions()
     if (this.registration.active) {
       document.body.appendChild(
-        layout
+        document.createElement('m-layout')
       )
     }
   }

components/layout.js

@@ -6,6 +6,17 @@ export class Layout extends HTMLElement {
     this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.header = document.createElement('m-header')
+    this.dialogWrap = document.createElement('div')
+    this.header.dialogWrap = this.dialogWrap
+    this.pageActions = document.createElement(
+      'm-page-actions'
+    )
+    this.header.pageActions = this.pageActions
+    this.shadowRoot.append(
+      this.header,
+      this.dialogWrap,
+      this.pageActions,
+    )
   }
 
   connectedCallback() {
@@ -29,7 +40,6 @@ export class Layout extends HTMLElement {
       }
     `
     this.shadowRoot.appendChild(style)
-    this.header.pageActions = this.pageActions
     this.header.editing = this.editing
     this.header.addEventListener('click-edit', () => {
       this.editing = !this.editing
@@ -37,11 +47,6 @@ export class Layout extends HTMLElement {
     this.header.addEventListener('create-page', () => {
       this.editing = true
     })
-    this.shadowRoot.appendChild(this.header)
-    this.dialogWrap = document.createElement('div')
-    this.header.dialogWrap = this.dialogWrap
-    this.pageActions.dialogWrap = this.dialogWrap
-    this.shadowRoot.appendChild(this.dialogWrap)
     this.load()
     addEventListener('hashchange', () => {
       this.load()

components/page-actions.js

@@ -1,9 +1,10 @@
-export class PageActions {
+export class PageActions extends HTMLElement {
   textEn = {
     download: 'Download',
     rename: 'Move/Rename',
     duplicate: 'Duplicate',
     delete_: 'Delete',
+    settings: 'Settings',
     confirmDelete: f => (
       `Are you sure you want to delete ${f}?`
     ),
@@ -16,6 +17,7 @@ export class PageActions {
     rename: 'Mover/Renombrar',
     duplicate: 'Duplicar',
     delete_: 'Borrar',
+    settings: 'Configuración',
     confirmDelete: f => (
       `¿Desea borrar ${f}?`
     ),
@@ -24,7 +26,11 @@ export class PageActions {
   }
 
   constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
     this.language = navigator.language
+    this.dialogWrap = document.createElement('div')
+    this.shadowRoot.append(this.dialogWrap)
     this.menuActions = [
       {
         text: this.text.download,
@@ -42,8 +48,21 @@ export class PageActions {
         text: this.text.delete_,
         click: this.delete_.bind(this),
       },
+      //{
+      //  text: this.text.settings,
+      //  click: this.settings.bind(this),
+      //},
     ]
   }
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      m-dialog::part(footer) {
+        padding-top: 15px;
+      }
+    `
+    this.shadowRoot.appendChild(style)
+  }
 
   download() {
     const text = localStorage.getItem(this.path)
@@ -76,19 +95,19 @@ export class PageActions {
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.rename, () => {
-    const newPath = input.value
-    const v = localStorage.getItem(newPath)
-    if (v !== null || newPath === this.path) {
-      if (!errorEl) {
-        errorEl = document.createElement('p')
-        errorEl.style.color = 'red'
-        const errText = this.text.alreadyExists
-        errorEl.innerText = errText
-        dialog.bodyEl.appendChild(errorEl)
+      const newPath = input.value
+      const v = localStorage.getItem(newPath)
+      if (v !== null || newPath === this.path) {
+        if (!errorEl) {
+          errorEl = document.createElement('p')
+          errorEl.style.color = 'red'
+          const errText = this.text.alreadyExists
+          errorEl.innerText = errText
+          dialog.bodyEl.appendChild(errorEl)
+        }
+        return
       }
-      return
-    }
-    localStorage.setItem(
+      localStorage.setItem(
         newPath,
         localStorage.getItem(this.path)
       )
@@ -170,6 +189,47 @@ export class PageActions {
     dialog.open()
   }
 
+  settings() {
+    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)
+    let errorEl
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.rename, () => {
+      const newPath = input.value
+      const v = localStorage.getItem(newPath)
+      if (v !== null || newPath === this.path) {
+        if (!errorEl) {
+          errorEl = document.createElement('p')
+          errorEl.style.color = 'red'
+          const errText = this.text.alreadyExists
+          errorEl.innerText = errText
+          dialog.bodyEl.appendChild(errorEl)
+        }
+        return
+      }
+      localStorage.setItem(
+        newPath,
+        localStorage.getItem(this.path)
+      )
+      localStorage.removeItem(this.path)
+      dialog.close()
+      location.hash = newPath
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
   get language() {
     return this._language
   }

sw.js

@@ -18,7 +18,7 @@ async function initCache() {
     '/loader/builder.js',
     '/loader/editor-build.js',
     '/menu/dropdown.js',
-  ]) //1
+  ]) //2
 }
 
 self.addEventListener("install", event => {
@@ -54,4 +54,4 @@ self.addEventListener('fetch', event => {
 
 self.addEventListener('activate', event => {
   event.waitUntil(clients.claim())
-})
+})