2017-07-13 12:58:39 +02:00
{{ $uniq := .Inner | htmlEscape | md5 | lower }}
2017-06-20 10:53:54 +02:00
< div class = "demo-container" >
2017-06-26 17:32:52 +02:00
{{ if .Get "caption" }}
< figure role = "group" aria-labelledby = "caption-{{ $uniq }}" >
{{ end }}
2017-08-17 18:42:37 +02:00
< div class = "demo-inner" { { if . Get " backgroundColor " } } style = "background-color: {{ .Get " backgroundColor " | safeCSS } } " { { end } } >
2017-08-06 12:02:44 +02:00
< div class = "demo" id = "js-demo-{{ $uniq }}" > < / div >
< button data-launch = "js-demo-{{ $uniq }}" > Launch in separate window< / button >
< / div >
2017-06-26 17:32:52 +02:00
{{ if .Get "caption" }}
2017-07-10 20:53:24 +02:00
< figcaption id = "caption-{{ $uniq }}" > {{ .Get "caption" | markdownify }}< / figcaption >
2017-06-26 17:32:52 +02:00
{{ end }}
{{ if .Get "caption" }}
< / figure >
{{ end }}
2017-08-04 14:34:38 +02:00
< template id = "template-{{ $uniq }}" >
{{ .Inner }}
2017-06-20 10:53:54 +02:00
< / template >
2017-08-04 14:34:38 +02:00
< script >
(function() {
2017-08-25 12:15:22 +02:00
var root = document.getElementById('js-demo-{{ $uniq }}');
var template = document.getElementById('template-{{ $uniq }}');
2017-08-25 13:21:23 +02:00
// Save a version for the new window
2017-08-25 12:15:22 +02:00
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();
2017-08-25 12:49:05 +02:00
standalone.document.body.innerHTML = demoDiv.innerHTML;
2017-08-25 12:15:22 +02:00
// 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 }};
});
})();
2017-08-04 14:34:38 +02:00
< / script >
2017-06-20 10:53:54 +02:00
< / div >