web_hgtv_h5/app/static/js/pages/nineGridDialog.js

(function () {
  // 九宫格弹窗（对齐 huangguocg.com）：年龄确认 → 弹窗广告 → 九宫格。
  // 点任一应用 / 关闭按钮 / 空白处 / Esc 即关闭；同一会话内容不变时不再弹出。
  var DISMISSED_KEY = "gridAdDismissed";
  var mask = document.querySelector("[data-nine-grid]");
  if (!mask) return;

  var items = Array.prototype.slice.call(mask.querySelectorAll("[data-nine-grid-item]"));
  if (!items.length) return;

  var signature = JSON.stringify(
    items.map(function (item) {
      var image = item.querySelector("[data-nine-grid-src]");
      return [
        item.getAttribute("data-creative-id") || "",
        image ? image.getAttribute("data-nine-grid-src") : "",
        item.getAttribute("href") || "",
      ];
    }),
  );

  function readSession(key) {
    try {
      return window.sessionStorage.getItem(key) || "";
    } catch (error) {
      return "";
    }
  }

  function writeSession(key, value) {
    try {
      window.sessionStorage.setItem(key, value);
    } catch (error) {
      // sessionStorage 不可用时仅本页关闭。
    }
  }

  if (readSession(DISMISSED_KEY) === signature) return;

  function waitForImage(image) {
    return new Promise(function (resolve, reject) {
      if (image.complete && image.naturalWidth > 0 && image.src.indexOf("placeholder") === -1) {
        resolve();
        return;
      }
      var timeout = window.setTimeout(function () {
        cleanup();
        reject(new Error("image load timeout"));
      }, 12000);
      function cleanup() {
        window.clearTimeout(timeout);
        image.removeEventListener("load", handleLoad);
        image.removeEventListener("error", handleError);
      }
      function handleLoad() {
        cleanup();
        if (image.naturalWidth > 0) resolve();
        else reject(new Error("image decode failed"));
      }
      function handleError() {
        cleanup();
        reject(new Error("image load failed"));
      }
      image.addEventListener("load", handleLoad);
      image.addEventListener("error", handleError);
    });
  }

  function loadIcon(image) {
    var source = image.getAttribute("data-nine-grid-src") || "";
    if (!source) return Promise.reject(new Error("image source is empty"));
    if (typeof window.processImage === "function") {
      return window.processImage(source, image).then(function (result) {
        if (!result) throw new Error("image decrypt failed");
        return waitForImage(image);
      });
    }
    image.src = source;
    return waitForImage(image);
  }

  var opened = false;

  function open() {
    if (opened) return;
    opened = true;
    mask.hidden = false;
    mask.removeAttribute("hidden");
    mask.classList.add("is-open");
    document.body.style.overflow = "hidden";
  }

  function close() {
    if (!opened) return;
    opened = false;
    writeSession(DISMISSED_KEY, signature);
    mask.classList.remove("is-open");
    mask.hidden = true;
    mask.setAttribute("hidden", "");
    document.body.style.overflow = "";
  }

  // 依次等待：年龄确认关闭 → 弹窗广告队列结束（没有弹窗广告时直接放行）
  function whenStartupReady(callback) {
    var ageGate = document.getElementById("eightPop");
    if (ageGate && ageGate.classList.contains("is-open")) {
      document.addEventListener(
        "eightpop:closed",
        function () {
          whenStartupReady(callback);
        },
        { once: true },
      );
      return;
    }
    var hasDialogAd = !!document.querySelector("[data-dialog-ad]");
    if (hasDialogAd && !window.__dialogAdDone) {
      document.addEventListener("dialogad:done", callback, { once: true });
      return;
    }
    callback();
  }

  // 只展示图标加载成功的应用；一个都没加载成功则不弹
  var ready = Promise.all(
    items.map(function (item) {
      var image = item.querySelector("[data-nine-grid-src]");
      if (!image) return Promise.resolve(false);
      return loadIcon(image)
        .then(function () {
          item.hidden = false;
          item.removeAttribute("hidden");
          return true;
        })
        .catch(function () {
          return false;
        });
    }),
  );

  whenStartupReady(function () {
    ready.then(function (loaded) {
      if (loaded.some(Boolean)) open();
    });
  });

  mask.addEventListener("click", function (event) {
    if (event.target === mask || event.target.closest("[data-nine-grid-close]") || event.target.closest("[data-nine-grid-item]")) {
      close();
    }
  });

  mask.querySelector(".nine-grid-panel").addEventListener("click", function (event) {
    if (event.target === event.currentTarget) close();
  });

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape" && opened) close();
  });
})();