-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
121 lines (86 loc) · 3.42 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
document.getElementById("cardheader").style.display = "none";
}
else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
container.find('.search-input').val('');
window.setTimeout(function () {
document.getElementById("cardheader").style.display = "block";
}, 400);
}
};
function swipedestruct(obj,e){
console.log("swipedestruct activated!!");
setTimeout(function(){
document.querySelector('div.swipe').style.display = 'none';
console.log("swipe destroyed.");
}, 6000);
document.querySelector('#par').removeEventListener('mouseover',swipedestruct);
};
document.querySelector('#par').addEventListener('mouseover',swipedestruct);
// document.getElementsByClassName('search-icon')[0].addEventListener('click', ()=>{
// console.log("I'm pressed!!");
// })
document.getElementsByClassName('search-icon')[0].addEventListener('click',()=>{
let si = document.querySelector('input.search-input');
setTimeout(()=>{
si.focus();
},500);
setTimeout(()=>{
document.querySelector('.search-wrapper .input-holder .search-input').style.border = 'solid 3px #c978ee83';
document.querySelector('.search-wrapper .input-holder .search-input').style.borderBottom = 'none';
},400)
})
document.querySelector('.search-input').addEventListener('input', ()=>{
let keyword = document.querySelector('input.search-input').value;
if (keyword == ''){
console.log("Empty String Input Test");
resetDOM();
}
updateDOM(keyword);
});
document.querySelector('span.close').addEventListener('click',resetDOM);
function resetDOM (){
console.log('in resetdom !!');
const cardNames = document.getElementsByClassName('card');
let cardsCollection = [...cardNames];
temp = cardsCollection.map((card) => card.style.display = 'block');
document.querySelector('.cards').style["flexWrap"] = 'wrap';
document.querySelector('.cards').style["flexDirection"] = 'column';
};
function updateDOM(key){
const cardNames = document.getElementsByClassName('card');
// for (let x in cardNames){
// console.log(x);
// }
let inp = key.toLowerCase();
let cardsCollection = [...cardNames];
cardsArr = cardsCollection.map((card)=> card.textContent);
let matchIndices = []
if(inp != ""){
temp = cardsCollection.map((card) => card.style.display = 'none');
for(let i=0; i<cardsArr.length; i++){
if(cardsArr[i].toLowerCase().includes(inp)){
matchIndices.push(i);
}
}
document.querySelector('.cards').style["flexWrap"] = 'nowrap';
document.querySelector('.cards').style["flexDirection"] = 'row';
for(let x = 0; x<matchIndices.length; x++){
let t = matchIndices[x] + 3;
let rem = document.querySelector(`.cards :nth-child(${t})`);
rem.style.display = 'block';
}
}
}
// for (let x in cardNames){
// console.log(x);
// }
// console.log(cardNames[35].textContent);
// console.log(cardsArr[35]);
// cardsFilt = cardsArr.filter((el)=>{ })