js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix turbo caching stuff

Browse Source
This commit is contained in:
konnorrogers
2024-12-10 18:49:56 -05:00
parent 3e18309367
commit 68f693cbc0
3 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/base.njk
View File

@@ -6,6 +6,7 @@
<meta name="description" content="{{ description }}">
<meta name="theme-color" content="#f36944">
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
<meta name="turbo-cache-control" content="no-preview">
<title>{{ title }}</title>

4
docs/_includes/page-demo.njk
View File

@@ -16,7 +16,7 @@
</div>
</fieldset>
<wa-viewport-demo viewport="1000">
<iframe srcdoc="" id="page_slots_iframe" data-turbo="false" data-turbo-temporary></iframe>
<iframe srcdoc="" id="page_slots_iframe"></iframe>
</wa-viewport-demo>
</div>
<script type=module src="/assets/examples/page-demo/demo.js"></script>
<script type="module" src="/assets/examples/page-demo/demo.js"></script>

89
docs/assets/examples/page-demo/demo.js
View File

@@ -1,50 +1,53 @@
await customElements.whenDefined('wa-checkbox');
let container = document.getElementById('page_slots_demo');
let fieldset = container.querySelector('fieldset');
let iframe = container.querySelector('iframe');
let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
.map(i => i.outerHTML)
.join('\n');
let includes = `${stylesheets}
<script src="/dist/webawesome.loader.js" type="module"></script>
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
async function run () {
await customElements.whenDefined('wa-checkbox');
let container = document.getElementById('page_slots_demo');
function render() {
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
let slotsHTML = slots
.map(slot => {
let name = slot.getAttribute('value');
let description = slot.getAttribute('data-description');
if (!container) { return }
let tag = 'div';
if (name.endsWith('header')) {
tag = 'header';
}
if (name.endsWith('footer')) {
tag = 'footer';
}
return `<${tag} class="slot-content" slot="${name}">
<strong>${name || 'main <em>(default)</em>'}</strong>
<p>${description}</p>
</${tag}>`;
})
let fieldset = container.querySelector('fieldset');
let iframe = container.querySelector('iframe');
let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
.map(i => i.outerHTML)
.join('\n');
let page = iframe.contentDocument?.querySelector('wa-page');
let includes = `${stylesheets}
<script src="/dist/webawesome.loader.js" type="module"></script>
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
if (page) {
page.innerHTML = slotsHTML;
} else {
iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
function render() {
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
let slotsHTML = slots
.map(slot => {
let name = slot.getAttribute('value');
let description = slot.getAttribute('data-description');
let tag = 'div';
if (name.endsWith('header')) {
tag = 'header';
}
if (name.endsWith('footer')) {
tag = 'footer';
}
return `<${tag} class="slot-content" slot="${name}">
<strong>${name || 'main <em>(default)</em>'}</strong>
<p>${description}</p>
</${tag}>`;
})
.join('\n');
let page = iframe.contentDocument?.querySelector('wa-page');
if (page) {
page.innerHTML = slotsHTML;
} else {
iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
}
}
fieldset?.addEventListener('input', render);
render();
}
fieldset?.addEventListener('input', render);
render();
//
// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
// to not render. Even with this, there are console errors when leaving the page.
//
// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
//
document.body.setAttribute('data-turbo', 'false');
;(async () => {
await run()
document.addEventListener("turbo:load", run)
})()