Manipule Eventos de Popups do Elementor Sem jQuery

Se você já trabalhou com o Elementor e tentou manipular seus popups programaticamente, provavelmente percebeu que a documentação oficial oferece exemplos de manipulação de eventos apenas com jQuery. Porém, se você prefere uma solução moderna e leve utilizando Vanilla JavaScript, este guia é para você.

Com a API MutationObserver, você pode monitorar alterações no DOM e detectar quando um modal de popup do Elementor é injetado no <body>. Isso permite que você execute ações personalizadas sem depender de bibliotecas adicionais.

Por que Usar o MutationObserver

A API MutationObserver é um recurso nativo do JavaScript que permite observar mudanças no DOM, como:

Adição ou remoção de elementos.
Modificações nos atributos de elementos existentes.

No caso dos popups do Elementor, essa API é perfeita para detectar quando o modal é dinamicamente adicionado ao DOM.

Código para Detectar Popups do Elementor

Aqui está um snippet completo que você pode usar no seu projeto:

// Seleciona o elemento <body>
const body = document.body;

// Cria um MutationObserver
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // Verifica se novos nós foram adicionados
        if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
                // Verifica se o nó adicionado é um modal de popup do Elementor
                if (node.classList && node.classList.contains("elementor-popup-modal")) {
                    console.log("Popup do Elementor detectado:", node);
                    // Adicione sua lógica personalizada aqui
                }
            });
        }
    });
});

// Configura o observer para monitorar o <body>
observer.observe(body, { childList: true });

// Interrompe a observação quando não for mais necessária (opcional)
// observer.disconnect();

Como Funciona

1. Monitorando o <body>:

O elemento <body> é observado porque o Elementor injeta seus popups como nós filhos do <body>.

2. MutationObserver:

Usamos o MutationObserver para monitorar mudanças nos nós filhos do <body> configurando { childList: true }.

3. Filtrando Nós Adicionados:

Para cada nó adicionado, verificamos se ele possui a classe elementor-popup-modal, que identifica os popups do Elementor.

4. Ações Personalizadas:

Quando o modal é detectado, você pode executar qualquer lógica personalizada no bloco onde o console.log está localizado.

Caso de Uso Prático

Suponha que você queira aplicar uma animação personalizada quando um popup do Elementor aparecer. Você pode modificar o código assim:

if (node.classList && node.classList.contains("elementor-popup-modal")) {
    console.log("Popup do Elementor detectado:", node);
    node.style.opacity = 0; // Começa invisível
    setTimeout(() => {
        node.style.transition = "opacity 0.5s";
        node.style.opacity = 1; // Efeito de fade-in
    }, 0);
}

Por que Escolher Vanilla JS?

1. Sem Dependências:

Reduz o tamanho total do projeto eliminando bibliotecas como jQuery.

2. Melhor Performance:

Vanilla JavaScript geralmente é mais rápido, pois não possui o overhead de lidar com seletores e eventos adicionais.

3. Compatibilidade Moderna:

A API MutationObserver é suportada em todos os navegadores modernos, incluindo Edge e Safari.

É Isso!

Usar o MutationObserver para detectar popups do Elementor é uma solução elegante e eficiente, especialmente para desenvolvedores que preferem não depender do jQuery. Com este código, você pode personalizar totalmente como interage com os popups do Elementor, seja adicionando animações, rastreando eventos ou implementando outra lógica personalizada.

Se achou essa dica útil, compartilhe com outros desenvolvedores e deixe suas ideias de personalização de popups nos comentários! 🚀

<Eduardo_Villão/>