cupper-hugo-theme/themes/infusion/layouts/shortcodes/demo.html

51 lines
2.3 KiB
HTML
Raw Normal View History

{{ $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-06 10:19:38 +02:00
var root = document.getElementById('js-demo-{{ $uniq }}');
2017-08-05 15:55:32 +02:00
var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script');
if (script) {
2017-08-06 10:19:38 +02:00
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 + '})()';
2017-08-05 15:55:32 +02:00
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-06 10:19:38 +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. You can launch the demo in a separate window ↓</p>';
2017-08-04 14:34:38 +02:00
}
2017-08-05 15:55:32 +02:00
2017-08-06 10:19:38 +02:00
var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
2017-08-05 15:55:32 +02:00
launchButton.addEventListener('click', function () {
var standalone = window.open();
script.textContent = standaloneScript;
2017-08-24 18:15:19 +02:00
standalone.document.body.appendChild(template.content.cloneNode(true));
2017-08-17 18:42:37 +02:00
{{ if .Get "backgroundColor" }}
standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
{{ end }}
standalone.document.title = 'demo ' + {{ $uniq }};
2017-08-05 15:55:32 +02:00
});
2017-08-04 14:34:38 +02:00
})();
</script>
2017-06-20 10:53:54 +02:00
</div>