DOM modification detection

[danielelodola]

Hi!

I'm looking for a way to detect a DOM mutation on a HubSpot page, more specifically the appearance of a pop-up form thank-you modal, with class = .leadin-thank-you-wrapper.

Has anyone been successful in doing something similar? Using MutationObserver?

Any help much appreciated, thanks!

DL

[tjoyce · Accepted solution]

@danielelodola - I have looked for this functionality as well as a global javascript event library for leadin and it doesn't seem to exist... even combing through the javascript library yielded no results. What I am left doing is 

var leadincheck = window.setInterval(function(){
  if($(".leadin-thank-you-wrapper").length){
    $('body').addClass('has-leadin-thank-you');
    window.clearInterval(leadincheck)
  }
}, 300);

 I realize there is no elegance in this approach but it tends to get the job done

[danielelodola]

Thanks @tjoyce @piersg @natsumimori for your help!

This is the code I implemented :

function hasId(element) {
    return typeof element.id != 'undefined';
}

function determineModal(element, modalId) {
    if (hasId(element) && element.id == 'leadinModal-content-wrapper-' + String(modalId)) {
        return true;
    }
}

const observer = new MutationObserver(mutations => {
    mutations.forEach(({
        addedNodes
    }) => {
        addedNodes.forEach(node => {
            // Identify thank-you div.
            if (node.nodeType === 1 && node.classList.contains("leadin-content-body") && node.firstChild.classList.contains('leadin-thank-you-wrapper')) {
              if (determineModal(node.parentNode, "######")) {
                // Do stuff case 1
              } else if (determineModal(node.parentNode, "######")) {
                // Do stuff case 2
              } else {
                // Do stuff default case
              };
            };
        })
    })
});

I added in some conditions in order to treat various modal interactions differently.

[piersg · Accepted solution]

This will work for detecting divs with class 'leadin-thank-you-wrapper'

const observer = new MutationObserver(mutations => {
    mutations.forEach(({ addedNodes }) => {
        addedNodes.forEach(node => {
            // For each added node
            if(node.nodeType === 1 && node.tagName === 'DIV' && node.classList.contains('leadin-thank-you-wrapper')) {
              // Do things
              console.log(node);
            }
        })
    })
})

// Starts the monitoring
observer.observe(document.documentElement, {
    childList: true,
    subtree: true
})

[tjoyce]

@piersg - Are we officially allowed to ignore IE now? Plese tell me it's true

[piersg]

@tjoyce Shh, don't say its name. If we ignore it, it will go away.

Officially MS will stop supporting IE11 on November 30, 2020 (with 365 products ending support on August 17, 2021).

[tjoyce]

@piersg - I'm starting my countdown 😄

[piersg]

@tjoyce Don't worry, that already exists haha https://death-to-ie11.com/

[tjoyce · Accepted solution]

@danielelodola - I have looked for this functionality as well as a global javascript event library for leadin and it doesn't seem to exist... even combing through the javascript library yielded no results. What I am left doing is 

var leadincheck = window.setInterval(function(){
  if($(".leadin-thank-you-wrapper").length){
    $('body').addClass('has-leadin-thank-you');
    window.clearInterval(leadincheck)
  }
}, 300);

 I realize there is no elegance in this approach but it tends to get the job done

[natsumimori]

Hi @danielelodola ,

Thank you for reaching out to the HubSpot Community.

I myself am not familiar with this topic, but I will tag in some top Community contributors to see if they have experiences.

@tjoyce and @piersg , is there any information you can share with @danielelodola ?