ngx-sam-hopscotch

Lib Angular 6+ da biblioteca Hopscotch

Install

npm i @seniorbr/ngx-sam-hopscotch

Configure

• No arquivo .angular-cli.json, adicione o css do hopscotch e, opcionalmente, os arquivos css de overrides da senior e do SAM;

  [...]
  "apps": [
    "styles": [
      "../node_modules/@seniorbr/ngx-sam-hopscotch/css/hopscotch.css",
      "../node_modules/@seniorbr/ngx-sam-hopscotch/css/hopscotch-senior.css",
      "../node_modules/@seniorbr/ngx-sam-hopscotch/css/hopscotch-senior-sam.css",
      "styles.sass"
    ],
  [...]
]

• No seu modulo root (e.g.: app.module.ts):

import { NgxSamHopscotchModule } from '@seniorbr/ngx-sam-hopscotch';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSamHopscotchModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

• No seu modulo de feature:

import { NgxSamHopscotchModule } from '@seniorbr/ngx-sam-hopscotch';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [NgxSamHopscotchModule],
  providers: [],
})
export class FeatureComponentModule {}

Use

Por instancias diretas de HopscotchStep

app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import {
  HopscotchStep,
  HopscotchConfigOptions,
  HopsctochWrapperService,
  HopscotchTour
} from '@seniorbr/ngx-sam-hopscotch';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements AfterViewInit {
  title = 'app';
  step1 = new HopscotchStep();
  step2 = new HopscotchStep();
  step3 = new HopscotchStep();

  constructor(public hopsctochWrapperService: HopsctochWrapperService) {
    this.step1.title = 'step1';
    this.step1.content = 'content 1';
    this.step1.stepNumber = 1;

    this.step2.title = 'step2';
    this.step2.content = 'content 2';
    this.step2.stepNumber = 2;

    this.step3.title = 'step3';
    this.step3.content = 'content 3';
    this.step3.stepNumber = 3;
  }

  ngAfterViewInit() {
    const opt = new HopscotchConfigOptions();
    opt.fadeBackground = true;
    this.hopsctochWrapperService.configure(opt);
    setTimeout(() => this.hopscotchWrapperService.startTour());
  }

  ngOnDestroy() {
    this.hopscotchWrapperService.endTour();
  }
}

app.component.html

<div [samHopscotchStep]="step1" style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="image.jpg">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a [samHopscotchStep]="step3" target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a [samHopscotchStep]="step2" target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Por numero de step

app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import {
  HopscotchStep,
  HopscotchConfigOptions,
  HopsctochWrapperService,
  HopscotchTour
} from '@seniorbr/ngx-sam-hopscotch';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements AfterViewInit {
  title = 'app';

  constructor(public hopsctochWrapperService: HopsctochWrapperService) {
    const step1 = new HopscotchStep();
    step1.title = 'step1';
    step1.content = 'content 1';
    step1.stepNumber = 1;

    const step2 = new HopscotchStep();
    step2.title = 'step2';
    step2.content = 'content 2';
    step2.stepNumber = 2;

    const step3 = new HopscotchStep();
    step3.title = 'step3';
    step3.content = 'content 3';
    step3.stepNumber = 3;

    const tour = new HopscotchTour();
    tour.addStep(step1);
    tour.addStep(step2);
    tour.addStep(step3);

    this.HopscotchWrapperService.tourList.push(tour);
  }

  ngAfterViewInit() {
    const opt = new HopscotchConfigOptions();
    opt.fadeBackground = true;
    this.hopsctochWrapperService.configure(opt);
    setTimeout(() => this.HopscotchWrapperService.startTour());
  }

  ngOnDestroy() {
    this.hopscotchWrapperService.endTour();
  }
}

app.component.html

<div samHopscotchStep="1" style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="image.png">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2>
      <a samHopscotchStep="3" target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a>
    </h2>
  </li>
  <li>
    <h2>
      <a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a>
    </h2>
  </li>
  <li>
    <h2>
      <a samHopscotchStep="2" target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a>
    </h2>
  </li>
</ul>