Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mini-player, header: make it persistent, add music page button and check current route

Browse source
This commit is contained in:
Agahnim 2026-03-20 14:48:52 +01:00
parent 4b4044d689
commit 2ed650c3f4
11 changed files with 78 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

44
templates/base.html
View file

@ -12,20 +12,19 @@
<script src="/static/vendor/htmx.min.js"></script>
</head>
<body hx-boost="true" hx-target="#content">
<crt>
<body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}>
<persistent-ui>
{% include "partials/header.html" %}
<miniplayer-container id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
hx-target="#miniplayer-container">
<miniplayer>
<p>Chargement...</p>
</miniplayer>
<miniplayer-container id="miniplayer-container">
{% block miniplayer %}{% endblock %}
</miniplayer-container>
</persistent-ui>
<main id="content">
{% block content %}{% endblock %}
</main>
<main id="content">
{% block content %}{% endblock %}
</main>
</crt>
<script src="/static/miniplayer.js"></script>
<script>
@ -37,11 +36,28 @@
}
}
updateMiniplayerVisibility();
function updateNavState() {
const path = window.location.pathname;
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
radio.checked = false;
});
if (path === '/') {
const homeRadio = document.getElementById('nav-home');
if (homeRadio) homeRadio.checked = true;
} else if (path === '/music') {
const musicRadio = document.getElementById('nav-music');
if (musicRadio) musicRadio.checked = true;
}
}
document.body.addEventListener('htmx:afterSwap', updateMiniplayerVisibility);
updateMiniplayerVisibility();
updateNavState();
document.body.addEventListener('htmx:afterSwap', () => {
updateMiniplayerVisibility();
updateNavState();
});
</script>
</body>
</crt>
</html>
</html>

7
templates/home.html
View file

@ -1,6 +1,9 @@
{% extends "base.html" %}
{% block content %}
{% include "partials/home.html" %}
{% endblock %}
{% endblock %}
{% block miniplayer %}
{% include "partials/miniplayer.html" %}
{% endblock %}

4
templates/music.html
View file

@ -3,3 +3,7 @@
{% block content %}
{% include "partials/music.html" %}
{% endblock %}
{% block miniplayer %}
{% include "partials/miniplayer.html" %}
{% endblock %}

4
templates/partials/header.html
View file

@ -4,5 +4,9 @@
<input type="radio" name="nav" id="nav-home" checked>
<a href="/">Accueil</a>
</label>
<label>
<input type="radio" name="nav" id="nav-music">
<a href="/music">Music</a>
</label>
</navbar-content>
</navbar>