Como obter elementos DOM e alterar a funcionalidade onClick

Dev
1

Olá,

Alguma ideia de como posso obter elementos DOM no discourse sem ter que usar um setTimeout e um querySelector.
Porque atualmente eu faço algo assim:-

setTimeout(() => {
                    var createTopicButton = document.querySelector("#create-topic");
                    if(createTopicButton)
                        createTopicButton.onclick = function (e) {
                        if (window.Moengage && window.Moengage.track_event) {
                            window.Moengage.track_event("Topic_Create_Clicked", {});
                        }
                        setTimeout(() => {
                            var topicCreate = document.querySelector("#reply-control .save-or-cancel .btn-primary")
                            topicCreate.onclick = function (e) {
                                let heading = document.querySelector('#reply-control #reply-title').value;
                                let category = document.querySelector('.select-kit-header-wrapper >.select-kit-selected-name >.name >.badge-wrapper >.badge-category >.category-name')?.innerText;
                                let desc = document.querySelector('.d-editor-textarea-column >.d-editor-textarea-wrapper textarea').value;
                                let imagePresent = desc.includes("upload://");
                                if (window.Moengage && window.Moengage.track_event && heading && category && desc) {
                                    window.Moengage.track_event("Topic_Created", {"Category":category,"Topic Name":heading,"Topic Description":desc,"Is_image_present":imagePresent});
                                }

                            }
                        },[300])
                        
                    };
                },[500])

Se eu não usar os timeouts acima, às vezes recebo elementos nulos, pois o DOM ainda não foi totalmente carregado, mesmo depois de colocar isso dentro de uma função window.onload.
Então, meu objetivo é obter elementos DOM e alterar a funcionalidade onChange.

Qualquer ajuda seria ótima.

Obrigado :slight_smile:

2

O Discourse é um aplicativo EmberJS completo, portanto, você não pode consultar/manipular elementos como se fosse um site HTML simples renderizado pelo servidor.

Para personalizar o aplicativo web, você pode seguir as diretrizes em
Guia do desenvolvedor para temas do Discourse

1 curtida
3

Além de consultar o guia do desenvolvedor, você pode dar um passo atrás e descrever o que está tentando fazer em vez de sua solução sugerida.

1 curtida
4

Olá Jay,

Estava tentando chamar as funções analíticas do moEngage ao clicar em determinados botões da página (por exemplo: curtir, comentar, compartilhar).

Só consigo fazer isso se tiver acesso à funcionalidade onClick desses botões. Existe algum plugin no Discourse que me ajude a conseguir isso?

Obrigado.

5

Você deve ser capaz de fazer isso em um componente de tema. Recomendo que você comece com os guias do desenvolvedor para ver como as coisas funcionam.