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

33 lines
1.3 KiB
HTML
Raw Normal View History

2017-06-20 10:53:54 +02:00
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
<div class="demo-container">
2017-06-26 17:32:52 +02:00
{{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }}
<div class="demo" id="demo-{{ $uniq }}"></div>
{{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" }}</figcaption>
{{ end }}
{{ if .Get "caption" }}
</figure>
{{ end }}
2017-06-20 10:53:54 +02:00
<template id="template-{{ $uniq }}">
2017-06-26 17:32:52 +02:00
{{ .Inner }}
2017-06-20 10:53:54 +02:00
</template>
<script>
(function() {
var root = document.getElementById('demo-{{ $uniq }}');
2017-06-26 17:32:52 +02:00
if (document.head.attachShadow) {
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script');
if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
}
root.shadowRoot.appendChild(document.importNode(template.content, true));
} else {
root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
2017-06-22 18:13:17 +02:00
}
2017-06-20 10:53:54 +02:00
})();
</script>
</div>