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

md5 for unique strings and remove FF Shadow DOM warning

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-13 11:58:39 +01:00
parent 8722ccc683
commit cbcc1c5db4
9 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,10 +73,6 @@ toggle.addEventListener('click', (e) => {
</script>
{{</demo>}}
{{% note %}}
Firefox does not currently support Shadow DOM and **Infusion** does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.
{{% /note %}}
## 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:

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

@ -291,10 +291,10 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container">
<demo-elemcizsddtidxr0b24gyxjp class="demo" id="demo-cizsddtidxr0b24gyxjp"></demo-elemcizsddtidxr0b24gyxjp>
<demo-elem34e756fc953627a51e20255208dbdb57 class="demo" id="demo-34e756fc953627a51e20255208dbdb57"></demo-elem34e756fc953627a51e20255208dbdb57>
<template id="templatecizsddtidxr0b24gyxjp">
<template id="template34e756fc953627a51e20255208dbdb57">
<button aria-pressed="false">Toggle Me</button>
<style>
@ -324,31 +324,20 @@ toggle.addEventListener('click', (e) => {
</script>
</template>
<script>ShadyCSS.prepareTemplate(templatecizsddtidxr0b24gyxjp, 'demo-elemcizsddtidxr0b24gyxjp'); var script = templatecizsddtidxr0b24gyxjp.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elemcizsddtidxr0b24gyxjp').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(templatecizsddtidxr0b24gyxjp.content.cloneNode(true)); } } customElements.define('demo-elemcizsddtidxr0b24gyxjp', DemoElem);</script>
<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>
</div>
<aside aria-label="note" class="note">
<div>
<svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use>
</svg>
<p>Firefox does not currently support Shadow DOM and <strong>Infusion</strong> does not include a polyfill. Firefox will output an error message. These demos function correctly in Chrome, Safari, and Opera.</p>
</div>
</aside>
<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>
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
<p><pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo caption="A basic button element">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>

4
docs/patterns/installation/index.html
View File

@ -280,10 +280,10 @@
<p>If the command line is not your thing, fork <a href="https://github.com/heydon/inclusive-pattern-library">github.com/heydon/inclusive-pattern-library</a> and choose <strong>Open in Desktop</strong> from <strong>Clone or download</strong> (see figure 1, below).</p>
<figure role="group" aria-describedby="caption-VGhlIEdpdGh1YiB3ZWIg">
<figure role="group" aria-describedby="caption-4f6ff97ad7397f1735a833534d0e2e4d">
<p><img src="https://heydon.github.io/infusion/images/open_in_desktop.png" alt="The open in desktop option, revealed when clicking clone or download" /></p>
<figcaption id="caption-VGhlIEdpdGh1YiB3ZWIg">
<figcaption id="caption-4f6ff97ad7397f1735a833534d0e2e4d">
The Github web interface
</figcaption>
</figure>

4
docs/patterns/media/including-images/index.html
View File

@ -283,10 +283,10 @@
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
<figure role="group" aria-describedby="caption-W1N0ZXZlIEZhdWxrbmVy">
<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120">
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
<figcaption id="caption-W1N0ZXZlIEZhdWxrbmVy">
<figcaption id="caption-8e57b013acffbeb34ebb09e52c193120">
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
</figcaption>
</figure>

12
docs/patterns/writing/expandable-sections/index.html
View File

@ -267,7 +267,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2>
<button aria-expanded="false" data-expands="expandable-PHA&#43;SGVyZSBpcyBzb21l">
<button aria-expanded="false" data-expands="expandable-4ab31bdd2c2d9d4cac64804c775e2683">
<span class="expandable-label">A section of dummy text</span>
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
@ -279,7 +279,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2>
<div id="expandable-PHA&#43;SGVyZSBpcyBzb21l" hidden>
<div id="expandable-4ab31bdd2c2d9d4cac64804c775e2683" hidden>
<p>Here is some markdown including <a href="https://twitter.com/heydonworks">a link</a>. Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.</p>
</div>
@ -292,7 +292,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2>
<button aria-expanded="false" data-expands="expandable-PHA&#43;TWF1cmlzIGVnZXQg">
<button aria-expanded="false" data-expands="expandable-ade9cd5456422b2a456101177ddc6f3f">
<span class="expandable-label">A section of dummy text</span>
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
@ -304,7 +304,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2>
<div id="expandable-PHA&#43;TWF1cmlzIGVnZXQg" hidden>
<div id="expandable-ade9cd5456422b2a456101177ddc6f3f" hidden>
<p>Mauris eget elit ut neque venenatis placerat id nec libero. Nunc accumsan cursus elit nec iaculis. Proin id rutrum magna, a aliquet sem. Sed et tortor id sem eleifend porta vitae eget elit. Cras sodales porta malesuada. Suspendisse at odio ac tortor.</p>
</div>
@ -315,7 +315,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2>
<button aria-expanded="true" data-expands="expandable-PHA&#43;VXQgdnVscHV0YXRl">
<button aria-expanded="true" data-expands="expandable-4d6feae4dfbb8614dd5fa6730b3dfa5e">
<span class="expandable-label">Another dummy section</span>
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
@ -327,7 +327,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2>
<div id="expandable-PHA&#43;VXQgdnVscHV0YXRl" >
<div id="expandable-4d6feae4dfbb8614dd5fa6730b3dfa5e" >
<p>Ut vulputate enim ut lorem iaculis, vel faucibus metus iaculis. Aliquam erat volutpat. Aliquam luctus orci vel consectetur dignissim. Nullam et efficitur lorem, et ornare est. Sed tristique porttitor justo, quis malesuada velit. Nullam et elit finibus, sollicitudin velit placerat, ultricies dui.</p>
</div>

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,4 +1,4 @@
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" | lower }}
{{ $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 }}
<div class="demo-container">

4
themes/infusion/layouts/shortcodes/expandable.html
View File

@ -2,7 +2,7 @@
{{ if .Get "level" }}
<h{{ .Get "level" }}>
{{ end }}
<button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | base64Encode | truncate 20 "" }}">
<button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="expandable-{{ .Inner | md5 }}">
<span class="expandable-label">{{ .Get "label" | default "More info" }}</span>
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)">
@ -14,7 +14,7 @@
{{ if .Get "level" }}
</h{{ .Get "level"}}>
{{ end }}
<div id="expandable-{{ .Inner | base64Encode | truncate 20 "" }}" {{ with .Get "open" | not }}hidden{{ end }}>
<div id="expandable-{{ .Inner | md5 }}" {{ with .Get "open" | not }}hidden{{ end }}>
{{ .Inner }}
</div>
</div>

4
themes/infusion/layouts/shortcodes/figure.html
View File

@ -1,7 +1,7 @@
{{ $caption := .Get "caption" }}
<figure role="group" aria-describedby="caption-{{ $caption | base64Encode | truncate 20 "" }}">
<figure role="group" aria-describedby="caption-{{ $caption | md5 }}">
{{ .Inner }}
<figcaption id="caption-{{ $caption | base64Encode | truncate 20 "" }}">
<figcaption id="caption-{{ $caption | md5 }}">
{{ .Get "caption" | markdownify }}
</figcaption>
</figure>