33 lines
1.3 KiB
HTML
33 lines
1.3 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" id="demo-{{ $uniq }}"></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('demo-{{ $uniq }}');
|
|
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>';
|
|
}
|
|
})();
|
|
</script>
|
|
</div>
|