Skip to content

Commit cc0dbfb

Browse files
bindaasrakeshbindaasrakesh
committed
Remove jquery and make tutorial filter page with javascript
1 parent 0c408bf commit cc0dbfb

File tree

3 files changed

+118
-69
lines changed

3 files changed

+118
-69
lines changed

‎preview-src/landing-page-tutorials.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
125125
[.data-filter-column]
126126
====== {empty}
127127
++++
128-
<div data-category="intermediate .net developer" class="sub-heading two-column-heading">
128+
<div data-category="intermediate dotnet developer" class="sub-heading two-column-heading">
129129
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
130130
<div class="filter-info">
131131
<h5 >

‎src/css/landing-page.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,10 @@
333333
display: none;
334334
}
335335

336+
.nav.tutorials-filter .sub-menu.open {
337+
display: block;
338+
}
339+
336340
.nav.tutorials-filter .sub-menu li {
337341
list-style: none;
338342
}

‎src/js/10-landing-page-nav.js‎

Lines changed: 113 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,122 @@
1-
;(function ($) {
1+
;
2+
(function () {
23
'use strict'
34
// for slide toggle
4-
$('.nav-link').click(function () {
5-
$(this).toggleClass('active')
6-
$(this).next('.sub-menu').slideToggle(10)
7-
})
8-
// add class even odd
9-
var $allData = $('.data-filter-column')
10-
for (var i = 0; i < $allData.length; i++) {
11-
if (i % 2 === 1) {
12-
$allData[i].classList.add('even')
13-
} else {
14-
$allData[i].classList.add('odd')
15-
}
16-
}
5+
if (document.querySelector('.tutorials-filter')) {
6+
// all variables declare here
7+
// var tutorialsFilter = document.querySelector('.tutorials-filter')
8+
var navLink = document.querySelectorAll('.nav-menu.filter li a')
9+
var allData = document.querySelectorAll('.data-filter-column')
1710

18-
// for filter menu
19-
var $filterMenuCheckboxes = $('input[type="checkbox"]')
20-
$filterMenuCheckboxes.on('change', function () {
21-
var selectedFiltersData = {}
22-
$filterMenuCheckboxes.filter(':checked').each(function () {
23-
if (!Object.prototype.hasOwnProperty.call(selectedFiltersData, this.name)) {
24-
selectedFiltersData[this.name] = []
25-
}
26-
selectedFiltersData[this.name].push(this.value.toLowerCase())
27-
})
28-
// create a collection containing all of the filterable elements
29-
var $filteredResultsData = $('.data-filter-column')
30-
// loop over the selected filter name -> (array) values pairs
31-
$filteredResultsData.removeClass('even')
32-
$filteredResultsData.removeClass('odd')
33-
$.each(selectedFiltersData, function (name, filterValues) {
34-
// filter each .data-filter-column element
35-
$filteredResultsData = $filteredResultsData.filter(function () {
36-
var matched = false
37-
var currentFilterValues = $(this).find('.sub-heading').data('category').toLowerCase().split(' ')
38-
39-
$.each(currentFilterValues, function (_, currentFilterValue) {
40-
if ($.inArray(currentFilterValue, filterValues) !== -1) {
41-
matched = true
42-
return false
43-
}
44-
})
45-
// if matched is true the current .data-filter-column element is returned
46-
return matched
11+
// looping through the all chekbox link
12+
navLink.forEach(function (link) {
13+
link.addEventListener('click', function (e) {
14+
e.preventDefault()
15+
this.classList.toggle('active')
16+
this.nextElementSibling.classList.toggle('open')
4717
})
4818
})
49-
50-
$('.data-filter-column').addClass('hide').filter($filteredResultsData).addClass('show').removeClass('hide')
51-
// add class for data-filter-column
52-
for (var i = 0; i < $filteredResultsData.length; i++) {
53-
if (i % 2 === 1) {
54-
$filteredResultsData[i].classList.add('even')
19+
// // add class even odd
20+
allData.forEach(function (column, index) {
21+
if (index % 2 === 1) {
22+
allData[index].classList.add('even')
5523
} else {
56-
$filteredResultsData[i].classList.add('odd')
57-
}
58-
}
59-
// reset all check mark
60-
$('#clearALLBtn').click(function (event) {
61-
selectedFiltersData = []
62-
$('.data-filter-column').removeClass('hide').removeClass('show').removeClass('odd').removeClass('even')
63-
var inputs = $('.check-mark')
64-
for (var j = 0; j < inputs.length; j++) {
65-
inputs[j].checked = false
66-
}
67-
for (var i = 0; i < $allData.length; i++) {
68-
if (i % 2 === 1) {
69-
$allData[i].classList.add('even')
70-
} else {
71-
$allData[i].classList.add('odd')
72-
}
24+
allData[index].classList.add('odd')
7325
}
7426
})
75-
})
27+
// // for filter menus
28+
var filterMenuCheckboxes = document.querySelectorAll('input[type="checkbox"]')
29+
var selectedFiltersData = {}
30+
filterMenuCheckboxes.forEach(function (checkbox) {
31+
checkbox.addEventListener('change', function (event) {
32+
event.preventDefault()
33+
var self = this
34+
/*eslint no-unused-vars: "error"*/
35+
// var checkedData = [].filter.call(filterMenuCheckboxes, function (el) {
36+
// return el.checked
37+
// })
38+
if (checkbox.checked === true) {
39+
if (!Object.prototype.hasOwnProperty.call(selectedFiltersData, self.name)) {
40+
selectedFiltersData[self.name] = []
41+
}
42+
selectedFiltersData[self.name].push(self.value.toLowerCase())
43+
}
44+
if (checkbox.checked === false) {
45+
var index = selectedFiltersData[self.name].indexOf(self.value)
46+
if (selectedFiltersData[self.name].length === 1) {
47+
delete selectedFiltersData[self.name]
48+
} else {
49+
selectedFiltersData[self.name].splice(index, 1)
50+
}
51+
}
52+
// remove odd even class while clicking on checkbox
53+
allData.forEach(function (column) {
54+
column.classList.remove('odd')
55+
column.classList.remove('even')
56+
})
57+
var filteredResultsData = Array.from(document.querySelectorAll('.data-filter-column'))
58+
// for each function with object keys
59+
Object.keys(selectedFiltersData).forEach(function (value) {
60+
// // set value from filter
61+
var filterValues = selectedFiltersData[value]
62+
filteredResultsData = filteredResultsData.filter(function (filterableData) {
63+
var matched = false
64+
var currentFilterData = Array.from(filterableData.querySelectorAll('.sub-heading'))
65+
var currentFilterValuesData
66+
currentFilterData.forEach(function (currentFilterDataItem) {
67+
var filterSplitValue = currentFilterDataItem.dataset.category.toLowerCase().split(' ')
68+
currentFilterValuesData = filterSplitValue
69+
})
70+
var currentFilterValues = currentFilterValuesData
71+
Array.prototype.forEach.call(currentFilterValues, function (currentFilterValue) {
72+
if (filterValues.indexOf(currentFilterValue) !== -1) {
73+
// console.log('true', currentFilterValue, filterValues)
74+
matched = true
75+
return false
76+
}
77+
})
78+
// if matched is true the current .data-filter-column element is returned
79+
return matched
80+
}) // filter loop end
81+
})
82+
// First hide all data column
83+
allData.forEach(function (dataColumn) {
84+
dataColumn.classList.add('hide')
85+
})
86+
// display filter result data column
87+
filteredResultsData.forEach(function (result, idn) {
88+
result.classList.add('show')
89+
result.classList.remove('hide')
90+
if (idn % 2 === 1) {
91+
result.classList.add('even')
92+
} else {
93+
result.classList.add('odd')
94+
}
95+
})
96+
var clearALLBtn = document.getElementById('clearALLBtn')
97+
clearALLBtn.addEventListener('click', function (event) {
98+
event.preventDefault()
99+
selectedFiltersData = []
100+
// remove all classes
101+
allData.forEach(function (dataColumn, idx) {
102+
dataColumn.classList.remove('hide')
103+
dataColumn.classList.remove('show')
104+
dataColumn.classList.remove('odd')
105+
dataColumn.classList.remove('even')
106+
if (idx % 2 === 1) {
107+
dataColumn.classList.add('even')
108+
} else {
109+
dataColumn.classList.add('odd')
110+
}
111+
})
112+
113+
var inputs = document.querySelectorAll('.check-mark')
114+
for (var j = 0; j < inputs.length; j++) {
115+
inputs[j].checked = false
116+
}
117+
})
118+
}) // checkbox click event end
119+
}) // filterMenuCheckboxes end
120+
} // if condition end
76121
/*eslint-env jquery*/
77-
})(jQuery)
122+
})()

0 commit comments

Comments
 (0)