Модальное окно предпросмотра темы

Настройка Компонент темы
4

Для всех, кто использует тему Reddit-ish, вот исправление, которое у меня заработало.

Совместимость с темой Reddit-ish

Примечание для всех, кто использует тему Reddit-ish: сама кнопка модального окна работает, но стандартный триггер строки — нет.

Проблема в том, что Reddit-ish заменяет стандартное поведение строк списка тем и обрабатывает клики по всей карточке темы. Из-за этого обычная обработка клика по строке для модального окна не работает как положено.

Изменение настройки Topic Preview Modal на:

Trigger style: button
Plugin outlet: topic-list-after-title

работает корректно, потому что Reddit-ish уже включает outlet topic-list-after-title.

Чтобы сохранить поведение клика по всей карточке, я оставил Topic Preview Modal в режиме кнопки и изменил существующее действие openTopic() в Reddit-ish так, чтобы оно запускало рабочую кнопку модального окна.

Оригинальное действие Reddit-ish:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

Я изменил его на:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

Триггер кнопки модального окна рендерится как:

<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

Таким образом, это не воссоздает логику модального окна. Это просто заставляет клик по карточке Reddit-ish запускать существующую рабочую кнопку предпросмотра.

Результат:

  • Клик по карточке темы открывает модальное окно предпросмотра.

  • Клик по заголовку темы открывает модальное окно предпросмотра.

  • Кнопка предпросмотра по-прежнему работает.

  • Cmd/Ctrl+клик по-прежнему открывает обычную тему в новой вкладке.

  • Ссылки на категории и другие обычные ссылки продолжают работать нормально.

  • Если кнопка предпросмотра отсутствует, Reddit-ish возвращается к стандартной навигации по темам.

Таким образом, базовое модальное окно отлично работает с Reddit-ish; несовместимость касается исключительно стандартного триггера строки.

Я также скрыл кнопку, используя:

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3 лайка