KSP_project/scripts/inject_lightbox.py

#!/usr/bin/env python3
"""Inject lightbox CSS and JS into all Guanghan wiki pages."""
import os
import re

LIGHTBOX_CSS = """
.wiki-article img[data-wiki-asset] { cursor: zoom-in; }
.wiki-image-lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(32,33,34,0.84); z-index: 10000; box-sizing: border-box; }
.wiki-image-lightbox[hidden] { display: none; }
.wiki-image-lightbox-panel { position: relative; width: min(1120px, 96vw); max-height: 92vh; overflow: auto; margin: 0; padding: 10px; border: 1px solid #a2a9b1; background: #fff; box-shadow: 0 12px 38px rgba(0,0,0,0.35); box-sizing: border-box; }
.wiki-image-lightbox-panel img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: #000; }
.wiki-image-lightbox-close { position: sticky; top: 0; float: right; width: 30px; height: 30px; margin: -2px -2px 8px 10px; border: 1px solid #a2a9b1; background: #eaecf0; color: #202122; font-weight: bold; line-height: 26px; cursor: pointer; }
.wiki-image-lightbox-close:hover, .wiki-image-lightbox-close:focus { background: #fff; }
body.wiki-image-lightbox-open { overflow: hidden; }
@media (max-width: 820px) { .wiki-image-lightbox { padding: 12px; } .wiki-image-lightbox-panel { width: 98vw; max-height: 94vh; } }"""

LIGHTBOX_JS = """<script>
(function () {
  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn, { once: true });
    } else {
      fn();
    }
  }

  function captionFor(image) {
    var container = image.closest('figure, td, tr, .infobox-image, .gallery-item');
    if (!container) {
      return image.alt || '';
    }
    var caption = container.querySelector('.thumbcaption');
    return caption ? caption.textContent.trim() : (image.alt || '');
  }

  function install(article) {
    if (!article || article.dataset.lightboxReady === '1') {
      return;
    }
    article.dataset.lightboxReady = '1';

    var overlay = document.createElement('div');
    overlay.className = 'wiki-image-lightbox';
    overlay.hidden = true;
    overlay.innerHTML = '<figure class="wiki-image-lightbox-panel" role="dialog" aria-modal="true"><button class="wiki-image-lightbox-close" type="button" aria-label="Close image preview">x</button><img alt=""><figcaption class="thumbcaption"></figcaption></figure>';
    document.body.appendChild(overlay);

    var previewImage = overlay.querySelector('img');
    var previewCaption = overlay.querySelector('figcaption');
    var closeButton = overlay.querySelector('.wiki-image-lightbox-close');

    function closePreview() {
      overlay.hidden = true;
      previewImage.removeAttribute('src');
      previewCaption.textContent = '';
      document.body.classList.remove('wiki-image-lightbox-open');
    }

    function openPreview(image, event) {
      event.preventDefault();
      event.stopPropagation();
      if (event.stopImmediatePropagation) {
        event.stopImmediatePropagation();
      }
      previewImage.src = image.currentSrc || image.src;
      previewImage.alt = image.alt || '';
      previewCaption.textContent = captionFor(image);
      overlay.hidden = false;
      document.body.classList.add('wiki-image-lightbox-open');
      closeButton.focus();
    }

    article.querySelectorAll('img[data-wiki-asset]').forEach(function (image) {
      if (image.dataset.lightboxBound === '1') {
        return;
      }
      image.dataset.lightboxBound = '1';
      image.addEventListener('click', function (event) {
        openPreview(image, event);
      }, true);
    });

    article.addEventListener('click', function (event) {
      var image = event.target.closest && event.target.closest('img[data-wiki-asset]');
      if (!image || !article.contains(image) || image.closest('.wiki-image-lightbox')) {
        return;
      }
      openPreview(image, event);
    });

    closeButton.addEventListener('click', closePreview);
    overlay.addEventListener('click', function (event) {
      if (event.target === overlay) {
        closePreview();
      }
    });
    document.addEventListener('keydown', function (event) {
      if (event.key === 'Escape' && !overlay.hidden) {
        closePreview();
      }
    });
  }

  function installAll() {
    document.querySelectorAll('.wiki-article, .vulture-article').forEach(install);
  }

  ready(function () {
    installAll();
    if (window.MutationObserver) {
      var observer = new MutationObserver(installAll);
      observer.observe(document.body, { childList: true, subtree: true });
    }
    window.setTimeout(installAll, 500);
    window.setTimeout(installAll, 1500);
    window.setTimeout(installAll, 3000);
  });
}());
</script>"""

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
WIKI_DIR = os.path.join(BASE_DIR, 'data', 'wiki')

files = [
    'guanghan_bl01_zh.html', 'guanghan_bl02_zh.html', 'guanghan_bl03_zh.html',
    'guanghan_ghc01_zh.html', 'guanghan_ghc02_zh.html', 'guanghan_ghc03_zh.html',
    'guanghan_ghc04_zh.html', 'guanghan_jc01_zh.html',
    'guanghan_bl01_gallery_zh.html', 'guanghan_bl02_gallery_zh.html',
    'guanghan_bl03_gallery_zh.html', 'guanghan_ghc01_gallery_zh.html',
    'guanghan_ghc02_gallery_zh.html', 'guanghan_ghc03_gallery_zh.html',
    'guanghan_ghc04_gallery_zh.html', 'guanghan_jc01_gallery_zh.html',
]

for fname in files:
    fpath = os.path.join(WIKI_DIR, fname)
    with open(fpath, 'r', encoding='utf-8') as f:
        content = f.read()

    if 'wiki-image-lightbox' in content:
        print(f'SKIP (already done): {fname}')
        continue

    # Inject CSS before </style>
    content = content.replace('</style>', LIGHTBOX_CSS + '\n</style>')

    # Inject JS before </article>
    content = content.replace('</article>', LIGHTBOX_JS + '\n</article>')

    with open(fpath, 'w', encoding='utf-8') as f:
        f.write(content)
    print(f'DONE: {fname}')

print('=== Injection complete ===')