Merge pull request 'create from template' (#77) from templates into main

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

app.js

@@ -1,14 +1,33 @@
+import { Storage } from "/storage/storage.js"
 import { Layout } from "/components/layout.js"
 import { Page } from "/components/page.js"
+import { PageActions } from "/components/page-actions.js"
 import { FileGroupPage } from "/components/file-group-page.js"
 import { Header } from "/components/header.js"
 import { NavMenu } from "/components/nav-menu.js"
 import { Dialog } from "/dialog/dialog.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
+import { NetworkSettings } from "/settings/network-settings.js"
+import { PageSettings } from "/settings/page-settings.js"
+import { Connections } from "/settings/connections.js"
+import { ConnectionEdit } from "/settings/connection-edit.js"
 
 customElements.define('m-layout', Layout)
 customElements.define('m-page', Page)
+customElements.define('m-page-actions', PageActions)
+customElements.define(
+  'm-settings-network-settings', NetworkSettings
+)
+customElements.define(
+  'm-settings-page-settings', PageSettings
+)
+customElements.define(
+  'm-settings-connections', Connections
+)
+customElements.define(
+  'm-settings-connection-edit', ConnectionEdit
+)
 customElements.define(
   'm-file-group-page', FileGroupPage
 )
@@ -23,6 +42,13 @@ customElements.define(
 )
 
 class Setup {
+  constructor() {
+    this.layout = document.createElement(
+      'm-layout'
+    )
+    this.layout.storage = new Storage()
+  }
+
   async runWithSw() {
     navigator.serviceWorker.addEventListener(
       'controllerchange',
@@ -37,12 +63,10 @@ class Setup {
   }
 
   async runWithoutSw() {
-    const layout = document.createElement(
-      'm-layout'
-    )
-    layout.csp = undefined
-    layout.header.menu.handleLinks = true
-    document.body.appendChild(layout)
+    this.layout.storage = new Storage()
+    this.layout.csp = undefined
+    this.layout.header.menu.handleLinks = true
+    document.body.appendChild(this.layout)
   }
 
   async register() {
@@ -52,6 +76,9 @@ class Setup {
           '/sw.js',
           {scope: '/'}
         )
+      if (this.registration.waiting) {
+        this.registration.active.postMessage(['skipWaiting'])
+      }
     } catch (err) {
       console.error(
         'error registering service worker', err
@@ -62,7 +89,7 @@ class Setup {
   load() {
     if (this.registration.active) {
       document.body.appendChild(
-        document.createElement('m-layout')
+        this.layout
       )
     }
   }

components/file-group-page.js

@@ -25,6 +25,15 @@ html {
     ${'<'}script type="module">
 let frame = undefined
 addEventListener('message', event => {
+  const isChild = (
+    frame !== undefined && event.source == frame.contentWindow
+  )
+  if (isChild) {
+    const transferArg = (
+      event.ports?.length ? [[...event.ports]] : []
+    )
+    parent.postMessage(event.data, '*', ...transferArg)
+  } else {
     let isNew = false
     const d = event.data
     if (Array.isArray(d) && d[0] === 'srcdoc') {
@@ -34,12 +43,18 @@ addEventListener('message', event => {
         frame.sandbox = "allow-scripts allow-top-navigation"
       }
       frame.srcdoc = d[1]
-  } else if (frame !== undefined) {
-    frame.postMessage(event.data)
-  }
       if (isNew) {
         document.body.appendChild(frame)
       }
+    } else if (frame !== undefined) {
+      const transferArg = (
+        event.ports?.length ? [[...event.ports]] : []
+      )
+      frame.contentWindow.postMessage(
+        event.data, '*', ...transferArg
+      )
+    }
+  }
 })
     ${'</'}script>
   </body>
@@ -49,7 +64,9 @@ export class FileGroupPage extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
-    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
+    this.viewLoaded = false
+    this.onceOnLoaded = undefined
+    this.isGroup = true
   }
 
   connectedCallback() {
@@ -71,26 +88,33 @@ export class FileGroupPage extends HTMLElement {
         width: 100%;
       }
       :host(.editing) iframe.view {
-        display: none;
+        visibility: hidden;
       }
       :host(.viewing) iframe.edit {
-        display: none;
+        visibility: hidden;
       }
     `
     this.shadowRoot.append(style)
     this.initEditFrame()
     this.initViewFrame()
     this.editing = this.editing
+    addEventListener('message', this.handleMessage)
+  }
+
+  disconnectedCallback() {
+    removeEventListener('message', this.handleMessage)
   }
 
   initEditFrame() {
     const frame = document.createElement('iframe')
-    if (this.csp !== undefined) {
+    frame.classList.add('edit')
+    const csp = this.csp
+    if (csp !== undefined) {
       frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
       const url = new URL(
         '/-/frame', location.href
       )
-      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('csp', csp)
       url.searchParams.set('html', frameHtml)
       frame.src = url.href
     } else {
@@ -100,18 +124,23 @@ export class FileGroupPage extends HTMLElement {
     frame.addEventListener('load', () => {
       this.displayEdit()
     })
+    frame.addEventListener('message', message => {
+      this.handleEditMessage(message)
+    })
     this.editFrame = frame
     this.shadowRoot.append(frame)
   }
 
   initViewFrame() {
     const frame = document.createElement('iframe')
-    if (this.csp !== undefined) {
+    frame.classList.add('view')
+    const csp = this.csp
+    if (csp !== undefined) {
       frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
       const url = new URL(
         '/-/frame', location.href
       )
-      url.searchParams.set('csp', this.csp)
+      url.searchParams.set('csp', csp)
       url.searchParams.set('html', frameHtml)
       frame.src = url.href
     } else {
@@ -119,31 +148,160 @@ export class FileGroupPage extends HTMLElement {
       frame.srcdoc = frameHtml
     }
     frame.addEventListener('load', () => {
-      this.displayView()
+      this.viewLoaded = true
+      if (this.onceOnLoaded) {
+        this.onceOnLoaded()
+        this.onceOnLoaded = undefined
+      }
     })
     this.viewFrame = frame
     this.shadowRoot.append(frame)
   }
 
-  displayView() {
-    let doc = 'view here'
+  displayView(doc) {
     const msg = ['srcdoc', doc]
+    if (this.viewLoaded) {
       this.viewFrame.contentWindow.postMessage(
         msg, '*'
       )
+    } else {
+      this.onceOnLoaded = () => {
+        this.viewFrame.contentWindow.postMessage(
+          msg, '*'
+        )
+      }
+    }
   }
 
-  displayEdit() {
-    let doc = 'edit here'
-    const msg = ['srcdoc', doc]
-    this.viewFrame.contentWindow.postMessage(
+  async displayEdit() {
+    const doc = await this.editorBuild.build()
+    const msg = [
+      'srcdoc',
+      doc,
+      {codeMirror: this.settings.codeMirror},
+    ]
+    this.editFrame.contentWindow.postMessage(
       msg, '*'
     )
   }
 
+  handleMessage = event => {
+    const editWin = this.editFrame?.contentWindow
+    const viewWin = this.viewFrame?.contentWindow
+    if (editWin && event.source == editWin) {
+      this.handleEditMessage(event)
+    } else if (viewWin && event.source == viewWin) {
+      this.handleViewMessage(event)
+    }
+  }
+
+  async handleViewMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('view', event)
+      }
+    }
+  }
+
+  async handleEditMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (event.data[0] === 'ready') {
+        this.editFrame.contentWindow.postMessage(
+          [
+            'doc',
+            this.body,
+            {codeMirror: !!(this.settings.codeMirror)}
+          ],
+          '*'
+        )
+      } else if (event.data[0] === 'html') {
+        const html = event.data[1]
+        this.displayView(html)
+      } else if (event.data[0] === 'save') {
+        const doc = event.data[1]
+        this.body = doc
+      } else if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('edit', event)
+      } else if (event.data[0] === 'load') {
+        if (event.data[1] === '/editor-lib-codemirror/codemirror-bundle.js') {
+          const url = event.data[1]
+          const resp = await fetch(url)
+          const text = await resp.text()
+          const port = event.ports[0]
+          port.postMessage({
+            status: 200,
+            body: text,
+          })
+          port.close()
+        }
+      }
+    }
+  }
+
+  async handleRequestMessage(frame, event) {
+    if (event.ports.length === 1) {
+      const port = event.ports[0]
+      const method = event.data[0]
+      const path = event.data[1]
+      const access = this.getAccess(path)
+      if (method === 'get') {
+        if (['read', 'readWrite'].includes(access)) {
+          port.postMessage({
+            status: 200,
+            body: this.getPage(path),
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      } else if (method === 'put') {
+        const body = event.data[2]
+        if (access === 'readWrite') {
+          this.setPage(path, body)
+          port.postMessage({
+            status: 200,
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      }
+      port.close()
+    } else {
+      throw new Error('request message without port')
+    }
+  }
+
+  getAccess(path) {
+    const settings = this.settings
+    const outbound = settings.connections?.outbound
+    if (outbound && outbound[path]) {
+      return outbound[path]
+    }
+  }
+
+  getPage(path) {
+    const body = this.storage.getItem(path)
+    try {
+      return JSON.parse(body)
+    } catch (err) {
+      return body
+    }
+  }
+
+  setPage(path, body) {
+    let value = body
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value)
+    }
+    this.storage.setItem(path, value)
+  }
+
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -151,13 +309,56 @@ export class FileGroupPage extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''
     }
   }
 
+  set settings(value) {
+    try {
+      this.storage.setItem(
+        'settings/page:' + this.path,
+        JSON.stringify(value)
+      )
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  get settings() {
+    let data
+    try {
+      data = this.storage.getItem(
+        'settings/page:' + this.path
+      )
+      if (data === null || data === undefined) {
+        return {}
+      }
+    } catch (err) {
+      console.error(err)
+      return {}
+    }
+    try {
+      return JSON.parse(data)
+    } catch (err) {
+      return {}
+    }
+  }
+
+  get csp() {
+    if (this.cspOff) {
+      return undefined
+    } else {
+      return (
+        this.settings.networkAccess in this.cspProfiles ?
+        this.cspProfiles[this.settings.networkAccess] :
+        this.cspProfiles.local
+      )
+    }
+  }
+
   set editing(value) {
     this._editing = value
     if (this.shadowRoot.host) {
@@ -168,6 +369,11 @@ export class FileGroupPage extends HTMLElement {
       } else {
         classes.add('viewing')
         classes.remove('editing')
+        if (this.editFrame) {
+          this.editFrame.contentWindow.postMessage(
+            ['request-html'], '*'
+          )
+        }
       }
     }
   }

components/header.js

@@ -19,27 +19,29 @@ export class Header extends HTMLElement {
   }
 
   textEn = {
-    download: 'Download',
-    rename: 'Move/Rename',
-    delete: 'Delete',
     confirmDelete: f => (
       `Are you sure you want to delete ${f}?`
     ),
     cancel: 'Cancel',
     alreadyExists: 'There is already a page with that name.',
     createPage: 'Create Page',
+    htmlCss: 'HTML/CSS',
+    singleFile: 'Single File',
+    newPage: 'New Page',
+    go: 'Go',
   }
 
   textEs = {
-    download: 'Descargar',
-    rename: 'Mover/Renombrar',
-    delete: 'Borrar',
     confirmDelete: f => (
       `¿Desea borrar ${f}?`
     ),
     cancel: 'Cancelar',
     alreadyExists: 'Ya existe una página con ese nombre.',
     createPage: 'Crear Página',
+    htmlCss: 'HTML/CSS',
+    singleFile: 'Archivo único',
+    newPage: 'Nueva Página',
+    go: 'Ir',
   }
 
   constructor() {
@@ -50,11 +52,12 @@ export class Header extends HTMLElement {
     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')
+    const navBtn = this.addButton(
+      this.icons.menu,
+      'nav',
+      () => this.openNav(),
+    )
+    navBtn.classList.add('left-end')
     this.addButton(this.icons.add, 'add', () => {
       this.addPage()
     })
@@ -68,14 +71,16 @@ export class Header extends HTMLElement {
       this.icons.dot,
       'page',
       () => {
+        const actions = this.pageActions.menuActions
+        this.pageMenu.clear()
+        for (const {text, click} of actions) {
+          this.pageMenu.add(text, click)
+        }
         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)
   }
 
   connectedCallback() {
@@ -112,9 +117,9 @@ export class Header extends HTMLElement {
       div.menu {
         position: fixed;
         top: 0;
-        left: -90vw;
+        left: max(-90vw, -480px);
         height: 100vh;
-        width: 90vw;
+        width: min(90vw, 480px);
         background-color: #fff;
         transition: left .25s ease-in-out;
       }
@@ -142,11 +147,9 @@ export class Header extends HTMLElement {
         width: 20px;
         height: 20px;
       }
-      m-dialog::part(footer) {
-        padding-top: 15px;
-      }
     `
     this.shadowRoot.append(style)
+    this.addPageMenu()
   }
 
   encodePath(path) {
@@ -185,94 +188,28 @@ export class Header extends HTMLElement {
     this.menu.addEventListener('close-menu', () => {
       this.close()
     })
+    this.menu.addEventListener(
+      'click-location',
+      () => {
+        this.close()
+        this.navPage()
+      },
+    )
   }
 
   addPageMenu() {
     this.pageMenu = document.createElement(
       'm-menu-dropdown'
     )
-    this.pageMenu.add(this.text.download, () => {
-      const text = localStorage.getItem(this.path)
-      const sp = this.path.split('/')
-      const filename = sp[sp.length - 1]
-      const el = document.createElement('a')
-      el.setAttribute(
-        'href',
-        'data:text/plain;charset=utf-8,' +
-        encodeURIComponent(text)
-      )
-      el.setAttribute('download', filename)
-      el.style.display = 'none'
-      this.shadowRoot.appendChild(el)
-      el.click()
-      this.shadowRoot.removeChild(el)
-    })
-    this.pageMenu.add(this.text.rename, () => {
-      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
+    this.shadowRoot.appendChild(this.pageMenu)
   }
-        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()
-    })
-    this.pageMenu.add(this.text.delete, () => {
-      const dialog = document.createElement(
-        'm-dialog'
-      )
-      this.dialogWrap.replaceChildren(dialog)
-      const p = document.createElement('p')
-      p.innerText = this.text.confirmDelete(
-        JSON.stringify(this.path)
-      )
-      dialog.bodyEl.appendChild(p)
 
-      const bGroup = document.createElement(
-        'm-forms-button-group'
-      )
-      bGroup.addPrimary(this.text.delete, () => {
-        localStorage.removeItem(this.path)
-        location.hash = '/'
-        dialog.close()
-      })
-      bGroup.addCancel(this.text.cancel, () => {
-        dialog.close()
-      })
-      dialog.footerEl.appendChild(bGroup)
-      dialog.open()
-    })
-    this.shadowRoot.appendChild(this.pageMenu)
+  openNav() {
+    this.menu.location = this.path
+    this.menu.pages = this.getPages()
+    this.menu.storageUse = this.getStorageUse()
+    this.menuPanel.classList.add('open')
+    this.overlay.classList.add('open')
   }
 
   close() {
@@ -285,7 +222,21 @@ export class Header extends HTMLElement {
   }
 
   getPages() {
-    return Object.keys(localStorage).slice().sort()
+    return (
+      this.storage.keys().slice()
+      .filter(s => s.startsWith('/'))
+      .sort()
+    )
+  }
+
+  getStorageUse() {
+    let bytes = 0
+    const entries = this.storage.entries()
+    for (const [k, v] of entries) {
+      bytes += k.length
+      bytes += v.length
+    }
+    return bytes / 5000000
   }
 
   set editing(value) {
@@ -303,6 +254,22 @@ export class Header extends HTMLElement {
     return this.editing ? this.icons.check : this.icons.edit
   }
 
+  getTemplates() {
+    const text = this.storage.getItem(
+      'settings:templates'
+    )
+    if (text ?? undefined !== undefined) {
+      const data = JSON.parse(text)
+      return Object.entries(
+        data.templates
+      ).map(([id, data]) => (
+        {...data, id}
+      ))
+    } else {
+      return []
+    }
+  }
+
   addPage() {
     const dialog = document.createElement('m-dialog')
     this.dialogWrap.replaceChildren(dialog)
@@ -310,13 +277,36 @@ export class Header extends HTMLElement {
     input.value = '/'
     input.style.minWidth = '300px'
     dialog.bodyEl.appendChild(input)
+    const select = document.createElement('select')
+    const options = ['htmlCss', 'singleFile']
+    select.append(...options.map(value => {
+      const el = document.createElement('option')
+      el.value = value
+      el.innerText = this.text[value]
+      return el
+    }))
+    const templates = this.getTemplates()
+    select.append(...templates.map(t => {
+      const el = document.createElement('option')
+      el.value = t.id
+      el.innerText = t.name
+      return el
+    }))
+    select.value = 'htmlCss'
+    input.addEventListener('input', e => {
+      const ext = e.target.value.match(/\.\w+$/)
+      select.value = ext ? 'singleFile' : 'htmlCss'
+    })
+    select.style.marginTop = '10px'
+    select.style.marginBottom = '10px'
+    dialog.bodyEl.appendChild(select)
     let errorEl
     const bGroup = document.createElement(
       'm-forms-button-group'
     )
     bGroup.addPrimary(this.text.createPage, () => {
       const newPath = this.encodePath(input.value)
-      const v = localStorage.getItem(newPath)
+      const v = this.storage.getItem(newPath)
       if (v !== null || newPath === this.path) {
         if (!errorEl) {
           errorEl = document.createElement('p')
@@ -328,7 +318,30 @@ export class Header extends HTMLElement {
         }
         return
       }
-      localStorage.setItem(newPath, '')
+      let value
+      if (select.value === 'htmlCss')  {
+        value = JSON.stringify({
+          type: 'm-file-group',
+          files: [
+            {
+              "name": "index.html",
+              "data": `<h1>${this.text.newPage}</h1>`,
+            },
+            {
+              "name": "style.css",
+              "data": 'h1 { color: dodgerblue; }',
+            },
+          ],
+        })
+      } else {
+        value = this.storage.getItem(
+          select.value
+        ) ?? ''
+      }
+      this.storage.setItem(newPath, value)
+      this.storage.setItem(
+        'settings/page:' + newPath, '{}'
+      )
       location.hash = newPath
       dialog.close()
       this.dispatchEvent(new CustomEvent(
@@ -342,6 +355,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/layout.js

@@ -1,9 +1,29 @@
+import { EditorBuild } from "/loader/editor-build.js"
+
 export class Layout extends HTMLElement {
+  cspProfiles = {
+    local: "default-src 'self' 'unsafe-inline' 'unsafe-eval'",
+    unpkg: "default-src unpkg.com 'self' 'unsafe-inline' 'unsafe-eval'",
+    open: undefined,
+  }
+
   constructor() {
     super()
     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.pageActions.cspProfiles = this.cspProfiles
+    this.header.pageActions = this.pageActions
+    this.shadowRoot.append(
+      this.header,
+      this.dialogWrap,
+      this.pageActions,
+    )
   }
 
   connectedCallback() {
@@ -19,9 +39,12 @@ export class Layout extends HTMLElement {
         overflow-y: hidden;
         position: relative;
       }
-      m-page {
+      m-page, m-file-group-page {
         flex-grow: 1;
       }
+      m-dialog::part(footer) {
+        padding-top: 15px;
+      }
     `
     this.shadowRoot.appendChild(style)
     this.header.editing = this.editing
@@ -31,7 +54,6 @@ export class Layout extends HTMLElement {
     this.header.addEventListener('create-page', () => {
       this.editing = true
     })
-    this.shadowRoot.appendChild(this.header)
     this.load()
     addEventListener('hashchange', () => {
       this.load()
@@ -39,13 +61,17 @@ export class Layout extends HTMLElement {
     this.addEventListener('hash-change', () => {
       this.load()
     })
+    this.addEventListener('settings-change', () => {
+      this.load()
+    })
   }
 
   load() {
     const path = this.path
+    this.editing = false
     const prevPage = this.page
     let isGroup = false
-    const body = localStorage.getItem(path) || ''
+    const body = this.storage.getItem(path) || ''
     if (body.match(/^\s*{/)) {
       try {
         const bodyData = JSON.parse(body)
@@ -60,7 +86,16 @@ export class Layout extends HTMLElement {
     this.page = document.createElement(
       isGroup ? 'm-file-group-page' : 'm-page'
     )
+    this.page.storage = this.storage
+    if (isGroup) {
+      this.page.cspOff = this.csp === undefined
+      this.page.cspProfiles = this.cspProfiles
+    } else {
       this.page.csp = this.csp
+    }
+    if (isGroup) {
+      this.page.editorBuild = this.editorBuild
+    }
     this.page.path = path
     this.editing = this.editing
     if (prevPage !== undefined) {
@@ -68,6 +103,8 @@ export class Layout extends HTMLElement {
     }
     this.shadowRoot.appendChild(this.page)
     this.header.path = path
+    this.pageActions.path = path
+    this.pageActions.page = this.page
   }
 
   get path() {
@@ -81,7 +118,7 @@ export class Layout extends HTMLElement {
   }
 
   set editing(value) {
-    sessionStorage.setItem(
+    this.storage.session.setItem(
       'editing', value ? 'true' : 'false'
     )
     this.header.editing = this.editing
@@ -93,10 +130,27 @@ export class Layout extends HTMLElement {
   get editing() {
     try {
       return (
-        sessionStorage.getItem('editing') === 'true'
+        this.storage.session.getItem('editing') === 'true'
       )
     } catch (e) {
       return false
     }
   }
+
+  get editorBuild() {
+    if (this._editorBuild === undefined) {
+      this._editorBuild = new EditorBuild()
+    }
+    return this._editorBuild
+  }
+
+  set storage(value) {
+    this._storage = value
+    this.header.storage = value
+    this.pageActions.storage = value
+  }
+
+  get storage() {
+    return this._storage
+  }
 }

components/nav-menu.js

@@ -1,4 +1,17 @@
 export class NavMenu extends HTMLElement {
+  textByLang = {
+    en: {
+      pages: 'Pages',
+      localStorage: 'Local storage',
+      full: 'full',
+    },
+    es: {
+      pages: 'Páginas',
+      localStorage: 'Almacenamiento local',
+      full: 'lleno',
+    },
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -14,8 +27,21 @@ export class NavMenu extends HTMLElement {
         display: flex;
         flex-direction: column;
         color: #000;
+        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;
@@ -32,15 +58,45 @@ export class NavMenu extends HTMLElement {
         display: block;
         margin: 8px 10px;
       }
+      .footer {
+        padding: 3px 5px;
+      }
     `
     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.pagesText
+    this.header.innerText = this.text.pages
     this.shadowRoot.append(this.header)
     this.pageList = document.createElement('div')
     this.pageList.classList.add('page-list')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.footer = document.createElement('div')
+    this.footer.classList.add('footer')
+    this.shadowRoot.append(this.footer)
+    this.renderFooter()
     this.shadowRoot.addEventListener('click', e => {
       if (e.target.classList.contains('page')) {
         if (this.handleLinks) {
@@ -63,14 +119,28 @@ export class NavMenu extends HTMLElement {
 
   set language(language) {
     this._language = language
+    this.text = this.textByLang[
+      this.langEs ? 'es' : 'en'
+    ]
   }
 
   get langEs() {
     return /^es\b/.test(this.language)
   }
 
-  get pagesText() {
-    return this.langEs ? 'Páginas' : 'Pages'
+  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) {
@@ -94,4 +164,35 @@ export class NavMenu extends HTMLElement {
     })
     this.pageList.replaceChildren(...els)
   }
+
+  set storageUse(n) {
+    this._storageUse = n
+    if (this.footer) {
+      this.renderFooter()
+    }
+  }
+
+  get storageUse() {
+    return this._storageUse
+  }
+
+  renderFooter() {
+    if (this.storageUse !== undefined) {
+      const fmt = new Intl.NumberFormat(
+        this.language,
+        {
+          style: 'percent',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        },
+      )
+      this.footer.innerText = (
+        this.text.localStorage + ' ' +
+        fmt.format(
+          this.storageUse
+        ).replaceAll(/\s+/g, '') + ' ' +
+        this.text.full
+      )
+    }
+  }
 }

components/page-actions.js

@@ -0,0 +1,377 @@
+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}?`
+    ),
+    cancel: 'Cancel',
+    alreadyExists: 'There is already a page with that name.',
+    save: 'Guardar',
+    close: 'Close',
+  }
+
+  textEs = {
+    download: 'Descargar',
+    rename: 'Mover/Renombrar',
+    duplicate: 'Duplicar',
+    delete_: 'Borrar',
+    settings: 'Configuración',
+    confirmDelete: f => (
+      `¿Desea borrar ${f}?`
+    ),
+    cancel: 'Cancelar',
+    alreadyExists: 'Ya existe una página con ese nombre.',
+    save: 'Guardar',
+    close: 'Cerrar',
+  }
+
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.language = navigator.language
+    this.dialogWrap = document.createElement('div')
+    this.shadowRoot.append(this.dialogWrap)
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      m-dialog::part(footer) {
+        padding-top: 15px;
+      }
+    `
+    this.shadowRoot.appendChild(style)
+  }
+
+  get menuActions() {
+    const baseActions = [
+      {
+        text: this.text.download,
+        click: this.download.bind(this),
+      },
+      {
+        text: this.text.rename,
+        click: this.rename.bind(this),
+      },
+      {
+        text: this.text.duplicate,
+        click: this.duplicate.bind(this),
+      },
+      {
+        text: this.text.delete_,
+        click: this.delete_.bind(this),
+      },
+    ]
+    if (this.page.isGroup) {
+      return [
+        ...baseActions,
+        {
+          text: this.text.settings,
+          click: this.settings.bind(this),
+        },
+      ]
+    } else {
+      return baseActions
+    }
+  }
+
+  download() {
+    const text = this.storage.getItem(this.path)
+    const sp = this.path.split('/')
+    const filename = sp[sp.length - 1]
+    const el = document.createElement('a')
+    el.setAttribute(
+      'href',
+      'data:text/plain;charset=utf-8,' +
+      encodeURIComponent(text)
+    )
+    el.setAttribute('download', filename)
+    el.style.display = 'none'
+    this.shadowRoot.appendChild(el)
+    el.click()
+    this.shadowRoot.removeChild(el)
+  }
+
+  rename() {
+    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 = this.storage.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
+      }
+      const sKeyOld = 'settings/page:' + this.path
+      const sKeyNew = 'settings/page:' + newPath
+      const settingsJson = this.storage.getItem(sKeyOld)
+      if (settingsJson ?? true === true) {
+        this.storage.setItem(sKeyNew, settingsJson)
+        this.storage.removeItem(sKeyOld)
+        let settingsData
+        try {
+          settingsData = JSON.parse(settingsJson)
+        } catch (err) {
+          settingsData = {}
+        }
+        if (settingsData?.connections) {
+          for (const dir of ['outbound', 'inbound']) {
+            const otherDir = (
+              dir === 'outbound' ? 'inbound' : 'outbound'
+            )
+            this.applyInverseRename(
+              settingsData, dir, otherDir, this.path, newPath
+            )
+          }
+        }
+      } else {
+        this.storage.removeItem(sKeyNew)
+      }
+      this.storage.setItem(
+        newPath,
+        this.storage.getItem(this.path)
+      )
+      this.storage.removeItem(this.path)
+      dialog.close()
+      location.hash = newPath
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
+  duplicate() {
+    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'
+    )
+    const btnText = this.text.duplicate
+    bGroup.addPrimary(btnText, () => {
+      const newPath = input.value
+      const v = this.storage.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
+      }
+      this.storage.setItem(
+        newPath,
+        this.storage.getItem(this.path)
+      )
+      this.storage.setItem(
+        'settings/page:' + newPath,
+        this.storage.getItem(this.path) ?? '{}'
+      )
+      dialog.close()
+      location.hash = newPath
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
+  delete_() {
+    const dialog = document.createElement(
+      'm-dialog'
+    )
+    this.dialogWrap.replaceChildren(dialog)
+    const p = document.createElement('p')
+    p.innerText = this.text.confirmDelete(
+      JSON.stringify(this.path)
+    )
+    dialog.bodyEl.appendChild(p)
+
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.delete_, () => {
+      this.storage.removeItem(this.path)
+      this.storage.removeItem(
+        'settings/page:' + this.path
+      )
+      location.hash = '/'
+      dialog.close()
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
+  settings() {
+    const dialog = document.createElement(
+      'm-dialog'
+    )
+    this.dialogWrap.replaceChildren(dialog)
+    const settingsEl = document.createElement(
+      'm-settings-page-settings'
+    )
+    settingsEl.cspProfiles = this.cspProfiles
+    settingsEl.path = this.path
+    settingsEl.checkExists = path => (
+      this.storage.getItem(path) !== null
+    )
+    settingsEl.data = this.page.settings
+    const h = document.createElement('h2')
+    h.innerText = this.text.settings
+    dialog.headerEl.append(h)
+    dialog.bodyEl.append(settingsEl)
+    const bGroup = document.createElement(
+      'm-forms-button-group'
+    )
+    bGroup.addPrimary(this.text.save, () => {
+      const settingsData = settingsEl.data
+      this.page.settings = settingsData
+      for (const dir of ['outbound', 'inbound']) {
+        const otherDir = (
+          dir === 'outbound' ? 'inbound' : 'outbound'
+        )
+        this.applyInverseSettings(
+          settingsData, dir, otherDir
+        )
+      }
+      this.applyTemplateSettings()
+      dialog.close()
+      this.dispatchEvent(new CustomEvent(
+        'settings-change', {bubbles: true, composed: true}
+      ))
+    })
+    bGroup.addCancel(this.text.cancel, () => {
+      dialog.close()
+    })
+    dialog.footerEl.appendChild(bGroup)
+    dialog.open()
+  }
+
+  applyInverseSettings(settingsData, dir, otherDir) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir]
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      data.connections[otherDir][this.path] = access
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyInverseRename(
+    settingsData, dir, otherDir, oldPath, newPath
+  ) {
+    const selfEntries = Object.entries(
+      settingsData.connections[dir] ?? {}
+    )
+    for (const [path, access] of selfEntries) {
+      const key = 'settings/page:' + path
+      let val = this.storage.getItem(key)
+      try {
+        if (val !== null) {
+          val = JSON.parse(val)
+        }
+      } catch (err) {
+        // ignore
+      }
+      const data = val ?? {}
+      data.connections = data.connections ?? {}
+      data.connections[otherDir] = (
+        data.connections[otherDir] ?? {}
+      )
+      const accessValue = data.connections[otherDir][oldPath]
+      data.connections[otherDir][newPath] = accessValue
+      data.connections[otherDir][oldPath] = undefined
+      this.storage.setItem(
+        key, JSON.stringify(data)
+      )
+    }
+  }
+
+  applyTemplateSettings() {
+    const templates = {}
+    for (const key of this.storage.keys()) {
+      try {
+        if (key.startsWith('settings/page:')) {
+          const data = JSON.parse(
+            this.storage.getItem(key)
+          )
+          if (data.template) {
+            const name = key.slice(
+              'settings/page:'.length
+            )
+            templates[name] = {name}
+          }
+        }
+      } catch (err) {
+        // do nothing
+      }
+    }
+    this.storage.setItem(
+      'settings:templates',
+      JSON.stringify({templates}),
+    )
+  }
+
+  get language() {
+    return this._language
+  }
+
+  set language(language) {
+    this._language = language
+    this.text = this.langEs ? this.textEs : this.textEn
+  }
+
+  get langEs() {
+    return /^es\b/.test(this.language)
+  }
+}

components/page.js

@@ -35,7 +35,7 @@ addEventListener('message', event => {
     }
     frame.srcdoc = d[1]
   } else if (frame !== undefined) {
-    frame.postMessage(event.data)
+    frame.contentWindow.postMessage(event.data, '*')
   }
   if (isNew) {
     document.body.appendChild(frame)
@@ -58,6 +58,7 @@ export class Page extends HTMLElement {
     div.classList.add('twrap')
     div.appendChild(this.textArea)
     this.shadowRoot.appendChild(div)
+    this.isGroup = false
   }
 
   connectedCallback() {
@@ -73,7 +74,7 @@ export class Page extends HTMLElement {
         align-items: stretch;
       }
       div.twrap {
-        padding: 10px 10px;
+        padding: 10px;
         display: flex;
         align-items: stretch;
         flex-direction: column;
@@ -84,9 +85,6 @@ export class Page extends HTMLElement {
         font-size: 0.90em;
         height: 100%;
       }
-      textarea:focus {
-        height: 45vh;
-      }
       iframe {
         border: none;
         margin: 0;
@@ -143,7 +141,7 @@ export class Page extends HTMLElement {
 
   set body(value) {
     try {
-      localStorage.setItem(this.path, value)
+      this.storage.setItem(this.path, value)
     } catch (err) {
       console.error(err)
     }
@@ -151,7 +149,7 @@ export class Page extends HTMLElement {
 
   get body() {
     try {
-      return localStorage.getItem(this.path)
+      return this.storage.getItem(this.path)
     } catch (err) {
       console.error(err)
       return ''

sw.js

@@ -1,21 +1,31 @@
 async function initCache() {
   const cache = await caches.open('v1')
   await cache.addAll([
-    '/',
-    '/index.html',
     '/app.js',
-    '/components/page.js',
-    '/components/layout.js',
+    '/components/file-group-page.js',
     '/components/header.js',
+    '/components/layout.js',
     '/components/nav-menu.js',
+    '/components/page.js',
+    '/components/page-actions.js',
     '/dialog/dialog.js',
+    '/editor/app.js',
+    '/editor/file-group.js',
+    '/editor/file-view.js',
+    '/editor/text-edit.js',
+    '/editor/code-edit.js',
+    '/editor/header.js',
     '/forms/button-group.js',
-    '/menu/dropdown.js',
+    '/index.html',
     '/loader/builder.js',
     '/loader/editor-build.js',
-    '/editor/file-group.js',
-    '/editor/file-page.js',
-    '/editor/text-edit.js',
+    '/menu/dropdown.js',
+    '/settings/page-settings.js',
+    '/settings/network-settings.js',
+    '/settings/connections.js',
+    '/settings/connection-edit.js',
+    '/editor-lib-codemirror/codemirror-bundle.js',
+    '/storage/storage.js', //2
   ])
 }
 
@@ -32,7 +42,7 @@ async function cacheFirst(request) {
       const csp = url.searchParams.get('csp')
       return new Response(html, {
         headers: {
-          'Content-Type': 'text/html',
+          'Content-Type': 'text/html; charset=utf-8',
           'Content-Security-Policy': csp,
         }
       })
@@ -53,3 +63,9 @@ self.addEventListener('fetch', event => {
 self.addEventListener('activate', event => {
   event.waitUntil(clients.claim())
 })
+
+self.addEventListener('message', e => {
+  if (Array.isArray(e.data) && e.data[0] === 'skipWaiting') {
+    self.skipWaiting()
+  }
+})