添加manhuagui自適應高度功能

Greasy Fork is available in English.
添加manhuagui自適應高度功能

在manhuagui縮放選項右側添加高度自適應，並自動滾動到圖片所在位置
当前为 2025-11-04 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         添加manhuagui自適應高度功能
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  在manhuagui縮放選項右側添加高度自適應，並自動滾動到圖片所在位置
// @author       shanlan(grok-4-fast-reasoning)
// @match        https://*.manhuagui.com/comic/*/*.html
// @grant        none
// @run-at       document-end
// @license      MIT
// ==/UserScript==

(function(){
  document.head.appendChild(document.createElement("style")).textContent =
    ".tbCenter{width:auto!important;height:auto!important}.sub-btn{width:fit-content}";
  const autoKey = "mhg_autoHeight", scrollKey = "mhg_scroll";
  const imgs = () => [...document.querySelectorAll("#mangaBox img.mangaFile")];
  const apply = () => {
    requestAnimationFrame(() => {
      imgs().forEach(img => {
        if(localStorage.getItem(autoKey) === "true"){
          img.style.height = "98vh";
          img.style.width = "auto";
          img.style.maxWidth = "100vw";
          img.style.objectFit = "contain";
        } else {
          img.style.height = "";
          img.style.width = "";
          img.style.maxWidth = "";
          img.style.objectFit = "";
        }
      });
    });
  };
  const toggle = () => {
    const auto = localStorage.getItem(autoKey) !== "true";
    localStorage.setItem(autoKey, auto ? "true" : "false");
    apply();
    document.getElementById("auto-height-checkbox").checked = auto;
  };
  const insertBtn = () => {
    const tool = document.querySelector("#tool-zoom");
    if(!tool || document.getElementById("auto-height-btn")) return;
    const li = tool.parentElement,
          btn = document.createElement("li");
    btn.id = "auto-height-btn";
    btn.className = "pfunc";
    btn.innerHTML = '<label style="cursor:pointer;color:red;">' +
                      '<input type="checkbox" id="auto-height-checkbox" style="vertical-align:middle;margin-right:4px;">自適應高度' +
                    '</label>';
    btn.querySelector("input").addEventListener("change", toggle);
    li.insertAdjacentElement("afterend", btn);
    if(localStorage.getItem(autoKey) === null) localStorage.setItem(autoKey, "false");
    document.getElementById("auto-height-checkbox").checked = localStorage.getItem(autoKey) === "true";
    apply();
  };
  const updateScrollIndex = () => {
    const im = imgs();
    let idx = 0, min = Infinity;
    im.forEach((img, i) => {
      const d = Math.abs(img.getBoundingClientRect().top);
      if(d < min){ min = d; idx = i; }
    });
    localStorage.setItem(scrollKey, idx);
  };
  const scrollAfterLoaded = () => {
    const im = imgs(), idx = +(localStorage.getItem(scrollKey)) || 0;
    const promises = im.filter(img => !img.complete)
                       .map(img => new Promise(res => img.addEventListener("load", () => { apply(); res(); }, {once: true})));
    Promise.all(promises).then(() => {
      apply();
      requestAnimationFrame(() => {
        im[idx]?.scrollIntoView({behavior:"auto", block:"start"});
      });
    });
  };
  window.addEventListener("scroll", updateScrollIndex);
  window.addEventListener("resize", apply);
  setInterval(insertBtn, 1000);
  insertBtn();
  const box = document.getElementById("mangaBox");
  if(box && !box._autoObs){
    new MutationObserver(() => {
      apply();
      setTimeout(scrollAfterLoaded, 50);
    })
      .observe(box, {childList: true, subtree: true, attributes: true, attributeFilter: ["src", "style"]});
    box._autoObs = true;
  }
  scrollAfterLoaded();
})();