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

reverted inline demo test code

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-13 13:44:04 +01:00
parent 911e0f8acd
commit b73aaf532f
3 changed files with 1 additions and 74 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,36 +73,6 @@ 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:

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

@ -328,49 +328,6 @@ toggle.addEventListener('click', (e) => {
</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