TheSANDWICH/thesandwi.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move HTMX code to module
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Isaac Mills 2025-07-10 12:39:25 -06:00
parent 28845ff0ec
commit 5666f243bb
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
3 changed files with 24 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/head.html
View file

@ -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">
window.htmx = require('htmx.org');
</script>
<script type="module" src="index.js"></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>

1
src/htmx_import.js Normal file
View file

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

22
src/index.js Normal file
View file

@ -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');
}
});