Lightbox ne fonctionne plus ?

Bug
1

Je ne suis pas sûr de ce qui a changé, mais j’ai remarqué aujourd’hui que cliquer sur les images dans les publications ouvre simplement l’image comme une nouvelle page (lien direct vers l’image) au lieu de l’ouvrir dans un cadre Lightbox. Cela inclut les grandes images dans les publications qui, je le sais, fonctionnaient auparavant.

Je ne vois aucun nouveau paramètre dans l’interface d’administration qui permettrait d’activer/désactiver cette fonctionnalité. Je ne suis pas sûr quand cette fonctionnalité a cessé de fonctionner. Discourse est entièrement à jour selon la page /admin/upgrade.

Y a-t-il un moyen de déboguer pourquoi les images ne sont pas affichées en Lightbox ? Je peux voir dans le code HTML que la classe “Lightbox” est correctement appliquée aux images (et il y a aussi une classe “Lightbox” sur la balise a qui enveloppe l’image) :

image
image602×107 13 KB

Mon site utilise Cloudflare. Je ne suis pas sûr si cela pourrait interférer d’une manière ou d’une autre ?

Merci !

3 « J'aime »
2

J’ai vient de tester ceci avec la version 2.9.0.beta3 de Discourse et je n’ai pas pu reproduire le problème.

Cliquer sur une image dans un sujet ouvre une Lightbox contenant l’image, et le HTML montre que la classe lightbox est également appliquée à l’image.

J’accède à Discourse via Google Chrome version 99.0.4844.82, et le site Discourse que j’ai testé est hébergé via Digital Ocean.

J’espère que cela aidera à mieux comprendre ce qui pourrait causer ce problème sur votre site.

4 « J'aime »
3

Utilisez-vous également rocket loader ou une autre optimisation JS de Cloudflare sur Discourse ?

Si oui, la première chose à essayer est de désactiver lesdites optimisations et de réessayer.

4 « J'aime »
4

Le problème ne semble pas dépendre du navigateur ou de l’OS. Je le vois sous Firefox, Chrome et Safari sur macOS, Safari sur iOS, et Firefox/Chrome/Edge sur Windows. Je ne parviens à trouver aucune combinaison navigateur/OS où Lightbox fonctionne réellement, donc je suppose qu’il s’agit d’un problème avec le site lui-même, peut-être un réglage ou un autre plugin qui le casse ?

Je ne sais pas comment ni où commencer à essayer de comprendre cela, car je ne vois rien dans la console ou les journaux du site qui indiquerait un problème.

Non, je n’utilise aucune option d’optimisation ou de minimisation dans Cloudflare. Tout cela est désactivé. La seule chose actuellement activée est la mise en cache pendant 4 heures.

1 « J'aime »
5

J’ai pu dupliquer mon site de production localement et reproduire le problème. Il s’avère qu’il s’agit d’un bug qui apparaît à cause d’un code dans un plugin de thème personnalisé que j’ai écrit. Je ne peux toujours pas expliquer pourquoi cela casse Lightbox ou pourquoi ce n’est devenu un problème que récemment. Pourrait-il s’agir d’un bug encore non découvert dans le cœur du système ?

Mon code de plugin est très simple :

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

Tout ce qu’il essaie de faire, c’est un simple remplacement de chaîne dans le contenu rendu des publications. D’une manière ou d’une autre, cela casse tous les Lightboxes dans toutes les publications (même celles qui ne contiennent pas la chaîne). Commenter la ligne elem.innerHTML = ... permet aux Lightboxes de fonctionner à nouveau.

Notez que l’exemple ci-dessus est simplifié (mon plugin réel remplace des liens rendus spécifiques dans les publications et effectue d’autres opérations sur le contenu cuit), mais même le code très simple ci-dessus reproduit le problème que je rencontre.

Est-ce la bonne façon de modifier le contenu cuit au moment du rendu dans les publications et s’agit-il d’un nouveau bug du cœur lié aux Lightboxes ? Ou ai-je mal fait tout ce temps et cela n’aurait-il jamais dû fonctionner en premier lieu ?

6

J’ai créé un composant de thème simple qui expose ce problème de Lightbox. N’importe qui devrait pouvoir reproduire le problème sur n’importe quelle installation de Discourse en activant ce composant de thème :
https://github.com/hayatae/lightbox-theme-component-bug

Si quelqu’un a des solutions de contournement ou des suggestions, faites-le moi savoir ! Je ne suis toujours pas sûr de la raison exacte pour laquelle cela casse Lightbox.

7

Pour toute autre personne qui pourrait rencontrer ce problème, j’ai trouvé une solution de contournement pour le moment.

Tant que vous ne faites pas de remplacements innerHtml sur des éléments contenant des images qui seront mises en plein écran, le problème ne se produira pas. J’ai pu retravailler une partie de mon code pour cibler plus spécifiquement les éléments et ne viser que ceux qui ne sont pas des hrefs autour des images.

4 « J'aime »