User:CannonProductions/monacobookbeta.js: Difference between revisions

From MediaWiki
Jump to navigationJump to search
← Older editNewer edit →
CannonProductions (talk | contribs)
91 edits
No edit summary
No edit summary
Line 1: Line 1:
/* User:CannonProductions/monacobookbeta.js
/* User:CannonProductions/monacobookbeta.js
   - Dynamically scales #top-ad iframe banner to fit available width on mobile
   - Dynamically scales #top-ad iframe banner to fit available width on mobile
   - Locks background scroll when the sidebar (#column-one) is open on mobile
   - Adds/removes html.tf-nav-open when the sidebar (#column-one) is open
*/
*/


Line 8: Line 8:


   // === SETTINGS ===
   // === SETTINGS ===
  var DEBUG_BADGE = false;        // keep false (you already confirmed it runs)
   var MOBILE_MAX_WIDTH = 720;
   var MOBILE_MAX_WIDTH = 720;     // rules apply on screens <= this width


   // Banner creative’s native size
   // Banner creative’s native size
Line 25: Line 24:
       fn();
       fn();
     }
     }
  }
  function addBadge() {
    if (!DEBUG_BADGE) return;
    if (!document.body) return;
    if (document.getElementById("js-test-badge")) return;
    var d = document.createElement("div");
    d.id = "js-test-badge";
    d.textContent = "User JS RUNNING";
    d.style.cssText =
      "position:fixed;top:0;left:0;z-index:999999;" +
      "padding:6px 10px;background:#e11;color:#fff;" +
      "font:12px sans-serif";
    document.body.prepend(d);
   }
   }


Line 94: Line 78:
   }
   }


   // ===== Nav scroll locking =====
   // ===== Nav open/closed detection =====
  // MonacoBookBeta toggles #column-one visibility; when it’s visible on mobile, stop the page behind from scrolling.
  function setScrollLocked(locked) {
    // Use a data flag so we don’t fight other styles
    if (locked) {
      document.documentElement.style.overflow = "hidden";
      document.body.style.overflow = "hidden";
      document.body.setAttribute("data-nav-locked", "1");
    } else {
      if (document.body.getAttribute("data-nav-locked") === "1") {
        document.documentElement.style.overflow = "";
        document.body.style.overflow = "";
        document.body.removeAttribute("data-nav-locked");
      }
    }
  }
 
   function isNavOpen() {
   function isNavOpen() {
     var nav = document.getElementById("column-one");
     var nav = document.getElementById("column-one");
Line 119: Line 87:


     var r = nav.getBoundingClientRect();
     var r = nav.getBoundingClientRect();
    // If it has some real onscreen area, treat it as open
     return r.width > 40 && r.height > 40;
     return r.width > 40 && r.height > 40;
   }
   }


   function updateNavLock() {
   function updateNavClass() {
    // Only care on mobile
     if (!isMobileWidth()) {
     if (!isMobileWidth()) {
       setScrollLocked(false);
       document.documentElement.classList.remove("tf-nav-open");
       return;
       return;
     }
     }
     setScrollLocked(isNavOpen());
 
     if (isNavOpen()) {
      document.documentElement.classList.add("tf-nav-open");
    } else {
      document.documentElement.classList.remove("tf-nav-open");
    }
   }
   }


Line 137: Line 110:
     t = setTimeout(function () {
     t = setTimeout(function () {
       rescaleBanner();
       rescaleBanner();
       updateNavLock();
       updateNavClass();
     }, 60);
     }, 60);
   }
   }
Line 144: Line 117:
     // Run once now
     // Run once now
     rescaleBanner();
     rescaleBanner();
     updateNavLock();
     updateNavClass();


    // Re-run on resize/rotate
     window.addEventListener("resize", scheduleAll);
     window.addEventListener("resize", scheduleAll);
     window.addEventListener("orientationchange", scheduleAll);
     window.addEventListener("orientationchange", scheduleAll);


    // MediaWiki dynamic content hook
     if (window.mw && mw.hook) {
     if (window.mw && mw.hook) {
       mw.hook("wikipage.content").add(function () {
       mw.hook("wikipage.content").add(function () {
Line 157: Line 128:
     }
     }


     // Watch for DOM changes (menu open/close often changes styles/DOM)
     // Watch for DOM + style changes (menu open/close)
     var obs = new MutationObserver(function () {
     var obs = new MutationObserver(function () {
       scheduleAll();
       scheduleAll();
     });
     });
     obs.observe(document.documentElement, { childList: true, subtree: true, attributes: true });
     obs.observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true
    });


     // Extra safety: click anywhere updates lock (covers purely-CSS toggles)
     // Extra safety: tapping hamburger triggers class update
     document.addEventListener("click", function () {
     document.addEventListener("click", function () {
       setTimeout(updateNavLock, 0);
       setTimeout(updateNavClass, 0);
     });
     });
   }
   }


   onReady(function () {
   onReady(function () {
    addBadge();
     installObservers();
     installObservers();
   });
   });
})();
})();

Revision as of 12:17, 30 December 2025

/* User:CannonProductions/monacobookbeta.js
   - Dynamically scales #top-ad iframe banner to fit available width on mobile
   - Adds/removes html.tf-nav-open when the sidebar (#column-one) is open
*/

(function () {
  "use strict";

  // === SETTINGS ===
  var MOBILE_MAX_WIDTH = 720;

  // Banner creative’s native size
  var BASE_W = 468;
  var BASE_H = 60;

  // Banner scale limits
  var MIN_SCALE = 0.55;
  var MAX_SCALE = 1.0;

  function onReady(fn) {
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", fn);
    } else {
      fn();
    }
  }

  function isMobileWidth() {
    return window.matchMedia("(max-width: " + MOBILE_MAX_WIDTH + "px)").matches;
  }

  // ===== Banner scaling =====
  function resetBannerStyles(ad, iframe) {
    if (ad) {
      ad.style.height = "";
      ad.style.overflow = "";
      ad.style.width = "";
    }
    if (iframe) {
      iframe.style.transform = "";
      iframe.style.transformOrigin = "";
      iframe.style.width = "";
      iframe.style.height = "";
      iframe.style.border = "";
      iframe.style.display = "";
    }
  }

  function rescaleBanner() {
    var ad = document.getElementById("top-ad");
    if (!ad) return;

    var iframe = ad.querySelector("iframe");
    if (!iframe) return;

    if (!isMobileWidth()) {
      resetBannerStyles(ad, iframe);
      return;
    }

    iframe.style.width = BASE_W + "px";
    iframe.style.height = BASE_H + "px";
    iframe.style.border = "0";
    iframe.style.display = "block";
    iframe.style.transformOrigin = "top left";

    var available = ad.getBoundingClientRect().width || window.innerWidth;

    var scale = available / BASE_W;
    if (scale > MAX_SCALE) scale = MAX_SCALE;
    if (scale < MIN_SCALE) scale = MIN_SCALE;

    iframe.style.transform = "scale(" + scale.toFixed(4) + ")";

    ad.style.width = "100%";
    ad.style.overflow = "hidden";
    ad.style.height = (BASE_H * scale) + "px";
  }

  // ===== Nav open/closed detection =====
  function isNavOpen() {
    var nav = document.getElementById("column-one");
    if (!nav) return false;

    var cs = window.getComputedStyle(nav);
    if (!cs || cs.display === "none" || cs.visibility === "hidden") return false;

    var r = nav.getBoundingClientRect();
    return r.width > 40 && r.height > 40;
  }

  function updateNavClass() {
    // Only care on mobile
    if (!isMobileWidth()) {
      document.documentElement.classList.remove("tf-nav-open");
      return;
    }

    if (isNavOpen()) {
      document.documentElement.classList.add("tf-nav-open");
    } else {
      document.documentElement.classList.remove("tf-nav-open");
    }
  }

  // ===== Plumbing =====
  var t = null;
  function scheduleAll() {
    if (t) clearTimeout(t);
    t = setTimeout(function () {
      rescaleBanner();
      updateNavClass();
    }, 60);
  }

  function installObservers() {
    // Run once now
    rescaleBanner();
    updateNavClass();

    window.addEventListener("resize", scheduleAll);
    window.addEventListener("orientationchange", scheduleAll);

    if (window.mw && mw.hook) {
      mw.hook("wikipage.content").add(function () {
        scheduleAll();
      });
    }

    // Watch for DOM + style changes (menu open/close)
    var obs = new MutationObserver(function () {
      scheduleAll();
    });
    obs.observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true
    });

    // Extra safety: tapping hamburger triggers class update
    document.addEventListener("click", function () {
      setTimeout(updateNavClass, 0);
    });
  }

  onReady(function () {
    installObservers();
  });
})();
Retrieved from "https://tfwiki.duckdns.org/index.php?title=User:CannonProductions/monacobookbeta.js&oldid=1882027"