Можно ли прикреплять обработчики событий к виджетам в теме/плагине?

Разработка
1

Привет,

Я хочу добавить обработчик клика для элементов в основном списке тем (чтобы реализовать пользовательское поведение при определённых условиях). Возможно ли использовать что-то вроде api.decorateWidget(), чтобы добавить обработчик событий к каждому экземпляру определённого виджета?

—

Рассмотренные альтернативные подходы:

  • Использовать addEventListener в глобальной функции непрактично, так как дополнительные элементы списка тем могут загружаться после загрузки страницы, например, при бесконечной прокрутке. (В таком случае реализация потребовала бы использования MutationObserver для отслеживания изменений в DOM и добавления новых обработчиков событий по мере рендеринга новых виджетов)
  • Теоретически можно добавить обработчик клика к body и отслеживать события через всплытие (как это делается в jQuery с помощью $("body").on("click", ".list-item-topic", function())), но мне нужно иметь возможность вызывать preventDefault() и stopPropagation(), и, насколько я понимаю, этот подход не поддерживает такие методы.
2

Лучше использовать api.attachWidgetAction. Вы можете поискать в коде, и у вас всё получится.

Примеры здесь

3

Ах, спасибо! Это стандартные события DOM? То есть:

  • Судя по примерам, события не кажутся стандартными событиями DOM, такими как click, mouseover и т.д. Можно ли, например, выполнить api.attachWidgetAction("topic-list-item", "click", ...)?
  • Можно ли получить доступ к объекту event, например, чтобы вызвать event.stopPropagation()?
  • Если это не стандартные события DOM, как узнать, какие события транслирует конкретный виджет?

Спасибо за подсказки!

4

Кроме того, я немного запутался: как найти «виджет», связанный с определённым элементом UI? (В моём случае — виджет, отвечающий за отображение элемента списка тем topic-list-item, который показывает отдельную тему в списке тем). В каталоге виджетов ни один, похоже, не относится к topic-list-item. Этот «компонент», похоже, отвечает за рендеринг topic-list-item.

Мне неясно различие между виджетами и компонентами (извините за мою неосведомлённость) — предположительно, обработчики событий можно прикреплять через api.attachWidgetAction только к «виджетам», но не к «компонентам». Существует ли аналог для компонентов?

5

О виджете и компоненте:

6

Спасибо всем! Разобрался.

Для тех, кто в будущем захочет переопределить обработчики событий для компонентов, добавьте следующее в javascripts/ваше-имя-плагина/initializers/выбранное-имя-скрипта.js.es6:

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "custom-click-handler",

  initialize() {
    withPluginApi("0.8.20", (api) => {
      api.modifyClass("component:topic-list-item", {
        click(e) {
          ...
        }
      });
    });
  },
};