non-template based solution

This commit is contained in:
Heydon Pickering 2017-08-25 10:23:47 +01:00
parent 14696ac278
commit 9d59219336
32 changed files with 63 additions and 702 deletions

View File

@ -25,29 +25,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }
@ -532,8 +509,8 @@ toggle.addEventListener('click', (e) => {
var script = template.content.querySelector('script');
if (script) {
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
script.textContent = wrappedScript;
}
@ -544,11 +521,26 @@ toggle.addEventListener('click', (e) => {
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="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.textContent = standaloneScript;
standalone.document.body.appendChild(template.content.cloneNode(true));
script.innerHTML = standaloneScript;
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
standalone.document.body.appendChild(demoDiv);
var newScript = standalone.document.createElement('script');
var oldScript = standalone.document.querySelector('script');
newScript.textContent = oldScript.textContent;
oldScript.parentNode.removeChild(oldScript);
standalone.document.body.appendChild(newScript);
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
});

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }
@ -1906,8 +1883,8 @@ toggle.addEventListener('click', (e) => {
var script = template.content.querySelector('script');
if (script) {
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
script.textContent = wrappedScript;
}
@ -1918,11 +1895,26 @@ toggle.addEventListener('click', (e) => {
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="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.textContent = standaloneScript;
standalone.document.body.appendChild(template.content.cloneNode(true));
script.innerHTML = standaloneScript;
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
standalone.document.body.appendChild(demoDiv);
var newScript = standalone.document.createElement('script');
var oldScript = standalone.document.querySelector('script');
newScript.textContent = oldScript.textContent;
oldScript.parentNode.removeChild(oldScript);
standalone.document.body.appendChild(newScript);
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
});

File diff suppressed because one or more lines are too long

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
<link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
<script>
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -24,29 +24,6 @@
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
<link rel="stylesheet" href="{{ "css/prism.css" | absURL }}">
<link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
<script>
/* Template element polyfill */
(function templatePolyfill(document) {
if ('content' in document.createElement('template')) {
return false;
}
var templates = document.getElementsByTagName('template');
var plateLen = templates.length;
for (var x = 0; x < plateLen; ++x) {
var template = templates[x];
var content = template.childNodes;
var fragment = document.createDocumentFragment();
while (content[0]) {
fragment.appendChild(content[0]);
}
template.content = fragment;
}
})(document);
</script>
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }

View File

@ -23,8 +23,8 @@
var script = template.content.querySelector('script');
if (script) {
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})();';
script.textContent = wrappedScript;
}
@ -35,7 +35,7 @@
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="js-demo-{{ $uniq }}"]');
/*var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.textContent = standaloneScript;
@ -43,6 +43,27 @@
{{ if .Get "backgroundColor" }}
standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
{{ end }}
standalone.document.title = 'demo ' + {{ $uniq }};
});*/
var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.innerHTML = standaloneScript;
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
standalone.document.body.appendChild(demoDiv);
// For activating the script :-(
var newScript = standalone.document.createElement('script');
var oldScript = standalone.document.querySelector('script');
newScript.textContent = oldScript.textContent;
oldScript.parentNode.removeChild(oldScript);
standalone.document.body.appendChild(newScript);
{{ if .Get "backgroundColor" }}
standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
{{ end }}
standalone.document.title = 'demo ' + {{ $uniq }};
});
})();