perf(tour): improve performance of the guided tour (#803)

- [x] scroll a highlighted element into view; - [x] attach an elevation class to the highlighted element;
rfprod · Dec 17, 2023 · f013597 · f013597
1 parent 38c17a3
commit f013597
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/libs/client-guided-tour/jest.config.ts b/libs/client-guided-tour/jest.config.ts
@@ -9,8 +9,8 @@ const config: Config.InitialOptions = {
     global: {
       branches: 0,
       functions: 27,
-      lines: 32,
-      statements: 35,
+      lines: 31,
+      statements: 33,
     },
   },
   displayName: 'client-guided-tour',

diff --git a/libs/client-guided-tour/package.json b/libs/client-guided-tour/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rfprodz/client-guided-tour",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Guided tour feature for Angular clients.",
   "keywords": [
     "angular-module",

diff --git a/...ent-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html b/...ent-guided-tour/src/lib/components/guided-tour-example/guided-tour-example.component.html
@@ -1,21 +1,61 @@
-<p>... Some content ...</p>
+@if (!tour.active) {
+  <button mat-raised-button color="accent" (click)="tour.next()">Start tour</button>
+} @else {
+  <button mat-raised-button color="warn" (click)="tour.end()">End tour</button>
+}
 
 <ng-container *ngIf="tourConig$() as config">
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(1)" [highlightElement]="true">second item to explain</div>
 
   <p>... Some content ...</p>
 
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(2)" [highlightElement]="true">third item to explain</div>
 
   <p>... Some content ...</p>
 
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
   <div [appGuidedTour]="config.at(0)">first item to explain</div>
-</ng-container>
 
-<p>... Some content ...</p>
+  <p>... Some content ...</p>
 
-@if (!tour.active) {
-  <button mat-raised-button color="accent" (click)="tour.next()">Start tour</button>
-} @else {
-  <button mat-raised-button color="warn" (click)="tour.end()">End tour</button>
-}
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+
+  <p>... Some content ...</p>
+</ng-container>
diff --git a/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts b/libs/client-guided-tour/src/lib/components/guided-tour/guided-tour.directive.ts
@@ -165,11 +165,15 @@ export class AppGuidedTourDirective implements AfterContentInit, OnDestroy {
 
   private decorateNativeEl(reset?: boolean) {
     if (typeof this.nativeElement !== 'undefined' && this.highlightElement) {
+      const elevationClass = 'mat-elevation-z2';
       if (reset === true) {
         this.nativeElement.style.border = 'unset';
+        this.nativeElement.className = this.nativeElement.className.replace(` ${elevationClass}`, '');
         return;
       }
+      this.nativeElement.scrollIntoView({ behavior: 'smooth' });
       this.nativeElement.style.border = '1px dotted black';
+      this.nativeElement.className += ` ${elevationClass}`;
     }
   }