66 lines
2.9 KiB
HTML
66 lines
2.9 KiB
HTML
|
{{ $uniq := .Inner | htmlEscape | md5 | lower }}
|
||
|
|
<div class="demo-container">
|
||
|
|
{{ if .Get "caption" }}
|
||
|
|
<figure role="group" aria-labelledby="caption-{{ $uniq }}">
|
||
|
|
{{ end }}
|
||
|
|
<div class="demo-inner" {{ if .Get "backgroundColor" }}style="background-color: {{ .Get "backgroundColor" | safeCSS }}"{{ end }}>
|
||
|
|
<div class="demo" id="js-demo-{{ $uniq }}"></div>
|
||
|
|
<button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
|
||
|
|
</div>
|
||
|
|
{{ if .Get "caption" }}
|
||
|
|
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
|
||
|
|
{{ end }}
|
||
|
|
{{ if .Get "caption" }}
|
||
|
|
</figure>
|
||
|
|
{{ end }}
|
||
|
|
<template id="template-{{ $uniq }}">
|
||
|
|
{{ .Inner }}
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var root = document.getElementById('js-demo-{{ $uniq }}');
|
||
|
|
var template = document.getElementById('template-{{ $uniq }}');
|
||
|
|
|
||
|
|
// Save a version for the new window
|
||
|
|
var demoDiv = document.createElement('div');
|
||
|
|
demoDiv.innerHTML = template.innerHTML;
|
||
|
|
var standaloneScript = demoDiv.querySelector('script');
|
||
|
|
if (standaloneScript) {
|
||
|
|
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.innerHTML = demoDiv.innerHTML;
|
||
|
|
|
||
|
|
// For activating the script :-(
|
||
|
|
var newScript = standalone.document.createElement('script');
|
||
|
|
var oldScript = standalone.document.querySelector('script');
|
||
|
|
if (oldScript) {
|
||
|
|
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 }};
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</div>
|