UI Changes that break custom Scripts

[jsimon3]

OK, sometimes(allTheTime) changes happen on the front end that break our custom JS or CSS and we don't know until a teacher or professor call us and tell us that, "Canvas is broken"

I am going to use this discussion board to log the problems and fixes that I find.

I welcome you to do this as well.

Hopefully these things can save you some time.

p = `problem`;

c = `culprit`;

s = `solution`;

10/24/19:

p:

I found out all of my functions were not being called.

c: 

document.addEventListener("DOMContentLoaded", function() {...

//DOMContentLoaded no longer works the scripts gets hit after the DOM is loaded

s: 

document.readyState !== "loading"

? console.log(`1`)

: document.addEventListener("DOMContentLoaded", function() {

console.log(`2`)

});

//the readyState resolved my issue and the DOMContentLoaded is there just in case Canvas Devs change how things are done

10/25/19

p:

a function that determined if a teacher was on a certain page did not deploy properly one of my bools that were attached to a querySelector path always returned false

c:

let visibleMenu = document.querySelector(

'.ic-app-course-menu.list-view nav #section-tabs li.section a[title="Settings"]');

s:

let visibleMenu = document.querySelector(

'nav #section-tabs li.section a[title="Settings"]'

);

//the path is screwed up (instead of ....list-view it is now....list-view-a11y-left-menu-flag)I shortened the path and eureka I don't have to worry about the path name changing to much more

[bbennett2]

James Jones has a solution for DOM content that uses the `MutationObserver` object to watch specific elements for renders. Canvas has been moving to React, which throws out a lot of traditional DOM events and makes it harder to manipulate with user scripts. Here's a simple example:

// Use an anonymous function
(function() {

  const container = document.querySelector("#outcomes");

  // See more https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
  const mutationConfig = { attributes: true };

  // Don't run the script unless students are on the Individual Gradebook.

  // Define an async function because the JS .fetch() and/or
  // jQuery $.ajax() run asynchronously.
  // This allows you to `await` the results all in one block.
  async function getOutcomes() {

    // do stuff
  }
  
  // Watch for your container element and then listen for changes by defining
  // the MutationObserver.
  if(container) {
    var observer = new MutationObserver(myFunction);
    observer.observe(container, mutationConfig);
  }

})()‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I used this method to provide an internal hotfix for a Canvas bug (that has since been fixed in production). Here's my full writeup on the method.

[jsimon3]

I like this approach I will add the mutationObserver to my objs. I have been using something similar--

function something() {

const checkIfNull = async selector => {

while (document.querySelector(selector) === null) {

await new Promise(resolve => requestAnimationFrame(resolve));

}

return document.querySelector(selector);

};

checkIfNull("#help_tray > form").then(element => {...});}

My problem was that I had was that I wasting time and effort chaining everything based upon login, killing the measures that I had already laid out. I will add the mutationObserver to my login to see how it behaves.