Visibility by Course User Role

[james_whalley]

We have a resource library of Canvas tutorials set up within a subaccount in our Canvas instance. Non-enrolled users and students only see Canvas Pages and no other type of content. With any page other than the Home page (like, https://canvas.cornell.edu/courses/1848/pages/tutorials), the header-bar-outer-container is pretty much empty and a waste of space. I can remove this bar completely, but that creates problems for instructor and admins trying to edit pages and view the version history. I had found the environment variables is_student and is_instructor on the Home page, but I do not see them on other Canvas pages, so, I cannot call on those to differentiate the roles. I do see that those with editing privileges have variables such as delete_page under PAGE_RIGHTS. I see that unenrolled and student accounts do not contain this variable at all, and, so, was trying to use that, but my code, and similar variations, have not worked. Any ideas?

var HeaderBarOuterContainer = document.querySelector('.header-bar-outer-container');

if (ENV.PAGE_RIGHTS.delete_page !=== 'undefined') {
HeaderBarOuterContainer.style.display = 'none';
}

[MikeBrinkman]

Maybe it's because I'm not logged in, but that page does generate a few errors in the console. One thing you could try is to update your theme style sheet:

.pages .header-bar-outer-container { min-height: 0px !important; }

 This doesn't hide it, but it does reduce the amount of wasted space.

[james_whalley]

The problem isn't. the shrinking or deletion of the header, but, the lack of code to identify the type of user.

[MikeBrinkman]

I noticed that there's a div with the class buttons on the page within the header-bar-outer-container. If someone is a visitor or a student, this div will not contain the edit button. So this seemed to work:

let test = document.getElementsByClassName('buttons'); // there's only one
let target = document.getElementsByClassName('header-bar-outer-container'); // ditto above
if (!test[0].innerHTML.includes('edit')) {
	target[0].style.display = 'none';
}

As the old saying goes, there's more than one way to skin a cat. 😉