Implement minified js system

apiExamples/toggleDialog.js

@@ -1,8 +1,9 @@
-function toggleDialog(elem) {
-  let dialog = document.querySelector(elem);
+export function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
 
-  dialog.hasAttribute('open')
-  ? dialog.removeAttribute("open")
-  : (dialog.removeAttribute("open"),
-    dialog.setAttribute("open", true));
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
 }

demo/api.html

@@ -41,8 +41,10 @@
         });
     </script>
     <script type="module" data-demo-script="true" src="../index.js"></script>
-
-    <script src="../apiExamples/toggleDialog.js"></script>
+    <script src="./api.min.js"></script>
+    <script>
+      initDialogApiExamples();
+    </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

demo/api.js

@@ -0,0 +1,16 @@
+import { toggleDialog } from "../apiExamples/toggleDialog";
+
+export function initDialogApiExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    toggleDialog();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initDialogApiExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}

demo/api.min.js

@@ -0,0 +1,25 @@
+function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
+
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
+}
+
+function initDialogApiExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    toggleDialog();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initDialogApiExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+

demo/index.html

@@ -41,8 +41,10 @@
         });
     </script>
     <script type="module" data-demo-script="true" src="../index.js"></script>
-
-    <script src="../apiExamples/toggleDialog.js"></script>
+    <script src="./index.min.js"></script>
+    <script>
+      initDialogIndexExamples();
+    </script>
 
     <script type="module">
       import { registerComponent } from '../index.js';

demo/index.js

@@ -0,0 +1,16 @@
+import { toggleDialog } from "../apiExamples/toggleDialog";
+
+export function initDialogIndexExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    toggleDialog();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initDialogIndexExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}

demo/index.md

@@ -37,16 +37,15 @@ The `<auro-dialog>` component should be used in situations where users may:
 Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
 
 ```javascript
-function toggleDialog(elem) {
-  let dialog = document.querySelector(elem);
-
-  dialog.hasAttribute('open')
-  ? dialog.removeAttribute("open")
-  : (dialog.removeAttribute("open"),
-    dialog.setAttribute("open", true));
+function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
+
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
 }
-
-// This function can be retrieved from https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/toggleDialog.js
 ```
 
 Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.

demo/index.min.js

@@ -0,0 +1,25 @@
+function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
+
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
+}
+
+function initDialogIndexExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    toggleDialog();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initDialogIndexExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+

docs/partials/index.md

@@ -24,16 +24,15 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 Triggering the dialog relies on functions being installed. See the following example code that is installed into this demo.
 
 ```javascript
-function toggleDialog(elem) {
-  let dialog = document.querySelector(elem);
-
-  dialog.hasAttribute('open')
-  ? dialog.removeAttribute("open")
-  : (dialog.removeAttribute("open"),
-    dialog.setAttribute("open", true));
+function toggleDialog(dialogID) {
+  const dialog = document.querySelector(dialogID);
+
+  if (dialog.hasAttribute('open')) {
+    dialog.removeAttribute('open');
+  } else {
+    dialog.setAttribute('open', true);
+  }
 }
-
-// This function can be retrieved from https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/dist/toggleDialog.js
 ```
 
 Once the JavaScript is added to the scope of the experience, the next part is adding a trigger. In this example, the button component will toggle a dialog with the ID of `#demo1`.