https://www.kleer.la/js/catalog_filter.js

1DOMcourses = Array.from(document.getElementById('courses-container').children)
2
3const activeCourses = []
4let categoryInFilter = ''
5let textInFilter = ''
6let courses = []
7
8const DOMobjects = {
9    courses: {
10        container: document.getElementById('training-courses__container'),
11        list: Array.from(document.getElementById('courses-container').children),
12        showMoreButton: document.getElementById('see-more'),
13    },
14    filterBox: {
15        category: {
16            drop: document.getElementById('catalog__category-drop'),
17            setDropText: function(text) {
18                this.drop.innerText = text ? text : 'Categorías'
19            },
20        },
21        text: {
22            input: document.getElementById('catalog__text-input'),
23        },
24    },
25    showElements: function(elements, show){
26        if(show){
27            elements.forEach(element => {
28                element.classList.remove('hidden-element')
29            })
30        }else{
31            elements.forEach(element => {
32                element.classList.add('hidden-element')
33            })
34        }
35    }
36}
37
38const handleChangeText = (event) => {
39    textInFilter = event ? event.target.value : ''
40    filter()
41}
42
43const handleChangeCategory = (category) => {
44    categoryInFilter = category
45    // DOMobjects.showElements([DOMobjects.articles.title], false)
46    DOMobjects.filterBox.category.setDropText(category)
47    filter()
48}
49
50const handleShowAll = () => {
51    courses.forEach(course => {
52        course.card.classList.remove('hidden-element')
53    })
54    DOMobjects.showElements([DOMobjects.courses.showMoreButton], false)
55}
56
57const filter = () => {
58    courses.forEach(course => {
59        const hasCommonText = course.name.toLowerCase().includes(textInFilter.toLowerCase()) ||
60            course.description.toLowerCase().includes(textInFilter.toLowerCase())
61        let hasCommonCategory = true
62
63        if(categoryInFilter){
64            hasCommonCategory = course.categories.includes(categoryInFilter)
65        }
66
67        if(hasCommonText && hasCommonCategory){
68            course.card.classList.remove('hidden-element')
69        } else {
70            course.card.classList.add('hidden-element')
71        }
72    })
73
74    DOMobjects.showElements([DOMobjects.courses.showMoreButton], false)
75}
76
77const buildCoursesFromDOM = () => {
78    courses = DOMcourses.map((element) => {
79        let idSplitted = element.id.split('--')
80        const plane_name= idSplitted.pop()
81        const name = element.children[0].children[1].children[0].children[1].outerText
82        const description = element.children[0].children[1].children[1].outerText
83
84        return {
85            card: element,
86            categories: idSplitted,
87            name,
88            plane_name,
89            description
90        }
91    })
92}
93
94const cleanAllFilters = () => {
95    handleChangeCategory('')
96    handleChangeText('')
97    DOMobjects.filterBox.category.setDropText()
98    DOMobjects.filterBox.text.input.value = ''
99}
100
101const setInitialPage = () => {
102    courses.forEach((course, index) => {
103        if(index < 8){
104            course.card.classList.remove('hidden-element')
105        }else{
106            course.card.classList.add('hidden-element')
107        }
108    })
109}
110
111buildCoursesFromDOM()
112setInitialPage()
113