First steps towards onboarding tour

package.json

@@ -43,6 +43,7 @@
     "material-design-icons": "^3.0.1",
     "naughty-words": "^1.2.0",
     "ngx-color-picker": "^11.0.0",
+    "ngx-joyride": "^2.4.0",
     "ngx-markdown": "^11.1.3",
     "ngx-matomo": "^0.1.4",
     "ngx-matomo-v9": "^0.3.0",

src/app/app.module.ts

@@ -3,7 +3,7 @@ import { AppComponent } from './app.component';
 import { RegisterComponent } from './components/home/_dialogs/register/register.component';
 import { PasswordResetComponent } from './components/home/_dialogs/password-reset/password-reset.component';
 import { AppRoutingModule } from './app-routing.module';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
 import { UserService } from './services/http/user.service';
 import { NotificationService } from './services/util/notification.service';
@@ -59,12 +59,10 @@ import { QrCodeDialogComponent } from './components/shared/_dialogs/qr-code-dial
 import { MatIconModule } from '@angular/material/icon';
 import { RemoveFromHistoryComponent } from './components/shared/_dialogs/remove-from-history/remove-from-history.component';
 import { MatomoModule } from 'ngx-matomo-v9';
-import { TagCloudComponent } from './components/shared/tag-cloud/tag-cloud.component';
-import { MatDialogModule } from '@angular/material/dialog';
 import { TagCloudModule } from 'angular-tag-cloud-module';
 import { SpacyService } from './services/http/spacy.service';
 import { QuizNowComponent } from './components/shared/quiz-now/quiz-now.component';
-
+import { JoyrideModule } from 'ngx-joyride';
 
 import 'prismjs';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
@@ -106,7 +104,6 @@ export function initializeApp(appConfig: AppConfig) {
     DemoEnComponent,
     HelpEnComponent,
     OverlayComponent,
-    TagCloudComponent,
     QuizNowComponent
   ],
   imports: [
@@ -147,7 +144,8 @@ export function initializeApp(appConfig: AppConfig) {
       isolate: true
     }),
     ArsModule,
-    TagCloudModule
+    TagCloudModule,
+    JoyrideModule.forRoot()
   ],
   providers: [
     /*AppConfig,

src/app/components/shared/_dialogs/joyride-template/joyride-template.component.html

+<ng-template #tempText let-text="text">
+  <h1>Dies ist ein Test!</h1>
+  {{text}}
+</ng-template>
+<ng-template #nextButton>
+  <button mat-button style="color: var(--on-primary); background-color: var(--primary);">
+    {{'content.continue' | translate}}
+  </button>
+</ng-template>
+<ng-template #cancelButton>
+  <button mat-button style="color: var(--on-secondary); background-color: var(--secondary);">
+    {{'content.cancel' | translate}}
+  </button>
+</ng-template>
+<ng-template #doneButton>
+  <button mat-button style="color: var(--on-secondary); background-color: var(--secondary);">
+    {{'content.cancel' | translate}}
+  </button>
+</ng-template>
+<ng-template #counter let-step="step" let-total="total">
+  {{ step }} of {{ total }} steps
+</ng-template>

src/app/components/shared/_dialogs/joyride-template/joyride-template.component.spec.ts

+/*import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JoyrideTemplateComponent } from './joyride-template.component';
+
+describe('JoyrideTemplateComponent', () => {
+  let component: JoyrideTemplateComponent;
+  let fixture: ComponentFixture<JoyrideTemplateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ JoyrideTemplateComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JoyrideTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+ */

src/app/components/shared/_dialogs/joyride-template/joyride-template.component.ts

+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { LanguageService } from '../../../../services/util/language.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-joyride-template',
+  templateUrl: './joyride-template.component.html',
+  styleUrls: ['./joyride-template.component.scss']
+})
+export class JoyrideTemplateComponent implements OnInit {
+
+  @ViewChild('tempText', { static: true }) tempText: TemplateRef<any>;
+  @ViewChild('nextButton', { static: true }) nextButton: TemplateRef<any>;
+  @ViewChild('cancelButton', { static: true }) cancelButton: TemplateRef<any>;
+  @ViewChild('doneButton', { static: true }) doneButton: TemplateRef<any>;
+  @ViewChild('counter', { static: true }) counter: TemplateRef<any>;
+
+  constructor(private langService: LanguageService,
+              private translateService: TranslateService) {
+    this.langService.langEmitter.subscribe(lang => {
+      this.translateService.use(lang);
+    });
+  }
+
+  ngOnInit(): void {
+    this.translateService.use(localStorage.getItem('currentLang'));
+  }
+
+}

src/app/components/shared/header/header.component.html

@@ -42,6 +42,9 @@
 
     <!--Topic Cloud-->
     <div class="topic-cloud-btns"
+         joyrideStep="infoHeader"
+         appJoyrideTemplate="true"
+         [stepContentParams]="{'text': 'Hallo'}"
          [ngClass]="{'noOfQuestions': deviceType === 'desktop'}"
          *ngIf="router.url.includes('tagcloud')"
          ars-flex-box>

src/app/components/shared/shared.module.ts

@@ -29,7 +29,7 @@ import { QRCodeModule } from 'angularx-qrcode';
 import { MotdDialogComponent } from './_dialogs/motd-dialog/motd-dialog.component';
 import { MotdMessageComponent } from './_dialogs/motd-dialog/motd-message/motd-message.component';
 import { TagCloudModule } from 'angular-tag-cloud-module';
-import { CloudConfigurationComponent } from "./_dialogs/cloud-configuration/cloud-configuration.component";
+import { CloudConfigurationComponent } from './_dialogs/cloud-configuration/cloud-configuration.component';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { TopicCloudConfirmDialogComponent } from './_dialogs/topic-cloud-confirm-dialog/topic-cloud-confirm-dialog.component';
 import { TopicCloudAdministrationComponent } from './_dialogs/topic-cloud-administration/topic-cloud-administration.component';
@@ -41,6 +41,10 @@ import { WorkerDialogComponent } from './_dialogs/worker-dialog/worker-dialog.co
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ActiveUserComponent } from './overlay/active-user/active-user.component';
 import { AutofocusDirective } from '../../directives/autofocus.directive';
+import { JoyrideModule } from 'ngx-joyride';
+import { TagCloudComponent } from './tag-cloud/tag-cloud.component';
+import { JoyrideTemplateComponent } from './_dialogs/joyride-template/joyride-template.component';
+import { JoyrideTemplateDirective } from '../../directives/joyride-template.directive';
 
 @NgModule({
   imports: [
@@ -53,7 +57,8 @@ import { AutofocusDirective } from '../../directives/autofocus.directive';
     QRCodeModule,
     TagCloudModule,
     ColorPickerModule,
-    DragDropModule
+    DragDropModule,
+    JoyrideModule.forChild()
   ],
   declarations: [
     RoomJoinComponent,
@@ -84,10 +89,13 @@ import { AutofocusDirective } from '../../directives/autofocus.directive';
     TopicDialogCommentComponent,
     TopicCloudFilterComponent,
     SpacyDialogComponent,
+    TagCloudComponent,
     TagCloudPopUpComponent,
     ActiveUserComponent,
     WorkerDialogComponent,
-    AutofocusDirective
+    AutofocusDirective,
+    JoyrideTemplateComponent,
+    JoyrideTemplateDirective
   ],
   exports: [
     RoomJoinComponent,

src/app/components/shared/tag-cloud/tag-cloud.component.html

 <link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Indie+Flower&family=Permanent+Marker&display=swap" rel="stylesheet">
-<ars-screen ars-flex-box>
+<link
+  href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Indie+Flower&family=Permanent+Marker&display=swap"
+  rel="stylesheet">
+<ars-screen ars-flex-box
+            joyrideStep="hallo123"
+            [stepContentParams]="{text: 'Hallo Test'}"
+            appJoyrideTemplate>
   <h1 *ngIf="user && user.role > 0 && question" class="tag-cloud-brainstorming-question mat-display-1">{{question}}</h1>
   <mat-drawer-container class="spacyTagCloudContainer">
     <mat-drawer [(opened)]="configurationOpen" position="end" mode="over">

src/app/components/shared/tag-cloud/tag-cloud.component.ts

@@ -29,6 +29,8 @@ import { TagCloudDataService, TagCloudDataTagEntry } from '../../../services/uti
 import { WsRoomService } from '../../../services/websockets/ws-room.service';
 import { CloudParameters, CloudTextStyle } from '../../../utils/cloud-parameters';
 import { SmartDebounce } from '../../../utils/smart-debounce';
+import { JoyrideOptions } from 'ngx-joyride/lib/models/joyride-options.class';
+import { JoyrideService } from 'ngx-joyride';
 
 class CustomPosition implements Position {
   left: number;
@@ -120,7 +122,8 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
               private topicCloudAdmin: TopicCloudAdminService,
               private router: Router,
               public dataManager: TagCloudDataService,
-              private wsRoomService: WsRoomService) {
+              private wsRoomService: WsRoomService,
+              private jorideService: JoyrideService) {
     this.roomId = localStorage.getItem('roomId');
     this.langService.langEmitter.subscribe(lang => {
       this.translateService.use(lang);
@@ -210,6 +213,13 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
     setTimeout(() => this.dataManager.bindToRoom(this.roomId, this.userRole));
     this.dataManager.updateDemoData(this.translateService);
     this.setCloudParameters(TagCloudComponent.getCurrentCloudParameters(), false);
+    setTimeout(() => {
+      this.jorideService.startTour({
+        steps: ['infoHeader', 'hallo123'],
+        logsEnabled: true,
+        stepDefaultPosition: 'center'
+      });
+    }, 10_000);
   }
 
   ngOnDestroy() {

src/app/directives/joyride-template.directive.spec.ts

+/*import { JoyrideTemplateDirective } from './joyride-template.directive';
+
+describe('JoyrideTemplateDirective', () => {
+  it('should create an instance', () => {
+    const directive = new JoyrideTemplateDirective();
+    expect(directive).toBeTruthy();
+  });
+});
+ */

src/app/directives/joyride-template.directive.ts

+import { ComponentFactoryResolver, Directive, Input, OnInit, ViewContainerRef } from '@angular/core';
+import { JoyrideDirective } from 'ngx-joyride';
+import { JoyrideTemplateComponent } from '../components/shared/_dialogs/joyride-template/joyride-template.component';
+
+@Directive({
+  selector: '[appJoyrideTemplate]'
+})
+export class JoyrideTemplateDirective implements OnInit {
+
+  @Input('appJoyrideTemplate') isPotentiallyFirstElement = false;
+
+  constructor(private viewContainerRef: ViewContainerRef,
+              public joyrideDirective: JoyrideDirective,
+              private componentFactory: ComponentFactoryResolver) {
+  }
+
+  ngOnInit(): void {
+    const factory = this.componentFactory.resolveComponentFactory(JoyrideTemplateComponent);
+    const templates = this.viewContainerRef.createComponent(factory);
+    if (this.isPotentiallyFirstElement) {
+      this.joyrideDirective.doneTemplate = templates.instance.doneButton;
+      this.joyrideDirective.nextTemplate = templates.instance.nextButton;
+      this.joyrideDirective.prevTemplate = templates.instance.cancelButton;
+      this.joyrideDirective.counterTemplate = templates.instance.counter;
+    }
+    this.joyrideDirective.stepContent = templates.instance.tempText;
+  }
+
+}