125 lines
3.0 KiB
Plaintext
125 lines
3.0 KiB
Plaintext
<style>
|
|
.course-carousel-container .catalog-card:not(:first-child) {
|
|
display: none;
|
|
}
|
|
.course-carousel-container .catalog-card {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
|
|
|
|
{% assign filterInProgress = filterInProgress | default: false %}
|
|
{% assign sortByPriority = sortByPriority | default: false %}
|
|
{% assign displayedCount = 0 %}
|
|
|
|
{% if items.any? %}
|
|
<div class="course-carousel-container">
|
|
{% for course in items %}
|
|
{% if filterInProgress %}
|
|
{% if course.progress > 0 and course.progress < 100 %}
|
|
{% include "cards_course" with course %}
|
|
{% assign displayedCount = displayedCount | plus: 1 %}
|
|
{% endif %}
|
|
{% else %}
|
|
{% include "cards_course" with course
|
|
, hiddenByDefault: false %}
|
|
{% assign displayedCount = displayedCount | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% if displayedCount == 0 %}
|
|
{% include "courses_zero_state"
|
|
, message: 'Nothing found! Start some lessons to fill this gap.'
|
|
, messageEs: '¡Nada encontrado! Comienza algunas lecciones para llenar este vacío.' %}
|
|
{% endif %}
|
|
{% else %}
|
|
{% capture message %}
|
|
{% t shared.zero_state.courses.index,
|
|
key: current_school.course_vocabulary
|
|
%}
|
|
{% endcapture %}
|
|
{% include "courses_zero_state"
|
|
, message: message %}
|
|
{% endif %}
|
|
|
|
<script>
|
|
const coursesCarousel = $('.course-carousel-container');
|
|
|
|
$(document).ready(function(){
|
|
const maxItems = 5;
|
|
const cards = coursesCarousel.find('.catalog-card').get();
|
|
|
|
{% if sortByPriority %}
|
|
|
|
cards.sort(function(a, b) {
|
|
const aPriority = extractPriority(a);
|
|
const bPriority = extractPriority(b);
|
|
return bPriority - aPriority;
|
|
});
|
|
|
|
// Re-append sorted cards to container
|
|
$.each(cards, function(index, card) {
|
|
coursesCarousel.append(card);
|
|
});
|
|
|
|
{% endif %}
|
|
|
|
for(let i = 5; i < cards.length; i++) {
|
|
cards[i].remove();
|
|
}
|
|
|
|
let initialSlide = 0;
|
|
|
|
// Go to 2nd slide if width is higher than breakpoint
|
|
if ($(window).width() > {{breakpoint}}) {
|
|
initialSlide = 1;
|
|
}
|
|
|
|
coursesCarousel.slick({
|
|
centerMode: true,
|
|
dots: false,
|
|
infinite: false,
|
|
speed: 300,
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
initialSlide: initialSlide,
|
|
responsive: [
|
|
{
|
|
breakpoint: {{breakpoint}},
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
for (let i = 0; i < 5; i++) {
|
|
cards[i].classList.add('card-visible');
|
|
}
|
|
|
|
// Redirect to slide 1 if user slides to slide 0 above breakpoint
|
|
setInterval(function() {
|
|
if ($(window).width() > {{breakpoint}}) {
|
|
const currentSlide = coursesCarousel.slick('slickCurrentSlide');
|
|
if (currentSlide === 0) {
|
|
console.log('redirecting from slide 0 to slide 1');
|
|
coursesCarousel.slick('slickGoTo', 1);
|
|
}
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
function extractPriority(element){
|
|
const priority = $(element).attr('priority');
|
|
return priority ? Number(priority) : 0;
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media (max-width: {{breakpoint}}px) {
|
|
.course-carousel-container .catalog-card {
|
|
margin: 0 10px 32px;
|
|
}
|
|
}
|
|
</style> |