150 lines
4.1 KiB
Plaintext
150 lines
4.1 KiB
Plaintext
<div class="recommended-wrapper">
|
||
<div class="heading lang-en">
|
||
Your learning paths
|
||
</div>
|
||
<div class="heading lang-de">
|
||
Ihre Lernpfade
|
||
</div>
|
||
<div class="heading lang-fr">
|
||
Vos parcours d’apprentissage
|
||
</div>
|
||
<div class="heading lang-jp">
|
||
あなたの学習プログラム
|
||
</div>
|
||
|
||
<div class="carousel-wrapper your-lp-carousel">
|
||
{% for learning_path in learning_paths.enrolled %}
|
||
{% if learning_path.progress > 0 %}
|
||
{% for category in learning_path.categories %}
|
||
{% if category.name == userLanguage %}
|
||
<div class="carousel-card">
|
||
{% include "cards_learning_path" %}
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<style>
|
||
.your-lp-carousel {
|
||
position: relative;
|
||
}
|
||
.slick-arrow {
|
||
position: absolute;
|
||
top: -30px;
|
||
z-index: 111;
|
||
cursor: pointer;
|
||
}
|
||
.right-arrow {
|
||
margin-left: 30px;
|
||
}
|
||
.slick-dots button {
|
||
display: block;
|
||
width: 10px;
|
||
height: 10px;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 1px;
|
||
background: #8878FF;
|
||
text-indent: -9999px;
|
||
}
|
||
.slick-dots {
|
||
list-style-type: none;
|
||
}
|
||
.slick-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding-top: 3rem;
|
||
list-style-type: none;
|
||
gap: 10px;
|
||
}
|
||
.slick-dots li {
|
||
margin: 0 0.25rem;
|
||
}
|
||
.slick-dots li.slick-active button {
|
||
background: #6CF1C9;
|
||
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
|
||
$(".your-lp-carousel").slick({
|
||
slidesToShow: 4,
|
||
slidesToScroll: 4,
|
||
prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
|
||
nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
|
||
infinite: false,
|
||
dots: true,
|
||
responsive: [
|
||
{
|
||
breakpoint: 1170,
|
||
settings: {
|
||
slidesToShow: 2,
|
||
slidesToScroll: 2,
|
||
}
|
||
},
|
||
{
|
||
breakpoint: 768,
|
||
settings: {
|
||
slidesToShow: 1,
|
||
slidesToScroll: 1,
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
let selectedCategory = null;
|
||
let selectedProgress = null;
|
||
|
||
function filterCards() {
|
||
$(".popular-carousel").slick('slickUnfilter');
|
||
|
||
let filterFunction = function() {
|
||
const card = $(this).find('.card');
|
||
const cardCategories = card.attr('categories').split(',').map(c => c.trim());
|
||
const cardProgress = card.attr('progress');
|
||
|
||
let showByCategory = !selectedCategory || cardCategories.includes(selectedCategory);
|
||
let showByProgress = !selectedProgress || selectedProgress === 'All courses' || cardProgress === selectedProgress;
|
||
|
||
return showByCategory && showByProgress;
|
||
};
|
||
|
||
$(".popular-carousel").slick('slickFilter', filterFunction);
|
||
}
|
||
|
||
$('.filter').on('click', function() {
|
||
let clickedCategory = $(this).attr('value');
|
||
|
||
if (selectedCategory === clickedCategory) {
|
||
selectedCategory = null;
|
||
$(this).removeClass('filter-active');
|
||
} else {
|
||
selectedCategory = clickedCategory;
|
||
$('.filter').removeClass('filter-active');
|
||
$(this).addClass('filter-active');
|
||
}
|
||
|
||
filterCards();
|
||
});
|
||
|
||
$('.filter-by-progress-option').on('click', function() {
|
||
let clickedProgress = $(this).attr('value');
|
||
|
||
if (selectedProgress === clickedProgress) {
|
||
selectedProgress = null;
|
||
} else {
|
||
selectedProgress = clickedProgress;
|
||
}
|
||
|
||
filterCards();
|
||
});
|
||
});
|
||
</script>
|