Open Time

[Spoiler : non]

Depuis quelques versions j’ai un petit bout de javascript qui tourne dans l’admin et qui n’a qu’un seul rôle¹ : surveiller la valeur d’un attribut particulier et appliquer un traitement s’il venait à changer. Le voici :

// Watch data-theme attribute modification
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    let theme = 'light';
    if (mutation.target.getAttribute('data-theme') === '') {
      theme = window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light';
    } else {
      theme = mutation.target.getAttribute('data-theme');
    }
    $('body').removeClass(`${dotclear.data.theme}-mode`);
    dotclear.data.theme = theme;
    $('body').addClass(`${dotclear.data.theme}-mode`);
    document.documentElement.style.setProperty('--dark-mode', dotclear.data.theme === 'dark' ? 1 : 0);
  }
});
observer.observe(document.documentElement, {
  attributeFilter: ['data-theme'],
});

Sans aller dans le détail il surveille l’attribut data-theme de l’élément html et réagit à sa modification (via les outils de développement du navigateur par exemple).

Depuis quelques jours je suis en train de dessiner. Quel rapport allez-vous me demander avec raison et malice ? Eh bien, je suis en train de dessiner, ou de re-dessiner, des icônes au format SVG et surtout j’ai prévu ce qu’il fallait dans le code de Dotclear pour permettre d’avoir une version pour le thème clair et une autre pour le thème sombre.

Une fois dessinées, je les teste dans en situation, pour vérifier qu’elles sont correctement visibles, et jusqu’à ce matin, à chaque fois que je voulais tester le thème alternatif j’ouvrais les outils de développement du navigateur et allait modifier la valeur de l’attribut surveillé par le bout de code ci-dessus.

Or je suis une feignasse² !

Donc j’ai codé ce matin un deuxième bout de javascript qui intercepte les double-clics sur l’entête de l’admin et qui bascule pour moi le thème courant, juste en changeant la valeur de l’attribut surveillé par le bout de code ci-dessus.

Voilà comment c’est codé :

if (dotclear.debug) {
  // debug mode: double click on header switch current theme
  document.querySelector('#header').addEventListener('dblclick', (e) => {
    const elt = document.documentElement;
    let theme = elt.dataset.theme;
    if (theme == null || theme === '') {
      theme = window.matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light';
    }
    // Set new theme, the application will be cope by the mutation observer (see above)
    elt.dataset.theme = theme === 'dark' ? 'light' : 'dark';
  });
}

Voilà, maintenant je peux d’un simple double-clic, changer de thème et vérifier la lisibilité des icônes, ce qui sera aussi utile toutes les fois où j’aurais à modifier la CSS de l’administration.

Tant qu’à faire !

En fait tout ceci est un parfait exemple de ce à quoi sert toute l’informatique de la planète, à nous faciliter la vie !

Et contrairement à ce que disais Donald Knuth : Attention aux bugs dans le code ci-dessus. Je ne l’ai pas testé, j’ai seulement prouvé qu’il était correct. ; attention aux bugs dans le code ci-dessus. Je l’ai seulement testé, mais pas prouvé qu’il était correct.