-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
97 lines (76 loc) · 3.55 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
// getJsonFile принимает в качестве параметра путь к файлу формата JSON
// и возвращает объект
let getJsonFile = (pathToFile) => {
let request = new XMLHttpRequest();
request.open("GET", pathToFile, false);
request.send(null);
let my_JSON_object = JSON.parse(request.responseText);
return my_JSON_object;
};
// функция renderEmojiCards принимает блок объектов
// и рендерит объек в виде карточек в документе
function renderEmojiCards(emoji) {
let mainNode = document.querySelector("main");
emoji.forEach((element) => {
let divCardEmoji = document.createElement("div");
divCardEmoji.className = "card-emoji";
for (key in element) {
let div = document.createElement("div");
div.className = `${key}`;
if (key == 'keywords') {
let res = element[key].split(' ');
res = [...new Set(res)].join(' '); // помещаем значения ключевых слов в Set для удаления дубликатов
element[key] = res;
}
div.append(element[key]);
divCardEmoji.append(div);
mainNode.append(divCardEmoji);
}
});
}
// функция getBlockEmoji принимает объект данных и индекс начала поиска
// и зовращает блок с которого начинался поиск
function getBlockEmoji(emoji, indexEmoji) {
let blockEmoji = [];
for (let i = indexEmoji; i < indexEmoji + 20; i++) {
blockEmoji[i] = emoji[i];
}
return blockEmoji;
}
// функция scrollEmoji принимает блок, объек с данными и индекс начала поиска
// вызывает функцию рендера блока и переопределяет индекс начала поиска
function scrollEmoji(block, allEmoji, startIndexEmoji) {
while(true) {
// нижняя граница документа
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// если меньше 100px до конца
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
block = getBlockEmoji(allEmoji, startIndexEmoji);
renderEmojiCards(block);
startIndexEmoji = block.length;
}
}
// функция searchEmoji принимает в качестве аргумента массив объектов с эмоджи
// и отображает эмоджи заданные в поле input
function searchEmoji(allEmoji) {
let InputValue = document.querySelector('input').value.toLowerCase().trim();
let startIndexEmoji = 0;
// res получет массив объектов соответствующих условию
let res = allEmoji.filter((elem) => {
return ((elem.title.includes(InputValue)) || (elem.keywords.includes(InputValue)));
});
let block = getBlockEmoji(res, startIndexEmoji);
document.querySelector('main').innerHTML = '';
renderEmojiCards(block);
startIndexEmoji = block.length;
window.addEventListener('scroll', () => scrollEmoji(block, res, startIndexEmoji));
}
(function main() {
let allEmoji = getJsonFile("https://raw.githubusercontent.com/dead142/emoji/main/emoji.json");
let startIndexEmoji = 0;
let block = getBlockEmoji(allEmoji, startIndexEmoji);
renderEmojiCards(block);
startIndexEmoji = block.length;
window.addEventListener('scroll', () => scrollEmoji(block, allEmoji, startIndexEmoji));
window.addEventListener('input', () => searchEmoji(allEmoji));
})();