From e9ffdf63fe2e8483ca418c6e8c419e23072afa26 Mon Sep 17 00:00:00 2001 From: bat Date: Tue, 4 Apr 2023 17:31:46 +0000 Subject: [PATCH 1/4] Change layout --- components/layout.js | 13 +++++++++--- components/sw.js | 50 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 components/sw.js diff --git a/components/layout.js b/components/layout.js index 89d5a3a..b7df6dd 100644 --- a/components/layout.js +++ b/components/layout.js @@ -12,9 +12,16 @@ export class Layout extends HTMLElement { :host { display: flex; flex-direction: column; + align-items: stretch; + height: 100vh; + min-height: 100vh; + max-height: 100vh; + overflow-y: hidden; + position: relative; } - .m-page { + m-page { flex-grow: 1; + background: #ffb; } ` this.shadowRoot.appendChild(style) @@ -45,11 +52,11 @@ export class Layout extends HTMLElement { get path() { const hash = ( - window.location.hash.slice(1) || '/' + location.hash.slice(1) || '/' ) return hash.startsWith('/') ? new URL( hash, - window.location + location.href ).pathname : hash } diff --git a/components/sw.js b/components/sw.js new file mode 100644 index 0000000..79bdca1 --- /dev/null +++ b/components/sw.js @@ -0,0 +1,50 @@ +async function initCache() { + const cache = await caches.open('v1') + await cache.addAll([ + '/', + '/index.html', + '/app.js', + '/components/page.js', + '/components/layout.js', + '/components/header.js', + '/components/nav-menu.js', + '/components/dialog.js', + '/forms/button-group.js', + '/menu/dropdown.js', + ]) //2 +} + +self.addEventListener("install", event => { + self.skipWaiting() + event.waitUntil(initCache()) +}) + +async function cacheFirst(request) { + if (request.url.includes('/-/frame')) { + const url = new URL(request.url) + if (url.pathname === '/-/frame') { + const html = url.searchParams.get('html') + const csp = url.searchParams.get('csp') + return new Response(html, { + headers: { + 'Content-Type': 'text/html', + 'Content-Security-Policy': csp, + } + }) + } + } + const resp = await caches.match(request) + if (resp) { + return resp + } else { + return fetch(request) + } +} + +self.addEventListener('fetch', event => { + event.respondWith(cacheFirst(event.request)) +}) + +self.addEventListener('activate', event => { + event.waitUntil(clients.claim()) +}) \ No newline at end of file From 4ddbd06b08cdd3a77400c2385b57f4abe340cb9e Mon Sep 17 00:00:00 2001 From: bat Date: Tue, 4 Apr 2023 18:12:27 +0000 Subject: [PATCH 2/4] Remove background for dev --- components/layout.js | 1 - components/page.js | 25 +++++++++++++++---------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/components/layout.js b/components/layout.js index b7df6dd..d7b3fa4 100644 --- a/components/layout.js +++ b/components/layout.js @@ -21,7 +21,6 @@ export class Layout extends HTMLElement { } m-page { flex-grow: 1; - background: #ffb; } ` this.shadowRoot.appendChild(style) diff --git a/components/page.js b/components/page.js index d777fc9..1db0823 100644 --- a/components/page.js +++ b/components/page.js @@ -42,9 +42,8 @@ addEventListener('message', event => { export class Page extends HTMLElement { constructor() { super() - const shadow = this.attachShadow({mode: 'open'}) + this.attachShadow({mode: 'open'}) this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'" - //this.editing = false this.textArea = document.createElement('textarea') this.textArea.addEventListener('input', e => { this.body = e.target.value @@ -52,7 +51,7 @@ export class Page extends HTMLElement { const div = document.createElement('div') div.classList.add('twrap') div.appendChild(this.textArea) - shadow.appendChild(div) + this.shadowRoot.appendChild(div) } connectedCallback() { @@ -60,8 +59,10 @@ export class Page extends HTMLElement { const style = document.createElement('style') style.textContent = ` :host { - overflow-y: auto; - display: flex; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: "main"; flex-direction: column; align-items: stretch; } @@ -70,16 +71,22 @@ export class Page extends HTMLElement { display: flex; align-items: stretch; flex-direction: column; + grid-area: main; } textarea { padding: 5px 10px; font-size: 0.90em; - height: 50vh; + height: 100%; + } + textarea:focus { + height: 45vh; } iframe { border: none; + margin: 0; + padding: 0; + grid-area: main; width: 100%; - height: 90dvh; } :host(.editing) iframe { display: none; @@ -94,8 +101,6 @@ export class Page extends HTMLElement { } initFrame() { - const wrap = document.createElement('div') - this.shadowRoot.appendChild(wrap) const frame = document.createElement('iframe') if (this.csp !== undefined) { frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation" @@ -112,8 +117,8 @@ export class Page extends HTMLElement { frame.addEventListener('load', () => { this.display(this.body) }) - wrap.appendChild(frame) this.frame = frame + this.shadowRoot.append(frame) this.textArea.addEventListener('blur', e => { this.display(e.target.value) }) From 12e5595bd65919de22ff161df8ff606eafeec96a Mon Sep 17 00:00:00 2001 From: bat Date: Tue, 4 Apr 2023 18:15:59 +0000 Subject: [PATCH 3/4] change layout --- index.html | 24 ++++++++++-------------- sw.js | 2 +- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index ceeeffc..ce01df5 100644 --- a/index.html +++ b/index.html @@ -4,20 +4,16 @@ macchiato.dev diff --git a/sw.js b/sw.js index 5be9c44..79bdca1 100644 --- a/sw.js +++ b/sw.js @@ -11,7 +11,7 @@ async function initCache() { '/components/dialog.js', '/forms/button-group.js', '/menu/dropdown.js', - ]) //1 + ]) //2 } self.addEventListener("install", event => { From 59fdcf93107c17755e46e5e36278a8b4cabd9561 Mon Sep 17 00:00:00 2001 From: bat Date: Tue, 4 Apr 2023 18:19:32 +0000 Subject: [PATCH 4/4] Remove from wrong directory --- components/sw.js | 50 ------------------------------------------------ 1 file changed, 50 deletions(-) delete mode 100644 components/sw.js diff --git a/components/sw.js b/components/sw.js deleted file mode 100644 index 79bdca1..0000000 --- a/components/sw.js +++ /dev/null @@ -1,50 +0,0 @@ -async function initCache() { - const cache = await caches.open('v1') - await cache.addAll([ - '/', - '/index.html', - '/app.js', - '/components/page.js', - '/components/layout.js', - '/components/header.js', - '/components/nav-menu.js', - '/components/dialog.js', - '/forms/button-group.js', - '/menu/dropdown.js', - ]) //2 -} - -self.addEventListener("install", event => { - self.skipWaiting() - event.waitUntil(initCache()) -}) - -async function cacheFirst(request) { - if (request.url.includes('/-/frame')) { - const url = new URL(request.url) - if (url.pathname === '/-/frame') { - const html = url.searchParams.get('html') - const csp = url.searchParams.get('csp') - return new Response(html, { - headers: { - 'Content-Type': 'text/html', - 'Content-Security-Policy': csp, - } - }) - } - } - const resp = await caches.match(request) - if (resp) { - return resp - } else { - return fetch(request) - } -} - -self.addEventListener('fetch', event => { - event.respondWith(cacheFirst(event.request)) -}) - -self.addEventListener('activate', event => { - event.waitUntil(clients.claim()) -}) \ No newline at end of file