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');
}

[PamelaPatterson]

Hello, does anyone have any new updates on hiding the Navigation Tab from Instructors, using the Java Script?  With updates that Canvas has done I noticed Instructors can see the tab again.  And to know avail I cannot seem to hide it again using what was put out there.

[chriscas]

Hi @PamelaPatterson,

With the original version of code posted by @casey_eubank, I think everything will work properly if you just change the first line to the following (at least it worked for me in the browser console):

var navigationTab = document.getElementById('tab-navigation') || document.getElementById('tab-navigation-selected')

-Chris

[PamelaPatterson]

Thanks, but it did not work either on my system.

[chriscas]

Hi @PamelaPatterson,

Thanks for letting us know.  It's very possible the code may now need to be inside of a mutation observer because of how the redesigned page is structured and loaded (javascript might be looking for the tab before it's loaded).  Mutation observers and I don't usually get along, so I'm going to tag @JamesSekcienski to see if he may be able to offer some guidance (or hopefully tell us a mutation observer isn't needed and I'm just completely overlooking something obvious here).

-Chris

[PamelaPatterson]

Hope someone can provide a code, because now they can see it and will enable things....ugh.