-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhighlightmap.js
87 lines (70 loc) · 2.63 KB
/
highlightmap.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
(function (containerId) {
const prefix = "hlm";
const circleLinkSelector = `.${prefix}-visualmap a`;
const highlightSelector = `.${prefix}-highlights .${prefix}-highlight`;
const buttonSelector = `.${prefix}-controls .${prefix}-`;
const defaultHighlightSelector = "#hlm-highlight-0";
const container = document.getElementById(containerId);
const circleLinksArray = [...container.querySelectorAll(circleLinkSelector)];
const highlightsArray = [...container.querySelectorAll(highlightSelector)];
const selector = `.${prefix}-controls ${prefix}-next`;
const buttonNext = container.querySelector(buttonSelector + "next");
const buttonPrev = container.querySelector(buttonSelector + "prev");
buttonNext.addEventListener("click", (e) => {
incrementHighlight(1);
});
buttonPrev.addEventListener("click", (e) => {
incrementHighlight(-1);
});
circleLinksArray.forEach((link) => {
const highlight = document.querySelector(link.href.baseVal);
link.addEventListener("click", (e) => {
event.preventDefault();
changeHighlight(link.href.baseVal);
});
});
function changeHighlight(highlightId) {
let highlight = container.querySelector(`#${highlightId}`);
if (highlight === null) return;
if (highlight.classList.contains("selected")) {
highlight.classList.remove("selected");
container
.querySelector(defaultHighlightSelector)
.classList.add("selected");
circleLinksArray.forEach((circleLink) => {
[...circleLink.children].forEach((child) => {
child.classList.remove("selected");
});
});
} else {
//Update which highlight is selected
highlightsArray.forEach((highlight) => {
if (highlightId !== highlight.id)
highlight.classList.remove("selected");
});
highlight.classList.add("selected");
//TODO: Update which circles are selected
circleLinksArray.forEach((circleLink) => {
[...circleLink.children].forEach((child) => {
if (circleLink.href.baseVal === highlightId) {
child.classList.add("selected");
} else {
child.classList.remove("selected");
}
});
});
}
}
function incrementHighlight(increment) {
const index = highlightsArray.findIndex((highlight) => {
return highlight.classList.contains("selected");
});
let nextIndex = index + increment;
if (nextIndex >= highlightsArray.length) {
nextIndex = 0;
} else if (nextIndex < 0) {
nextIndex = highlightsArray.length - 1;
}
changeHighlight(highlightsArray[nextIndex].id);
}
})("hybrid-classroom-widget");