maidr 2.29.0 → 2.30.0

package/dist/maidr.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">
@@ -12145,7 +12145,7 @@ class Goto {
 
 // 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
@@ -12155,7 +12155,7 @@ document.addEventListener('DOMContentLoaded', function (e) {
 
   // set focus events for all charts matching maidr ids
   let maidrObjects = [];
-  
+
   // First check for globally defined maidr variable (script tag method)
   if (typeof window.maidr !== 'undefined') {
     if (!Array.isArray(window.maidr)) {
@@ -12164,30 +12164,56 @@ document.addEventListener('DOMContentLoaded', function (e) {
       maidrObjects = maidrObjects.concat(window.maidr);
     }
   }
-
-  // Then look for elements with maidr attribute
-  const elementsWithMaidrAttr = document.querySelectorAll('[maidr]');
-  elementsWithMaidrAttr.forEach(element => {
-    try {
-      const maidrData = JSON.parse(element.getAttribute('maidr'));
+  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)) {
+      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
@@ -12208,9 +12234,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();
 });
 
 /**