É possível anexar manipuladores de eventos a widgets em tema/plugin?

[dchouinard (David Chouinard)]

Olá,

Estou procurando adicionar um manipulador de clique aos itens da lista principal de tópicos (para adicionar comportamento personalizado sob certas condições). É possível usar algo como api.decorateWidget() para adicionar um manipulador de eventos a cada instância de um widget específico?

—

Outras abordagens consideradas:

• Não é prático usar addEventListener em uma função global, pois itens adicionais da lista de tópicos podem ser carregados após o carregamento da página, por exemplo, com rolagem infinita. (A implementação precisaria usar algo como MutationObserver para observar alterações no DOM e anexar mais manipuladores de eventos à medida que mais widgets são renderizados)
• Seria possível anexar um manipulador de clique ao body e monitorar por meio de propagação de eventos (como feito no jQuery com $("body").on("click", ".list-item-topic", function())), mas preciso ser capaz de usar preventDefault() e stopPropagation(), o que acredito que essa abordagem não suporte.

[fzngagan (Faizaan Gagan)]

@dchouinard

Estou procurando adicionar um manipulador de clique aos itens da lista de tópicos (para adicionar comportamento personalizado sob certas condições). É possível usar algo como api.decorateWidget() para adicionar um manipulador de eventos a cada instância de um determinado widget?

api.attachWidgetAction é o caminho a seguir. Você pode pesquisar na base de código e estará pronto para usar.

Exemplos aqui

[dchouinard (David Chouinard)]

Ah, obrigado! Esses são eventos DOM padrão? Ou seja:

• Pelos exemplos, parece que os eventos não são eventos DOM padrão como click, mouseover, etc. É possível fazer algo como api.attachWidgetAction("topic-list-item", "click", ...)?
• É possível acessar o event, por exemplo, para fazer event.stopPropagation()?
• Se esses não forem eventos DOM padrão, como descubro quais eventos um widget específico emite?

Obrigado pelas dicas!

[dchouinard (David Chouinard)]

Além disso: estou um pouco confuso aqui, mas como posso encontrar o “widget” associado a um elemento de interface específico? (no meu caso: o widget que alimenta o topic-list-item, exibindo um tópico individual em uma lista de tópicos). Do diretório de widgets, nenhum parece relacionado ao topic-list-item. Este “componente” parece ser, em vez disso, responsável por renderizar o topic-list-item.

Não está claro a distinção entre widgets e componentes (peço desculpas por não estar mais familiarizado) — presumivelmente, só é possível anexar manipuladores de eventos com api.attachWidgetAction a “widgets” e não a “componentes”. Existe um equivalente para componentes?

[hawm]

Sobre o Widget e o Componente:

How different are Ember component and Discourse widget?

Components are broadly used across most of Discourse. Where widgets come in useful is on some of our most highly-trafficked elements, such as the topic post stream and the header with its multiple menus. You’ll often see widgets used in plugins and themes to add to or modify existing widgets. Take for example this widget in the discourse-calendar plugin: This is a button rendered in the original post of a topic. It needs to be a widget because the post itself is rendered as a widget for per…

[dchouinard (David Chouinard)]

Obrigado a todos! Descobri.

Para outros que, no futuro, procurarem substituir manipuladores de eventos para componentes, adicione o seguinte a javascripts/nome-do-seu-plugin/inicializadores/nome-do-script-de-sua-escolha.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) {
          ...
        }
      });
    });
  },
};