refactor(mon-pix): use auto-scroll service in grain and stepper

1024pix · Jul 10, 2024 · bc2c504 · bc2c504
1 parent ac5e97e
commit bc2c504
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 deletions.
diff --git a/mon-pix/app/components/module/grain.js b/mon-pix/app/components/module/grain.js
@@ -1,10 +1,11 @@
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import ModulePassage from './passage';
-
 export default class ModuleGrain extends Component {
+  @service modulixAutoScroll;
+
   grain = this.args.grain;
 
   static AVAILABLE_ELEMENT_TYPES = ['text', 'image', 'video', 'qcu', 'qcm', 'qrocm'];
@@ -129,19 +130,12 @@ export default class ModuleGrain extends Component {
   }
 
   @action
-  focusAndScroll(element) {
+  focusAndScroll(htmlElement) {
     if (!this.args.hasJustAppeared) {
       return;
     }
 
-    element.focus({ preventScroll: true });
-
-    const newGrainY = element.getBoundingClientRect().top + window.scrollY;
-    const userPrefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-    window.scroll({
-      top: newGrainY - ModulePassage.SCROLL_OFFSET_PX,
-      behavior: userPrefersReducedMotion.matches ? 'instant' : 'smooth',
-    });
+    this.modulixAutoScroll.focusAndScroll(htmlElement);
   }
 
   @action

diff --git a/mon-pix/app/components/module/passage.hbs b/mon-pix/app/components/module/passage.hbs
@@ -6,7 +6,11 @@
     <h1>{{@module.title}}</h1>
   </div>
 
-  <div class="module-passage__content" aria-live="assertive" {{did-insert this.setGrainScrollOffsetCssProperty}}>
+  <div
+    class="module-passage__content"
+    aria-live="assertive"
+    {{did-insert this.modulixAutoScroll.setHTMLElementScrollOffsetCssProperty}}
+  >
     {{#each this.grainsToDisplay as |grain index|}}
       <Module::Grain
         @grain={{grain}}

diff --git a/mon-pix/app/components/module/passage.js b/mon-pix/app/components/module/passage.js
@@ -9,15 +9,18 @@ export default class ModulePassage extends Component {
   @service router;
   @service metrics;
   @service store;
+  @service modulixAutoScroll;
 
   displayableGrains = this.args.module.grains.filter((grain) => ModuleGrain.getSupportedComponents(grain).length > 0);
   @tracked grainsToDisplay = this.displayableGrains.length > 0 ? [this.displayableGrains[0]] : [];
 
-  static SCROLL_OFFSET_PX = 70;
-
   @action
-  setGrainScrollOffsetCssProperty(element) {
-    element.style.setProperty('--scroll-offset', `${ModulePassage.SCROLL_OFFSET_PX}px`);
+  hasGrainJustAppeared(index) {
+    if (this.grainsToDisplay.length === 1) {
+      return false;
+    }
+
+    return this.grainsToDisplay.length - 1 === index;
   }
 
   get hasNextGrain() {
@@ -92,15 +95,6 @@ export default class ModulePassage extends Component {
     return this.args.module.transitionTexts.find((transition) => transition.grainId === grainId);
   }
 
-  @action
-  hasGrainJustAppeared(index) {
-    if (this.grainsToDisplay.length === 1) {
-      return false;
-    }
-
-    return this.grainsToDisplay.length - 1 === index;
-  }
-
   @action
   terminateModule() {
     this.args.passage.terminate();

diff --git a/mon-pix/app/components/module/step.gjs b/mon-pix/app/components/module/step.gjs
@@ -1,9 +1,15 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
 import Element from 'mon-pix/components/module/element';
 import ModuleGrain from 'mon-pix/components/module/grain';
 
+import didInsert from '../../modifiers/modifier-did-insert';
+
 export default class ModulixStep extends Component {
+  @service modulixAutoScroll;
+
   get displayableElements() {
     return this.args.step.elements.filter((element) => ModuleGrain.AVAILABLE_ELEMENT_TYPES.includes(element.type));
   }
@@ -12,9 +18,18 @@ export default class ModulixStep extends Component {
     return this.displayableElements.length > 0;
   }
 
+  @action
+  focusAndScroll(htmlElement) {
+    if (!this.args.hasJustAppeared) {
+      return;
+    }
+
+    this.modulixAutoScroll.focusAndScroll(htmlElement);
+  }
+
   <template>
     {{#if this.hasDisplayableElements}}
-      <section class="stepper__step">
+      <section class="stepper__step" tabindex="-1" {{didInsert this.focusAndScroll}}>
         <h3
           class="stepper-step__position"
           aria-label="{{t 'pages.modulix.stepper.step.position' currentStep=@currentStep totalSteps=@totalSteps}}"

diff --git a/mon-pix/app/components/module/stepper.gjs b/mon-pix/app/components/module/stepper.gjs
@@ -1,20 +1,34 @@
 import PixButton from '@1024pix/pix-ui/components/pix-button';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { t } from 'ember-intl';
 import ModuleGrain from 'mon-pix/components/module/grain';
 import Step from 'mon-pix/components/module/step';
 import { inc } from 'mon-pix/helpers/inc';
 
+import didInsert from '../../modifiers/modifier-did-insert';
+
 export default class ModulixStepper extends Component {
+  @service modulixAutoScroll;
+
   displayableSteps = this.args.steps.filter((step) =>
     step.elements.some((element) => ModuleGrain.AVAILABLE_ELEMENT_TYPES.includes(element.type)),
   );
 
   @tracked
   stepsToDisplay = [this.displayableSteps[0]];
 
+  @action
+  hasStepJustAppeared(index) {
+    if (this.stepsToDisplay.length === 1) {
+      return false;
+    }
+
+    return this.stepsToDisplay.length - 1 === index;
+  }
+
   get hasDisplayableSteps() {
     return this.displayableSteps.length > 0;
   }
@@ -56,7 +70,11 @@ export default class ModulixStepper extends Component {
   }
 
   <template>
-    <div class="stepper">
+    <div
+      class="stepper"
+      aria-live="assertive"
+      {{didInsert this.modulixAutoScroll.setHTMLElementScrollOffsetCssProperty}}
+    >
       {{#if this.hasDisplayableSteps}}
         {{#each this.stepsToDisplay as |step index|}}
           <Step
@@ -66,6 +84,7 @@ export default class ModulixStepper extends Component {
             @submitAnswer={{@submitAnswer}}
             @retryElement={{@retryElement}}
             @getLastCorrectionForElement={{@getLastCorrectionForElement}}
+            @hasJustAppeared={{this.hasStepJustAppeared index}}
           />
         {{/each}}
         {{#if this.shouldDisplayNextButton}}