Skip to content

Commit fc50423

Browse files
mcguinlumcguinlu
committed
Add pop-up with options to show titles/colourblind option
1 parent f2a9a04 commit fc50423

3 files changed

Lines changed: 130 additions & 29 deletions

File tree

‎dartDown.css‎

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ body {
2727
color: #d2d469;
2828
}
2929

30+
.colourblind .howth, .colourblind .bray {
31+
color: #0077BB;
32+
}
33+
3034
.howth-title, .bray-title {
3135
color: #d2d469;
3236
font-size: 0.25em;
@@ -38,6 +42,10 @@ body {
3842
user-select: none; /* Standard */
3943
}
4044

45+
.colourblind .howth-title, .colourblind .bray-title {
46+
color: #0077BB;
47+
}
48+
4149
.malahide-title, .greystones-title {
4250
color: #4c6a44;
4351
font-size: 0.25em;
@@ -54,6 +62,14 @@ body {
5462
color: #4c6a44;
5563
}
5664

65+
.colourblind .malahide, .colourblind .greystones {
66+
color: #EE7733;
67+
}
68+
69+
.colourblind .malahide-title, .colourblind .greystones-title {
70+
color: #EE7733;
71+
}
72+
5773
.line-container {
5874
display: flex;
5975
flex-direction: column;
@@ -70,8 +86,7 @@ body {
7086
.show-titles .howth-title,
7187
.show-titles .bray-title,
7288
.show-titles .malahide-title,
73-
.show-titles .greystones-title,
74-
.show-titles .info-icon {
89+
.show-titles .greystones-title {
7590
opacity: 1;
7691
}
7792

@@ -81,13 +96,7 @@ body {
8196
right: 15px;
8297
color: white;
8398
font-size: 0.1em;
84-
opacity: 0;
85-
transition: opacity 0.5s ease;
86-
text-decoration: none;
87-
-webkit-user-select: none;
88-
-moz-user-select: none;
89-
-ms-user-select: none;
90-
user-select: none;
99+
opacity: 0.25;
91100
}
92101

93102
#lines {
@@ -118,3 +127,58 @@ body {
118127
font-size: 0.25em;
119128
text-align: center;
120129
}
130+
131+
.popup-menu {
132+
position: fixed;
133+
top: 5px;
134+
right: 10px;
135+
background: rgb(0, 0, 0);
136+
padding: 3px;
137+
border-radius: 5px;
138+
opacity: 1;
139+
display: none;
140+
}
141+
142+
.toggle-switch {
143+
display: flex;
144+
align-items: center;
145+
font-size: 20px;
146+
color: white;
147+
cursor: pointer;
148+
padding: 10px;
149+
line-height: normal;
150+
}
151+
152+
.toggle-switch input {
153+
display: none;
154+
}
155+
156+
.slider {
157+
position: relative;
158+
display: inline-block;
159+
width: 30px;
160+
height: 12px;
161+
background-color: #ccc;
162+
border-radius: 15px;
163+
margin-right: 10px;
164+
}
165+
166+
.slider:before {
167+
position: absolute;
168+
content: "";
169+
height: 8px;
170+
width: 8px;
171+
left: 2px;
172+
bottom: 2px;
173+
background-color: white;
174+
border-radius: 50%;
175+
transition: 0.4s;
176+
}
177+
178+
input:checked + .slider {
179+
background-color: #4CAF50;
180+
}
181+
182+
input:checked + .slider:before {
183+
transform: translateX(15px);
184+
}

‎dartDown.js‎

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,52 @@ const fontWidth = 100 / (MAX_TRAINS_PER_DIRECTION * 1.5);
1515
document.body.style.fontSize = `${fontWidth}vw`;
1616

1717
document.addEventListener('DOMContentLoaded', () => {
18-
// Handle clicks anywhere in the document
19-
document.addEventListener('click', (event) => {
20-
const containers = document.querySelectorAll('.line-container');
21-
const lines = document.querySelector('#lines');
22-
const infoIcon = document.querySelector('.info-icon');
18+
const infoIcon = document.querySelector('.info-icon');
19+
const popupMenu = document.querySelector('.popup-menu');
20+
const titleToggle = document.getElementById('titleToggle');
21+
const colourToggle = document.getElementById('colourToggle');
22+
const lines = document.querySelector('#lines');
23+
const containers = document.querySelectorAll('.line-container');
24+
25+
// Show/hide popup when clicking info icon
26+
infoIcon.addEventListener('click', (event) => {
27+
event.preventDefault(); // Prevent navigation to about.html
28+
popupMenu.style.display = popupMenu.style.display === 'none' ? 'block' : 'none';
29+
});
30+
31+
// Handle toggle switch changes
32+
titleToggle.addEventListener('change', () => {
33+
const shouldShow = titleToggle.checked;
2334

24-
// Don't toggle if clicking directly on the info icon
25-
if (!event.target.closest('.info-icon')) {
26-
// Toggle show-titles class on containers and info icon
27-
const shouldShow = !lines.classList.contains('show-titles');
28-
29-
containers.forEach(c => {
30-
if (shouldShow) {
31-
c.classList.add('show-titles');
32-
} else {
33-
c.classList.remove('show-titles');
34-
}
35-
});
36-
37-
lines.classList.toggle('show-titles');
38-
infoIcon.classList.toggle('show-titles');
35+
containers.forEach(c => {
36+
if (shouldShow) {
37+
c.classList.add('show-titles');
38+
} else {
39+
c.classList.remove('show-titles');
40+
}
41+
});
42+
43+
if (shouldShow) {
44+
lines.classList.add('show-titles');
45+
infoIcon.classList.add('show-titles');
46+
} else {
47+
lines.classList.remove('show-titles');
48+
infoIcon.classList.remove('show-titles');
49+
}
50+
});
51+
52+
colourToggle.addEventListener('change', () => {
53+
if (colourToggle.checked) {
54+
document.body.classList.add('colourblind');
55+
} else {
56+
document.body.classList.remove('colourblind');
57+
}
58+
});
59+
60+
// Close popup when clicking outside
61+
document.addEventListener('click', (event) => {
62+
if (!event.target.closest('.icon')) {
63+
popupMenu.style.display = 'none';
3964
}
4065
});
4166
});

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,18 @@
9797
<a class="info-icon" href="about.html" target="_blank">
9898
<i class="fas fa-info"></i>
9999
</a>
100+
<div class="popup-menu">
101+
<label class="toggle-switch">
102+
<input type="checkbox" id="titleToggle">
103+
<span class="slider"></span>
104+
Show Destinations
105+
</label>
106+
<label class="toggle-switch">
107+
<input type="checkbox" id="colourToggle">
108+
<span class="slider"></span>
109+
Colourblind Mode
110+
</label>
111+
</div>
100112
</div>
101113
<div class="line-container">
102114
<div class="titles">

0 commit comments

Comments
 (0)