crypto_monitor/lib/common/static/journal_upload_slots.js

/**
 * 复盘表单：四周期截图槽位本地预览。
 */
(function (global) {
  "use strict";

  const previewUrls = new WeakMap();

  function clearPreview(cell) {
    if (!cell) return;
    const prev = previewUrls.get(cell);
    if (prev) {
      URL.revokeObjectURL(prev);
      previewUrls.delete(cell);
    }
    cell.innerHTML = "";
    cell.classList.remove("journal-upload-slot-preview--filled");
  }

  function renderPreview(cell, file, tf) {
    clearPreview(cell);
    if (!file || !cell) return;
    const url = URL.createObjectURL(file);
    previewUrls.set(cell, url);
    const img = document.createElement("img");
    img.src = url;
    img.alt = tf + " 预览";
    img.className = "journal-upload-slot-thumb";
    img.addEventListener("click", function (e) {
      e.preventDefault();
      if (typeof global.showImage === "function") {
        global.showImage(url);
      }
    });
    cell.appendChild(img);
    cell.classList.add("journal-upload-slot-preview--filled");
  }

  function bindInput(input) {
    if (!input || input.dataset.journalSlotBound === "1") return;
    input.dataset.journalSlotBound = "1";
    const tf = input.getAttribute("data-tf") || "";
    const cell = input.closest(".journal-upload-slot");
    const preview = cell ? cell.querySelector(".journal-upload-slot-preview") : null;
    input.addEventListener("change", function () {
      const file = input.files && input.files[0];
      if (!file) {
        clearPreview(preview);
        return;
      }
      renderPreview(preview, file, tf);
    });
  }

  function init(root) {
    const scope = root || document;
    scope.querySelectorAll(".journal-upload-slot-input").forEach(bindInput);
  }

  global.JournalUploadSlots = { init: init };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () {
      init(document);
    });
  } else {
    init(document);
  }
})(typeof window !== "undefined" ? window : globalThis);