Skip to content

add waitingTimeAfterNavigation option #435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pablomaurer wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add waitingTimeAfterNavigation option #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c82b1b
add waitingTimeAfterNavigation option
pablomaurer Jul 26, 2021
4710fff
add waitingTimeAfterNavigation option tests
pablomaurer Jul 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ or

```typescript
<h1 joyrideStep="firstStep" title="Page Title" text="Main title!">Text</h1>
<div joyrideStep="secondStep" title="Page Title" text="Main title!">Div content</div>
<div joyrideStep="secondStep" title="Page Title" text="Main title!">Div content</div>
```

#### 2. Import the `JoyrideModule` in your AppModule
Expand Down Expand Up @@ -96,15 +96,16 @@ You can use the `joyrideStep` directive with these inputs:

| Name | Required | Purpose | Type | Default value |
| ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------- |
| steps | Yes | Represent the ordered list of steps name to show. e.g `steps: ['step1', 'header', 'interesting-table', 'navbar']`. This option is particularly useful for multi-pages navigation. If your step is not in the root path, you should indicate the route after the step name, with a `@` as separator. E.g. : `steps: ['firstStep', 'image@home', 'step4@about/you', 'user-avatar@user/details']` | string[] | none |
| startWith | No | The name of the step (plus the route for multi-page navigation) from which the stour should start. | string | undefined |
| waitingTime | No | The time (in milliseconds) to wait before showing the next/prev step. | number | 1 |
| stepDefaultPosition | No | Define a step default position. The stepPositon set in the directive override this value. | string | bottom |
| themeColor | No | Backdrop, buttons and title color. (Hexadecimal value) | string | #3b5560 |
| showCounter | No | Show the counter on the bottom-left. | boolean | true |
| showPrevButton | No | Show the "Prev" button. | boolean | true |
| logsEnabled | No | Enable logs to see info about the library status. Usuful to get a meaningful error message. | boolean | false |
| customTexts | No | Custom buttons text for next, prev, done buttons. | Object | `{ prev: 'prev', next: 'next', done: 'done'}` |
| steps | Yes | Represent the ordered list of steps name to show. e.g `steps: ['step1', 'header', 'interesting-table', 'navbar']`. This option is particularly useful for multi-pages navigation. If your step is not in the root path, you should indicate the route after the step name, with a `@` as separator. E.g. : `steps: ['firstStep', 'image@home', 'step4@about/you', 'user-avatar@user/details']` | string[] | none |
| startWith | No | The name of the step (plus the route for multi-page navigation) from which the stour should start. | string | undefined |
| waitingTime | No | The time (in milliseconds) to wait before showing the next/prev step. | number | 1 |
| waitingTimeAfterNavigation | No | The time (in milliseconds) to wait before showing the next/prev step after a navigation happened. | number | 0 |
| stepDefaultPosition | No | Define a step default position. The stepPositon set in the directive override this value. | string | bottom |
| themeColor | No | Backdrop, buttons and title color. (Hexadecimal value) | string | #3b5560 |
| showCounter | No | Show the counter on the bottom-left. | boolean | true |
| showPrevButton | No | Show the "Prev" button. | boolean | true |
| logsEnabled | No | Enable logs to see info about the library status. Usuful to get a meaningful error message. | boolean | false |
| customTexts | No | Custom buttons text for next, prev, done buttons. | Object | `{ prev: 'prev', next: 'next', done: 'done'}` |

You can change each element step css overriding the default style.

Expand Down Expand Up @@ -154,12 +155,12 @@ If you'd like to customize the next, prev and done texts, you can use the `custo

```typescript
this.joyrideService.startTour({
...
customTexts: {
...
customTexts: {
next: '>>',
prev: '<<',
done: 'Ok'
}
prev: '<<',
done: 'Ok'
}
});
```

Expand Down Expand Up @@ -300,7 +301,7 @@ What you should do is adding your steps in this way:

```typescript
...
this.joyrideService.startTour({steps: ["navbar", "user-avatar@user/details", "info@about"]);
this.joyrideService.startTour({steps: ["navbar", "user-avatar@user/details", "info@about"]);
...
```

Expand All @@ -312,7 +313,7 @@ In order to close programmatically the tour you'll just need to call the Joyride

```typescript
...
this.joyrideService.closeTour();
this.joyrideService.closeTour();
...
```

Expand Down
1 change: 1 addition & 0 deletions projects/ngx-joyride/src/lib/models/joyride-options.class.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export class JoyrideOptions {
steps: string[];
startWith?: string;
waitingTime?: number;
waitingTimeAfterNavigation?: number;
stepDefaultPosition?: string;
themeColor?: string;
showCounter?: boolean;
Expand Down
21 changes: 20 additions & 1 deletion projects/ngx-joyride/src/lib/services/joyride-options.service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
JoyrideOptionsService,
STEP_DEFAULT_POSITION,
DEFAULT_THEME_COLOR,
DEFAULT_TIMEOUT_BETWEEN_STEPS
DEFAULT_TIMEOUT_BETWEEN_STEPS, DEFAULT_TIMEOUT_AFTER_NAVIGATION
} from './joyride-options.service';
import { TestBed } from '@angular/core/testing';
import { JoyrideOptions } from '../models/joyride-options.class';
Expand Down Expand Up @@ -149,6 +149,25 @@ describe('JoyrideOptionsService', () => {
});
});

describe('getWaitingTimeAfterNavigation()', () => {
it('should return waiting timeout if it has been set into the options', () => {
const stepOption = new JoyrideOptions();
stepOption.waitingTimeAfterNavigation = 124;
optionsService.setOptions(stepOption);

expect(optionsService.getWaitingTimeAfterNavigation()).toBe(124);
});

it('should return the default waiting time no parameter has been set', () => {
const stepOption = new JoyrideOptions();
optionsService.setOptions(stepOption);

expect(optionsService.getWaitingTimeAfterNavigation()).toBe(
DEFAULT_TIMEOUT_AFTER_NAVIGATION
);
});
});

describe('getCustomTexts()', () => {
it('should return the default texts by default', () => {
const stepOption = new JoyrideOptions();
Expand Down
17 changes: 14 additions & 3 deletions projects/ngx-joyride/src/lib/services/joyride-options.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { of, Observable } from 'rxjs';
export const DEFAULT_THEME_COLOR = '#3b5560';
export const STEP_DEFAULT_POSITION = 'bottom';
export const DEFAULT_TIMEOUT_BETWEEN_STEPS = 1;
export const DEFAULT_TIMEOUT_AFTER_NAVIGATION = 0;

export class ObservableCustomTexts implements ICustomTexts {
prev: Observable<string>;
Expand All @@ -31,6 +32,7 @@ export interface IJoyrideOptionsService {
getStepsOrder(): string[];
getFirstStep(): string;
getWaitingTime(): number;
getWaitingTimeAfterNavigation(): number;
areLogsEnabled(): boolean;
isCounterVisible(): boolean;
isPrevButtonVisible(): boolean;
Expand All @@ -47,6 +49,7 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
private stepsOrder: string[] = [];
private firstStep: string;
private waitingTime: number;
private waitingTimeAfterNavigation: number;
private customTexts: ObservableCustomTexts;

setOptions(options: JoyrideOptions) {
Expand Down Expand Up @@ -74,6 +77,10 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
typeof options.waitingTime !== 'undefined'
? options.waitingTime
: DEFAULT_TIMEOUT_BETWEEN_STEPS;
this.waitingTimeAfterNavigation =
typeof options.waitingTimeAfterNavigation !== 'undefined'
? options.waitingTimeAfterNavigation
: DEFAULT_TIMEOUT_AFTER_NAVIGATION;
typeof options.customTexts !== 'undefined'
? this.setCustomText(options.customTexts)
: this.setCustomText(DEFAULT_TEXTS);
Expand Down Expand Up @@ -103,6 +110,10 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
return this.waitingTime;
}

getWaitingTimeAfterNavigation() {
return this.waitingTimeAfterNavigation;
}

areLogsEnabled() {
return this.logsEnabled;
}
Expand Down Expand Up @@ -149,9 +160,9 @@ export class JoyrideOptionsService implements IJoyrideOptionsService {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? `${parseInt(result[1], 16)}, ${parseInt(
result[2],
16
)}, ${parseInt(result[3], 16)}`
result[2],
16
)}, ${parseInt(result[3], 16)}`
: null;
}
}
22 changes: 22 additions & 0 deletions projects/ngx-joyride/src/lib/services/joyride-step.service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,4 +490,26 @@ describe('JoyrideStepService', () => {
expect(backdropService.remove).toHaveBeenCalledTimes(1);
}));
});

describe('when getWaitingTimeAfterNavigation returns a timeout different from the default one', () => {
beforeEach(() => {
stepsContainerService.getStepRoute.and.returnValue('route1');
optionsService.getWaitingTimeAfterNavigation.and.returnValue(200);
});

it('should get the step after the timeout milliseconds', fakeAsync(() => {
joyrideStepService.startTour();
tick(200);

expect(stepsContainerService.get).toHaveBeenCalledTimes(1);
}));

it('should not get the step before the timeout milliseconds', fakeAsync(() => {
joyrideStepService.startTour();
tick(199);

expect(stepsContainerService.get).not.toHaveBeenCalledTimes(1);
tick(1);
}));
});
});
12 changes: 9 additions & 3 deletions projects/ngx-joyride/src/lib/services/joyride-step.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,13 @@ export class JoyrideStepService implements IJoyrideStepService {
this.tryShowStep(StepActionType.NEXT);
}

private navigateToStepPage(action: StepActionType) {
private navigateToStepPage(action: StepActionType): boolean {
let stepRoute = this.stepsContainerService.getStepRoute(action);
if (stepRoute) {
this.router.navigate([stepRoute]);
return true;
}
return false;
}

private subscribeToStepsUpdates() {
Expand All @@ -121,8 +123,12 @@ export class JoyrideStepService implements IJoyrideStepService {
}

private tryShowStep(actionType: StepActionType) {
this.navigateToStepPage(actionType);
const timeout = this.optionsService.getWaitingTime();
const didNavigate = this.navigateToStepPage(actionType);
const timeoutAfterNavigation = this.optionsService.getWaitingTimeAfterNavigation();
let timeout = this.optionsService.getWaitingTime();
if (didNavigate && timeoutAfterNavigation) {
timeout = timeoutAfterNavigation;
}
if (timeout > 100) this.backDropService.remove();
setTimeout(() => {
try {
Expand Down