@jsenv/navi 0.3.2 → 0.3.4

package/dist/jsenv_navi.js

@@ -11806,7 +11806,24 @@ const openCallout = (
       newMessage = error.message;
       newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(error.stack)}</pre>`;
     }
-    calloutMessageElement.innerHTML = newMessage;
+
+    // Check if the message is a full HTML document (starts with DOCTYPE)
+    if (typeof newMessage === "string" && isHtmlDocument(newMessage)) {
+      // Create iframe to isolate the HTML document
+      const iframe = document.createElement("iframe");
+      iframe.style.border = "none";
+      iframe.style.width = "100%";
+      iframe.style.minHeight = "200px";
+      iframe.style.maxHeight = "400px";
+      iframe.style.backgroundColor = "white";
+      iframe.srcdoc = newMessage;
+
+      // Clear existing content and add iframe
+      calloutMessageElement.innerHTML = "";
+      calloutMessageElement.appendChild(iframe);
+    } else {
+      calloutMessageElement.innerHTML = newMessage;
+    }
   };
   {
     const handleClickOutside = (event) => {
@@ -11918,6 +11935,9 @@ const openCallout = (
   update(message, { level });
 
   {
+    const documentScrollLeftAtOpen = document.documentElement.scrollLeft;
+    const documentScrollTopAtOpen = document.documentElement.scrollTop;
+
     let positioner;
     let strategy;
     const determine = () => {
@@ -11940,7 +11960,10 @@ const openCallout = (
       }
       positioner?.stop();
       if (newStrategy === "centered") {
-        positioner = centerCalloutInViewport(calloutElement);
+        positioner = centerCalloutInViewport(calloutElement, {
+          documentScrollLeftAtOpen,
+          documentScrollTopAtOpen,
+        });
       } else {
         positioner = stickCalloutToAnchor(calloutElement, anchorElement);
       }
@@ -12058,6 +12081,12 @@ import.meta.css = /* css */ `
       word-break: break-word;
       overflow-wrap: anywhere;
     }
+    .navi_callout_message iframe {
+      display: block;
+      margin: 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
     .navi_callout_close_button_column {
       display: flex;
       height: 22px;
@@ -12142,7 +12171,10 @@ const createCalloutElement = () => {
   return calloutElement;
 };
 
-const centerCalloutInViewport = (calloutElement) => {
+const centerCalloutInViewport = (
+  calloutElement,
+  { documentScrollLeftAtOpen, documentScrollTopAtOpen },
+) => {
   // Set up initial styles for centered positioning
   const calloutBoxElement = calloutElement.querySelector(".navi_callout_box");
   const calloutFrameElement = calloutElement.querySelector(
@@ -12195,10 +12227,10 @@ const centerCalloutInViewport = (calloutElement) => {
       finalHeight,
     );
 
-    // Center in viewport
+    // Center in viewport (accounting for document scroll)
     const viewportWidth = window.innerWidth;
-    const left = (viewportWidth - finalWidth) / 2;
-    const top = (viewportHeight - finalHeight) / 2;
+    const left = documentScrollLeftAtOpen + (viewportWidth - finalWidth) / 2;
+    const top = documentScrollTopAtOpen + (viewportHeight - finalHeight) / 2;
 
     calloutStyleController.set(calloutElement, {
       opacity: 1,
@@ -12211,7 +12243,6 @@ const centerCalloutInViewport = (calloutElement) => {
 
   // Initial positioning
   updateCenteredPosition();
-
   window.addEventListener("resize", updateCenteredPosition);
 
   // Return positioning function for dynamic updates
@@ -12424,6 +12455,20 @@ const escapeHtml = (string) => {
     .replace(/'/g, "&#039;");
 };
 
+/**
+ * Checks if a string is a full HTML document (starts with DOCTYPE)
+ * @param {string} content - The content to check
+ * @returns {boolean} - True if it looks like a complete HTML document
+ */
+const isHtmlDocument = (content) => {
+  if (typeof content !== "string") {
+    return false;
+  }
+  // Trim whitespace and check if it starts with DOCTYPE (case insensitive)
+  const trimmed = content.trim();
+  return /^<!doctype\s+html/i.test(trimmed);
+};
+
 // It's ok to do this because the element is absolutely positioned
 const cloneCalloutToMeasureNaturalSize = (calloutElement) => {
   // Create invisible clone to measure natural size
@@ -13320,11 +13365,12 @@ const installCustomConstraintValidation = (
       closeElementValidationMessage("cleanup");
     };
 
-    failedConstraintInfo.target || elementReceivingValidationMessage;
-
+    const anchorElement =
+      failedConstraintInfo.target || elementReceivingValidationMessage;
     validationInterface.validationMessage = openCallout(
       failedConstraintInfo.message,
       {
+        anchorElement,
         level: failedConstraintInfo.level,
         closeOnClickOutside: failedConstraintInfo.closeOnClickOutside,
         onClose: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/callout/callout.js

@@ -117,7 +117,24 @@ export const openCallout = (
       newMessage = error.message;
       newMessage += `<pre class="navi_callout_error_stack">${escapeHtml(error.stack)}</pre>`;
     }
-    calloutMessageElement.innerHTML = newMessage;
+
+    // Check if the message is a full HTML document (starts with DOCTYPE)
+    if (typeof newMessage === "string" && isHtmlDocument(newMessage)) {
+      // Create iframe to isolate the HTML document
+      const iframe = document.createElement("iframe");
+      iframe.style.border = "none";
+      iframe.style.width = "100%";
+      iframe.style.minHeight = "200px";
+      iframe.style.maxHeight = "400px";
+      iframe.style.backgroundColor = "white";
+      iframe.srcdoc = newMessage;
+
+      // Clear existing content and add iframe
+      calloutMessageElement.innerHTML = "";
+      calloutMessageElement.appendChild(iframe);
+    } else {
+      calloutMessageElement.innerHTML = newMessage;
+    }
   };
   close_on_click_outside: {
     const handleClickOutside = (event) => {
@@ -229,6 +246,9 @@ export const openCallout = (
   update(message, { level });
 
   positioning: {
+    const documentScrollLeftAtOpen = document.documentElement.scrollLeft;
+    const documentScrollTopAtOpen = document.documentElement.scrollTop;
+
     let positioner;
     let strategy;
     const determine = () => {
@@ -251,7 +271,10 @@ export const openCallout = (
       }
       positioner?.stop();
       if (newStrategy === "centered") {
-        positioner = centerCalloutInViewport(calloutElement);
+        positioner = centerCalloutInViewport(calloutElement, {
+          documentScrollLeftAtOpen,
+          documentScrollTopAtOpen,
+        });
       } else {
         positioner = stickCalloutToAnchor(calloutElement, anchorElement);
       }
@@ -369,6 +392,12 @@ import.meta.css = /* css */ `
       word-break: break-word;
       overflow-wrap: anywhere;
     }
+    .navi_callout_message iframe {
+      display: block;
+      margin: 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
     .navi_callout_close_button_column {
       display: flex;
       height: 22px;
@@ -453,7 +482,10 @@ const createCalloutElement = () => {
   return calloutElement;
 };
 
-const centerCalloutInViewport = (calloutElement) => {
+const centerCalloutInViewport = (
+  calloutElement,
+  { documentScrollLeftAtOpen, documentScrollTopAtOpen },
+) => {
   // Set up initial styles for centered positioning
   const calloutBoxElement = calloutElement.querySelector(".navi_callout_box");
   const calloutFrameElement = calloutElement.querySelector(
@@ -506,10 +538,10 @@ const centerCalloutInViewport = (calloutElement) => {
       finalHeight,
     );
 
-    // Center in viewport
+    // Center in viewport (accounting for document scroll)
     const viewportWidth = window.innerWidth;
-    const left = (viewportWidth - finalWidth) / 2;
-    const top = (viewportHeight - finalHeight) / 2;
+    const left = documentScrollLeftAtOpen + (viewportWidth - finalWidth) / 2;
+    const top = documentScrollTopAtOpen + (viewportHeight - finalHeight) / 2;
 
     calloutStyleController.set(calloutElement, {
       opacity: 1,
@@ -522,7 +554,6 @@ const centerCalloutInViewport = (calloutElement) => {
 
   // Initial positioning
   updateCenteredPosition();
-
   window.addEventListener("resize", updateCenteredPosition);
 
   // Return positioning function for dynamic updates
@@ -735,6 +766,20 @@ const escapeHtml = (string) => {
     .replace(/'/g, "&#039;");
 };
 
+/**
+ * Checks if a string is a full HTML document (starts with DOCTYPE)
+ * @param {string} content - The content to check
+ * @returns {boolean} - True if it looks like a complete HTML document
+ */
+const isHtmlDocument = (content) => {
+  if (typeof content !== "string") {
+    return false;
+  }
+  // Trim whitespace and check if it starts with DOCTYPE (case insensitive)
+  const trimmed = content.trim();
+  return /^<!doctype\s+html/i.test(trimmed);
+};
+
 // It's ok to do this because the element is absolutely positioned
 const cloneCalloutToMeasureNaturalSize = (calloutElement) => {
   // Create invisible clone to measure natural size

package/src/components/callout/test_html_document_iframe.html

@@ -0,0 +1,182 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Test HTML Document in Callout</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 20px;
+        font-family: Arial, sans-serif;
+      }
+      .test-button {
+        display: inline-block;
+        margin: 10px;
+        padding: 10px 20px;
+        color: white;
+        font-size: 14px;
+        background: #007acc;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .test-section {
+        margin: 40px 0;
+        padding: 20px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+      pre {
+        padding: 10px;
+        font-size: 12px;
+        background: #f5f5f5;
+        border-radius: 4px;
+        overflow-x: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>HTML Document in Callout Test</h1>
+
+    <div class="test-section">
+      <h2>Test 1: Regular HTML content (no DOCTYPE)</h2>
+      <button class="test-button" onclick="showRegularHtml()">
+        Show Regular HTML
+      </button>
+      <p>This should display as normal innerHTML (no iframe).</p>
+    </div>
+
+    <div class="test-section">
+      <h2>Test 2: Complete HTML document (with DOCTYPE)</h2>
+      <button class="test-button" onclick="showHtmlDocument()">
+        Show HTML Document
+      </button>
+      <p>This should display in an iframe to prevent style conflicts.</p>
+    </div>
+
+    <div class="test-section">
+      <h2>Test 3: HTML document with conflicting styles</h2>
+      <button class="test-button" onclick="showConflictingStylesDocument()">
+        Show Document with Conflicting Styles
+      </button>
+      <p>This demonstrates how iframe isolation prevents style conflicts.</p>
+    </div>
+
+    <script type="module">
+      import { openCallout } from "@jsenv/navi";
+
+      let currentCallout = null;
+
+      function closeCurrentCallout() {
+        if (currentCallout) {
+          currentCallout.close();
+          currentCallout = null;
+        }
+      }
+
+      window.showRegularHtml = () => {
+        closeCurrentCallout();
+        const regularHtml = `
+        <h3>Regular HTML Content</h3>
+        <p>This is just regular HTML content without DOCTYPE.</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+        <p><strong>Note:</strong> This should display as innerHTML, not in an iframe.</p>
+      `;
+
+        currentCallout = openCallout(regularHtml, {
+          level: "info",
+          debug: true,
+        });
+      };
+
+      window.showHtmlDocument = () => {
+        closeCurrentCallout();
+        const htmlDocument = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Embedded Document</title>
+  <style>
+    body {
+      font-family: Georgia, serif;
+      background: linear-gradient(45deg, #e3f2fd, #fff3e0);
+      margin: 0;
+      padding: 20px;
+    }
+    h1 { color: #1976d2; }
+    .highlight { background: yellow; padding: 2px 4px; }
+  </style>
+</head>
+<body>
+  <h1>Complete HTML Document</h1>
+  <p>This is a <span class="highlight">complete HTML document</span> with its own styles.</p>
+  <p>It's displayed in an iframe to prevent any style conflicts with the parent page.</p>
+  <div style="border: 2px solid #4caf50; padding: 10px; margin: 10px 0; border-radius: 8px;">
+    <strong>Isolated Environment:</strong> This document has its own CSS and doesn't interfere with the callout styles.
+  </div>
+</body>
+</html>`;
+
+        currentCallout = openCallout(htmlDocument, {
+          level: "warning",
+          debug: true,
+        });
+      };
+
+      window.showConflictingStylesDocument = () => {
+        closeCurrentCallout();
+        const conflictingDocument = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Conflicting Styles</title>
+  <style>
+    /* These styles would conflict with the main page if not isolated */
+    body { 
+      background: #ff5722; 
+      color: white; 
+      font-family: 'Comic Sans MS', cursive;
+      margin: 0;
+      padding: 15px;
+    }
+    button { 
+      background: #4caf50; 
+      color: white; 
+      border: none; 
+      padding: 8px 16px; 
+      border-radius: 20px;
+      cursor: pointer;
+    }
+    .navi_callout { 
+      /* This would break the callout if not isolated */
+      display: none !important; 
+    }
+  </style>
+</head>
+<body>
+  <h1>🎨 Document with Conflicting Styles</h1>
+  <p>This document has styles that would completely break the callout if not isolated in an iframe!</p>
+  <button onclick="alert('This button works inside the iframe!')">Click me!</button>
+  <p><em>Notice how the styles don't affect the callout container.</em></p>
+</body>
+</html>`;
+
+        currentCallout = openCallout(conflictingDocument, {
+          level: "error",
+          debug: true,
+        });
+      };
+
+      // Close callout on escape key
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          closeCurrentCallout();
+        }
+      });
+    </script>
+  </body>
+</html>

package/src/validation/custom_constraint_validation.js

@@ -370,13 +370,12 @@ export const installCustomConstraintValidation = (
       closeElementValidationMessage("cleanup");
     };
 
-    const elementTarget =
+    const anchorElement =
       failedConstraintInfo.target || elementReceivingValidationMessage;
-
     validationInterface.validationMessage = openCallout(
       failedConstraintInfo.message,
       {
-        anchors: elementTarget,
+        anchorElement,
         level: failedConstraintInfo.level,
         closeOnClickOutside: failedConstraintInfo.closeOnClickOutside,
         onClose: () => {