folio/public/assets/js/density.js

/* Sélecteur de densité L/M/S — persisté dans localStorage */
(function () {
    var KEY = 'folio_density';
    var cur = localStorage.getItem(KEY) || 'l';

    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 {
            if (fouc) { fouc.parentNode.removeChild(fouc); }
        }
        document.querySelectorAll('.density-btn').forEach(function (btn) {
            btn.classList.toggle('active', btn.getAttribute('data-d') === d);
        });
    }

    applyDensity(cur);

    document.addEventListener('click', function (e) {
        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;
        }
    });
}());