fix(common): interactive-tour add the auto placement (#1457)

* fix(common): interactive-tour add the auto placement * refactor(demo): some element were not found ininteractive tour --------- Co-authored-by: Pierre-Étienne Lord <[email protected]>
infra-geo-ouverte · Oct 25, 2023 · 0087ace · 0087ace
1 parent 975fc6d
commit 0087ace
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/demo/src/config/interactiveTour.json b/demo/src/config/interactiveTour.json
@@ -1,7 +1,7 @@
 {
   "global": {
     "title": "interactiveTour.title",
-    "position": "right",
+    "position": "auto",
     "highlightClass": "mat-form-field",
     "class": "mat-form-field",
     "steps": [
@@ -14,12 +14,12 @@
         "text": "interactiveTour.selectById",
         "noBackButton": true,
         "beforeShow": {
-          "element": "a.mat-list-item[routerlink=\\.]",
+          "element": "a.mat-mdc-list-item[routerlink=\\.]",
           "action": "click"
         }
       },
       {
-        "element": "a.mat-list-item[routerlink=context]",
+        "element": "a.mat-mdc-list-item[routerlink=context]",
         "text": "interactiveTour.changeTool",
         "onShow": {
           "action": "click"

diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.interface.ts b/packages/common/src/lib/interactive-tour/interactive-tour.interface.ts
@@ -2,7 +2,7 @@ import { Placement } from '@floating-ui/utils';
 
 export interface InteractiveTourStep {
   element?: string;
-  position?: Placement;
+  position?: InteractiveTourPlacement;
   title?: string;
   text: string;
   beforeShow?: InteractiveTourAction;
@@ -16,6 +16,8 @@ export interface InteractiveTourStep {
   noBackButton?: boolean;
 }
 
+type InteractiveTourPlacement = 'auto' | Placement;
+
 export interface InteractiveTourAction {
   element?: string;
   action: 'click';
@@ -26,7 +28,7 @@ export interface InteractiveTourAction {
 
 export interface InteractiveTourOptions {
   steps: InteractiveTourStep[];
-  position?: string;
+  position?: InteractiveTourPlacement;
   title?: string;
   /* CSS class that is added to the hightlight element */
   highlightClass?: string;

diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.service.ts b/packages/common/src/lib/interactive-tour/interactive-tour.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { ConfigService, LanguageService, MediaService } from '@igo2/core';
 
-import { offset } from '@floating-ui/dom';
+import { autoPlacement, offset } from '@floating-ui/dom';
 import { ShepherdService } from 'angular-shepherd';
 import Shepherd from 'shepherd.js';
 
@@ -283,18 +283,22 @@ export class InteractiveTourService {
     });
   }
 
-  private getShepherdSteps(stepConfig: InteractiveTourOptions) {
+  private getShepherdSteps(tourConfig: InteractiveTourOptions) {
     const shepherdSteps: Shepherd.Step.StepOptions[] = [];
 
     let i = 0;
-    for (const step of stepConfig.steps) {
+    for (const step of tourConfig.steps) {
+      const position = step.position ?? tourConfig.position;
       shepherdSteps.push({
         attachTo: {
           element: step.element,
-          on: (step.position || stepConfig.position) as any // PopperPlacement
+          on: position as any // PopperPlacement
         },
         floatingUIOptions: {
-          middleware: [offset({ mainAxis: 15 })]
+          middleware: [
+            position === 'auto' && autoPlacement(),
+            offset({ mainAxis: 15 })
+          ].filter(Boolean)
         },
         beforeShowPromise: () => {
           return Promise.all([
@@ -308,20 +312,20 @@ export class InteractiveTourService {
         buttons: this.getButtons(
           i === 0
             ? 'first'
-            : i + 1 === stepConfig.steps.length
+            : i + 1 === tourConfig.steps.length
             ? 'last'
-            : stepConfig.steps[i].noBackButton
+            : tourConfig.steps[i].noBackButton
             ? 'noBackButton'
             : undefined
         ),
         classes: step.class,
         highlightClass: step.highlightClass,
-        scrollTo: step.scrollToElement || stepConfig.scrollToElement || true,
+        scrollTo: step.scrollToElement || tourConfig.scrollToElement || true,
         canClickTarget: step.disableInteraction
           ? !step.disableInteraction
           : undefined,
         title: this.languageService.translate.instant(
-          step.title || stepConfig.title
+          step.title || tourConfig.title
         ),
         text: [this.languageService.translate.instant(step.text)],
         when: {