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-04 14:34:38 +02:00
< div class = "demo" id = "demo-{{ $uniq }}" > < / 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-05 15:55:32 +02:00
< button data-launch = "demo-{{ $uniq }}" > Launch in separate window< / button >
2017-08-04 14:34:38 +02:00
< script >
(function() {
var root = document.getElementById('demo-{{ $uniq }}');
2017-08-05 15:55:32 +02:00
var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script');
if (script) {
var standaloneScript = '(function() { var demo = document; ' + script.textContent + ' })()';
var wrappedScript = '(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
script.textContent = wrappedScript;
}
2017-08-04 14:34:38 +02:00
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
root.shadowRoot.appendChild(document.importNode(template.content, true));
} else {
2017-08-05 12:34:49 +02:00
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 > ';
2017-08-04 14:34:38 +02:00
}
2017-08-05 15:55:32 +02:00
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));
});
2017-08-04 14:34:38 +02:00
})();
< / script >
2017-06-20 10:53:54 +02:00
< / div >
