d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Router } from '@angular/router';
import { helpers } from 'ngx-tethys/util';
import { DOCUMENT } from '@angular/common';
import { ThyPopover } from 'ngx-tethys/popover';
import { ThyGuiderManager } from './guider-manager';
import { ThyGuiderStepRef } from './guider-step-ref';
import { Observable, ReplaySubject, Subject } from 'rxjs';
import { ThyGuiderConfig, ThyGuiderStep } from './guider.class';
import { Inject, NgZone, RendererFactory2 } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';

export class ThyGuiderRef {
    public steps: ThyGuiderStep[];

    private stepChange$: ReplaySubject<ThyGuiderStep> = new ReplaySubject<ThyGuiderStep>();

    private guiderEnded$ = new Subject();

    private closed$ = new Subject<ThyGuiderStep>();

    private targetClicked$ = new Subject<ThyGuiderStep>();

    private currentStep: ThyGuiderStep;

    private currentStepIndex: number;

    private stepsRef: ThyGuiderStepRef[];

    constructor(
        public config: ThyGuiderConfig,
        private rendererFactory: RendererFactory2,
        private popover: ThyPopover,
        private router: Router,
        private guiderManager: ThyGuiderManager,
        private ngZone: NgZone,
        private overlay: Overlay,
        @Inject(DOCUMENT) private document: any
    ) {
        this.stepsRef = config.steps.map((step, index) => {
            return new ThyGuiderStepRef(step, index, this.rendererFactory, this.popover, this.guiderManager, this.overlay, this.document);
        });
        this.steps = config.steps;
    }

    public stepChange(): Observable<ThyGuiderStep> {
        return this.stepChange$.asObservable();
    }

    public ended() {
        return this.guiderEnded$;
    }

    public closed() {
        return this.closed$;
    }

    public targetClicked() {
        return this.targetClicked$;
    }

    public start(startWith?: number) {
        this.to(startWith);

        return this.stepChange();
    }

    public next() {
        if (this.currentStepIndex + 1 > this.steps.length) {
            return;
        }
        this.to(this.currentStepIndex + 1);
    }

    public previous() {
        if (this.currentStepIndex - 1 < 0) {
            return;
        }

        this.to(this.currentStepIndex - 1);
    }

    public active(indexOrKey: number | string): void {
        if (helpers.isNumber(indexOrKey)) {
            this.to(indexOrKey as number);
            return;
        }
        if (helpers.isString(indexOrKey)) {
            const index = this.steps.findIndex(step => step.key === (indexOrKey as string));
            this.to(index);
            return;
        }
    }

    private to(index: number): void {
        this.removeExistedStep();

        if (!helpers.isNumber(index) || index >= this.steps.length || index < 0 || Number.isNaN(index)) {
            index = 0;
        }
        this.currentStep = this.steps[index];
        this.currentStepIndex = index;

        // update guiderManager
        this.guiderManager.updateActive(this.currentStep.key, this);
        if (this.currentStep.route && this.currentStep.route !== this.router.url) {
            this.ngZone.run(() => {
                this.router.navigateByUrl(this.currentStep.route);
            });
            return;
        }
        setTimeout(() => {
            this.drawStep();
            this.notifyStepClicked();
        }, 0);
    }

    public close() {
        this.removeManagerActiveKey();
        this.stepsRef[this.currentStepIndex]?.dispose();
        this.closed$.next(this.currentStep);
    }

    public end() {
        this.close();
        this.guiderEnded$.next(this.currentStep);
        this.notifyGuiderIsFinished();
    }

    private removeManagerActiveKey() {
        const activeKey = this.guiderManager.getActive().key;
        if (activeKey && this.steps.some(step => step.key === activeKey)) {
            this.guiderManager.updateActive('', undefined);
        }
    }

    private notifyStepClicked() {
        this.stepChange$.next(this.currentStep);
    }

    private drawStep() {
        this.removeExistedStep();
        this.stepsRef[this.currentStepIndex].show(this);
    }

    private notifyGuiderIsFinished() {
        this.stepChange$.complete();
        // this.targetClicked().unsubscribe();
        this.currentStepIndex = 0;
    }

    private removeExistedStep() {
        this.stepsRef[this.currentStepIndex]?.dispose();
    }
}

1	import { Router } from '@angular/router';
2	import { helpers } from 'ngx-tethys/util';
3	import { DOCUMENT } from '@angular/common';
4	import { ThyPopover } from 'ngx-tethys/popover';
5	import { ThyGuiderManager } from './guider-manager';
6	import { ThyGuiderStepRef } from './guider-step-ref';
7	import { Observable, ReplaySubject, Subject } from 'rxjs';
8	import { ThyGuiderConfig, ThyGuiderStep } from './guider.class';
9	import { Inject, NgZone, RendererFactory2 } from '@angular/core';
10	import { Overlay } from '@angular/cdk/overlay';
11
12	export class ThyGuiderRef {
13	public steps: ThyGuiderStep[];	×
14		×
15	private stepChange$: ReplaySubject<ThyGuiderStep> = new ReplaySubject<ThyGuiderStep>();	×
16		×
17	private guiderEnded$ = new Subject();	×
18		×
19	private closed$ = new Subject<ThyGuiderStep>();	×
20		×
21	private targetClicked$ = new Subject<ThyGuiderStep>();	×
22		×
23	private currentStep: ThyGuiderStep;	×
24		×
25	private currentStepIndex: number;	×
26		×
27	private stepsRef: ThyGuiderStepRef[];
28		×
29	constructor(
30	public config: ThyGuiderConfig,
31	private rendererFactory: RendererFactory2,	×
32	private popover: ThyPopover,
33	private router: Router,
34	private guiderManager: ThyGuiderManager,	×
35	private ngZone: NgZone,
36	private overlay: Overlay,
37	@Inject(DOCUMENT) private document: any	×
38	) {
39	this.stepsRef = config.steps.map((step, index) => {
40	return new ThyGuiderStepRef(step, index, this.rendererFactory, this.popover, this.guiderManager, this.overlay, this.document);	×
41	});
42	this.steps = config.steps;
43	}	×
44		×
45	public stepChange(): Observable<ThyGuiderStep> {
46	return this.stepChange$.asObservable();
47	}	×
48		×
49	public ended() {
50	return this.guiderEnded$;	×
51	}
52
53	public closed() {	×
54	return this.closed$;	×
55	}
56		×
57	public targetClicked() {
58	return this.targetClicked$;
59	}	×
60		×
61	public start(startWith?: number) {	×
62	this.to(startWith);
63		×
64	return this.stepChange();	×
65	}	×
66		×
67	public next() {
68	if (this.currentStepIndex + 1 > this.steps.length) {
69	return;
70	}	×
71	this.to(this.currentStepIndex + 1);	×
72	}	×
73
74	public previous() {	×
75	if (this.currentStepIndex - 1 < 0) {	×
76	return;
77	}	×
78		×
79	this.to(this.currentStepIndex - 1);	×
80	}	×
81
82	public active(indexOrKey: number \| string): void {	×
83	if (helpers.isNumber(indexOrKey)) {
84	this.to(indexOrKey as number);	×
85	return;	×
86	}	×
87	if (helpers.isString(indexOrKey)) {
88	const index = this.steps.findIndex(step => step.key === (indexOrKey as string));
89	this.to(index);
90	return;	×
91	}	×
92	}	×
93
94	private to(index: number): void {
95	this.removeExistedStep();	×
96		×
97	if (!helpers.isNumber(index) \|\| index >= this.steps.length \|\| index < 0 \|\| Number.isNaN(index)) {	×
98	index = 0;
99	}
100	this.currentStep = this.steps[index];	×
101	this.currentStepIndex = index;	×
102		×
103	// update guiderManager
104	this.guiderManager.updateActive(this.currentStep.key, this);
105	if (this.currentStep.route && this.currentStep.route !== this.router.url) {
106	this.ngZone.run(() => {	×
107	this.router.navigateByUrl(this.currentStep.route);
108	});
109	return;	×
110	}	×
111	setTimeout(() => {
112	this.drawStep();
113	this.notifyStepClicked();	×
114	}, 0);
115	}	×
116
117	public close() {
118	this.removeManagerActiveKey();	×
119	this.stepsRef[this.currentStepIndex]?.dispose();
120	this.closed$.next(this.currentStep);	1✔
121	}
122
123	public end() {
124	this.close();
125	this.guiderEnded$.next(this.currentStep);
126	this.notifyGuiderIsFinished();
127	}
128
129	private removeManagerActiveKey() {
130	const activeKey = this.guiderManager.getActive().key;
131	if (activeKey && this.steps.some(step => step.key === activeKey)) {
132	this.guiderManager.updateActive('', undefined);
133	}
134	}
135
136	private notifyStepClicked() {
137	this.stepChange$.next(this.currentStep);
138	}
139
140	private drawStep() {
141	this.removeExistedStep();
142	this.stepsRef[this.currentStepIndex].show(this);
143	}
144
145	private notifyGuiderIsFinished() {
146	this.stepChange$.complete();
147	// this.targetClicked().unsubscribe();
148	this.currentStepIndex = 0;
149	}
150
151	private removeExistedStep() {
152	this.stepsRef[this.currentStepIndex]?.dispose();
153	}
154	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous