agahi/dist/plugin/image_zoom.js

Client-side engine that renders Markdown files as a docs site in the browser—no build step.

(function () {
  'use strict';

  function styleInject(css, ref) {
    if ( ref === void 0 ) ref = {};
    var insertAt = ref.insertAt;

    if (typeof document === 'undefined') { return; }

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';

    if (insertAt === 'top') {
      if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
      } else {
        head.appendChild(style);
      }
    } else {
      head.appendChild(style);
    }

    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }

  var css_248z = "#img-preview-overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\n#img-preview-overlay img {\n  max-width: 90%;\n  max-height: 90%;\n  transition: transform 0.3s ease;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  cursor: zoom-in;\n}\n\n#img-preview-overlay.zoomed img {\n  cursor: zoom-out;\n}\n\n#img-preview-overlay:not(.zoomed) {\n  cursor: default;\n}\n";
  styleInject(css_248z);

  document.addEventListener('agahi:ready', () => {
    const article = document.getElementById('md');

    if (!article) return;

    if (!document.getElementById('img-preview-overlay')) {
      const overlay = document.createElement('div');
      overlay.id = 'img-preview-overlay';
      overlay.innerHTML = `<img id="preview-img" src="" alt="Preview" />`;
      document.body.appendChild(overlay);
    }

    const overlay = document.getElementById('img-preview-overlay');
    const previewImg = document.getElementById('preview-img');
    let zoomed = false;

    const bindZoom = () => {
      article.querySelectorAll('img:not([data-zoom-bound])').forEach((img) => {
        img.dataset.zoomBound = true;
        img.style.cursor = 'zoom-in';
        img.addEventListener('click', () => {
          previewImg.src = img.src;
          overlay.style.display = 'flex';
          zoomed = false;
          previewImg.style.transform = 'scale(1)';
          overlay.style.cursor = 'zoom-in';
        });
      });
    };

    new MutationObserver(bindZoom).observe(article, {
      childList: true,
      subtree: true,
    });

    // Click to zoom toggle
    previewImg.addEventListener('click', (e) => {
      e.stopPropagation();
      zoomed = !zoomed;
      previewImg.style.transform = `scale(${zoomed ? 2 : 1})`;
      overlay.classList.toggle('zoomed', zoomed);
    });

    // Close on outside click or ESC
    overlay.addEventListener('click', () => (overlay.style.display = 'none'));
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') overlay.style.display = 'none';
    });
  });

})();