Hi @ErnestChan,
I can chime in a bit on your specific customization because I do some similar things (though not with the login page) for my institutions Canvas instance.
Referring to the login page UI update that will be available as a feature option after this weekend, I don't believe the code you have there would be functional, as the html layout of the page is completely different. If you want your additional code to come after the login button and forgot password link in the new UI, you could try something like this:
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
That would end up looking like:
Now I just did that in the browser console while viewing the new login page in our beta instance to get some quick code that at least worked. When adding it to your JavaScript file, you'll need some additional things. First, you'll usually want to check that the page has finished rendering before executing the customization. Second, you'll want to ensure you're only running your customization when you're on the correct page, otherwise that text may get inserted all over the place in Canvas.
You may end up with something more like this (note, I did not test this with a file, but I believe it will work):
async function do_global_customizations(){
if (/^\/login\/canvas$/.test(window.location.pathname)) {
document.getElementsByTagName('main')[0].insertAdjacentHTML('beforeend', '<div style="clear:both"><p>Hello, this is some text. I really need this text to be long so I can see what it does when it gets to the end of the line and wraps. Also, what happens when the text is really long? Does it make the modal box taller?</p></div>');
}
};
if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
do_global_customizations();
} else {
document.addEventListener('DOMContentLoaded', do_global_customizations);
}
Another thing I'll call out specifically is that I don't use jQuery with my customizations at all anymore, as I believe it may be removed from Canvas at some point. Vanilla JavaScript, while sometimes more difficult to compose, is almost always going to work.
The final callout is that these customizations usually don't apply to the Canvas mobile apps. I believe there are separate files for customizing the apps like this, but I have never ventured down that road. Someone else may be able to chime in there.
I hope this helps a bit!
-Chris
