From a9e1b606d2e91e59d5110b0fdf863939f1d5ea5c Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 04:17:52 +0000 Subject: [PATCH 1/6] i7 --- components/page-menu.js | 45 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 components/page-menu.js diff --git a/components/page-menu.js b/components/page-menu.js new file mode 100644 index 0000000..7efe6ef --- /dev/null +++ b/components/page-menu.js @@ -0,0 +1,45 @@ +export class PageMenu extends HTMLElement { + constructor() { + super() + this.attachShadow({mode: 'open'}) + this.language = navigator.language + } + + connectedCallback() { + const style = document.createElement('style') + style.textContent = ` + :host { + display: flex; + flex-direction: column; + color: #000; + } + h1 { + width: 100%; + text-align: center; + font-size: 18px; + margin: 0; + padding: 5px; + } + a { + display: block; + } + ` + this.shadowRoot.append(style) + } + + get language() { + return this._language + } + + set language(language) { + this._language = language + } + + get langEs() { + return /^es\b/.test(this.language) + } + + get pagesText() { + return this.langEs ? 'Páginas' : 'Pages' + } +} \ No newline at end of file From 91c0632c140d8d546ea4aca076a7903112b53436 Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 04:19:48 +0000 Subject: [PATCH 2/6] Actualizar 'sw.js' --- sw.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sw.js b/sw.js index 08c186f..b8de43e 100644 --- a/sw.js +++ b/sw.js @@ -1,13 +1,14 @@ async function initCache() { const cache = await caches.open('v1') await cache.addAll([ - '/', //8 + '/', '/index.html', '/app.js', '/components/page.js', '/components/layout.js', '/components/header.js', '/components/nav-menu.js', + '/components/page-menu.js', ]) } From bbd56596c3b94d9a2c7c2d3ce727dbc7410caafe Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 04:24:56 +0000 Subject: [PATCH 3/6] Actualizar 'components/header.js' --- components/header.js | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/components/header.js b/components/header.js index f6bbc62..21a7daf 100644 --- a/components/header.js +++ b/components/header.js @@ -11,19 +11,24 @@ export class Header extends HTMLElement { constructor() { super() this.attachShadow({mode: 'open'}) - this.addButton(this.icons.menu, () => { + this.addButton(this.icons.menu, 'nav', () => { this.menu.pages = this.getPages() this.menuPanel.classList.add('open') this.overlay.classList.add('open') }) this.addDivider() - this.addButton(this.icons.dot) + this.addButton(this.icons.dot, 'page', () => { + this.pageMenuPanel.classList.add('open') + this.overlay.classList.add('open') + }) this.addMenu() + this.addPageMenu() } - addButton(html, onClick) { + addButton(html, cls, onClick) { const b = document.createElement('button') b.innerHTML = html + b.classList.add(cls) this.shadowRoot.appendChild(b) if (onClick) { b.addEventListener('click', onClick) @@ -53,6 +58,12 @@ export class Header extends HTMLElement { }) } + addPageMenu() { + this.pageMenuPanel = document.createElement('div') + this.pageMenuPanel.classList.add('pageMenu') + this.shadowRoot.appendChild(this.pageMenuPanel) + } + close() { this.overlay.classList.add('closing') this.overlay.classList.remove('open') @@ -111,6 +122,17 @@ export class Header extends HTMLElement { left: 0; opacity: 15%; } + button.pageButton { + position: relative; + } + div.pageMenuPanel { + bottom: 0px: + right: 0px; + display: none; + } + div.pageMenuPanel.open { + display: block; + } ` this.shadowRoot.append(style) } From d7709a4a9cf8f42af1b7ee1f51192f32d1a39792 Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 14:26:32 +0000 Subject: [PATCH 4/6] Actualizar 'components/header.js' --- components/header.js | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/components/header.js b/components/header.js index 21a7daf..06f9be1 100644 --- a/components/header.js +++ b/components/header.js @@ -59,8 +59,29 @@ export class Header extends HTMLElement { } addPageMenu() { + this.pageMenu = document.createElement('m-page-menu') + this.pageMenu.add('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.addEventListener('close', () => { + this.close() + }) this.pageMenuPanel = document.createElement('div') - this.pageMenuPanel.classList.add('pageMenu') + this.pageMenuPanel.appendChild(this.pageMenu) + this.pageMenuPanel.classList.add('page-menu') this.shadowRoot.appendChild(this.pageMenuPanel) } @@ -68,6 +89,7 @@ export class Header extends HTMLElement { 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) @@ -122,15 +144,19 @@ export class Header extends HTMLElement { left: 0; opacity: 15%; } - button.pageButton { + button.page { position: relative; } - div.pageMenuPanel { - bottom: 0px: - right: 0px; + div.page-menu { + position: fixed; + top: 28px; + right: 0; + display: flex; + align-items: flex-end; + margin-right: 0; display: none; } - div.pageMenuPanel.open { + div.page-menu.open { display: block; } ` From 5c044b37eca361eacd510b697a650e10abb15b9a Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 14:28:20 +0000 Subject: [PATCH 5/6] Actualizar 'components/page-menu.js' --- components/page-menu.js | 49 +++++++++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/components/page-menu.js b/components/page-menu.js index 7efe6ef..61fd0da 100644 --- a/components/page-menu.js +++ b/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 { - width: 100%; - text-align: center; - font-size: 18px; - margin: 0; - padding: 5px; - } - a { - display: block; + button { + background: #222; + font-size: 120%; + border: none; + color: inherit; + padding: 4px 10px; + text-align: left; } ` 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' - } } \ No newline at end of file From 7acf4306e02b049ba4d6e5e54ca5fe5aad263f99 Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 20 Mar 2023 14:31:04 +0000 Subject: [PATCH 6/6] Actualizar 'app.js' --- app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app.js b/app.js index ff8b521..f0fbb32 100644 --- a/app.js +++ b/app.js @@ -2,11 +2,13 @@ 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" 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) class Setup { async run() {