feat: support iframeless design and add init function for initializing maidr

src/css/styles.css

@@ -93,7 +93,7 @@
 }
 
 /* Menu stuff */
-.modal {
+.maidr-modal {
   position: fixed;
   top: 0;
   right: 0;
@@ -102,7 +102,6 @@
   z-index: 1072;
   overflow-x: hidden;
   overflow-y: auto;
-
   opacity: 1;
   transition: opacity 0.15s linear;
 }

src/js/constants.js

@@ -928,7 +928,7 @@ class Menu {
 
   // initial html for the menu
   menuHtml = `
-        <div id="menu" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="menu" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -1846,7 +1846,7 @@ class ChatLLM {
    */
   CreateComponent() {
     let html = `
-        <div id="chatLLM" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="chatLLM" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -2985,7 +2985,7 @@ class Description {
   CreateComponent() {
     // modal containing description summary stuff
     let html = `
-        <div id="description" class="modal hidden" role="dialog" tabindex="-1">
+        <div id="description" class="maidr-modal hidden" role="dialog" tabindex="-1">
             <div class="modal-dialog" role="document" tabindex="0">
                 <div class="modal-content">
                     <div class="modal-header">

src/js/init.js

@@ -1,6 +1,6 @@
 // events and init functions
 // we do some setup, but most of the work is done when user focuses on an element matching an id from maidr user data
-document.addEventListener('DOMContentLoaded', function (e) {
+function init(id) {
   // we wrap in DOMContentLoaded to make sure everything has loaded before we run anything
 
   // create global vars
@@ -19,30 +19,56 @@ document.addEventListener('DOMContentLoaded', function (e) {
       maidrObjects = maidrObjects.concat(window.maidr);
     }
   }
-
-  // Then look for elements with maidr attribute
-  const elementsWithMaidrAttr = document.querySelectorAll('[maidr-data]');
-  elementsWithMaidrAttr.forEach((element) => {
-    try {
-      const maidrData = JSON.parse(element.getAttribute('maidr-data'));
+  if (id !== undefined) {
+    const elementWithId = document.getElementById(id);
+    if (elementWithId) {
+      let maidrData;
+      try {
+        maidrData = JSON.parse(elementWithId.getAttribute('maidr-data'));
+      } catch (e) {
+        console.error('Failed to parse maidr attribute:', e);
+        return;
+      }
       // If id is not provided in the JSON, use the element's id
       if (!maidrData.id) {
-        if (element.id) {
-          maidrData.id = element.id;
+        if (elementWithId.id) {
+          maidrData.id = elementWithId.id;
         } else {
           // Generate a random id if none exists
-          element.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
-          maidrData.id = element.id;
+          elementWithId.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
+          maidrData.id = elementWithId.id;
         }
       }
       // Check if this id already exists in maidrObjects to avoid duplicates
       if (!maidrObjects.some((obj) => obj.id === maidrData.id)) {
         maidrObjects.push(maidrData);
       }
-    } catch (e) {
-      console.error('Failed to parse maidr attribute:', e);
     }
-  });
+  } else {
+    // Then look for elements with maidr attribute
+    const elementsWithMaidrAttr = document.querySelectorAll('[maidr-data]');
+    elementsWithMaidrAttr.forEach((element) => {
+      try {
+        const maidrData = JSON.parse(element.getAttribute('maidr-data'));
+        // If id is not provided in the JSON, use the element's id
+        if (!maidrData.id) {
+          if (element.id) {
+            maidrData.id = element.id;
+          } else {
+            // Generate a random id if none exists
+            element.id = 'maidr-' + Math.random().toString(36).substr(2, 9);
+            maidrData.id = element.id;
+          }
+        }
+        // Check if this id already exists in maidrObjects to avoid duplicates
+        if (!maidrObjects.some((obj) => obj.id === maidrData.id)) {
+          maidrObjects.push(maidrData);
+        }
+      } catch (e) {
+        console.error('Failed to parse maidr attribute:', e);
+      }
+    });
+  }
 
   // set focus events for all maidr ids
   DestroyMaidr(); // just in case
@@ -63,9 +89,12 @@ document.addEventListener('DOMContentLoaded', function (e) {
       // blur done elsewhere
     }
   }
-
   // init components like alt text on just the first chart
   CreateChartComponents(firstMaidr, true);
+}
+
+document.addEventListener('DOMContentLoaded', function (e) {
+  init();
 });
 
 /**