md5 for unique strings and remove FF Shadow DOM warning

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

View File

@ -73,10 +73,6 @@ toggle.addEventListener('click', (e) => {
</script> </script>
{{</demo>}} {{</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 ## 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: 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:

View File

@ -291,10 +291,10 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <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> <button aria-pressed="false">Toggle Me</button>
<style> <style>
@ -324,31 +324,20 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </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> </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> <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> <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">}} &#x7b;{&lt;demo caption="A basic button element">}}
&lt;!-- demo code here --> &lt;!-- demo code here -->
&#x7b;{&lt;/demo>}} &#x7b;{&lt;/demo>}}
</code></pre> </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> <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>

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> <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> <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 The Github web interface
</figcaption> </figcaption>
</figure> </figure>

View File

@ -283,10 +283,10 @@
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p> <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> <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 <a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
</figcaption> </figcaption>
</figure> </figure>

View File

@ -267,7 +267,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2> <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> <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"> <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)"> <g transform="translate(0 -981.5)">
@ -279,7 +279,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2> </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> <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> </div>
@ -292,7 +292,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2> <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> <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"> <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)"> <g transform="translate(0 -981.5)">
@ -304,7 +304,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2> </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> <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> </div>
@ -315,7 +315,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
<h2> <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> <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"> <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)"> <g transform="translate(0 -981.5)">
@ -327,7 +327,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
</h2> </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> <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> </div>

File diff suppressed because one or more lines are too long

View File

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

View File

@ -2,7 +2,7 @@
{{ if .Get "level" }} {{ if .Get "level" }}
<h{{ .Get "level" }}> <h{{ .Get "level" }}>
{{ end }} {{ 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> <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"> <svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
<g transform="translate(0 -981.5)"> <g transform="translate(0 -981.5)">
@ -14,7 +14,7 @@
{{ if .Get "level" }} {{ if .Get "level" }}
</h{{ .Get "level"}}> </h{{ .Get "level"}}>
{{ end }} {{ 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 }} {{ .Inner }}
</div> </div>
</div> </div>

View File

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