This repository has been archived by the owner on Oct 29, 2022. It is now read-only.
forked from ncats/ls-font
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.js
77 lines (60 loc) · 2.33 KB
/
demo.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
function printRules() {
let popupShown = false;
const prefix = '.icon-lsi-';
const cleanPrefix = 'icon-lsi-';
const postfix = '::before';
const parent = document.getElementById("rules");
const searchInput = document.getElementById("search");
const popup = document.getElementById("popup");
const popupBack = document.getElementById("popup-back");
const previewIcon = document.getElementById("preview-icon");
const previewText = document.getElementById("preview-text");
const previewCode = document.getElementById("preview-code");
searchInput.addEventListener('keyup', () => runSearch());
popupBack.addEventListener('click', () => hidePopup());
document.addEventListener('keyup', (e) => {
if (popupShown && e.code == 'Escape') {
hidePopup();
}
})
hidePopup();
const rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
let values = [];
for (let x = 0; x < rules.length; x++) {
values.push(rules[x].selectorText);
}
values = values.filter(x => x && x.indexOf(prefix) === 0).map(s => s.slice(prefix.length, s.length - postfix.length)).sort();
const elements = [];
for (let x = 0; x < values.length; x++) {
const el = document.createElement('li');
el.className = "flex-item";
el.innerHTML = '<i class="' + cleanPrefix + values[x] + '"></i><span>' + values[x] + '</span>';
el.addEventListener('click', () => showPopup(values[x]));
parent.appendChild(el);
elements.push(el);
}
function showPopup(x) {
previewText.innerHTML = cleanPrefix + x;
previewIcon.className = cleanPrefix + x;
previewCode.innerHTML = cleanPrefix + x;
popupShown = true;
popupBack.style.display = 'block';
popup.style.display = 'block';
}
function hidePopup() {
popupShown = false;
popupBack.style.display = 'none';
popup.style.display = 'none';
}
function runSearch(e) {
const searchValue = searchInput.value;
values.forEach((val, index) => {
if (searchValue && val.indexOf(searchValue) === -1) {
elements[index].style.display = 'none';
} else {
elements[index].style.display = 'block';
}
});
}
}
printRules();