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

error free standalone docs

This commit is contained in:
Heydon Pickering 2017-08-06 09:19:38 +01:00
parent 8a513cd866
commit e81399ec27
6 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/css/styles.css
View File

@ -162,7 +162,6 @@ main ul ul {
button { button {
font-size: 1.25rem; font-size: 1.25rem;
font-family: inherit; font-family: inherit;
font-weight: inherit;
background: #111; background: #111;
color: #fff; color: #fff;
padding: 0.75rem; padding: 0.75rem;
@ -170,10 +169,8 @@ button {
} }
[data-launch] { [data-launch] {
font-size: 0.75rem; font-size: 0.75rem;
display: block; margin-top: 0.75rem;
margin-top: 0;
padding: 0.5rem; padding: 0.5rem;
width: 100%;
} }
/* Tables */ /* Tables */
@ -690,6 +687,13 @@ h1 svg {
} }
/* inline demos */ /* inline demos */
.demo-container {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 1.5rem 0 0;
text-align: right;
}
[id^="js-demo-"] { [id^="js-demo-"] {
all: initial; all: initial;
display: block; display: block;

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

@ -406,7 +406,7 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <div class="demo-container">
<div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div> <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
<template id="template-414e06a48e755bf9e43e5e2596f9ea7a"> <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@ -440,16 +440,16 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </template>
<button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button> <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script> <script>
(function() { (function() {
var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a'); var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a'); var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
var script = template.content.querySelector('script'); var script = template.content.querySelector('script');
if (script) { if (script) {
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()'; var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()'; var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript; script.textContent = wrappedScript;
} }
@ -457,17 +457,16 @@ toggle.addEventListener('click', (e) => {
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true)); root.shadowRoot.appendChild(document.importNode(template.content, true));
} else { } else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>'; root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
} }
var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var demoContent = template.content; var demoContent = template.content;
var standalone = window.open(); var standalone = window.open();
script.textContent = standaloneScript; script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true)); standalone.document.body.appendChild(document.importNode(template.content, true));
standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
}); });
})(); })();
</script> </script>

17
docs/print-version/index.html
View File

@ -1665,7 +1665,7 @@ toggle.addEventListener('click', (e) => {
<div class="demo-container"> <div class="demo-container">
<div class="demo" id="demo-414e06a48e755bf9e43e5e2596f9ea7a"></div> <div class="demo" id="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"></div>
<template id="template-414e06a48e755bf9e43e5e2596f9ea7a"> <template id="template-414e06a48e755bf9e43e5e2596f9ea7a">
@ -1699,16 +1699,16 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </template>
<button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button> <button data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script> <script>
(function() { (function() {
var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a'); var root = document.getElementById('js-demo-414e06a48e755bf9e43e5e2596f9ea7a');
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a'); var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
var script = template.content.querySelector('script'); var script = template.content.querySelector('script');
if (script) { if (script) {
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()'; var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()'; var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript; script.textContent = wrappedScript;
} }
@ -1716,17 +1716,16 @@ toggle.addEventListener('click', (e) => {
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true)); root.shadowRoot.appendChild(document.importNode(template.content, true));
} else { } else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>'; root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
} }
var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var demoContent = template.content; var demoContent = template.content;
var standalone = window.open(); var standalone = window.open();
script.textContent = standaloneScript; script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true)); standalone.document.body.appendChild(document.importNode(template.content, true));
standalone.document.title = 'demo' + "414e06a48e755bf9e43e5e2596f9ea7a"
}); });
})(); })();
</script> </script>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

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

@ -3,7 +3,7 @@
{{ if .Get "caption" }} {{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}"> <figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }} {{ end }}
<div class="demo" id="demo-{{ $uniq }}"></div> <div class="demo" id="js-demo-{{ $uniq }}"></div>
{{ if .Get "caption" }} {{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption> <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
{{ end }} {{ end }}
@ -13,16 +13,16 @@
<template id="template-{{ $uniq }}"> <template id="template-{{ $uniq }}">
{{ .Inner }} {{ .Inner }}
</template> </template>
<button data-launch="demo-{{ $uniq }}">Launch in separate window</button> <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
<script> <script>
(function() { (function() {
var root = document.getElementById('demo-{{ $uniq }}'); var root = document.getElementById('js-demo-{{ $uniq }}');
var template = document.getElementById('template-{{ $uniq }}'); var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script'); var script = template.content.querySelector('script');
if (script) { if (script) {
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()'; var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()'; var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript; script.textContent = wrappedScript;
} }
@ -30,17 +30,16 @@
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true)); root.shadowRoot.appendChild(document.importNode(template.content, true));
} else { } else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. The browser does not have an issue with the demo code itself.</p>'; root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
} }
var launchButton = document.querySelector('[data-launch="demo-{{ $uniq }}"]'); var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
//var wrap = '<!DOCTYPE html><html lang="en"><head><title>demo</title></head><body></body></html>';
var demoContent = template.content; var demoContent = template.content;
var standalone = window.open(); var standalone = window.open();
//standalone.document.write(wrap);
script.textContent = standaloneScript; script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true)); standalone.document.body.appendChild(document.importNode(template.content, true));
standalone.document.title = 'demo' + {{ $uniq }}
}); });
})(); })();
</script> </script>

12
themes/infusion/static/css/styles.css
View File

@ -162,7 +162,6 @@ main ul ul {
button { button {
font-size: 1.25rem; font-size: 1.25rem;
font-family: inherit; font-family: inherit;
font-weight: inherit;
background: #111; background: #111;
color: #fff; color: #fff;
padding: 0.75rem; padding: 0.75rem;
@ -170,10 +169,8 @@ button {
} }
[data-launch] { [data-launch] {
font-size: 0.75rem; font-size: 0.75rem;
display: block; margin-top: 0.75rem;
margin-top: 0;
padding: 0.5rem; padding: 0.5rem;
width: 100%;
} }
/* Tables */ /* Tables */
@ -690,6 +687,13 @@ h1 svg {
} }
/* inline demos */ /* inline demos */
.demo-container {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 1.5rem 0 0;
text-align: right;
}
[id^="js-demo-"] { [id^="js-demo-"] {
all: initial; all: initial;
display: block; display: block;