hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

IIFE wrapping to enable multiple demo instances

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-13 13:41:58 +01:00
parent cbcc1c5db4
commit 911e0f8acd
4 changed files with 76 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
content/patterns/coding/writing-inline-demos.md
View File

@ -73,6 +73,36 @@ toggle.addEventListener('click', (e) => {
</script>
{{</demo>}}
{{<demo>}}
<button aria-pressed="false">Toggle Me</button>
<style>
button {
background: blue;
color: white;
border: 0;
font-size: 1rem;
font-family: serif;
padding: 0.5em 1em;
border-right: 5px solid #000;
border-bottom: 5px solid #000;
}
[aria-pressed="true"] {
border: 0;
border-top: 5px solid #000;
border-left: 5px solid #000;
}
</style>
<script>
var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</script>
{{</demo>}}
## Captioned demos
It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:

45
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -324,10 +324,53 @@ toggle.addEventListener('click', (e) => {
</script>
</template>
<script>ShadyCSS.prepareTemplate(template34e756fc953627a51e20255208dbdb57, 'demo-elem34e756fc953627a51e20255208dbdb57'); var script = template34e756fc953627a51e20255208dbdb57.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem34e756fc953627a51e20255208dbdb57').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template34e756fc953627a51e20255208dbdb57.content.cloneNode(true)); } } customElements.define('demo-elem34e756fc953627a51e20255208dbdb57', DemoElem);</script>
<script>(function() { ShadyCSS.prepareTemplate(template34e756fc953627a51e20255208dbdb57, 'demo-elem34e756fc953627a51e20255208dbdb57'); var script = template34e756fc953627a51e20255208dbdb57.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem34e756fc953627a51e20255208dbdb57').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template34e756fc953627a51e20255208dbdb57.content.cloneNode(true)); } } customElements.define('demo-elem34e756fc953627a51e20255208dbdb57', DemoElem); })();</script>
</div>
<p>
<div class="demo-container">
<demo-elem5b7c6e1c905eca8144b27f3bc6737574 class="demo" id="demo-5b7c6e1c905eca8144b27f3bc6737574"></demo-elem5b7c6e1c905eca8144b27f3bc6737574>
<template id="template5b7c6e1c905eca8144b27f3bc6737574">
<button aria-pressed="false">Toggle Me</button>
<style>
button {
background: blue;
color: white;
border: 0;
font-size: 1rem;
font-family: serif;
padding: 0.5em 1em;
border-right: 5px solid #000;
border-bottom: 5px solid #000;
}
[aria-pressed="true"] {
border: 0;
border-top: 5px solid #000;
border-left: 5px solid #000;
}
</style>
<script>
var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</script>
</template>
<script>(function() { ShadyCSS.prepareTemplate(template5b7c6e1c905eca8144b27f3bc6737574, 'demo-elem5b7c6e1c905eca8144b27f3bc6737574'); var script = template5b7c6e1c905eca8144b27f3bc6737574.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem5b7c6e1c905eca8144b27f3bc6737574').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template5b7c6e1c905eca8144b27f3bc6737574.content.cloneNode(true)); } } customElements.define('demo-elem5b7c6e1c905eca8144b27f3bc6737574', DemoElem); })();</script>
</div>
</p>
<h2 id="captioned-demos">Captioned demos</h2>
<p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

2
themes/infusion/layouts/shortcodes/demo.html
View File

@ -1,6 +1,6 @@
{{ $uniq := .Inner | htmlEscape | md5 | lower }}
{{ $template := printf "template-%s" $uniq }}
{{ $string := replace "<script>ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem);</script>" "%s" $uniq }}
{{ $string := replace "<script>(function() { ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem); })();</script>" "%s" $uniq }}
<div class="demo-container">
{{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}">