Style and dialog WIP (#27)

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

app.js

@@ -3,12 +3,14 @@ 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"
 
 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)
 
 class Setup {
   async run() {

components/dialog.js

@@ -0,0 +1,32 @@
+export class Dialog extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.windowEl = document.createElement('div')
+    this.windowEl.classList.add('window')
+    this.headerEl = document.createElement('div')
+    this.headerEl.classList.add('header')
+    this.bodyEl = document.createElement('div')
+    this.bodyEl.classList.add('body')
+    this.footerEl = document.createElement('div')
+    this.footerEl.classList.add('footer')
+    this.windowEl.replaceChildren(
+      this.headerEl, this.bodyEl, this.footerEl
+    )
+    this.shadowRoot.appendChild(this.windowEl)
+  }
+
+  connectedCallback() {
+    this.textArea.value = this.body
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+      }
+    `
+    this.shadowRoot.append(style)
+  }
+}

components/page-menu.js

@@ -3,10 +3,14 @@ export class PageMenu extends HTMLElement {
 
   textEn = {
     download: 'Download',
+    rename: 'Rename',
+    delete: 'Delete',
   }
 
   textEs = {
     download: 'Descargar',
+    rename: 'Renombrar',
+    delete: 'Borrar',
   }
 
   constructor() {

sw.js

@@ -9,7 +9,8 @@ async function initCache() {
     '/components/header.js',
     '/components/nav-menu.js',
     '/components/page-menu.js',
-  ]) //4b20465c5f
+    '/components/dialog.js',
+  ])
 }
 
 self.addEventListener("install", event => {