website-v2/templates/docsiframe.html

{% extends "base.html" %}

{% block main_content_wrapper %}
{% if full_width %}
  <div>
{% else %}
  <div class="max-w-7xl md:px-3 mx-auto transition-all">
{% endif %}

{% endblock %}

{% block content %}
    {# alert for non-current Boost versions #}
    <div class="bg-white dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
      {% include "libraries/includes/version_alert.html" %}
    </div>
    <iframe
        {% if iframe_url %}
          src="{{ iframe_url }}"
          style="display: block; width: 100%; min-height: 600px; border: none;"
        {% else %}
          srcdoc="{{ content }}"
          onload="iframeCustomizations(this)"
        {% endif %}
        id="docsiframe"
    ></iframe>
    <script>
      function updateVersionAlertHeight() {
        const alert = document.querySelector('.version_alert');
        if (alert && document.getElementById('docsiframe')) {
          document.documentElement.style.setProperty('--version-alert-height', Math.ceil(alert.getBoundingClientRect().height) + 'px');
        }
      }

      (function() {
        const alert = document.querySelector('.version_alert');
        if (!alert) return;

        let rafId = null;
        const update = () => {
          if (rafId) cancelAnimationFrame(rafId);
          rafId = requestAnimationFrame(() => {
            updateVersionAlertHeight();
            rafId = null;
          });
        };

        requestAnimationFrame(updateVersionAlertHeight);
        window.addEventListener('resize', update);
        if (window.ResizeObserver) {
          new ResizeObserver(update).observe(alert);
        }
      })();

      function iframeCustomizations(iframe) {
        let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        {#resizeIframe(iframe);#}
        addClickInterception(iframeDoc);
        addBase(iframeDoc);
        if (window.location.hash) {
           scrollToAnchor(iframeDoc, window.location.hash.slice(1));
        }
        // Try targeting different containers for AsciiDoc
        const scrollContainer = iframeDoc.querySelector('.sect1, #content, body') || iframeDoc.documentElement;
        scrollContainer.style.scrollBehavior = 'smooth';
      }

      function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
      }

      function scrollToAnchor(iframeDoc, hash) {
        const targetElement = iframeDoc.getElementById(hash);
        if (!targetElement) return;

          // Add space above the target element - more space on mobile
          const isMobile = window.innerWidth < 768;
          const topMargin = isMobile ? 50 : 14;

        // Detect document type
        const isAntora = !!iframeDoc.querySelector('.doc, .source-docs-antora');

        // First try method 1: scrollIntoView
        targetElement.scrollIntoView({block: "start", behavior: "auto"});

        // Then apply adjustments based on document type
        setTimeout(() => {
          try {
            // Method 2: Calculate position and use multiple scroll APIs
            const rect = targetElement.getBoundingClientRect();
            const scrollY = iframeDoc.defaultView.pageYOffset || iframeDoc.documentElement.scrollTop;
            const targetY = rect.top + scrollY - topMargin;

            // Use both direct property setting and scrollTo API
            iframeDoc.documentElement.scrollTop = targetY;
            iframeDoc.body.scrollTop = targetY; // For Safari

            if (isAntora) {
              // For Antora, use the defaultView scroll methods
          iframeDoc.defaultView.scrollTo({
                top: targetY,
                behavior: 'smooth'
              });
            } else {
              // For AsciiDoc, use all available scroll targets
              iframeDoc.documentElement.scrollTo({
                top: targetY,
            behavior: 'smooth'
          });

              // Special handling for AsciiDoc documents with scrollable content areas
              const scrollableContent = iframeDoc.querySelector('#content, .content');
              if (scrollableContent) {
                scrollableContent.scrollTop = targetElement.offsetTop - topMargin;
              }
            }
          } catch (e) {
            console.error('Scroll adjustment error:', e);
          }
        }, 10);
      }

      function addClickInterception(iframeDoc) {
        let anchorLinks = iframeDoc.querySelectorAll('a[href*="#"]');
        anchorLinks.forEach(function (anchor) {
          anchor.addEventListener('click', function (event) {
            event.preventDefault();

            const href = this.getAttribute('href');
            const hrefSplit = href.split('#');
            const pageUrl = hrefSplit[0] || '';
            const anchorId = hrefSplit[1] || '';

            if (!anchorId) return;

            // Same page anchor - handle internally
            if (!pageUrl || window.location.href.includes(pageUrl)) {
              scrollToAnchor(iframeDoc, anchorId);
            } else {
              // Different page with anchor - use parent navigation
              parent.window.location.href = href;
            }
          });
        });
      }

      function addBase(iframeDoc) {
        let base = iframeDoc.createElement('base');
        base.setAttribute('target', "_parent"); // Set to an appropriate base URL
        let head = iframeDoc.getElementsByTagName('head')[0];
        if (head) {
          head.insertBefore(base, head.firstChild);
        } else {
          head = iframeDoc.createElement('head');
          iframeDoc.documentElement.insertBefore(head, iframeDoc.body);
          head.appendChild(base);
        }
      }
    </script>
{% endblock %}