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

20 lines
1.2 KiB
HTML
Raw Normal View History

{{ $uniq := .Inner | htmlEscape | md5 | lower }}
2017-07-13 12:36:42 +02:00
{{ $template := printf "template-%s" $uniq }}
{{ $string := replace "<script>(function() { ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem); })();</script>" "%s" $uniq }}
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-07-30 11:57:22 +02:00
<demo-elem{{ $uniq }} class="demo" id="js-demo-{{ $uniq }}"></demo-elem{{ $uniq }}>
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-07-13 12:36:42 +02:00
<template id="template{{ $uniq }}">
{{ .Inner | safeHTML }}
2017-06-20 10:53:54 +02:00
</template>
2017-07-13 12:36:42 +02:00
{{ $string | safeHTML }}
2017-06-20 10:53:54 +02:00
</div>