-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
108 lines (95 loc) · 2.58 KB
/
index.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
import Glyph from "Glyph";
// const Glyph = require("./_data/Glyph");
const displayArea = document.getElementById("glyph-container");
const btnAddL = document.getElementById("addL");
const btnAddR = document.getElementById("addR");
const glyphs = document.getElementsByClassName("glyph");
const colors = [
"red",
"orange",
"yellow",
"green",
"blue",
"indigo",
"violet",
"white",
];
function init() {
const setColor = {
addColorClass(glyph, color) {
glyph.classList.add(`${color}-glyph`);
},
removeColorClass(glyph) {
let colorRegEx = /^\w*-glyph/gm;
let iterator = glyph.classList.values();
for (let value of iterator) {
glyph.classList.remove(value.match(colorRegEx));
}
},
};
let selectedGlyph = "";
let selectedColor = "";
let observer = new MutationObserver(function () {
glyphListener();
});
observer.observe(displayArea, {
subtree: true,
childList: true,
});
function glyphButtons() {
const glyph = new Glyph();
// left button
btnAddL.addEventListener("click", () => {
//add svg, i.e., html, to '#output'
displayArea.insertAdjacentHTML("afterbegin", glyph.left);
});
// add with "J" key
window.addEventListener("keydown", (event) => {
if (event.code == "KeyJ") {
displayArea.insertAdjacentHTML("afterbegin", glyph.left);
}
});
// right button
btnAddR.addEventListener("click", () => {
//add svg, i.e., html, to '#output'
displayArea.insertAdjacentHTML("afterbegin", glyph.right);
});
// add with "K" key
window.addEventListener("keydown", (event) => {
if (event.code == "KeyK") {
displayArea.insertAdjacentHTML("afterbegin", glyph.right);
}
});
}
function colorButtons() {
for (let color of colors) {
let colorBtn = document.getElementById(`${color}Btn`);
colorBtn.addEventListener("click", () => {
selectedColor = color;
setColor.removeColorClass(selectedGlyph);
setColor.addColorClass(selectedGlyph, selectedColor);
});
}
}
function glyphListener() {
for (let glyph of glyphs) {
glyph.addEventListener("focus", () => {
clearSelection();
setColor.removeColorClass(glyph);
glyph.classList.add("glyph-selected");
selectedGlyph = glyph;
});
}
function clearSelection() {
for (let glyph of glyphs) {
glyph.classList.remove("glyph-selected");
selectedGlyph = "";
}
}
}
glyphButtons();
colorButtons();
}
window.addEventListener("load", () => {
init();
});