UI Changes that break custom Scripts

jsimon3
Community Participant

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