Lightbox больше не работает?

Внести вклад Ошибка
1

Я не уверен, что изменилось, но сегодня я заметил, что при клике на изображения в постах теперь просто открывается новое окно с прямой ссылкой на изображение, а не открывается в фрейме Lightbox. Это происходит даже с большими изображениями в постах, которые раньше работали.

Я не вижу никаких новых настроек в интерфейсе администратора, которые включали бы или отключали эту функцию. Не знаю, когда именно эта функция перестала работать. Согласно странице /admin/upgrade, Discourse полностью обновлён.

Есть ли способ отладить, почему изображения не открываются в Lightbox? Я могу увидеть в HTML-коде, что класс “Lightbox” правильно применяется к изображениям (и также есть класс “Lightbox” на теге a, оборачивающем изображение):

image
image602×107 13 KB

Мой сайт использует Cloudflare. Не уверен, может ли это как-то мешать?

Спасибо!

3 лайка
Lightbox not working on Discourse
Image Lightbox not working from start
2

Я только что протестировал это в версии Discourse 2.9.0.beta3, но не смог воспроизвести проблему.

При клике на изображение в теме открывается Lightbox с этим изображением, и в HTML-коде видно, что класс lightbox также применяется к изображению.

Я обращаюсь к Discourse через Google Chrome версии 99.0.4844.82, а сайт Discourse, на котором я проводил тестирование, размещён через Digital Ocean.

Надеюсь, это поможет пролить свет на то, что может вызывать эту проблему на вашем сайте.

4 лайка
3

Используете ли вы также Rocket Loader или какую-либо другую оптимизацию JS от Cloudflare на Discourse?

Если да, то первое, что стоит попробовать, — отключить указанные оптимизации и повторить попытку.

4 лайка
4

Похоже, проблема не зависит от браузера или операционной системы. Я наблюдаю её в Firefox, Chrome и Safari на macOS, в Safari на iOS, а также в Firefox, Chrome и Edge на Windows. Мне не удалось найти ни одной комбинации браузера и ОС, где Lightbox действительно работал бы, поэтому предполагаю, что дело в чём-то на самом сайте — возможно, какая-то настройка или другой плагин нарушает его работу?

Не совсем понимаю, с чего и как вообще начать поиск причины, так как в консоли или логах сайта ничего, указывающего на проблему, не вижу.

Нет, я не использую никаких опций оптимизации или минификации в Cloudflare. Все они отключены. В данный момент включено только кэширование на 4 часа.

1 лайк
5

Мне удалось воспроизвести свою продакшн-версию сайта локально и воссоздать проблему. Оказалось, что это ошибка, проявляющаяся из-за некоторого кода в плагине кастомной темы, который я написал. До сих пор не могу объяснить, почему это ломает Lightbox или почему проблема возникла только недавно. Возможно, это ещё не обнаруженная ошибка в ядре?

Мой код плагина очень прост:

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

export default apiInitializer("0.11.1", (api) => {
  // Настройки рендеринга для содержимого поста
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

Всё, что он пытается сделать, — это простая замена строки в отрендеренном содержимом поста. Каким-то образом это ломает все Lightbox во всех постах (даже в тех, которые не содержат этой строки). Если закомментировать строку elem.innerHTML = ..., Lightbox снова начинает работать.

Обратите внимание, что приведённый выше пример упрощён (мой реальный плагин заменяет конкретные отрендеренные ссылки в постах и выполняет другие операции с обработанным содержимым), но даже этот очень простой код воспроизводит проблему, которую я наблюдаю.

Правильно ли я изменяю обработанное содержимое во время рендеринга постов, и является ли это новой ошибкой ядра, связанной с Lightbox? Или же я всё это время делал это неправильно, и это никогда не должно было работать изначально?

6

Я создал простой компонент темы, который демонстрирует эту проблему с Lightbox. Любой может воспроизвести проблему на любой установке Discourse, активировав этот компонент темы:
https://github.com/hayatae/lightbox-theme-component-bug

Если у кого-то есть возможные обходные пути или предложения, пожалуйста, дайте знать! Я до сих пор не до конца понимаю, почему именно это ломает Lightbox.

7

Для всех, кто может столкнуться с этой проблемой: я смог найти временное решение.

Пока вы не выполняете замену innerHtml для элементов, содержащих изображения, которые будут открываться в лайтбоксе, проблема не возникнет. Мне удалось переписать часть кода так, чтобы более точно выбирать элементы и нацеливаться только на те, которые не являются ссылками вокруг изображений.

4 лайка