112 lines
3.3 KiB
Plaintext
112 lines
3.3 KiB
Plaintext
{% include "header" %}
|
|
{% include "sub_navigation" %}
|
|
<main class="np-main np-training-events np-subpage-container np-max-width">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-10">
|
|
<div class="np-resource-title">
|
|
Paid Training
|
|
</div>
|
|
<div class="np-resource-subtitle">
|
|
Listed below are the Training Events that you've purchased. If you have not registered yet, select the Session date(s) to secure your seat in class. To browse our instructor-led training, <a href="/app/catalog">click here</a>.
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-2">
|
|
{% include "training_events_filter" %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
{% include "training_events_sidebar_filters" %}
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-9">
|
|
{% include "training_events_index" %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
|
|
reorderContentAlphabetical()
|
|
|
|
document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
|
|
checkbox.addEventListener("change", () => {filterCourses()})
|
|
})
|
|
|
|
let params = new URLSearchParams(document.location.search);
|
|
params.forEach(function(param) {
|
|
document.querySelector(`.filter-checkbox[data-filter="${param}"]`).checked = true
|
|
})
|
|
|
|
document.querySelector(".clear-filters").addEventListener("click", (e) => {
|
|
e.preventDefault()
|
|
clearAllFilters()
|
|
})
|
|
})
|
|
|
|
function clearAllFilters() {
|
|
const filterableCards = document.querySelectorAll(".filterable-card");
|
|
filterableCards.forEach((card) => {
|
|
card.style.display = "flex"
|
|
})
|
|
|
|
document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
|
|
checkbox.checked = false
|
|
})
|
|
}
|
|
|
|
function reorderContentAlphabetical() {
|
|
let filterableCards = document.querySelectorAll(".filterable-card");
|
|
|
|
let filterableCardsArray = Array.from(filterableCards);
|
|
|
|
filterableCardsArray.sort((a, b) => {
|
|
let textA = a.querySelector('h3').textContent.trim().toLowerCase();
|
|
let textB = b.querySelector('h3').textContent.trim().toLowerCase();
|
|
if (textA < textB) return -1;
|
|
if (textA > textB) return 1;
|
|
return 0;
|
|
});
|
|
|
|
let parentElement = filterableCards[0].parentNode;
|
|
filterableCardsArray.forEach(element => parentElement.appendChild(element));
|
|
}
|
|
|
|
function filterCourses() {
|
|
let selectedRegionFilters = []
|
|
const checkboxFilters = document.querySelectorAll(".filter-checkbox")
|
|
|
|
checkboxFilters.forEach((checkbox) => {
|
|
if (checkbox.checked) {
|
|
if (checkbox.classList.contains("region-filter")) {
|
|
selectedRegionFilters.push(checkbox.getAttribute("data-filter"))
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
const filterableCards = document.querySelectorAll(".filterable-card")
|
|
|
|
filterableCards.forEach((card) => {
|
|
const cardTitle = card.querySelector(".np-card-content-title").textContent.trim().toLowerCase()
|
|
|
|
if
|
|
(
|
|
cardTitle.includes(selectedRegionFilters)
|
|
) {
|
|
card.style.display = "flex"
|
|
} else {
|
|
card.style.display = "none"
|
|
}
|
|
})
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.np-training-events .np-resource-subtitle {
|
|
margin-bottom: 28px;
|
|
line-height: 1.5;
|
|
}
|
|
</style> |