From 144acaf332f45e2a182679af708a1ed194a08632 Mon Sep 17 00:00:00 2001 From: bat Date: Sun, 9 Apr 2023 06:59:52 +0000 Subject: [PATCH 1/6] Handle links in sandbox --- nav-menu.js | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 nav-menu.js diff --git a/nav-menu.js b/nav-menu.js new file mode 100644 index 0000000..99f6899 --- /dev/null +++ b/nav-menu.js @@ -0,0 +1,96 @@ +export class NavMenu extends HTMLElement { + constructor() { + super() + this.attachShadow({mode: 'open'}) + this.language = navigator.language + this.pages = [] + this.handleLinks = false + } + + connectedCallback() { + const style = document.createElement('style') + style.textContent = ` + :host { + display: flex; + flex-direction: column; + color: #000; + max-height: 100dvh; + } + h1 { + width: 100%; + text-align: center; + font-size: 18px; + margin: 0; + padding: 5px; + } + .page-list { + flex-grow: 1; + overflow-y: auto; + padding-bottom: 50px; + } + a { + display: block; + margin: 8px 10px; + } + ` + this.shadowRoot.append(style) + this.header = document.createElement('h1') + this.header.innerText = this.pagesText + this.shadowRoot.append(this.header) + this.pageList = document.createElement('div') + this.pageList.classList.add('page-list') + this.shadowRoot.append(this.pageList) + this.renderPageList() + this.shadowRoot.addEventListener('click', e => { + if (this.handleLinks) { + e.preventDefault() + } + if (e.target.classList.contains('page')) { + this.dispatchEvent(new CustomEvent( + 'close-menu', {bubbles: true} + )) + } + if (this.handleLinks) { + location.hash = `#${e.target.innerText}` + } + }) + } + + 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' + } + + set pages(pages) { + this._pages = pages + if (this.pageList) { + this.renderPageList() + } + } + + get pages() { + return this._pages + } + + renderPageList() { + const els = this.pages.map(page => { + const el = document.createElement('a') + el.href = `#${page.replace(/^#/, '%23')}` + el.innerText = page + el.classList.add('page') + return el + }) + this.pageList.replaceChildren(...els) + } +} \ No newline at end of file From 8ea5ad385f4a308913866609dcbf8c782de2b7ae Mon Sep 17 00:00:00 2001 From: bat Date: Sun, 9 Apr 2023 07:02:12 +0000 Subject: [PATCH 2/6] Run with or without sandbox --- app.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/app.js b/app.js index aad8bcb..78bbbea 100644 --- a/app.js +++ b/app.js @@ -19,18 +19,28 @@ customElements.define( ) class Setup { - async run() { - const sw = navigator.serviceWorker - - sw.addEventListener('controllerchange', () => { - if (this.registration.active) { - window.location.reload(true) + async runWithSw() { + navigator.serviceWorker.addEventListener( + 'controllerchange', + () => { + if (this.registration.active) { + window.location.reload(true) + } } - }) + ) await this.register() this.load() } + async runWithoutSw() { + const layout = document.createElement( + 'm-layout' + ) + layout.csp = undefined + layout.header.menu.handleLinks = true + document.body.appendChild(layout) + } + async register() { try { this.registration = @@ -54,4 +64,4 @@ class Setup { } } -new Setup().run() \ No newline at end of file +new Setup().runWithSw() \ No newline at end of file From a24906953e42746e7f8bd397dfcbed6c15903adf Mon Sep 17 00:00:00 2001 From: bat Date: Sun, 9 Apr 2023 07:03:31 +0000 Subject: [PATCH 3/6] Remove to move nav menu --- components/nav-menu.js | 89 ------------------------------------------ 1 file changed, 89 deletions(-) delete mode 100644 components/nav-menu.js diff --git a/components/nav-menu.js b/components/nav-menu.js deleted file mode 100644 index 3562d41..0000000 --- a/components/nav-menu.js +++ /dev/null @@ -1,89 +0,0 @@ -export class NavMenu extends HTMLElement { - constructor() { - super() - this.attachShadow({mode: 'open'}) - this.language = navigator.language - this.pages = [] - } - - connectedCallback() { - const style = document.createElement('style') - style.textContent = ` - :host { - display: flex; - flex-direction: column; - color: #000; - max-height: 100dvh; - } - h1 { - width: 100%; - text-align: center; - font-size: 18px; - margin: 0; - padding: 5px; - } - .page-list { - flex-grow: 1; - overflow-y: auto; - padding-bottom: 50px; - } - a { - display: block; - margin: 8px 10px; - } - ` - this.shadowRoot.append(style) - this.header = document.createElement('h1') - this.header.innerText = this.pagesText - this.shadowRoot.append(this.header) - this.pageList = document.createElement('div') - this.pageList.classList.add('page-list') - this.shadowRoot.append(this.pageList) - this.renderPageList() - this.shadowRoot.addEventListener('click', e => { - if (e.target.classList.contains('page')) { - this.dispatchEvent(new CustomEvent( - 'close-menu', {bubbles: true} - )) - } - }) - } - - 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' - } - - set pages(pages) { - this._pages = pages - if (this.pageList) { - this.renderPageList() - } - } - - get pages() { - return this._pages - } - - renderPageList() { - const els = this.pages.map(page => { - const el = document.createElement('a') - el.href = `#${page.replace(/^#/, '%23')}` - el.innerText = page - el.classList.add('page') - return el - }) - this.pageList.replaceChildren(...els) - } -} \ No newline at end of file From cf474e7f50f4c4e6cc9adc7d5e0f40303ca9a9e1 Mon Sep 17 00:00:00 2001 From: bat Date: Sun, 9 Apr 2023 07:04:17 +0000 Subject: [PATCH 4/6] Move to correct location --- nav-menu.js => components/nav-menu.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename nav-menu.js => components/nav-menu.js (100%) diff --git a/nav-menu.js b/components/nav-menu.js similarity index 100% rename from nav-menu.js rename to components/nav-menu.js From 40f1a49e6ec09844a9cd254938b6f263605385d4 Mon Sep 17 00:00:00 2001 From: bat Date: Mon, 10 Apr 2023 07:11:19 +0000 Subject: [PATCH 5/6] Updates to run inside or outside sandbox --- components/layout.js | 3 +++ components/nav-menu.js | 13 +++++++------ components/page.js | 2 +- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/components/layout.js b/components/layout.js index d95805e..40e1cf9 100644 --- a/components/layout.js +++ b/components/layout.js @@ -36,6 +36,9 @@ export class Layout extends HTMLElement { addEventListener('hashchange', () => { this.load() }) + this.addEventListener('hash-change', () => { + this.load() + }) } load() { diff --git a/components/nav-menu.js b/components/nav-menu.js index 99f6899..713f73d 100644 --- a/components/nav-menu.js +++ b/components/nav-menu.js @@ -42,16 +42,17 @@ export class NavMenu extends HTMLElement { this.shadowRoot.append(this.pageList) this.renderPageList() this.shadowRoot.addEventListener('click', e => { - if (this.handleLinks) { - e.preventDefault() - } if (e.target.classList.contains('page')) { + if (this.handleLinks) { + e.preventDefault() + } this.dispatchEvent(new CustomEvent( 'close-menu', {bubbles: true} )) - } - if (this.handleLinks) { - location.hash = `#${e.target.innerText}` + if (this.handleLinks) { + const hash = '#' + e.target.innerText + location.hash = hash + } } }) } diff --git a/components/page.js b/components/page.js index 71236e3..3e1dd58 100644 --- a/components/page.js +++ b/components/page.js @@ -131,7 +131,7 @@ export class Page extends HTMLElement { } display(value) { - let doc = value + let doc = value || '' if (!(/<\w/).test(doc.substring(0, 30))) { doc = `
` +
         doc.replace("<", "<").replace(">", ">") +

From c81c749de043ab1729c33b5b8d831387044fc319 Mon Sep 17 00:00:00 2001
From: bat 
Date: Mon, 10 Apr 2023 07:12:17 +0000
Subject: [PATCH 6/6] Updates to run inside or outside sandbox

---
 sw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sw.js b/sw.js
index 3c20815..2978397 100644
--- a/sw.js
+++ b/sw.js
@@ -11,7 +11,7 @@ async function initCache() {
     '/dialog/dialog.js',
     '/forms/button-group.js',
     '/menu/dropdown.js',
-  ])
+  ]) //1
 }
 
 self.addEventListener("install", event => {