@covalent/guided-tour 6.3.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{esm2020 → esm2022}/lib/guided-tour.module.mjs +5 -5
- package/esm2022/lib/guided-tour.service.mjs +166 -0
- package/{esm2020 → esm2022}/lib/guided.tour.mjs +4 -1
- package/{fesm2020 → fesm2022}/covalent-guided-tour.mjs +15 -9
- package/fesm2022/covalent-guided-tour.mjs.map +1 -0
- package/package.json +9 -17
- package/esm2020/lib/guided-tour.service.mjs +0 -163
- package/fesm2015/covalent-guided-tour.mjs +0 -631
- package/fesm2015/covalent-guided-tour.mjs.map +0 -1
- package/fesm2020/covalent-guided-tour.mjs.map +0 -1
- /package/{esm2020 → esm2022}/covalent-guided-tour.mjs +0 -0
- /package/{esm2020 → esm2022}/public_api.mjs +0 -0
|
@@ -1,631 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, NgModule } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { __awaiter } from 'tslib';
|
|
5
|
-
import * as i1 from '@angular/router';
|
|
6
|
-
import { NavigationStart } from '@angular/router';
|
|
7
|
-
import { first, takeUntil, skip, skipWhile, filter, debounceTime, tap, map } from 'rxjs/operators';
|
|
8
|
-
import { Subject, merge, fromEvent, forkJoin, BehaviorSubject, timer } from 'rxjs';
|
|
9
|
-
import Shepherd from 'shepherd.js';
|
|
10
|
-
import * as i2 from '@angular/common/http';
|
|
11
|
-
|
|
12
|
-
var ITourEvent;
|
|
13
|
-
(function (ITourEvent) {
|
|
14
|
-
ITourEvent["click"] = "click";
|
|
15
|
-
ITourEvent["pointerover"] = "pointerover";
|
|
16
|
-
ITourEvent["keyup"] = "keyup";
|
|
17
|
-
ITourEvent["added"] = "added";
|
|
18
|
-
ITourEvent["removed"] = "removed";
|
|
19
|
-
})(ITourEvent || (ITourEvent = {}));
|
|
20
|
-
class TourButtonsActions {
|
|
21
|
-
}
|
|
22
|
-
const SHEPHERD_DEFAULT_FIND_TIME_BEFORE_SHOW = 100;
|
|
23
|
-
const SHEPHERD_DEFAULT_FIND_INTERVAL = 500;
|
|
24
|
-
const SHEPHERD_DEFAULT_FIND_ATTEMPTS = 20;
|
|
25
|
-
const overriddenEvents = [
|
|
26
|
-
ITourEvent.click,
|
|
27
|
-
ITourEvent.pointerover,
|
|
28
|
-
ITourEvent.removed,
|
|
29
|
-
ITourEvent.added,
|
|
30
|
-
ITourEvent.keyup,
|
|
31
|
-
];
|
|
32
|
-
const keyEvents = new Map([
|
|
33
|
-
[13, 'enter'],
|
|
34
|
-
[27, 'esc'],
|
|
35
|
-
]);
|
|
36
|
-
const defaultStepOptions = {
|
|
37
|
-
scrollTo: { behavior: 'smooth', block: 'center' },
|
|
38
|
-
cancelIcon: {
|
|
39
|
-
enabled: true,
|
|
40
|
-
},
|
|
41
|
-
};
|
|
42
|
-
const MAT_ICON_BUTTON = 'mdc-icon-button material-icons mat-mdc-icon-button mat-mdc-button-base';
|
|
43
|
-
const MAT_BUTTON = 'mdc-button mat-mdc-button mat-mdc-button-base';
|
|
44
|
-
const MAT_BUTTON_INVISIBLE = 'shepherd-void-button';
|
|
45
|
-
class CovalentGuidedTour extends TourButtonsActions {
|
|
46
|
-
constructor(stepOptions = defaultStepOptions) {
|
|
47
|
-
super();
|
|
48
|
-
this.stepOptions = stepOptions;
|
|
49
|
-
this.newTour();
|
|
50
|
-
}
|
|
51
|
-
newTour(opts) {
|
|
52
|
-
this.shepherdTour = new Shepherd.Tour(Object.assign({
|
|
53
|
-
defaultStepOptions: this.stepOptions,
|
|
54
|
-
}, opts));
|
|
55
|
-
this._destroyedEvent$ = new Subject();
|
|
56
|
-
// listen to cancel and complete to clean up abortOn events
|
|
57
|
-
merge(fromEvent(this.shepherdTour, 'cancel'), fromEvent(this.shepherdTour, 'complete'))
|
|
58
|
-
.pipe(first())
|
|
59
|
-
.subscribe(() => {
|
|
60
|
-
this._destroyedEvent$.next();
|
|
61
|
-
this._destroyedEvent$.complete();
|
|
62
|
-
});
|
|
63
|
-
// if abortOn was passed, we bind the event and execute complete
|
|
64
|
-
if (opts && opts.abortOn) {
|
|
65
|
-
const abortArr$ = [];
|
|
66
|
-
opts.abortOn.forEach((abortOn) => {
|
|
67
|
-
const abortEvent$ = new Subject();
|
|
68
|
-
abortArr$.push(abortEvent$);
|
|
69
|
-
this._bindEvent(abortOn, undefined, abortEvent$, this._destroyedEvent$);
|
|
70
|
-
});
|
|
71
|
-
const abortSubs = merge(...abortArr$)
|
|
72
|
-
.pipe(takeUntil(this._destroyedEvent$))
|
|
73
|
-
.subscribe(() => {
|
|
74
|
-
this.shepherdTour.complete();
|
|
75
|
-
abortSubs.unsubscribe();
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
back() {
|
|
80
|
-
this.shepherdTour.back();
|
|
81
|
-
}
|
|
82
|
-
cancel() {
|
|
83
|
-
this.shepherdTour.cancel();
|
|
84
|
-
}
|
|
85
|
-
next() {
|
|
86
|
-
this.shepherdTour.next();
|
|
87
|
-
}
|
|
88
|
-
finish() {
|
|
89
|
-
this.shepherdTour.complete();
|
|
90
|
-
}
|
|
91
|
-
addSteps(steps) {
|
|
92
|
-
this.shepherdTour.addSteps(this._prepareTour(steps));
|
|
93
|
-
}
|
|
94
|
-
start() {
|
|
95
|
-
this.shepherdTour.start();
|
|
96
|
-
}
|
|
97
|
-
_prepareTour(originalSteps, finishLabel = 'finish') {
|
|
98
|
-
// create Subjects for back and forward events
|
|
99
|
-
const backEvent$ = new Subject();
|
|
100
|
-
const forwardEvent$ = new Subject();
|
|
101
|
-
let _backFlow = false;
|
|
102
|
-
// create Subject for your end
|
|
103
|
-
const destroyedEvent$ = new Subject();
|
|
104
|
-
/**
|
|
105
|
-
* This function adds the step progress in the footer of the shepherd tooltip
|
|
106
|
-
*/
|
|
107
|
-
const appendProgressFunc = function () {
|
|
108
|
-
// get all the footers that are available in the DOM
|
|
109
|
-
const footers = Array.from(document.querySelectorAll('.shepherd-footer'));
|
|
110
|
-
// get the last footer since Shepherd always puts the active one at the end
|
|
111
|
-
const footer = footers[footers.length - 1];
|
|
112
|
-
// generate steps html element
|
|
113
|
-
const progress = document.createElement('span');
|
|
114
|
-
progress.className = 'shepherd-progress';
|
|
115
|
-
progress.innerText = `${this.shepherdTour.currentStep.options.count}/${stepTotal}`;
|
|
116
|
-
// insert into the footer before the first button
|
|
117
|
-
footer.insertBefore(progress, footer.querySelector('.shepherd-button'));
|
|
118
|
-
};
|
|
119
|
-
let stepTotal = 0;
|
|
120
|
-
const steps = originalSteps.map((step) => {
|
|
121
|
-
var _a, _b, _c;
|
|
122
|
-
let showProgress = () => {
|
|
123
|
-
//
|
|
124
|
-
};
|
|
125
|
-
if (((_a = step.attachToOptions) === null || _a === void 0 ? void 0 : _a.skipFromStepCount) === true) {
|
|
126
|
-
showProgress = function () {
|
|
127
|
-
return;
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
else if (((_b = step.attachToOptions) === null || _b === void 0 ? void 0 : _b.skipFromStepCount) === undefined ||
|
|
131
|
-
((_c = step.attachToOptions) === null || _c === void 0 ? void 0 : _c.skipFromStepCount) === false) {
|
|
132
|
-
step.count = ++stepTotal;
|
|
133
|
-
showProgress = appendProgressFunc.bind(this);
|
|
134
|
-
}
|
|
135
|
-
return Object.assign({}, step, {
|
|
136
|
-
when: {
|
|
137
|
-
show: showProgress,
|
|
138
|
-
},
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
const finishButton = {
|
|
142
|
-
text: finishLabel,
|
|
143
|
-
action: this['finish'].bind(this),
|
|
144
|
-
classes: MAT_BUTTON,
|
|
145
|
-
};
|
|
146
|
-
const voidButton = {
|
|
147
|
-
text: '',
|
|
148
|
-
action() {
|
|
149
|
-
return;
|
|
150
|
-
},
|
|
151
|
-
classes: MAT_BUTTON_INVISIBLE,
|
|
152
|
-
};
|
|
153
|
-
// listen to the destroyed event to clean up all the streams
|
|
154
|
-
this._destroyedEvent$.pipe(first()).subscribe(() => {
|
|
155
|
-
backEvent$.complete();
|
|
156
|
-
forwardEvent$.complete();
|
|
157
|
-
destroyedEvent$.next();
|
|
158
|
-
destroyedEvent$.complete();
|
|
159
|
-
});
|
|
160
|
-
const totalSteps = steps.length;
|
|
161
|
-
steps.forEach((step, index) => {
|
|
162
|
-
var _a;
|
|
163
|
-
// create buttons specific for the step
|
|
164
|
-
// this is done to create more control on events
|
|
165
|
-
const nextButton = {
|
|
166
|
-
text: 'chevron_right',
|
|
167
|
-
action: () => {
|
|
168
|
-
// intercept the next action and trigger event
|
|
169
|
-
forwardEvent$.next();
|
|
170
|
-
this.shepherdTour.next();
|
|
171
|
-
},
|
|
172
|
-
classes: MAT_ICON_BUTTON,
|
|
173
|
-
};
|
|
174
|
-
const backButton = {
|
|
175
|
-
text: 'chevron_left',
|
|
176
|
-
action: () => {
|
|
177
|
-
// intercept the back action and trigger event
|
|
178
|
-
backEvent$.next();
|
|
179
|
-
_backFlow = true;
|
|
180
|
-
// check if 'goBackTo' is set to jump to a particular step, else just go back
|
|
181
|
-
if (step.attachToOptions && step.attachToOptions.goBackTo) {
|
|
182
|
-
this.shepherdTour.show(step.attachToOptions.goBackTo, false);
|
|
183
|
-
}
|
|
184
|
-
else {
|
|
185
|
-
this.shepherdTour.back();
|
|
186
|
-
}
|
|
187
|
-
},
|
|
188
|
-
classes: ((_a = step.advanceOnOptions) === null || _a === void 0 ? void 0 : _a.allowGoBack) === false
|
|
189
|
-
? MAT_BUTTON_INVISIBLE
|
|
190
|
-
: MAT_ICON_BUTTON,
|
|
191
|
-
};
|
|
192
|
-
// check if highlight was provided for the step, else fallback into shepherds usage
|
|
193
|
-
step.highlightClass =
|
|
194
|
-
step.attachToOptions && step.attachToOptions.highlight
|
|
195
|
-
? 'shepherd-highlight'
|
|
196
|
-
: step.highlightClass;
|
|
197
|
-
// Adding buttons in the steps if no buttons are defined
|
|
198
|
-
if (!step.buttons || step.buttons.length === 0) {
|
|
199
|
-
if (index === 0) {
|
|
200
|
-
// first step
|
|
201
|
-
step.buttons = [nextButton];
|
|
202
|
-
}
|
|
203
|
-
else if (index === totalSteps - 1) {
|
|
204
|
-
// last step
|
|
205
|
-
step.buttons = [backButton, finishButton];
|
|
206
|
-
}
|
|
207
|
-
else {
|
|
208
|
-
step.buttons = [backButton, nextButton];
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
// checks "advanceOn" to override listeners
|
|
212
|
-
let advanceOn = step.advanceOn;
|
|
213
|
-
// remove the shepherd "advanceOn" infavor of ours if the event is part of our list
|
|
214
|
-
if ((typeof advanceOn === 'object' &&
|
|
215
|
-
!Array.isArray(advanceOn) &&
|
|
216
|
-
advanceOn.event &&
|
|
217
|
-
overriddenEvents.indexOf(advanceOn.event.split('.')[0]) > -1) ||
|
|
218
|
-
advanceOn instanceof Array) {
|
|
219
|
-
step.advanceOn = undefined;
|
|
220
|
-
step.buttons =
|
|
221
|
-
step.advanceOnOptions && step.advanceOnOptions.allowGoBack
|
|
222
|
-
? [backButton, voidButton]
|
|
223
|
-
: [voidButton];
|
|
224
|
-
}
|
|
225
|
-
// adds a default beforeShowPromise function
|
|
226
|
-
step.beforeShowPromise = () => {
|
|
227
|
-
return new Promise((resolve) => {
|
|
228
|
-
var _a;
|
|
229
|
-
const additionalCapabilitiesSetup = () => {
|
|
230
|
-
if (advanceOn && !step.advanceOn) {
|
|
231
|
-
if (!Array.isArray(advanceOn)) {
|
|
232
|
-
advanceOn = [advanceOn];
|
|
233
|
-
}
|
|
234
|
-
const advanceArr$ = [];
|
|
235
|
-
advanceOn.forEach((_, i) => {
|
|
236
|
-
const advanceEvent$ = new Subject();
|
|
237
|
-
advanceArr$.push(advanceEvent$);
|
|
238
|
-
// we start a timer of attempts to find an element in the dom
|
|
239
|
-
this._bindEvent(_, step.advanceOnOptions, advanceEvent$, destroyedEvent$);
|
|
240
|
-
});
|
|
241
|
-
const advanceSubs = forkJoin(...advanceArr$)
|
|
242
|
-
.pipe(takeUntil(merge(destroyedEvent$, backEvent$)))
|
|
243
|
-
.subscribe(() => {
|
|
244
|
-
// check if we need to advance to a specific step, else advance to next step
|
|
245
|
-
if (step.advanceOnOptions && step.advanceOnOptions.jumpTo) {
|
|
246
|
-
this.shepherdTour.show(step.advanceOnOptions.jumpTo);
|
|
247
|
-
}
|
|
248
|
-
else {
|
|
249
|
-
this.shepherdTour.next();
|
|
250
|
-
}
|
|
251
|
-
forwardEvent$.next();
|
|
252
|
-
advanceSubs.unsubscribe();
|
|
253
|
-
});
|
|
254
|
-
}
|
|
255
|
-
// if abortOn was passed on the step, we bind the event and execute complete
|
|
256
|
-
if (step.abortOn) {
|
|
257
|
-
const abortArr$ = [];
|
|
258
|
-
step.abortOn.forEach((abortOn) => {
|
|
259
|
-
const abortEvent$ = new Subject();
|
|
260
|
-
abortArr$.push(abortEvent$);
|
|
261
|
-
this._bindEvent(abortOn, undefined, abortEvent$, destroyedEvent$);
|
|
262
|
-
});
|
|
263
|
-
const abortSubs = merge(...abortArr$)
|
|
264
|
-
.pipe(takeUntil(merge(destroyedEvent$, backEvent$, forwardEvent$)))
|
|
265
|
-
.subscribe(() => {
|
|
266
|
-
this.shepherdTour.complete();
|
|
267
|
-
abortSubs.unsubscribe();
|
|
268
|
-
});
|
|
269
|
-
}
|
|
270
|
-
};
|
|
271
|
-
const _stopTimer$ = new Subject();
|
|
272
|
-
const _retriesReached$ = new Subject();
|
|
273
|
-
const _retryAttempts$ = new BehaviorSubject(-1);
|
|
274
|
-
let id;
|
|
275
|
-
// checks if "attachTo" is a string or an object to get the id of an element
|
|
276
|
-
if (typeof step.attachTo === 'string') {
|
|
277
|
-
id = step.attachTo;
|
|
278
|
-
}
|
|
279
|
-
else if (typeof step.attachTo === 'object' &&
|
|
280
|
-
typeof step.attachTo.element === 'string') {
|
|
281
|
-
id = step.attachTo.element;
|
|
282
|
-
}
|
|
283
|
-
// if we have an id as a string in either case, we use it (we ignore it if its HTMLElement)
|
|
284
|
-
if (id) {
|
|
285
|
-
// if current step is the first step of the tour, we set the buttons to be only "next"
|
|
286
|
-
// we had to use `any` since the tour doesnt expose the steps in any fashion nor a way to check if we have modified them at all
|
|
287
|
-
if (this.shepherdTour.getCurrentStep() ===
|
|
288
|
-
this.shepherdTour.steps[0]) {
|
|
289
|
-
(_a = this.shepherdTour.getCurrentStep()) === null || _a === void 0 ? void 0 : _a.updateStepOptions({
|
|
290
|
-
buttons: originalSteps[index].advanceOn
|
|
291
|
-
? [voidButton]
|
|
292
|
-
: [nextButton],
|
|
293
|
-
});
|
|
294
|
-
}
|
|
295
|
-
// register to the attempts observable to notify deeveloper when number has been reached
|
|
296
|
-
_retryAttempts$
|
|
297
|
-
.pipe(skip(1), skipWhile((val) => {
|
|
298
|
-
if (step.attachToOptions &&
|
|
299
|
-
step.attachToOptions.retries !== undefined) {
|
|
300
|
-
return val < step.attachToOptions.retries;
|
|
301
|
-
}
|
|
302
|
-
return val < SHEPHERD_DEFAULT_FIND_ATTEMPTS;
|
|
303
|
-
}), takeUntil(merge(_stopTimer$.asObservable(), destroyedEvent$)))
|
|
304
|
-
.subscribe((attempts) => {
|
|
305
|
-
var _a;
|
|
306
|
-
_retriesReached$.next(1);
|
|
307
|
-
_retriesReached$.complete();
|
|
308
|
-
// if attempts have been reached, we check "skipIfNotFound" to move on to the next step
|
|
309
|
-
if (step.attachToOptions &&
|
|
310
|
-
step.attachToOptions.skipIfNotFound) {
|
|
311
|
-
// if we get to this step coming back from a step and it wasnt found
|
|
312
|
-
// then we either check if its the first step and try going forward
|
|
313
|
-
// or we keep going back until we find a step that actually exists
|
|
314
|
-
if (_backFlow) {
|
|
315
|
-
if (this.shepherdTour.steps.indexOf(this.shepherdTour.getCurrentStep()) === 0) {
|
|
316
|
-
this.shepherdTour.next();
|
|
317
|
-
}
|
|
318
|
-
else {
|
|
319
|
-
this.shepherdTour.back();
|
|
320
|
-
}
|
|
321
|
-
_backFlow = false;
|
|
322
|
-
}
|
|
323
|
-
else {
|
|
324
|
-
// destroys current step if we need to skip it to remove it from the tour
|
|
325
|
-
const currentStep = this.shepherdTour.getCurrentStep();
|
|
326
|
-
currentStep === null || currentStep === void 0 ? void 0 : currentStep.destroy();
|
|
327
|
-
this.shepherdTour.next();
|
|
328
|
-
this.shepherdTour.removeStep((_a = currentStep === null || currentStep === void 0 ? void 0 : currentStep.id) !== null && _a !== void 0 ? _a : '');
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
else if (step.attachToOptions && step.attachToOptions.else) {
|
|
332
|
-
// if "skipIfNotFound" is not true, then we check if "else" has been set to jump to a specific step
|
|
333
|
-
this.shepherdTour.show(step.attachToOptions.else);
|
|
334
|
-
}
|
|
335
|
-
else {
|
|
336
|
-
// tslint:disable-next-line:no-console
|
|
337
|
-
console.warn(`Retries reached trying to find ${id}. Retried ${attempts} times.`);
|
|
338
|
-
// else we show the step regardless
|
|
339
|
-
resolve();
|
|
340
|
-
}
|
|
341
|
-
});
|
|
342
|
-
// we start a timer of attempts to find an element in the dom
|
|
343
|
-
timer((step.attachToOptions && step.attachToOptions.timeBeforeShow) ||
|
|
344
|
-
SHEPHERD_DEFAULT_FIND_TIME_BEFORE_SHOW, (step.attachToOptions && step.attachToOptions.interval) ||
|
|
345
|
-
SHEPHERD_DEFAULT_FIND_INTERVAL)
|
|
346
|
-
.pipe(
|
|
347
|
-
// the timer will continue either until we find the element or the number of attempts has been reached
|
|
348
|
-
takeUntil(merge(_stopTimer$, _retriesReached$, destroyedEvent$)))
|
|
349
|
-
.subscribe(() => {
|
|
350
|
-
const element = document.querySelector(id !== null && id !== void 0 ? id : '');
|
|
351
|
-
// if the element has been found, we stop the timer and resolve the promise
|
|
352
|
-
if (element) {
|
|
353
|
-
_stopTimer$.next();
|
|
354
|
-
_stopTimer$.complete();
|
|
355
|
-
additionalCapabilitiesSetup();
|
|
356
|
-
resolve();
|
|
357
|
-
}
|
|
358
|
-
else {
|
|
359
|
-
_retryAttempts$.next(_retryAttempts$.value + 1);
|
|
360
|
-
}
|
|
361
|
-
});
|
|
362
|
-
// stop find interval if user stops the tour
|
|
363
|
-
destroyedEvent$.subscribe(() => {
|
|
364
|
-
_stopTimer$.next();
|
|
365
|
-
_stopTimer$.complete();
|
|
366
|
-
_retriesReached$.next(1);
|
|
367
|
-
_retriesReached$.complete();
|
|
368
|
-
});
|
|
369
|
-
}
|
|
370
|
-
else {
|
|
371
|
-
// resolve observable until the timeBeforeShow has passsed or use default
|
|
372
|
-
timer((step.attachToOptions && step.attachToOptions.timeBeforeShow) ||
|
|
373
|
-
SHEPHERD_DEFAULT_FIND_TIME_BEFORE_SHOW)
|
|
374
|
-
.pipe(takeUntil(merge(destroyedEvent$)))
|
|
375
|
-
.subscribe(() => {
|
|
376
|
-
resolve();
|
|
377
|
-
});
|
|
378
|
-
}
|
|
379
|
-
});
|
|
380
|
-
};
|
|
381
|
-
});
|
|
382
|
-
return steps;
|
|
383
|
-
}
|
|
384
|
-
_bindEvent(eventOn, eventOnOptions, event$, destroyedEvent$) {
|
|
385
|
-
var _a;
|
|
386
|
-
const selector = (_a = eventOn.selector) !== null && _a !== void 0 ? _a : '';
|
|
387
|
-
const event = eventOn.event;
|
|
388
|
-
// we start a timer of attempts to find an element in the dom
|
|
389
|
-
const timerSubs = timer((eventOnOptions && eventOnOptions.timeBeforeShow) ||
|
|
390
|
-
SHEPHERD_DEFAULT_FIND_TIME_BEFORE_SHOW, (eventOnOptions && eventOnOptions.interval) ||
|
|
391
|
-
SHEPHERD_DEFAULT_FIND_INTERVAL)
|
|
392
|
-
.pipe(takeUntil(destroyedEvent$))
|
|
393
|
-
.subscribe(() => {
|
|
394
|
-
const element = document.querySelector(selector);
|
|
395
|
-
// if the element has been found, we stop the timer and resolve the promise
|
|
396
|
-
if (element) {
|
|
397
|
-
timerSubs.unsubscribe();
|
|
398
|
-
if (event === ITourEvent.added) {
|
|
399
|
-
// if event is "Added" trigger a soon as this is attached.
|
|
400
|
-
event$.next();
|
|
401
|
-
event$.complete();
|
|
402
|
-
}
|
|
403
|
-
else if (event === ITourEvent.click ||
|
|
404
|
-
event === ITourEvent.pointerover ||
|
|
405
|
-
(event && event.indexOf(ITourEvent.keyup) > -1)) {
|
|
406
|
-
// we use normal listeners for mouseevents
|
|
407
|
-
const mainEvent = event === null || event === void 0 ? void 0 : event.split('.')[0];
|
|
408
|
-
const subEvent = event === null || event === void 0 ? void 0 : event.split('.')[1];
|
|
409
|
-
fromEvent(element, mainEvent)
|
|
410
|
-
.pipe(filter(($event) => {
|
|
411
|
-
// only trigger if the event is a keyboard event and part of out list
|
|
412
|
-
if ($event instanceof KeyboardEvent) {
|
|
413
|
-
if (keyEvents.get($event.keyCode) === subEvent) {
|
|
414
|
-
return true;
|
|
415
|
-
}
|
|
416
|
-
return false;
|
|
417
|
-
}
|
|
418
|
-
else {
|
|
419
|
-
return true;
|
|
420
|
-
}
|
|
421
|
-
}), takeUntil(merge(event$.asObservable(), destroyedEvent$)))
|
|
422
|
-
.subscribe(() => {
|
|
423
|
-
event$.next();
|
|
424
|
-
event$.complete();
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
else if (event === ITourEvent.removed) {
|
|
428
|
-
// and we will use MutationObserver for DOM events
|
|
429
|
-
const observer = new MutationObserver(() => {
|
|
430
|
-
if (!document.body.contains(element)) {
|
|
431
|
-
event$.next();
|
|
432
|
-
event$.complete();
|
|
433
|
-
observer.disconnect();
|
|
434
|
-
}
|
|
435
|
-
});
|
|
436
|
-
// stop listenining if tour is closed
|
|
437
|
-
destroyedEvent$.subscribe(() => {
|
|
438
|
-
observer.disconnect();
|
|
439
|
-
});
|
|
440
|
-
// observe for any DOM interaction in the element
|
|
441
|
-
observer.observe(element, {
|
|
442
|
-
childList: true,
|
|
443
|
-
subtree: true,
|
|
444
|
-
attributes: true,
|
|
445
|
-
});
|
|
446
|
-
}
|
|
447
|
-
}
|
|
448
|
-
});
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
/**
|
|
453
|
-
* Router enabled Shepherd tour
|
|
454
|
-
*/
|
|
455
|
-
var TourEvents;
|
|
456
|
-
(function (TourEvents) {
|
|
457
|
-
TourEvents["complete"] = "complete";
|
|
458
|
-
TourEvents["cancel"] = "cancel";
|
|
459
|
-
TourEvents["hide"] = "hide";
|
|
460
|
-
TourEvents["show"] = "show";
|
|
461
|
-
TourEvents["start"] = "start";
|
|
462
|
-
TourEvents["active"] = "active";
|
|
463
|
-
TourEvents["inactive"] = "inactive";
|
|
464
|
-
})(TourEvents || (TourEvents = {}));
|
|
465
|
-
class CovalentGuidedTourService extends CovalentGuidedTour {
|
|
466
|
-
constructor(_router, _route, _httpClient) {
|
|
467
|
-
super();
|
|
468
|
-
this._router = _router;
|
|
469
|
-
this._route = _route;
|
|
470
|
-
this._httpClient = _httpClient;
|
|
471
|
-
this._toursMap = new Map();
|
|
472
|
-
this._tourStepURLs = new Map();
|
|
473
|
-
_router.events
|
|
474
|
-
.pipe(filter((event) => event instanceof NavigationStart &&
|
|
475
|
-
event.navigationTrigger === 'popstate'))
|
|
476
|
-
.subscribe(() => {
|
|
477
|
-
if (this.shepherdTour.isActive()) {
|
|
478
|
-
this.shepherdTour.cancel();
|
|
479
|
-
}
|
|
480
|
-
});
|
|
481
|
-
}
|
|
482
|
-
tourEvent$(str) {
|
|
483
|
-
return fromEvent(this.shepherdTour, str);
|
|
484
|
-
}
|
|
485
|
-
registerTour(tourName, tour) {
|
|
486
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
487
|
-
const guidedTour = typeof tour === 'string' ? yield this._loadTour(tour) : tour;
|
|
488
|
-
this._toursMap.set(tourName, guidedTour);
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
startTour(tourName) {
|
|
492
|
-
const guidedTour = this._getTour(tourName);
|
|
493
|
-
this.finish();
|
|
494
|
-
if (guidedTour && guidedTour.steps && guidedTour.steps.length) {
|
|
495
|
-
// remove steps from tour since we need to preprocess them first
|
|
496
|
-
this.newTour(Object.assign({}, guidedTour, { steps: undefined }));
|
|
497
|
-
const tourInstance = this.shepherdTour.addSteps(this._configureRoutesForSteps(this._prepareTour(guidedTour.steps, guidedTour.finishButtonText)));
|
|
498
|
-
// init route transition if step URL is different then the current location.
|
|
499
|
-
this.tourEvent$(TourEvents.show).subscribe((tourEvent) => {
|
|
500
|
-
const currentURL = this._router.url.split(/[?#]/)[0];
|
|
501
|
-
const { step: { id, options }, } = tourEvent;
|
|
502
|
-
if (this._tourStepURLs.has(id)) {
|
|
503
|
-
const stepRoute = this._tourStepURLs.get(id);
|
|
504
|
-
if (stepRoute !== currentURL) {
|
|
505
|
-
this._router.navigate([stepRoute]);
|
|
506
|
-
}
|
|
507
|
-
}
|
|
508
|
-
else {
|
|
509
|
-
if (options && options.routing) {
|
|
510
|
-
this._tourStepURLs.set(id, options.routing.route);
|
|
511
|
-
}
|
|
512
|
-
else {
|
|
513
|
-
this._tourStepURLs.set(id, currentURL);
|
|
514
|
-
}
|
|
515
|
-
}
|
|
516
|
-
});
|
|
517
|
-
this.start();
|
|
518
|
-
return tourInstance;
|
|
519
|
-
}
|
|
520
|
-
else {
|
|
521
|
-
// tslint:disable-next-line:no-console
|
|
522
|
-
console.warn(`Tour ${tourName} does not exist. Please try another tour.`);
|
|
523
|
-
return undefined;
|
|
524
|
-
}
|
|
525
|
-
}
|
|
526
|
-
// Finds the right registered tour by using queryParams
|
|
527
|
-
// finishes any other tour and starts the new one.
|
|
528
|
-
initializeOnQueryParams(queryParam = 'tour') {
|
|
529
|
-
return this._route.queryParamMap.pipe(debounceTime(100), tap((params) => {
|
|
530
|
-
const tourParam = params.get(queryParam);
|
|
531
|
-
if (tourParam) {
|
|
532
|
-
this.startTour(tourParam);
|
|
533
|
-
// get current search parameters
|
|
534
|
-
const searchParams = new URLSearchParams(window.location.search);
|
|
535
|
-
// delete tour queryParam
|
|
536
|
-
searchParams.delete(queryParam);
|
|
537
|
-
// build new URL string without it
|
|
538
|
-
let url = window.location.protocol +
|
|
539
|
-
'//' +
|
|
540
|
-
window.location.host +
|
|
541
|
-
window.location.pathname;
|
|
542
|
-
if (searchParams.toString()) {
|
|
543
|
-
url += '?' + searchParams.toString();
|
|
544
|
-
}
|
|
545
|
-
// replace state in history without triggering a navigation
|
|
546
|
-
window.history.replaceState({ path: url }, '', url);
|
|
547
|
-
}
|
|
548
|
-
}));
|
|
549
|
-
}
|
|
550
|
-
setNextBtnDisability(stepId, isDisabled) {
|
|
551
|
-
var _a, _b;
|
|
552
|
-
if (this.shepherdTour.getById(stepId)) {
|
|
553
|
-
const stepOptions = this.shepherdTour.getById(stepId)
|
|
554
|
-
.options;
|
|
555
|
-
(_a = stepOptions.buttons) === null || _a === void 0 ? void 0 : _a.forEach((button) => {
|
|
556
|
-
if (button.text === 'chevron_right') {
|
|
557
|
-
button.disabled = isDisabled;
|
|
558
|
-
}
|
|
559
|
-
});
|
|
560
|
-
(_b = this.shepherdTour.getById(stepId)) === null || _b === void 0 ? void 0 : _b.updateStepOptions(stepOptions);
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
_loadTour(tourUrl) {
|
|
564
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
565
|
-
const request = this._httpClient.get(tourUrl);
|
|
566
|
-
try {
|
|
567
|
-
return yield request
|
|
568
|
-
.pipe(map((resultSet) => {
|
|
569
|
-
return JSON.parse(JSON.stringify(resultSet));
|
|
570
|
-
}))
|
|
571
|
-
.toPromise();
|
|
572
|
-
}
|
|
573
|
-
catch (_a) {
|
|
574
|
-
return undefined;
|
|
575
|
-
}
|
|
576
|
-
});
|
|
577
|
-
}
|
|
578
|
-
_getTour(key) {
|
|
579
|
-
return this._toursMap.get(key);
|
|
580
|
-
}
|
|
581
|
-
_configureRoutesForSteps(routedSteps) {
|
|
582
|
-
routedSteps.forEach((step) => {
|
|
583
|
-
if (step.routing) {
|
|
584
|
-
const route = step.routing.route;
|
|
585
|
-
// if there is a beforeShowPromise, then we save it and call it after the navigation
|
|
586
|
-
if (step.beforeShowPromise) {
|
|
587
|
-
const beforeShowPromise = step.beforeShowPromise;
|
|
588
|
-
step.beforeShowPromise = () => {
|
|
589
|
-
var _a;
|
|
590
|
-
return this._router
|
|
591
|
-
.navigate([route], (_a = step.routing) === null || _a === void 0 ? void 0 : _a.extras)
|
|
592
|
-
.then(() => {
|
|
593
|
-
return beforeShowPromise();
|
|
594
|
-
});
|
|
595
|
-
};
|
|
596
|
-
}
|
|
597
|
-
else {
|
|
598
|
-
step.beforeShowPromise = () => this._router.navigate([route]);
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
});
|
|
602
|
-
return routedSteps;
|
|
603
|
-
}
|
|
604
|
-
}
|
|
605
|
-
CovalentGuidedTourService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
606
|
-
CovalentGuidedTourService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourService });
|
|
607
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourService, decorators: [{
|
|
608
|
-
type: Injectable
|
|
609
|
-
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.HttpClient }]; } });
|
|
610
|
-
|
|
611
|
-
class CovalentGuidedTourModule {
|
|
612
|
-
}
|
|
613
|
-
CovalentGuidedTourModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
614
|
-
CovalentGuidedTourModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourModule, imports: [CommonModule] });
|
|
615
|
-
CovalentGuidedTourModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourModule, providers: [CovalentGuidedTourService], imports: [CommonModule] });
|
|
616
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: CovalentGuidedTourModule, decorators: [{
|
|
617
|
-
type: NgModule,
|
|
618
|
-
args: [{
|
|
619
|
-
imports: [CommonModule],
|
|
620
|
-
providers: [CovalentGuidedTourService],
|
|
621
|
-
declarations: [],
|
|
622
|
-
exports: [],
|
|
623
|
-
}]
|
|
624
|
-
}] });
|
|
625
|
-
|
|
626
|
-
/**
|
|
627
|
-
* Generated bundle index. Do not edit.
|
|
628
|
-
*/
|
|
629
|
-
|
|
630
|
-
export { CovalentGuidedTour, CovalentGuidedTourModule, CovalentGuidedTourService, ITourEvent, TourEvents };
|
|
631
|
-
//# sourceMappingURL=covalent-guided-tour.mjs.map
|