106 lines
3.5 KiB
Plaintext
106 lines
3.5 KiB
Plaintext
<div class="role-select container">
|
|
<div class="role-select-title">
|
|
Library
|
|
</div>
|
|
<div class="role-select-list row">
|
|
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#administrators">
|
|
<div class="role-select-item-container">
|
|
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/admin.jpg">
|
|
<div class="role-select-item-text">
|
|
<div class="role-select-item-name">
|
|
Administrators
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#researchers">
|
|
<div class="role-select-item-container">
|
|
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/researcher.jpg">
|
|
<div class="role-select-item-text">
|
|
<div class="role-select-item-name">
|
|
Researchers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#it-managers">
|
|
<div class="role-select-item-container">
|
|
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/it_manager.jpg">
|
|
<div class="role-select-item-text">
|
|
<div class="role-select-item-name">
|
|
IT Managers
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="role-select-item col-12 col-md-6 col-xl-3" href="#staff">
|
|
<div class="role-select-item-container">
|
|
<img class="role-select-image" src="https://cdn.northpass.io/Cayuse/staff.jpg">
|
|
<div class="role-select-item-text">
|
|
<div class="role-select-item-name">
|
|
Staff
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
addEventListener("hashchange", () => {
|
|
showCourses(location.hash.replace('#', ''));
|
|
});
|
|
addEventListener('DOMContentLoaded', () => {
|
|
showCourses(location.hash.replace('#', ''));
|
|
})
|
|
|
|
const roleDescriptions = {
|
|
'administrators': {
|
|
name: 'Courses for Administrators',
|
|
},
|
|
'researchers': {
|
|
name: 'Courses for Researchers',
|
|
},
|
|
'it-managers': {
|
|
name: 'Courses for IT Managers',
|
|
},
|
|
'staff': {
|
|
name: 'Courses for Staff',
|
|
}
|
|
}
|
|
|
|
function showCourses(name) {
|
|
let coursesParent = document.querySelector('.courses-wrapper')
|
|
let roleSelectElement = document.querySelector('.role-select');
|
|
|
|
if (!name) {
|
|
if (roleSelectElement.classList.contains('np-hidden')) {
|
|
roleSelectElement.classList.remove('np-hidden');
|
|
document.querySelector('.courses-list').classList.add('np-hidden');
|
|
}
|
|
} else if (roleDescriptions[name]) {
|
|
coursesParent.querySelectorAll('[course-role]').forEach(x => {
|
|
if (x.getAttribute('course-role') === name) {
|
|
x.classList.remove('role-hidden');
|
|
} else {
|
|
x.classList.add('role-hidden');
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('[filter-category]:not([filter-category="ALL"])').forEach( x => {
|
|
if (coursesParent.querySelector(`[course-category*="${x.getAttribute('filter-category')}"][course-role="${name}"]`)) {
|
|
x.classList.remove('role-hidden');
|
|
} else {
|
|
x.classList.add('role-hidden');
|
|
}
|
|
});
|
|
|
|
document.querySelector('.courses-list-title').innerText = roleDescriptions[name].name;
|
|
|
|
if (!roleSelectElement.classList.contains('np-hidden')) {
|
|
roleSelectElement.classList.add('np-hidden');
|
|
document.querySelector('.courses-list').classList.remove('np-hidden');
|
|
}
|
|
}
|
|
}
|
|
</script> |