-
Notifications
You must be signed in to change notification settings - Fork 1
/
high-contrast.html
118 lines (100 loc) · 4.49 KB
/
high-contrast.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
<!-- Codepen: https://codepen.io/geospatialem/pen/XWGLLwO -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>High contrast</title>
<link id="dark-style" rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" />
<link id="light-style" rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" disabled />
<script src="https://js.arcgis.com/4.29/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.6.0/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.6.0/calcite.esm.js"></script>
<style>
#mapEl {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="calcite-mode-dark">
<calcite-shell content-behind>
<calcite-navigation slot="header" id="nav">
<calcite-navigation-logo icon="accessibility" slot="logo" heading="High Contrast"
description="Esri Developer Summit 2024"></calcite-navigation-logo>
<calcite-action-pad layout="horizontal" expand-disabled slot="content-end">
<calcite-action id="toggle-mode" text="Toggle mode" icon="brightness"></calcite-action>
</calcite-action-pad>
<calcite-tooltip placement="bottom" reference-element="toggle-mode" slot="content-end">Toggle
mode</calcite-tooltip>
</calcite-navigation>
<calcite-panel>
<arcgis-map item-id="5255b3b101594f259ce4326671e8d5c6" id="mapEl" zoom="2">
<arcgis-legend legend-style="classic" position="bottom-right"></arcgis-legend>
</arcgis-map>
</calcite-panel>
</calcite-shell>
</body>
<script>
require(["esri/Basemap"], (Basemap) => {
const mapEl = document.getElementById("mapEl");
// High contrast basemap (dark)
const highContrastDarkBasemap = new Basemap({
portalItem: {
id: "3e23478909194c54992eaaee78b5f754" // Dark
},
title: "High contrast dark theme",
id: "high-contrast-dark"
});
// High contrast basemap (light)
const highContrastLightBasemap = new Basemap({
portalItem: {
id: "084291b0ecad4588b8c8853898d72445" // Light
},
title: "High contrast (light theme)",
id: "high-contrast-light"
});
// Mode
let mode = "dark";
const toggleModeEl = document.getElementById("toggle-mode");
const darkModeCss = document.getElementById("dark-style");
const lightModeCss = document.getElementById("light-style");
// Toggle mode
toggleModeEl.addEventListener("click", () => {
mode = mode === "dark" ? "light" : "dark";
const isDarkMode = mode === "dark";
darkModeCss.disabled = !darkModeCss.disabled;
lightModeCss.disabled = !lightModeCss.disabled;
const widgets = document.getElementsByClassName("esri-ui");
for (let i = 0; i < widgets.length; i++) {
widgets.item(i).classList.toggle("calcite-mode-dark");
widgets.item(i).classList.toggle("calcite-mode-light");
}
// If high contrast is enabled, display a high contrast basemap
// Else display a gray basemap
if (contrastMedia.matches) {
mapEl.basemap = isDarkMode ? highContrastDarkBasemap : highContrastLightBasemap;
} else {
mapEl.basemap = isDarkMode ? "dark-gray-vector" : "gray-vector";
}
toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
document.body.className = isDarkMode ? "calcite-mode-dark" : undefined;
});
// High contrast support with basemap and layer effects
const contrastMedia = matchMedia("(forced-colors: active)");
function checkContrastMedia() {
if (mode == "dark") {
mapEl.basemap = contrastMedia.matches ? highContrastDarkBasemap : "dark-gray-vector";
contrastMedia.matches ? mapEl.map.layers._items[2].effect = "bloom(1.5, 0.5px, 0.1)" : mapEl.map.layers._items[2].effect = "bloom(0, 0px, 0)";
} else {
mapEl.basemap = contrastMedia.matches ? highContrastLightBasemap : "gray-vector";
contrastMedia.matches ? mapEl.map.layers._items[2].effect = "drop-shadow(3px, 1px, 3px)" : mapEl.map.layers._items[2].effect = "drop-shadow(0px, 0px, 0px)";
}
}
// Event listeners on map load and high contrast media query
mapEl.addEventListener("arcgisViewChange", checkContrastMedia);
contrastMedia.addListener(checkContrastMedia);
});
</script>
</html>