fix: wait until DOM is ready

arnoson · Dec 12, 2022 · 2a3aacc · 2a3aacc
1 parent cf9bd2a
commit 2a3aacc
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -370,27 +370,29 @@
   let isEnabled = false;
 
   const setup = () => {
-    const style = document.createElement('style');
-    style.innerText = css;
-    document.head.append(style);
-
-    gui = document.createElement('div');
-    gui.classList.add('hydra-midi-gui');
-    gui.innerHTML = `
-    <div class="hydra-midi-inputs"></div>
-    <span>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯</span>
-    <div class="hydra-midi-heading">Ch Type Values</div>
-    <div class="hydra-midi-messages">${[...Array(maxMessages)]
-      .map(() => `<div></div>`)
-      .join('')}</div>
-  `;
-
-    document.body.append(gui);
-    inputs = gui.querySelector('.hydra-midi-inputs');
-    messages = gui.querySelector('.hydra-midi-messages');
-
-    isSetup = true;
-    isEnabled = true;
+    document.addEventListener('DOMContentLoaded', () => {
+      const style = document.createElement('style');
+      style.innerText = css;
+      document.head.append(style);
+
+      gui = document.createElement('div');
+      gui.classList.add('hydra-midi-gui');
+      gui.innerHTML = `
+      <div class="hydra-midi-inputs"></div>
+      <span>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯</span>
+      <div class="hydra-midi-heading">Ch Type Values</div>
+      <div class="hydra-midi-messages">${[...Array(maxMessages)]
+        .map(() => `<div></div>`)
+        .join('')}</div>
+    `;
+
+      document.body.append(gui);
+      inputs = gui.querySelector('.hydra-midi-inputs');
+      messages = gui.querySelector('.hydra-midi-messages');
+
+      isSetup = true;
+      isEnabled = true;
+    });
   };
 
   /**

diff --git a/src/gui.js b/src/gui.js
@@ -15,27 +15,29 @@ let isSetup = false
 let isEnabled = false
 
 const setup = () => {
-  const style = document.createElement('style')
-  style.innerText = css
-  document.head.append(style)
-
-  gui = document.createElement('div')
-  gui.classList.add('hydra-midi-gui')
-  gui.innerHTML = `
-    <div class="hydra-midi-inputs"></div>
-    <span>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯</span>
-    <div class="hydra-midi-heading">Ch Type Values</div>
-    <div class="hydra-midi-messages">${[...Array(maxMessages)]
-      .map(() => `<div></div>`)
-      .join('')}</div>
-  `
-
-  document.body.append(gui)
-  inputs = gui.querySelector('.hydra-midi-inputs')
-  messages = gui.querySelector('.hydra-midi-messages')
-
-  isSetup = true
-  isEnabled = true
+  document.addEventListener('DOMContentLoaded', () => {
+    const style = document.createElement('style')
+    style.innerText = css
+    document.head.append(style)
+
+    gui = document.createElement('div')
+    gui.classList.add('hydra-midi-gui')
+    gui.innerHTML = `
+      <div class="hydra-midi-inputs"></div>
+      <span>⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯</span>
+      <div class="hydra-midi-heading">Ch Type Values</div>
+      <div class="hydra-midi-messages">${[...Array(maxMessages)]
+        .map(() => `<div></div>`)
+        .join('')}</div>
+    `
+
+    document.body.append(gui)
+    inputs = gui.querySelector('.hydra-midi-inputs')
+    messages = gui.querySelector('.hydra-midi-messages')
+
+    isSetup = true
+    isEnabled = true
+  })
 }
 
 /**