template extraction

This commit is contained in:
Heydon Pickering 2017-08-25 11:15:22 +01:00
parent e0e85a58e0
commit d23bc2ced2
4 changed files with 78 additions and 43 deletions

View File

@ -506,31 +506,26 @@ toggle.addEventListener('click', (e) => {
(function() { (function() {
var root = document.getElementById('js-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 demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
if (script) { var standaloneScript = demoDiv.querySelector('script');
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();'; standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
script.textContent = wrappedScript;
}
if (document.head.attachShadow) { if (document.head.attachShadow) {
var templateScript = template.content.querySelector('script');
if (templateScript) {
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();';
templateScript.textContent = wrappedScript;
}
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. You can launch the demo in a separate window ↓</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="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var standalone = window.open(); var standalone = window.open();
script.innerHTML = standaloneScript;
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
standalone.document.body.appendChild(demoDiv); standalone.document.body.appendChild(demoDiv);
@ -545,6 +540,14 @@ toggle.addEventListener('click', (e) => {
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"; standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
}); });
})(); })();
</script> </script>
</div> </div>

View File

@ -1880,31 +1880,26 @@ toggle.addEventListener('click', (e) => {
(function() { (function() {
var root = document.getElementById('js-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 demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
if (script) { var standaloneScript = demoDiv.querySelector('script');
var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();'; standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
script.textContent = wrappedScript;
}
if (document.head.attachShadow) { if (document.head.attachShadow) {
var templateScript = template.content.querySelector('script');
if (templateScript) {
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + templateScript.textContent + '})();';
templateScript.textContent = wrappedScript;
}
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. You can launch the demo in a separate window ↓</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="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]'); var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var standalone = window.open(); var standalone = window.open();
script.innerHTML = standaloneScript;
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
standalone.document.body.appendChild(demoDiv); standalone.document.body.appendChild(demoDiv);
@ -1919,6 +1914,14 @@ toggle.addEventListener('click', (e) => {
standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a"; standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
}); });
})(); })();
</script> </script>
</div> </div>

File diff suppressed because one or more lines are too long

View File

@ -18,6 +18,45 @@
</template> </template>
<script> <script>
(function() { (function() {
var root = document.getElementById('js-demo-{{ $uniq }}');
var template = document.getElementById('template-{{ $uniq }}');
var demoDiv = document.createElement('div');
demoDiv.innerHTML = template.innerHTML;
var standaloneScript = demoDiv.querySelector('script');
standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
if (document.head.attachShadow) {
var templateScript = template.content.querySelector('script');
if (templateScript) {
var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + templateScript.textContent + '})();';
templateScript.textContent = wrappedScript;
}
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. You can launch the demo in a separate window ↓</p>';
}
var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
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 }};
});
})();
/*(function() {
var root = document.getElementById('js-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');
@ -35,16 +74,6 @@
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>'; 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 }}"]');
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.textContent = standaloneScript;
standalone.document.body.appendChild(template.content.cloneNode(true));
{{ 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 }}"]'); var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
launchButton.addEventListener('click', function () { launchButton.addEventListener('click', function () {
var standalone = window.open(); var standalone = window.open();
@ -66,6 +95,6 @@
standalone.document.title = 'demo ' + {{ $uniq }}; standalone.document.title = 'demo ' + {{ $uniq }};
}); });
})(); })();*/
</script> </script>
</div> </div>