-
Notifications
You must be signed in to change notification settings - Fork 3
/
visual.js
141 lines (128 loc) · 4.44 KB
/
visual.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
// Add active class to the current button (highlight it)
// function layerNames(){
// var header = document.getElementById("btn-DIV");
// var btns = header.getElementsByClassName("layer-btn");
// for (var i = 0; i < btns.length; i++) {
// btns[i].addEventListener("click", function () {
// var current = document.getElementsByClassName("active");
// current[0].className = current[0].className.replace(" active", "");
// this.className += " active";
// });
// }
// }
var age = document.getElementById("age-legend");
var concrete = document.getElementById("concrete-legend");
var brick = document.getElementById("brick-legend");
var stone = document.getElementById("stone-legend");
var glass = document.getElementById("glass-legend");
var metal = document.getElementById("metal-legend");
var wood = document.getElementById("wood-legend");
var legend = document.getElementById("legend");
function noneToggle() {
age.style.display = "none";
concrete.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function ageToggle(){
age.style.display = "none";
var element = document.getElementById("age-legend");
if (element.style.display === "none") {
element.style.display = "block";}
concrete.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function concreteToggle(){
concrete.style.display = "none";
var element = document.getElementById("concrete-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function brickToggle(){
brick.style.display = "none";
var element = document.getElementById("brick-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
concrete.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function stoneToggle(){
stone.style.display = "none";
var element = document.getElementById("stone-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
concrete.style.display = "none";
brick.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function glassToggle(){
glass.style.display = "none";
var element = document.getElementById("glass-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
concrete.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
metal.style.display = "none";
wood.style.display = "none";
}
function metalToggle(){
metal.style.display = "none";
var element = document.getElementById("metal-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
concrete.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
wood.style.display = "none";
}
function woodToggle(){
wood.style.display = "none";
var element = document.getElementById("wood-legend");
if (element.style.display === "none") {
element.style.display = "block";}
age.style.display = "none";
concrete.style.display = "none";
brick.style.display = "none";
stone.style.display = "none";
glass.style.display = "none";
metal.style.display = "none";
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();