Need help: Debugging JavaScript for the Canvas App (it works in desktop and mobile browsers)

[NatFeibish]

So now that I understand how Mutation Observers work, I'm happily coding away and doing all kinds of cool non-API things in Canvas. Life is good.

Almost.

See, there is one piece of code that is working beautifully in Canvas in the browser, both desktop and mobile, and on my phone when I go to Canvas via a browser. However, it doesn't work in the Canvas App on mobile. I can't debug using Chrome because the issue is being only caused within the app.

Mind taking a peep at this code and letting me know why the App wouldn't like it but browsers do? In the comments I put other code that works in the App for the first of three cards only; I need to expand it to include more cards. This code below doesn't work for any cards in the App.

function initializeCards(cards) {
    cards.forEach(card => {
      if (!card.classList.contains('is-flipped')) { // Optional: Avoid duplicate listeners
        card.addEventListener("click", function () {
          card.classList.toggle('is-flipped');
        });
      }
    });
  }
  
  // Create a MutationObserver instance
  const observer = new MutationObserver((mutations) => {
    let newCardsFound = false;
  
    mutations.forEach(mutation => {
      // Check for added nodes in each mutation record
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE && node.matches(".card__inner")) {
          newCardsFound = true;
          initializeCards([node]); // Initialize the newly added card
        }
  
        // If the added node contains child nodes, check those as well
        if (node.nodeType === Node.ELEMENT_NODE) {
          const cards = node.querySelectorAll(".card__inner");
          if (cards.length > 0) {
            newCardsFound = true;
            initializeCards(cards); // Initialize all newly added cards
          }
        }
      });
    });
  
    // If new cards were found, you could choose to keep observing or disconnect
    if (newCardsFound) {
      // Optionally, you might want to keep observing for more changes or disconnect here
      // observer.disconnect(); // Uncomment if you want to stop observing after initialization
    }
  });
  
  // Start observing the document body for changes
  observer.observe(document.body, { childList: true, subtree: true });

[NatFeibish]

Using this code, the app will flip the first of three cards only. The second and third card are ignored.

// Function to handle the logic once the card element is available
function initializeCard() {
    const card = document.querySelector(".card__inner");
  
    if (card) {
      card.addEventListener("click", function (e) {
        card.classList.toggle('is-flipped');
      });
    }
  }
  
  // Create a MutationObserver instance
  const observer = new MutationObserver((mutations) => {
    // Check if the .card__inner element is present in the DOM
    if (document.querySelector(".card__inner")) {
      initializeCard(); // Initialize card interaction
      observer.disconnect(); // Stop observing once the card is found
    }
  });
  
  // Start observing the document body for changes
  observer.observe(document.body, { childList: true, subtree: true });

[JamesSekcienski]

Since you are disconnecting the observer after finding the first card, it isn't going to detect nor process any additional changes.

In addition, in the code for your original post, you are using querySelectorAll which will find all instances of elements with the class of "card_inner" based on your query.  Thus, all those cards will be selected and updated as needed. 

However, in the code above, you are using querySelector, which will only get the first instance of an element with the class of "card_inner" in the document based on your query.  Thus, even if you didn't include the observer,disconnect(), your code for this is currently only going to apply to the first card.

[JamesSekcienski]

Are you able to share additional context about what this code is supposed to do and what content is being observed?  I know there are limitations to what the CSS/JS can modify within the mobile app, so I'm curious what the cards are that you are trying to modify.

[NatFeibish]

Thanks for the input. The code in the question (not in the comment) is working perfectly everywhere EXCEPT the app including in Canvas on mobile. It's just a basic flip card. See one side, click on it, see the other, click on it, it goes back to the first side. The issue is not the code per se, it's what the App is doing with it. 

I just included the comment code to show that the behavior is somewhat allowed in the app, but something about watching all instances of the class in the app only breaks it. It will work well with ONE card in the app using the code in the comment, but when I ask it to watch all three then NONE of the cards work. But when in a mobile browser, they ALL work. So it's something unique to the app.

[JamesSekcienski]

Since the code in your comment is working for at least one card, have you tried combining that approach with the use of the querySelectorAll. 

You could try something like the following:

// Function to handle the logic once the card element is available
function initializeCard(card) {
    if (card && !card.classList.contains("card-initialized")) {
      card.addEventListener("click", function (e) {
        card.classList.toggle('is-flipped');
      });
      card.classList.add("card-initialized");
    }
  }
  
  // Create a MutationObserver instance
  const observer = new MutationObserver((mutations) => {
    // Check if there are uninitialized cards present in the DOM
    const cards = [...document.querySelectorAll(".card__inner:not(.card-initialized)")];
    for (const card of cards) {
      initializeCard(card); // Initialize card interaction
    }
  });
  
  // Start observing the document body for changes
  observer.observe(document.body, { childList: true, subtree: true });

[dtod]

So you're using the mutation observer to add an onclick event to the card, at which point you disconnect the observer. It seems like it would work.

I have not done this, but the Chrome documentation suggests that you can debug WebViews, which I would guess the Instructure app uses: https://developer.chrome.com/docs/devtools/remote-debugging/webviews

[dtod]

I guess the crude equivalent of lots of console.log statements might be alert statements to check that things are doing what they should be doing!

[NatFeibish]

The issue isn't the code itself because it works in the browser. The issue is the app. There is some container, or some SOMETHING, that isn't existing to check properly.

[NatFeibish]

Essentially, to get everything to work I had top stop trying to use a mutation observer and just use a straight timeout. I was hoping for something less blunt, but it does get the job done!