fix mobile gapminder plot

cmudig · Jul 26, 2024 · 16cb25d · 16cb25d
1 parent 0f9f8b0
commit 16cb25d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -59,6 +59,7 @@ extra_css:
   - assets/custom_styles.css
 extra_header_js:
   - assets/page_refresh.js
+  - http://hammerjs.github.io/dist/hammer.min.js
 # Exclude from processing.
 # The following items will not be processed, by default.
 # Any item listed under the `exclude:` key here will be automatically added to

diff --git a/docs/_posts/2024-04-30-gapminder-accessible.md b/docs/_posts/2024-04-30-gapminder-accessible.md
@@ -5,10 +5,8 @@ title: 'Example: Accessible Gapminder Chart'
 
 Below is a responsive, screen-reader-navigable version of the chart shown on the [homepage]({{ site.baseurl }}/). Press Navigate to enter keyboard navigation. Or, change your "prefers reduced motion" system setting to see fade animations instead of motion.
 
-<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>
-
-<div style="display: flex; max-width: 100%; flex-wrap: wrap; justify-content: stretch;">
-  <div style="flex: 1 0 auto;">
+<div style="display: flex; width: 100%; flex-wrap: wrap; overflow: visible;">
+  <div style="flex: 1 0 auto; max-width: 100%;">
   <button id="navigation-entry" tabindex="0">Navigate</button>
   <button id="navigation-exit" tabindex="0" style="display: none">
       Exit Chart
@@ -17,7 +15,7 @@ Below is a responsive, screen-reader-navigable version of the chart shown on the
   <div
       id="gapminder-chart-container"
       tabindex="0"
-      style="position: relative"
+      style="position: relative; max-height: 50vh;"
       role="figure"
   >
       <svg
@@ -38,7 +36,7 @@ Below is a responsive, screen-reader-navigable version of the chart shown on the
       "
       ></canvas>
   </div>
-  <div style="max-width: 400px">
+  <div style="max-width: 400px; width: 100%;">
       <div
       id="navigation-tooltip"
       style="font-size: 12pt"

diff --git a/docs/assets/gapminder/gapminder_accessible.js b/docs/assets/gapminder/gapminder_accessible.js
@@ -347,6 +347,16 @@ function makeNavigation(
 
   function getCountryOrder(increment = undefined) {
     let year = yearAttr.get();
+    if (!Array.from(perCountryData.values())[0].has(year)) {
+      // round the year
+      yearAttr.set(
+        Array.from(Array.from(perCountryData.values())[0].keys()).reduce(
+          (prev, y) => (Math.abs(y - year) < Math.abs(prev - year) ? y : prev),
+          MinYear
+        )
+      );
+      year = yearAttr.get();
+    }
     let sortedCountries = Array.from(perCountryData.keys()).sort(
       (a, b) =>
         perCountryData.get(a).get(year)[
@@ -588,7 +598,7 @@ export function loadGapminderPlot() {
     );
     const move = (direction) => {
       const nextNode = navigatorInput.move(navigatorState.current, direction);
-      console.log('next node:', nextNode);
+      console.log('next node:', direction, nextNode);
       if (nextNode) {
         focusNode(nextNode);
       }
@@ -714,8 +724,8 @@ export function loadGapminderPlot() {
       mc.off('tap');
       mc.off('doubletap');
       mc.on('swipe', (e) => {
-        if (e.direction == Hammer.DIRECTION_UP) move('up');
-        else if (e.direction == Hammer.DIRECTION_DOWN) move('down');
+        if (e.direction == Hammer.DIRECTION_UP) incrementYear(5);
+        else if (e.direction == Hammer.DIRECTION_DOWN) incrementYear(-5);
         else if (e.direction == Hammer.DIRECTION_LEFT) move('left');
         else if (e.direction == Hammer.DIRECTION_RIGHT) move('right');
         else console.log('unknown direction', e);
@@ -763,6 +773,9 @@ export function loadGapminderPlot() {
             ? navigatorStructure.nodes[selectedCountry]
             : navigatorStructure.nodes.chart
         );
+        setTimeout(() =>
+          document.getElementById('navigation-exit').scrollIntoView()
+        );
       });
     document.getElementById('navigation-exit').addEventListener('click', () => {
       console.log('exiting');
@@ -1081,6 +1094,10 @@ export function loadGapminderPlot() {
     let mouseDown = false;
     canvas.addEventListener('mousedown', () => (mouseDown = true));
     canvas.addEventListener('mousemove', (e) => {
+      if (navigating) {
+        e.preventDefault();
+        return;
+      }
       let mousePos = [
         e.clientX - canvas.getBoundingClientRect().left,
         e.clientY - canvas.getBoundingClientRect().top,