102 lines
3.2 KiB
Plaintext
102 lines
3.2 KiB
Plaintext
{% include "header" %}
|
|
{% include "catalog_popup_message" %}
|
|
|
|
{% include "sub_navigation" %}
|
|
<main class="np-main np-catalog np-subpage-container np-max-width">
|
|
<div class="np-catalog-header-wrapper">
|
|
<div class="np-catalog-header">
|
|
<div class="np-resource-title">{{ catalog.headline }}</div>
|
|
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
{% include "catalog_filter_sidebar" %}
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-9">
|
|
{% include "courses_catalog" %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
@media (min-width: 768px) {
|
|
.np-catalog-courses {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.catalog-course .np-card {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
const categoryFilters = document.querySelectorAll(".filter-link")
|
|
const courses = document.querySelectorAll(".catalog-course")
|
|
|
|
document.querySelectorAll(".filter-link").forEach((filter) => {
|
|
filter.addEventListener("click", (e) => {
|
|
updateActiveCategory(e.target, categoryFilters)
|
|
filterCourses()
|
|
})
|
|
})
|
|
|
|
document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
|
|
checkbox.addEventListener("change", () => {filterCourses()})
|
|
})
|
|
|
|
let params = new URLSearchParams(document.location.search);
|
|
let categoryParam = params.get("category");
|
|
|
|
if (categoryParam) {
|
|
document.querySelector(`.filter-link[data-filter-name="${categoryParam}"]`).click()
|
|
}
|
|
})
|
|
|
|
function updateActiveCategory(selectedFilter, categoryFilters) {
|
|
categoryFilters.forEach((filter) => {filter.classList.remove("active")})
|
|
selectedFilter.classList.add("active")
|
|
}
|
|
|
|
function filterCourses() {
|
|
const selectedCategoryFilterID = document.querySelector(".filter-link.active").getAttribute("data-filter-id")
|
|
|
|
let selectedDurationFilters = []
|
|
let selectedDifficultyFilters = []
|
|
const checkboxFilters = document.querySelectorAll(".filter-checkbox")
|
|
|
|
checkboxFilters.forEach((checkbox) => {
|
|
if (checkbox.checked) {
|
|
if (checkbox.classList.contains("duration-filter")) {
|
|
selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-min"))
|
|
selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-max"))
|
|
}
|
|
}
|
|
})
|
|
|
|
// console.log(selectedCategoryFilterID)
|
|
// console.log(selectedDurationFilters)
|
|
|
|
const minDuration = Math.min( ...selectedDurationFilters )
|
|
const maxDuration = Math.max( ...selectedDurationFilters )
|
|
|
|
const courses = document.querySelectorAll(".catalog-course")
|
|
|
|
courses.forEach((course) => {
|
|
const courseCategories = course.getAttribute("data-categories")
|
|
const courseDuration = course.getAttribute("data-duration")
|
|
|
|
if
|
|
((courseCategories.includes(selectedCategoryFilterID) || selectedCategoryFilterID == "all" ) && (!selectedDurationFilters.length || (courseDuration <= maxDuration && courseDuration >= minDuration))) {
|
|
course.style.display = "flex"
|
|
} else {
|
|
course.style.display = "none"
|
|
}
|
|
})
|
|
|
|
}
|
|
</script> |