Skip to content

Commit 9dfb1d2

Browse files
kellyhutchinskellyhutchins
authored
Merge pull request #7 from geospatialem/add-prefers-reduced-motion-sample
Add prefers reduced motion sample
2 parents a2d488b + c52ac66 commit 9dfb1d2

File tree

6 files changed

+92
-94
lines changed

6 files changed

+92
-94
lines changed

‎demos/description-region/app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ const toggleModeEl = document.getElementById("toggle-mode");
22
const mapEl = document.querySelector("arcgis-map");
33
const darkModeCss = document.getElementById("jsapi-mode-dark");
44
const lightModeCss = document.getElementById("jsapi-mode-light");
5-
const liveRegion = document.getElementById("liveRegion");
65

6+
const liveRegion = document.getElementById("liveRegion");
77
let mode = "light";
8-
98
toggleModeEl.addEventListener("click", handleModeChange);
9+
1010
mapEl.addEventListener("arcgisViewReadyChange", handleArcgisViewReadyChange);
1111

1212
function handleArcgisViewReadyChange(event) {
@@ -26,7 +26,7 @@ function handleModeChange() {
2626
lightModeCss.disabled = isDarkMode;
2727
toggleModeEl.icon = isDarkMode ? "moon" : "brightness";
2828
document.body.className = isDarkMode ? "calcite-mode-dark" : "";
29-
29+
mapEl.basemap = isDarkMode ? "dark-gray" : "gray";
3030
document.querySelectorAll(`.calcite-mode-${isDarkMode ? "light" : "dark"}`).forEach(node =>
3131
node.classList.replace(`calcite-mode-${isDarkMode ? "light" : "dark"}`, `calcite-mode-${mode}`)
3232
);

‎demos/description-region/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" />
6-
<title>2025 Esri Developer & Technology Summit - Map Description and Live Updates</title>
6+
<title>Map Description</title>
77

88
<!-- Calcite imports -->
99
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

‎demos/description-region/style.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,9 @@ body.calcite-mode-dark calcite-navigation-logo{
1111

1212

1313
html,
14-
body,
15-
arcgis-map {
16-
padding: 0;
14+
body {
1715
margin: 0;
1816
height: 100%;
19-
width: 100%;
2017
}
2118

2219
calcite-shell-panel[slot="panel-start"] calcite-panel {

‎demos/reduced-motion/app.js‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,72 @@
1+
// DOM Elements
2+
const mapEl = document.querySelector("arcgis-map");
3+
const animationControl = document.getElementById("animationControl");
14

2-
const navigationEl = document.getElementById("nav");
5+
// Maps to store original and disabled renderers
6+
const originalRenderers = new Map();
7+
const disabledRenderers = new Map();
38

4-
const arcgisMap = document.querySelector("arcgis-map");
9+
// Event listeners
10+
animationControl.addEventListener("calciteSwitchChange", (event) => handleAnimation(event.target.checked));
11+
mapEl.addEventListener("arcgisViewReadyChange", handleArcgisViewReadyChange);
512

13+
/**
14+
* Handles the ArcGIS view ready change event.
15+
* Iterates through each layer in the map and clones its renderer.
16+
* Creates a disabled version of the renderer with animations disabled.
17+
* Stores the original and disabled renderers in respective maps.
18+
*/
19+
function handleArcgisViewReadyChange() {
20+
const map = mapEl.map;
621

22+
map.layers.forEach(layer => {
23+
const originalRenderer = layer.renderer?.clone();
24+
if (originalRenderer) {
25+
originalRenderers.set(layer.id, originalRenderer);
26+
disabledRenderers.set(layer.id, disableAnimationsInRenderer(originalRenderer.clone()));
27+
}
28+
});
29+
30+
const mediaQuery = window.matchMedia("(prefers-reduced-motion)");
31+
animationControl.checked = mediaQuery.matches;
32+
handleAnimation(mediaQuery.matches);
33+
}
34+
35+
/**
36+
* Handles the animation control switch change event.
37+
* Sets the renderer based on the reduced motion preference.
38+
* @param {boolean} prefersReduced - Indicates if reduced motion is preferred.
39+
*/
40+
function handleAnimation(prefersReduced) {
41+
const map = mapEl.map;
42+
43+
map.layers.forEach(layer => {
44+
const originalRenderer = originalRenderers.get(layer.id);
45+
const disabledRenderer = disabledRenderers.get(layer.id);
46+
47+
if (originalRenderer && disabledRenderer) {
48+
layer.renderer = prefersReduced ? disabledRenderer : originalRenderer;
49+
layer.refresh();
50+
}
51+
});
52+
}
53+
54+
/**
55+
* Disables animations in the renderer.
56+
* @param {Object} renderer - The renderer object.
57+
* @returns {Object} - The renderer with animations disabled.
58+
*/
59+
function disableAnimationsInRenderer(renderer) {
60+
const disableAnimations = (obj) => {
61+
for (const key in obj) {
62+
if (obj[key] && typeof obj[key] === 'object') {
63+
disableAnimations(obj[key]);
64+
}
65+
if (key === 'playAnimation') {
66+
obj[key] = false;
67+
}
68+
}
69+
};
70+
disableAnimations(renderer);
71+
return renderer;
72+
}

‎demos/reduced-motion/index.html‎

Lines changed: 11 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6-
<title>2025 Esri Developer & Technology Summit - Reduced Motion</title>
6+
<title>Reduced motion</title>
77

88
<!-- Calcite import -->
99
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>
1010

1111
<!-- ArcGIS Maps SDK for JavaScript imports -->
1212
<script src="https://js.arcgis.com/4.32/"></script>
1313
<link id="jsapi-mode-light" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
14-
<link disabled id="jsapi-mode-dark" rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css" />
1514
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
1615

1716
<!-- Demo imports -->
@@ -22,54 +21,20 @@
2221
<body>
2322
<calcite-shell content-behind>
2423
<calcite-navigation slot="header" id="nav">
25-
<calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo" heading="Reduced Motion"
26-
description="Esri Developer & Technology Summit 2025"></calcite-navigation-logo>
27-
24+
<calcite-navigation-logo href="#" icon="accessibility" alt="Application logo" slot="logo"
25+
heading="2025 Esri Developer & Technology Summit - Reduced Motion"
26+
description="Reduced Motion"></calcite-navigation-logo>
27+
<calcite-label slot="content-end" layout="inline">
28+
Disable animation
29+
<calcite-switch id="animationControl"></calcite-switch>
30+
</calcite-label>
2831
</calcite-navigation>
2932

30-
<calcite-shell-panel slot="panel-end" display-mode="float">
31-
<calcite-panel heading="Maps SDK for JavaScript" description="Showcased product">
32-
<calcite-action id="toggle-instructions" text="Instructions" icon="lightbulb"
33-
slot="header-actions-end"></calcite-action>
34-
<calcite-tooltip placement="bottom" reference-element="toggle-instructions" slot="header-actions-end">A quick
35-
get-going hint about this demo</calcite-tooltip>
36-
<calcite-block collapsible heading="Layer effects" description="Adjust blur, highlight, and order">
37-
<calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
38-
<calcite-notice open>
39-
<div slot="message">Use layer effects sparingly, for emphasis</div>
40-
</calcite-notice>
41-
</calcite-block>
42-
43-
<calcite-block collapsible heading="Symbology" description="Select type, color, and transparency">
44-
<calcite-icon scale="s" slot="icon" icon="map-pin"></calcite-icon>
45-
<calcite-label>
46-
Effect type
47-
<calcite-segmented-control width="full">
48-
<calcite-segmented-control-item value="Blur">Blur</calcite-segmented-control-item>
49-
<calcite-segmented-control-item checked value="Highlight">Highlight</calcite-segmented-control-item>
50-
</calcite-segmented-control>
51-
</calcite-label>
52-
53-
<calcite-label>
54-
Something
55-
<calcite-input placeholder="A great placeholder"></calcite-input>
56-
</calcite-label>
57-
<calcite-label>
58-
Something numerical<calcite-input-number value="25" placeholder="--" suffix-text="%"
59-
alignment="end"></calcite-input-number>
60-
</calcite-label>
61-
</calcite-block>
62-
63-
<calcite-fab slot="fab" text="Add something" text-enabled></calcite-fab>
64-
65-
66-
</calcite-panel>
67-
</calcite-shell-panel>
68-
69-
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"> </arcgis-map>
33+
<arcgis-map id="map" item-id="03c4fa085ece410dadd9aa6e44130508">
34+
<arcgis-home position="top-left"></arcgis-home>
35+
</arcgis-map>
7036
</calcite-shell>
7137

72-
7338
</body>
7439

7540
</html>

‎demos/reduced-motion/style.css‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,18 @@
1-
body calcite-navigation-logo{
2-
--calcite-color-text-2:#737373;
1+
body calcite-navigation-logo {
2+
--calcite-color-text-2: #737373;
33
}
4-
body.calcite-mode-dark calcite-navigation-logo{
5-
--calcite-icon-color:#8FD0FF;
6-
--calcite-color-text-2:#C7C7C7;
4+
body.calcite-mode-dark calcite-navigation-logo {
5+
--calcite-icon-color: #8fd0ff;
6+
--calcite-color-text-2: #c7c7c7;
77
}
8-
9-
10-
118
html,
12-
body,
13-
arcgis-map {
14-
padding: 0;
9+
body {
1510
margin: 0;
1611
height: 100%;
17-
width: 100%;
1812
}
19-
20-
calcite-menu-item {
21-
--calcite-menu-background-color: var(--calcite-color-background);
22-
}
23-
2413
calcite-navigation-logo {
2514
--calcite-navigation-logo-heading-color: var(--calcite-color-brand);
2615
}
27-
28-
calcite-shell-panel[slot="panel-start"] calcite-panel {
29-
border-top: 0;
30-
}
31-
32-
calcite-action-pad {
33-
margin-inline-end: 0.5rem;
34-
}
35-
36-
#modal hr {
37-
margin: 1rem 0;
38-
border: 0;
39-
border-bottom: 1px solid var(--calcite-color-border-3);
40-
}
41-
42-
#modal ul li {
43-
margin-bottom: 0.5rem;
44-
}
45-
46-
#modal calcite-notice {
47-
margin-bottom: 1.25rem;
16+
#animationControl {
17+
margin-right: 1.5em;
4818
}

0 commit comments

Comments
 (0)