feat(interactiveTour + welcomeWindows): add new component and service (…

…#701) * tour * lint * feat add noBackButton on step Co-authored-by: Marc-André Barbeau <marc-andre.barbeau@msp.gouv.qc.ca> Co-authored-by: Josée Martel <josee.martel.9@ulaval.ca>
infra-geo-ouverte · Aug 12, 2020 · 3e1a0c7 · 3e1a0c7
1 parent 156c3ac
commit 3e1a0c7
Show file tree

Hide file tree

Showing 39 changed files with 800 additions and 62 deletions.
diff --git a/angular.json b/angular.json
@@ -27,6 +27,7 @@
             "assets": [
               "demo/src/favicon.ico",
               "demo/src/assets",
+              "demo/src/config",
               "demo/src/contexts",
               "demo/src/locale",
               {

diff --git a/demo/src/app/core/home/home.component.html b/demo/src/app/core/home/home.component.html
@@ -1,13 +1,21 @@
 <div style="text-align:center">
-  <h1>
+  <h1 id="igo-title">
     Welcome to IGO
   </h1>
-  <img width="180" src="assets/igo2/core/logo.png">
+  <img  class="igo-logo" width="180" src="assets/igo2/core/logo.png">
 </div>
 
 <p>
-IGO2 library contains many components and services that may benefit any web application. <br>
-IGO2 library is open source project using Angular, Angular Material and OpenLayers.
+  <igo-interactive-tour
+    tourToStart = "global"
+    menuIsOpen = true
+    styleButton = "raised">
+  </igo-interactive-tour>
+</p>
+
+<p>
+  IGO2 library contains many components and services that may benefit any web application. <br>
+  IGO2 library is open source project using Angular, Angular Material and OpenLayers.
 </p>
 
 <h3>IGO2 library is divided into several elements: </h3>

diff --git a/demo/src/app/core/home/home.component.ts b/demo/src/app/core/home/home.component.ts
@@ -1,8 +1,15 @@
 import { Component } from '@angular/core';
+import { InteractiveTourService } from '@igo2/common';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class AppHomeComponent {}
+export class AppHomeComponent {
+  constructor(private interactiveTourService: InteractiveTourService) {}
+
+  startTour() {
+    this.interactiveTourService.startTour('global');
+  }
+}
diff --git a/demo/src/app/core/home/home.module.ts b/demo/src/app/core/home/home.module.ts
@@ -1,11 +1,21 @@
 import { NgModule } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { AppHomeComponent } from './home.component';
 import { AppHomeRoutingModule } from './home-routing.module';
+import { IgoInteractiveTourModule } from '@igo2/common';
 
 @NgModule({
   declarations: [AppHomeComponent],
-  imports: [AppHomeRoutingModule],
+  imports: [
+    AppHomeRoutingModule,
+    IgoInteractiveTourModule,
+    MatTooltipModule,
+    MatIconModule,
+    MatButtonModule
+  ],
   exports: [AppHomeComponent]
 })
 export class AppHomeModule {}
diff --git a/demo/src/config/interactiveTour.json b/demo/src/config/interactiveTour.json
@@ -0,0 +1,50 @@
+{
+  "global": {
+    "title": "interactiveTour.title",
+    "highlightClass": "mat-form-field",
+    "class": "mat-form-field",
+    "steps": [
+      {
+        "element": "img.igo-logo",
+        "text": "interactiveTour.selectByClass"
+      },
+      {
+        "element": "#igo-title",
+        "text": "interactiveTour.selectById",
+        "noBackButton": true,
+        "beforeShow": {
+          "element": "a.mat-list-item[routerlink=\\.]",
+          "action": "click"
+        }
+      },
+      {
+        "element": "a.mat-list-item[routerlink=context]",
+        "text": "interactiveTour.changeTool",
+        "onShow": {
+          "action": "click"
+        }
+      },
+      {
+        "element": "igo-context-item:nth-of-type(3)",
+        "text": "interactiveTour.context3"
+      },
+      {
+        "element": "igo-context-item:nth-of-type(3)",
+        "text": "Action 'onShow'",
+        "onShow": {
+          "action": "click"
+        }
+      },
+      {
+        "element": "igo-layer-item:nth-of-type(2) button",
+        "text": "Action 'onHide'",
+        "onHide": {
+          "action": "click"
+        }
+      },
+      {
+        "text": "interactiveTour.end"
+      }
+    ]
+  }
+}
diff --git a/demo/src/environments/environment.prod.ts b/demo/src/environments/environment.prod.ts
@@ -21,6 +21,9 @@ export const environment: Environment = {
       },
       allowAnonymous: true
     },
+    interactiveTour: {
+      tourInMobile: true
+    },
     importExport: {
       url: 'https://geoegl.msp.gouv.qc.ca/apis/ogre'
     },

diff --git a/demo/src/environments/environment.ts b/demo/src/environments/environment.ts
@@ -33,6 +33,9 @@ export const environment: Environment = {
     language: {
       prefix: './locale/'
     },
+    interactiveTour: {
+      tourInMobile: true
+    },
     importExport: {
       url: '/apis/ogre',
       gpxAggregateInComment: true
@@ -80,7 +83,8 @@ export const environment: Environment = {
             },
             {
               id: 'rn_wmts',
-              url: 'https://servicesmatriciels.mern.gouv.qc.ca/erdas-iws/ogc/wmts/Cartes_Images',
+              url:
+                'https://servicesmatriciels.mern.gouv.qc.ca/erdas-iws/ogc/wmts/Cartes_Images',
               type: 'wmts',
               crossOrigin: true,
               matrixSet: 'EPSG_3857',
@@ -90,34 +94,39 @@ export const environment: Environment = {
         },
         {
           id: 'group_impose',
-          title: '(composite catalog) group imposed and unique layer title for same source',
+          title:
+            '(composite catalog) group imposed and unique layer title for same source',
           composite: [
             {
               id: 'tq_swtq',
               url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
               regFilters: ['zpegt'],
-              groupImpose: {id: 'zpegt', title: 'zpegt'}
+              groupImpose: { id: 'zpegt', title: 'zpegt' }
             },
             {
               id: 'Gououvert',
               url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
               regFilters: ['zpegt'],
-              groupImpose: {id: 'zpegt', title: 'zpegt'}
+              groupImpose: { id: 'zpegt', title: 'zpegt' }
             },
             {
               id: 'Gououvert',
               url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
               regFilters: ['zpegt'],
-              groupImpose: {id: 'zpegt', title: 'zpegt'}
+              groupImpose: { id: 'zpegt', title: 'zpegt' }
             },
             {
               id: 'rn_wmts',
-              url: 'https://servicesmatriciels.mern.gouv.qc.ca/erdas-iws/ogc/wmts/Cartes_Images',
+              url:
+                'https://servicesmatriciels.mern.gouv.qc.ca/erdas-iws/ogc/wmts/Cartes_Images',
               type: 'wmts',
               crossOrigin: true,
               matrixSet: 'EPSG_3857',
               version: '1.0.0',
-              groupImpose: {id: 'cartetopo', title: 'Carte topo échelle 1/20 000'}
+              groupImpose: {
+                id: 'cartetopo',
+                title: 'Carte topo échelle 1/20 000'
+              }
             }
           ]
         },
@@ -129,13 +138,13 @@ export const environment: Environment = {
               id: 'tq_swtq',
               url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/swtq',
               regFilters: ['limtn_charg'],
-              groupImpose: {id: 'mix_swtq_gouv', title: 'mix same name layer'}
+              groupImpose: { id: 'mix_swtq_gouv', title: 'mix same name layer' }
             },
             {
               id: 'Gououvert',
               url: 'https://geoegl.msp.gouv.qc.ca/apis/ws/igo_gouvouvert.fcgi',
               regFilters: ['limtn_charg'],
-              groupImpose: {id: 'mix_swtq_gouv', title: 'mix same name layer'}
+              groupImpose: { id: 'mix_swtq_gouv', title: 'mix same name layer' }
             }
           ]
         }

diff --git a/demo/src/locale/en.json b/demo/src/locale/en.json
@@ -10,5 +10,13 @@
   "Delete Tooltip": "Delete Tooltip",
   "Add": "Add",
   "Edit": "Edit",
-  "Delete": "Delete"
+  "Delete": "Delete",
+  "interactiveTour": {
+    "title": "Interactive Tour",
+    "selectByClass": "Sselect by class",
+    "selectById": "Select by id",
+    "changeTool": "Change tool",
+    "context3": "Selection of the 3rd context of the list with nth-of-type",
+    "end": "End of tour"
+  }
 }
diff --git a/demo/src/locale/fr.json b/demo/src/locale/fr.json
@@ -10,5 +10,13 @@
   "Delete Tooltip": "Supprimer Tooltip",
   "Add": "Ajouter",
   "Edit": "Éditer",
-  "Delete": "Supprimer"
+  "Delete": "Supprimer",
+  "interactiveTour": {
+    "title": "Tour interactif",
+    "selectByClass": "Sélection par classe",
+    "selectById": "Sélection par id",
+    "changeTool": "Changement d'outil",
+    "context3": "Sélection du 3e contexte de la liste avec nth-of-type",
+    "end": "Fin du tour"
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -88,6 +88,7 @@
     "@turf/helpers": "^6.1.4",
     "@turf/line-intersect": "^6.0.2",
     "@turf/point-on-feature": "^5.1.5",
+    "angular-shepherd": "^0.7.0",
     "angular2-notifications": "^9.0.0",
     "bowser": "^2.10.0",
     "classlist.js": "^1.1.20150312",

diff --git a/packages/auth/src/lib/auth-form/auth-form.component.html b/packages/auth/src/lib/auth-form/auth-form.component.html
@@ -6,16 +6,16 @@ <h1>{{'igo.auth.connection' | translate}}</h1>
 
     <igo-auth-google
       *ngIf="options.google && options.google.enabled !== false"
-      (login)="login()">
+      (login)="onLogin()">
     </igo-auth-google>
     <igo-auth-facebook
       *ngIf="options.facebook && options.facebook.enabled !== false"
-      (login)="login()">
+      (login)="onLogin()">
     </igo-auth-facebook>
     <igo-auth-intern
       *ngIf="!options.intern || options.intern.enabled !== false"
       [allowAnonymous]="options.allowAnonymous"
-      (login)="login()">
+      (login)="onLogin()">
     </igo-auth-intern>
   </div>
 

diff --git a/packages/auth/src/lib/auth-form/auth-form.component.ts b/packages/auth/src/lib/auth-form/auth-form.component.ts
@@ -3,7 +3,9 @@ import {
   ChangeDetectionStrategy,
   OnInit,
   Input,
-  Optional
+  Optional,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -79,6 +81,8 @@ export class AuthFormComponent implements OnInit {
     }
   }
 
+  @Output() login: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   public options: AuthOptions;
   public user;
 
@@ -101,9 +105,10 @@ export class AuthFormComponent implements OnInit {
     this.getName();
   }
 
-  public login() {
+  public onLogin() {
     this.auth.goToRedirectUrl();
     this.getName();
+    this.login.emit(true);
   }
 
   public logout() {
@@ -140,7 +145,7 @@ export class AuthFormComponent implements OnInit {
     }
 
     this.router.events
-      .pipe(filter(event => event instanceof NavigationStart))
+      .pipe(filter((event) => event instanceof NavigationStart))
       .subscribe((changeEvent: any) => {
         if (changeEvent.url) {
           const currentRoute = changeEvent.url;

diff --git a/packages/auth/src/lib/auth.module.ts b/packages/auth/src/lib/auth.module.ts
@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 
-import { IgoLanguageModule, StorageService } from '@igo2/core';
+import { StorageService, IgoLanguageModule } from '@igo2/core';
 
 import { AuthStorageService } from './shared/storage.service';
 import { ProtectedDirective } from './shared/protected.directive';