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

basic standalone support

Browse Source
This commit is contained in:
Heydon Pickering 2017-08-05 14:55:32 +01:00
parent 2f7b09748f
commit 8a513cd866
6 changed files with 75 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/css/styles.css
View File

@ -168,6 +168,13 @@ button {
padding: 0.75rem;
border: 0;
}
[data-launch] {
font-size: 0.75rem;
display: block;
margin-top: 0;
padding: 0.5rem;
width: 100%;
}
/* Tables */
table {

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

@ -440,20 +440,35 @@ toggle.addEventListener('click', (e) => {
</script>
</template>
<button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script>
(function() {
var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
var script = template.content.querySelector('script');
if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot; ${script.textContent} })()`
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript;
}
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true));
} 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>';
}
var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () {
var demoContent = template.content;
var standalone = window.open();
script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true));
});
})();
</script>
</div>

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

@ -1699,20 +1699,35 @@ toggle.addEventListener('click', (e) => {
</script>
</template>
<button data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a">Launch in separate window</button>
<script>
(function() {
var root = document.getElementById('demo-414e06a48e755bf9e43e5e2596f9ea7a');
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-414e06a48e755bf9e43e5e2596f9ea7a');
var script = template.content.querySelector('script');
if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot; ${script.textContent} })()`
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript;
}
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true));
} 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>';
}
var launchButton = document.querySelector('[data-launch="demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () {
var demoContent = template.content;
var standalone = window.open();
script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true));
});
})();
</script>
</div>

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

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

@ -13,20 +13,35 @@
<template id="template-{{ $uniq }}">
{{ .Inner }}
</template>
<button data-launch="demo-{{ $uniq }}">Launch in separate window</button>
<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} })()`
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript;
}
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true));
} 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>';
}
var launchButton = document.querySelector('[data-launch="demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () {
//var wrap = '<!DOCTYPE html><html lang="en"><head><title>demo</title></head><body></body></html>';
var demoContent = template.content;
var standalone = window.open();
//standalone.document.write(wrap);
script.textContent = standaloneScript;
standalone.document.body.appendChild(document.importNode(template.content, true));
});
})();
</script>
</div>

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

@ -168,6 +168,13 @@ button {
padding: 0.75rem;
border: 0;
}
[data-launch] {
font-size: 0.75rem;
display: block;
margin-top: 0;
padding: 0.5rem;
width: 100%;
}
/* Tables */
table {