Merge pull request #25 from scpwiki/resize-cache

rossjrw · web-flow · commit 1ec34f3da3c2 · 2024-05-23T09:23:05.000+01:00
Decouple resizer from interwiki
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -15,6 +15,7 @@ on:
 concurrency: preview-${{ github.ref }}
 jobs:
   deploy-preview:
+    if: github.repository == 'scpwiki/interwiki'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
diff --git a/build.js b/build.js
@@ -16,6 +16,16 @@ esbuild.buildSync({
   target: dev ? "esnext" : "es5",
 });
 
+esbuild.buildSync({
+  entryPoints: ["js/resizeIframe.js"],
+  outdir: "dist",
+  bundle: true,
+  minify: !dev,
+  sourcemap: dev ? "inline" : true,
+  target: dev ? "esnext" : "es5",
+  globalName: "resizeIframe",
+});
+
 ["interwikiFrame", "styleFrame", "index"].forEach(function (frame) {
   fs.copyFileSync("html/" + frame + ".html", "dist/" + frame + ".html");
 });
diff --git a/html/interwikiFrame.html b/html/interwikiFrame.html
@@ -4,6 +4,7 @@
 <head>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
+  <script src="./resizeIframe.js"></script>
   <script src="./interwiki.js"></script>
 </head>
 
diff --git a/js/createResizeIframe.js b/js/createResizeIframe.js
diff --git a/js/interwiki.js b/js/interwiki.js
@@ -1,11 +1,14 @@
-import { createResizeIframe } from "./createResizeIframe";
-import { addTranslations } from "./links";
 import { addExternalStyle, createRequestStyleChange } from "./styles";
 
+import { ResizeObserver } from "@juggle/resize-observer";
+import { addTranslations } from "./links";
 import { scpBranches } from "./branches-info-scp";
 import { wlBranches } from "./branches-info-wl";
 
-import { ResizeObserver } from "@juggle/resize-observer";
+/**
+ * @type {import("./resizeIframe").createResizeIframe}
+ */
+var createResizeIframe = window.resizeIframe.createResizeIframe;
 
 addEventListener("DOMContentLoaded", function () {
   var community = getQueryString(location.search, "community");
@@ -108,7 +111,10 @@ export function createInterwiki(
   var resize = createResizeIframe(site, frameId);
 
   // Resize frame when size changes are detected
-  var observer = new ResizeObserver(resize);
+  var observer = new ResizeObserver(function () {
+    // Only resize if there's at least one translation link
+    if (document.getElementsByClassName("menu-item").length) resize();
+  });
   observer.observe(document.documentElement);
 
   // Construct the function that will be called internally and by
diff --git a/js/links.js b/js/links.js
@@ -1,4 +1,3 @@
-import { flags } from "./createResizeIframe";
 import { cromLookup } from "./lookup/crom";
 
 // Configure which lookup method is currently active
@@ -58,16 +57,7 @@ export function addTranslations(branches, currentBranchLang, pagename) {
   var header = document.querySelector(".heading p");
   header.innerText = currentBranch.head;
 
-  lookupMethod(
-    currentBranch,
-    branches,
-    pagename,
-    function (pageUrl, branchName, branchLang, isOriginal) {
-      addTranslationLink(pageUrl, branchName, branchLang, isOriginal);
-      // Indicate that data has been received
-      flags.showInterwiki = true;
-    }
-  );
+  lookupMethod(currentBranch, branches, pagename, addTranslationLink);
 }
 
 /**
diff --git a/js/resizeIframe.js b/js/resizeIframe.js
@@ -0,0 +1,61 @@
+/**
+ * Constructs and returns a function that, when called, resizes the current iframes to match its contents or the given height. The function is debounced.
+ *
+ * @param {String} site - The base URL of the site.
+ * @param {String} frameId - The last segment of the URL of the interwiki iframe, used by Wikidot to identify it when resizing it.
+ * @param {Number=} [debounceTime] - Debounce delay to stagger repeated calls to the resizer. Defaults to 750 ms.
+ * @returns {((height: Number=) => void)} Debounced function that resizes the iframe. Optional height parameter sets the height of the iframe; if not set, the height is calculated from the document.
+ */
+export function createResizeIframe(site, frameId, debounceTime) {
+  if (debounceTime == null) debounceTime = 750;
+
+  var container = document.getElementById("resizer-container");
+  if (container == null) {
+    container = document.createElement("div");
+    container.id = "resizer-container";
+    document.body.appendChild(container);
+  }
+  var resizer = document.createElement("iframe");
+  resizer.style.display = "none";
+  container.appendChild(resizer);
+
+  // Trim leading slashes from frame ID
+  frameId = frameId.replace(/^\/+/, "");
+
+  var resize = function (height) {
+    if (height == null) {
+      // Measure from the top of the document to the iframe container to get the document height
+      // This takes into account inner margins, unlike e.g. document.body.clientHeight
+      // The container must not have display:none for this to work, which is why the iframe has it instead
+      height = container.getBoundingClientRect().top;
+      // Brute-force past any subpixel issues
+      if (height) height += 1;
+    }
+    resizer.src =
+      site +
+      "/common--javascript/resize-iframe.html?" +
+      "#" +
+      height +
+      "/" +
+      frameId;
+  };
+
+  return debounce(resize, debounceTime);
+}
+
+/**
+ * Debounces a function, delaying its execution until a certain amount of time has passed since the last time it was called, and aggregating all calls made in that time into one.
+ *
+ * @param {Function} func - The function to call.
+ * @param {Number} wait - The number of milliseconds to wait after any call to the debounced function before executing it.
+ * @returns {Function} The debounced function.
+ */
+export function debounce(func, wait) {
+  var timeout = 0;
+  return function () {
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      func.apply(null, arguments);
+    }, wait);
+  };
+}
