Move HTMX code to module

src/components/head.html

@@ -14,9 +14,7 @@
   <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
-  <script type="module">
+  <script type="module" src="index.js"></script>
-    window.htmx = require('htmx.org');
-  </script>
   <meta name="htmx-config" content='{"responseHandling": [{"code":"204", "swap": false},{"code":"...", "swap": true}]}'>
   <style>
     .flex-container {
@@ -198,26 +196,6 @@
       }
     }
   </script>
-  <script type="module">
-    import AudioMotionAnalyzer from 'audiomotion-analyzer';
-    const container = document.getElementById('audioContainer');
-    const audioSource = document.getElementById('player');
-    const audioMotion = new AudioMotionAnalyzer(container, {source: audioSource});
-    audioMotion.registerGradient('sandwich', {
-      dir: 'h',           // add this property to create a horizontal gradient (optional)
-      colorStops: [       // list your gradient colors in this array (at least one color is required)
-        {color: '#957b09', pos: .0},  // use `level` to set the max bar amplitude (0 to 1) to use this color
-        {color: '#f8d170', pos: .65}, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
-      ]
-    });
-    audioMotion.setOptions({source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback});
-
-
-    function drawCallback(instance, info) {
-      const energy = instance.getEnergy() * 150;
-      document.documentElement.style.setProperty('--energy', energy + 'px');
-    }
-  </script>
 </body>
 
 </html>

src/htmx_import.js

@@ -0,0 +1 @@
+window.htmx = require('htmx.org');

src/index.js

@@ -0,0 +1,22 @@
+import htmx from 'htmx.org';
+import '/src/htmx_import.js'
+import AudioMotionAnalyzer from 'audiomotion-analyzer';
+htmx.onLoad(function(target) {
+  const container = document.getElementById('audioContainer');
+  const audioSource = document.getElementById('player');
+  const audioMotion = new AudioMotionAnalyzer(container, { source: audioSource });
+  audioMotion.registerGradient('sandwich', {
+    dir: 'h',           // add this property to create a horizontal gradient (optional)
+    colorStops: [       // list your gradient colors in this array (at least one color is required)
+      { color: '#957b09', pos: .0 },  // use `level` to set the max bar amplitude (0 to 1) to use this color
+      { color: '#f8d170', pos: .65 }, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
+    ]
+  });
+  audioMotion.setOptions({ source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback });
+
+
+  function drawCallback(instance, _info) {
+    const energy = instance.getEnergy() * 150;
+    target.style.setProperty('--energy', energy + 'px');
+  }
+});