rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Offline-Pfote per JS-Klasse sichtbar (Fallback zum CSS-Sibling), SW by-v1081

Browse source 
Der reine CSS-Sibling-Selektor klappte nicht zuverlässig (vermutlich
SW-Cache-Mismatch oder DOM-Reihenfolge im aktuellen Zustand des
Users). Lösung: MutationObserver in offline-indicator.js beobachtet
class/style auf #worlds-overlay und togglet .visible auf
#offline-indicator. CSS akzeptiert jetzt beide Wege:

  #worlds-overlay.worlds-visible ~ #offline-indicator,
  #offline-indicator.visible { display: flex; }

So bleibt das Layout funktional auch wenn CSS-Compositing oder
Cache-Versatz mal nicht greift. console.warn wenn das Element nicht
im DOM ist (z.B. wenn alte index.html aus SW-Cache).
This commit is contained in:
rene 2026-05-26 14:36:27 +02:00
parent 521b7b6bee
commit eb0f460304
6 changed files with 33 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1080'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1081'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen.

20
backend/static/js/offline-indicator.js
View file

@ -188,14 +188,32 @@ window.OfflineIndicator = (() => {
await Promise.all(tasks);
}
// ----------------------------------------------------------
// Sichtbarkeit an Welten-Overlay koppeln
// ----------------------------------------------------------
function _syncVisibility() {
if (!_btn) return;
const ov = document.getElementById('worlds-overlay');
const inWorlds = !!ov?.classList.contains('worlds-visible');
_btn.classList.toggle('visible', inWorlds);
}
// ----------------------------------------------------------
// Init
// ----------------------------------------------------------
function init() {
_btn = document.getElementById('offline-indicator');
if (!_btn) return;
if (!_btn) { console.warn('[OfflineIndicator] #offline-indicator nicht im DOM'); return; }
_svg = _btn.querySelector('.offline-paw');
_btn.addEventListener('click', _openModal);
// MutationObserver: Welten-Overlay Klassenänderung → Indikator zeigen/verstecken
const ov = document.getElementById('worlds-overlay');
if (ov) {
_syncVisibility();
new MutationObserver(_syncVisibility).observe(ov, { attributes: true, attributeFilter: ['class', 'style'] });
}
refresh();
// bei SW-Updates und alle 60s neu prüfen