Adding Multiple Sections of JavaScript to Theme Editor

[casey_eubank]

I figured out that to add JavaScript code to the theme editor I had to copy/paste the code into a notepad and save it as a file with .js at the end and upload it.

I currently have this JavaScript file uploaded to the theme editor to hide the navigation tab from faculty:

//hides Navigation tab in course settings
var navigationTab = document.getElementById('navigation_tab');

function isAdmin() {
    if (window.ENV && Array.isArray(window.ENV.current_user_roles)) {
        return window.ENV.current_user_roles.includes('admin') || window.ENV.current_user_roles.includes('root_admin');
    }
    return false;
}

if (navigationTab && !isAdmin()) {
    navigationTab.style.display = 'none';

I would like to also add this JavaScript to hide the Syllabus tool from faculty since we use Simple Syllabus

nav[role="navigation"] a.syllabus,
nav#mobileContextNavContainer a[href$="/assignments/syllabus"] {  display: none;}

Where would I add this JavaScript in relation to the first one I shared? Would I just press enter twice at the end of the first one so there is a space between the two and then past ethe code there?

[jerry_nguyen · Accepted solution]

@casey_eubank 

The following will only work on web version of Canvas (Not mobile app). Thus I would recommend hiding the "Syllabus" from course navigation: https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-manage-Course-Navigation-links/ta-p/102...

The code you wrote to hide Syllabus is CSS (Cascading Style Sheets). If you want to hide Syllabus for everyone (Including admins) then you can simply add it to a CSS file and upload it to the Theme Editor (Same as you did for Javascript, but save the file as customcss.css and select CSS instead): https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

Otherwise, you can add the following script to the "IF" block that checks for admin role

if (navigationTab && !isAdmin()) {
    navigationTab.style.display = 'none';
    $('nav[role="navigation"] a.syllabus').css('display', 'none');
}