Utiliser .mediabox-hide plutôt que .lity-hide pour créer une box 'inline'

Suite #4855 (comment 212741)

Pour data-box-type="inline", le clic dun lien <a class="btn" href="#inlinebox" data-lity="">Inline</a> rend visible un <div id="inlinebox" class="lity-hide">... qui figure déjà dans le DOM avant le clic. Avec la css .lity-hide { display: none; }.

Ça marche tel quel avec SPIP, et c'est super de pouvoir disposer de ça, mais ça nécessite de faire figurer une classe lity-hide en clair dans le HTML des squelettes SPIP, alors qu'elle est visiblement spécifique à la librairie lity.

Serait il possible de rendre ce feature lity-agnostique ?

Car lity utilise plein de classes qui font référence à 'lity' : lity-close, lity-container, lity-content, lity-wrap, etc et il faut parfois en personnaliser le rendu, mais ça se fait dans une CSS et ça ne concerne que l'apparence, alors que lity-hidedoit en l'état impérativement être utilisée dans le HTML d'un squelette SPIP lorsqu'on veut générer une mediabox inline. Sinon ça marche pas.

La classe lity-hide est en fait référencée en dur dans le code de la fonction inlineHandler de lity.js alors pour ne pas intervenir dans la lib on peut :

• spécifier : on utilise la classe mediabox-hide et il ne doit pas figurer de lity-hide dans les squelettes SPIP. Avec :

.mediabox-hide {display: none}

• js: à l'initialisation, remplacer les mediabox-hide par lity-hide. Par exemple avec :

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.mediabox-hide').forEach( el => 
    el.classList.replace('mediabox-hide', 'lity-hide')
  );
});

Testé en prod : ça marche.