Actualizar 'components/page-menu.js'

components/page-menu.js

@@ -1,4 +1,14 @@
 export class PageMenu extends HTMLElement {
+  icons = {}
+
+  textEn = {
+    download: 'Download',
+  }
+
+  textEs = {
+    download: 'Descargar',
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -9,37 +19,48 @@ export class PageMenu extends HTMLElement {
     const style = document.createElement('style')
     style.textContent = `
       :host {
+        background: #222;
+        color: #ddd;
+        padding: 3px;
         display: flex;
         flex-direction: column;
-        color: #000;
+        align-items: stretch;
+        min-width: 180px;
       }
-      h1 {
+      button {
-        width: 100%;
+        background: #222;
-        text-align: center;
+        font-size: 120%;
-        font-size: 18px;
+        border: none;
-        margin: 0;
+        color: inherit;
-        padding: 5px;
+        padding: 4px 10px;
-      }
+        text-align: left;
-      a {
-        display: block;
       }
     `
     this.shadowRoot.append(style)
   }
 
+  add(name, handler) {
+    const btn = document.createElement('button')
+    btn.innerText = this.text[name]
+    this.shadowRoot.appendChild(btn)
+    btn.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent(
+        'close', {bubbles: true}
+      ))
+      handler()
+    })
+  }
+
   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)
   }
-
-  get pagesText() {
-    return this.langEs ? 'Páginas' : 'Pages'
-  }
 }