-
Notifications
You must be signed in to change notification settings - Fork 1
/
settings.html
136 lines (116 loc) · 5.54 KB
/
settings.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--Web App Manifest-->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#317EFB"/>
<title>Rivers.run - Settings</title>
</head>
<body>
<style>
h1 {
text-align: center;
}
select {
font-size: 16px;
}
@media (prefers-color-scheme: dark) {
html, body {
background-color: black;
color: #cccccc;
}
}
</style>
<script src="packages/allPages.js"></script>
<h1>Settings</h1>
<h3>Theme (Color Scheme)</h3>
<select id="userTheme">
<option value="null">Default</option>
<option value="false">Light</option>
<option value="true">Dark</option>
</select>
<p id="darkModeDefaultExplanation">Default: Use device theme if provided, otherwise light theme (it looks like there was an error. JavaScript on this page should have updated this text to tell you if your device provides a color scheme to use)</p>
<h3>Home Page Default Search</h3>
<select id="homePageDefaultSearch">
<option value="null">None (Display All Rivers)</option>
<option value="favorites">Display Favorites by Default</option>
</select>
<p>Default: None. You can choose to display your favorites by default on the home page. </p>
<h3>Color Blind Mode</h3>
<select id="colorBlindMode">
<option value="null">Default (No)</option>
<option value="false">No</option>
<option value="true">Yes</option>
</select>
<p>Color blind mode will adjust the relative flow coloring scheme, as well as graph colors. </p>
<h3>Offline Map Resolution (US and World)</h3>
<p>Increasing resolution will require a relatively small (under 20MB) download, unless the images are already stored on your device. </p>
<p>Higher resolution maps may take (substantially) longer to load on some devices. </p>
US Map Resolution: <select id="usMapResolution">
<option value="null">Standard - Zoom 6</option>
<option value="7">Enhanced (4x) - Zoom 7</option>
<option value="8">High (16x) - Zoom 8</option>
</select>
<br>
World Map Resolution: <select id="worldMapResolution">
<option value="null">Standard - Zoom 3</option>
<option value="4">Enhanced (4x) - Zoom 4</option>
<option value="5">High (16x) - Zoom 5</option>
</select>
<p>Default: Standard Resolution. Specified zoom levels correspond to those on most mapping applciations, including OpenStreetMap and Google Maps. </p>
</p>
<script>
let setup = []
//Wait for storage sync,
if (window.syncStoragePromise) {
setup.push(window.syncStoragePromise)
setup.push(new Promise(function(r) {setTimeout(r, 1000)})) //Timeout
}
else {
setup.push(new Promise(function(r) {r()}))
}
Promise.race(setup).then(() => {
let ids = ["userTheme", "colorBlindMode", "usMapResolution", "worldMapResolution", "homePageDefaultSearch"]
ids.forEach((id) => {
let elem = document.getElementById(id)
elem.value = localStorage.getItem(id)
//On iOS (Ionic and Safari), changing the setting and clicking the page works, but any successive changes to the setting will be ignored
//until the selector is deselected and reselected.
document.addEventListener("click", function(event) {
if (event.target !== elem) {
elem.blur()
}
})
elem.addEventListener("change", function(event) {
//We can't just set the value to null - locaStorage would stringify it
if (elem.value === "null") {
localStorage.removeItem(id)
}
else {
localStorage.setItem(id, elem.value)
}
if (window.isNative) {
elem.blur() //iOS doesn't deselect these without doing some weird things.
}
window.dispatchEvent(new Event("storage")) //Allow this page to pick up the color scheme change. May not be needed.
})
})
let explanation = document.getElementById("darkModeDefaultExplanation")
let browserSupportsDarkMode = window.matchMedia('(prefers-color-scheme: dark)').media !== "not all"
if (browserSupportsDarkMode) {
window.mediaWatch = window.matchMedia('(prefers-color-scheme: dark)')
function setText() {
let currentTheme = mediaWatch.matches ? "dark": "light"
explanation.innerHTML = "Selecting Default causes rivers.run to use the theme provided by your device (" + currentTheme + ")"
}
mediaWatch.onchange = setText
setText()
}
else {
explanation.innerHTML = "Selecting Default causes rivers.run to use the light theme - your device does not provide rivers.run the theme to use"
}
})
</script>
</body>
</html>