plotly.html

{{- $file := .Get "file" -}}
{{- $responsive := eq (.Get "responsive") "true" -}}
{{- $caption := .Get "caption" | .Page.RenderString -}}
{{- /* a11y: iframe needs a non-empty title; fall back caption -> generic. */ -}}
{{- $title := .Get "title" | default ($caption | plainify) | default "Embedded Plotly figure" -}}

{{- if $caption -}}<figure>{{- end }}
<div class="plotly-container" style="width: 100%; overflow: hidden;">
  <iframe
    src="{{ $file }}"
    title="{{ $title }}"
    style="border: none; display: block; width: 100%; transform-origin: top left;"
    frameborder="0"
    scrolling="no"
    sandbox="allow-scripts allow-same-origin"
    loading="lazy"
    onload="
      var iframe = this;
      var body = iframe.contentWindow.document.body;
      var container = iframe.parentElement;
      var responsive = {{ $responsive }};
      var apply = function() {
        var containerWidth = container.offsetWidth;
        iframe.style.width = containerWidth + 'px';
        iframe.style.transform = 'none';
        var h = body.scrollHeight;
        if (!responsive) {
          var w = body.scrollWidth;
          if (w > containerWidth) {
            var s = containerWidth / w;
            iframe.style.width = w + 'px';
            iframe.style.transform = 'scale(' + s + ')';
            iframe.style.height = h + 'px';
            container.style.height = (h * s) + 'px';
            return;
          }
        }
        iframe.style.height = h + 'px';
        container.style.height = h + 'px';
      };
      apply();
      requestAnimationFrame(apply);
      setTimeout(apply, 200);
      /* Share a single window resize listener across all plotly embeds on the
         page (posts may host multiple). The first embed registers the
         listener; subsequent embeds just register their apply() callback. */
      (window.__plotlyApplyFns = window.__plotlyApplyFns || []).push(apply);
      if (!window.__plotlyResizeBound) {
        window.__plotlyResizeBound = true;
        var rafId;
        window.addEventListener('resize', function() {
          if (rafId) cancelAnimationFrame(rafId);
          rafId = requestAnimationFrame(function() {
            window.__plotlyApplyFns.forEach(function(fn) { fn(); });
          });
        });
      }
    ">
  </iframe>
</div>
{{- if $caption }}
  <figcaption class="image-caption">{{ $caption | safeHTML }}</figcaption>
</figure>
{{- end }}