@jjlmoya/utils-pets 1.25.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-pets",
-    "version": "1.25.0",
+    "version": "1.26.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/layouts/ProductionUtilityPage.astro

@@ -45,6 +45,7 @@ const ui = getCategoryUi(locale);
 </ProductionPage>
 
 <script>
+  import { observeWidgetHeight } from "../mfe/widget-height";
   const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
   const page = document.querySelector<HTMLElement>(".utility-production");
   const container = document.querySelector<HTMLElement>(".utility-tool-production");
@@ -60,11 +61,10 @@ const ui = getCategoryUi(locale);
   document.querySelector('[data-zoom="reset"]')?.addEventListener("click", () => { zoom = 1; applyZoom(); localStorage.removeItem("gamebob-utility-zoom"); });
   if (isWidget) {
     document.body.classList.add("utility-widget-body");
-    if (page) {
-      page.classList.add("utility-widget-mode");
-    }
+    page?.classList.add("utility-widget-mode");
   }
   applyZoom();
+  if (isWidget && container) observeWidgetHeight(container);
 </script>
 
 <style>
@@ -88,7 +88,7 @@ const ui = getCategoryUi(locale);
     margin-top: 0;
   }
 
-  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+  :global(.utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production)) {
     display: none;
   }
 

package/src/mfe/widget-height.ts

@@ -0,0 +1,14 @@
+export function observeWidgetHeight(container: HTMLElement): void {
+  if (window.parent === window) return;
+
+  const pathSlug = window.location.pathname.split("/").filter(Boolean).pop() ?? "utility";
+  const widgetId = new URLSearchParams(window.location.search).get("id") ?? `jj-widget-${pathSlug}`;
+  const reportHeight = (height: number) => {
+    if (height > 50) {
+      window.parent.postMessage({ jjlmoyaHeight: Math.ceil(height), jjlmoyaId: widgetId }, "*");
+    }
+  };
+  const observer = new ResizeObserver(([entry]) => reportHeight(entry?.contentRect.height ?? 0));
+
+  observer.observe(container);
+}