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

polyfill shadow DOM version

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-13 11:36:42 +01:00
parent bb74d688d8
commit 8722ccc683
23 changed files with 76 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/index.html
View File

@ -25,6 +25,7 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<title>
Infusion

3
docs/patterns/coding/code-blocks/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Code blocks | Infusion

3
docs/patterns/coding/codepen-embedding/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
CodePen embedding | Infusion

3
docs/patterns/coding/color-palettes/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Color palettes | Infusion

3
docs/patterns/coding/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Coding | Infusion

3
docs/patterns/coding/tested/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Tested using... | Infusion

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

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Writing inline demos | Infusion
@ -284,12 +287,14 @@ toggle.addEventListener('click', (e) => {
<p>Here&rsquo;s a live demo of&hellip; the demo:</p>
<div class="demo-container">
<div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div>
<demo-elemcizsddtidxr0b24gyxjp class="demo" id="demo-cizsddtidxr0b24gyxjp"></demo-elemcizsddtidxr0b24gyxjp>
<template id="template-CiZsdDtidXR0b24gYXJp">
<template id="templatecizsddtidxr0b24gyxjp">
<button aria-pressed="false">Toggle Me</button>
<style>
@ -319,26 +324,11 @@ toggle.addEventListener('click', (e) => {
</script>
</template>
<script>
(function() {
var root = document.getElementById('demo-CiZsdDtidXR0b24gYXJp');
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-CiZsdDtidXR0b24gYXJp');
var script = template.content.querySelector('script');
if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24gYXJp\').shadowRoot; ${script.textContent} })()`
}
root.shadowRoot.appendChild(document.importNode(template.content, true));
} else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
}
})();
</script>
<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>
</div>
<p><aside aria-label="note" class="note">
<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>
@ -347,7 +337,7 @@ toggle.addEventListener('click', (e) => {
</div>
</aside>
</p>
<h2 id="captioned-demos">Captioned demos</h2>

3
docs/patterns/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Patterns | Infusion

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

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Installation | Infusion

3
docs/patterns/library-setup/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Library setup | Infusion

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

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Including images | Infusion

3
docs/patterns/media/including-videos/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Including videos | Infusion

3
docs/patterns/media/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Media | Infusion

3
docs/patterns/serving/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Serving | Infusion

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

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Expandable sections | Infusion

3
docs/patterns/writing/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Writing | Infusion

3
docs/patterns/writing/library-structure/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Library structure | Infusion

3
docs/patterns/writing/markdown-and-metadata/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Markdown &amp; metadata | Infusion

3
docs/patterns/writing/notes-and-warnings/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
Notes &amp; warnings | Infusion

3
docs/patterns/writing/references/index.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
<link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
<script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
<title>
References | Infusion

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

3
themes/infusion/layouts/_default/baseof.html
View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" />
<link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
{{ if eq .Type "patterns" }}
<script src="{{ "js/webcomponents.js" | absURL }}"></script>
{{ end }}
<title>
{{ block "title" . }}
{{ .Title }} | {{ .Site.Title }}

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

@ -1,32 +1,19 @@
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }}
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" | 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">
{{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }}
<div class="demo" id="demo-{{ $uniq }}"></div>
<demo-elem{{ $uniq }} class="demo" id="demo-{{ $uniq }}"></demo-elem{{ $uniq }}>
{{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
{{ end }}
{{ if .Get "caption" }}
</figure>
{{ end }}
<template id="template-{{ $uniq }}">
{{ .Inner }}
<template id="template{{ $uniq }}">
{{ .Inner | safeHTML }}
</template>
<script>
(function() {
var root = document.getElementById('demo-{{ $uniq }}');
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script');
if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
}
root.shadowRoot.appendChild(document.importNode(template.content, true));
} else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
}
})();
</script>
{{ $string | safeHTML }}
</div>