fix(ui): logo dynamique ne s'affichait pas (innerHTML n'exécute pas les scripts)

Le script dans topbar.html ne s'exécutait pas car innerHTML ignore les
balises <script>. Déplacé la logique dans un fichier JS séparé
(topbar-logo.js) avec MutationObserver pour détecter l'insertion du topbar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
PaulVua
2026-02-17 10:43:38 +01:00
parent f8f5300b9b
commit ea2642685c
11 changed files with 28 additions and 10 deletions

View File

@@ -379,6 +379,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -0,0 +1,19 @@
// Switch topbar logo based on device_type config
// Uses MutationObserver to detect when topbar is dynamically loaded
(function() {
var observer = new MutationObserver(function() {
var logo = document.getElementById('topbar-logo');
if (logo) {
observer.disconnect();
fetch('launcher.php?type=get_config_sqlite')
.then(function(r) { return r.json(); })
.then(function(config) {
if (config.device_type === 'moduleair_pro') {
logo.src = 'assets/img/logoModuleAir.png';
}
})
.catch(function() {});
}
});
observer.observe(document.body || document.documentElement, { childList: true, subtree: true });
})();

View File

@@ -153,6 +153,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -110,6 +110,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -92,6 +92,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -117,6 +117,7 @@
<script src="assets/jquery/jquery-3.7.1.min.js"></script> <script src="assets/jquery/jquery-3.7.1.min.js"></script>
<!-- Link Bootstrap JS and Popper.js locally --> <!-- Link Bootstrap JS and Popper.js locally -->
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -518,6 +518,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -66,6 +66,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -175,6 +175,7 @@
<script src="assets/jquery/jquery-3.7.1.min.js"></script> <script src="assets/jquery/jquery-3.7.1.min.js"></script>
<!-- Link Bootstrap JS and Popper.js locally --> <!-- Link Bootstrap JS and Popper.js locally -->
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {

View File

@@ -4,16 +4,6 @@
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="assets/img/LogoNebuleAir.png" alt="Logo" height="30" class="d-inline-block align-text-top" id="topbar-logo"> <img src="assets/img/LogoNebuleAir.png" alt="Logo" height="30" class="d-inline-block align-text-top" id="topbar-logo">
</a> </a>
<script>
fetch('launcher.php?type=get_config_sqlite')
.then(r => r.json())
.then(config => {
if (config.device_type === 'moduleair_pro') {
document.getElementById('topbar-logo').src = 'assets/img/logoModuleAir.png';
}
})
.catch(() => {});
</script>
<div class="d-flex"> <div class="d-flex">
<button class="btn btn-outline-light d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas" aria-label="Toggle Sidebar"></button> <button class="btn btn-outline-light d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas" aria-label="Toggle Sidebar"></button>

View File

@@ -119,6 +119,7 @@
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {