fix : densité L/M/S — injection <style> dynamique dans <head>

Remplace body[data-density] + CSS externe par un élément <style id="density-fouc"> injecté dynamiquement dans <head>, insensible aux problèmes de spécificité et de cache CSS. Remplace aussi closest() par une boucle parentNode et dataset par getAttribute. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-15 20:49:08 +02:00
parent 5e88d44129
commit 58a110d5b9
3 changed files with 25 additions and 15 deletions
@@ -349,25 +349,37 @@ if (!empty($_tagCats)):
    var KEY = 'folio_density';
    var cur = localStorage.getItem(KEY) || 'l';

-    function apply(d) {
-        if (d === 'l') {
-            delete document.body.dataset.density;
+    function applyDensity(d) {
+        var fouc = document.getElementById('density-fouc');
+        if (d !== 'l') {
+            var mw = d === 'm' ? '980px' : '660px';
+            if (!fouc) {
+                fouc = document.createElement('style');
+                fouc.id = 'density-fouc';
+                document.head.appendChild(fouc);
+            }
+            fouc.textContent = 'main[role="main"]{max-width:' + mw + '!important;margin-left:auto!important;margin-right:auto!important}';
        } else {
-            document.body.dataset.density = d;
+            if (fouc) { fouc.parentNode.removeChild(fouc); }
        }
        document.querySelectorAll('.density-btn').forEach(function(btn){
-            btn.classList.toggle('active', btn.dataset.d === d);
+            btn.classList.toggle('active', btn.getAttribute('data-d') === d);
        });
    }

-    apply(cur);
+    applyDensity(cur);

    document.addEventListener('click', function(e){
-        var btn = e.target.closest('.density-btn');
-        if (!btn) return;
-        cur = btn.dataset.d;
-        localStorage.setItem(KEY, cur);
-        apply(cur);
+        var el = e.target;
+        while (el && el !== document) {
+            if (el.classList && el.classList.contains('density-btn')) {
+                cur = el.getAttribute('data-d') || 'l';
+                try { localStorage.setItem(KEY, cur); } catch(ignore) {}
+                applyDensity(cur);
+                return;
+            }
+            el = el.parentNode;
+        }
    });
 })();
 </script>