Skip to content

Commit c415154

Browse files
boehlerlukasboehlerlukas
committed
v12.2.0
1 parent aee2e2b commit c415154

File tree

9 files changed

+441
-133
lines changed

9 files changed

+441
-133
lines changed

‎build/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Gleap.setWSApiUrl("ws://0.0.0.0:8080");
66

77
// Gleap.setLanguage("en");
88

9-
Gleap.initialize("kqHBGdyxG0qq6gcfHDqgNkxg5r0Ut0Le");
9+
Gleap.initialize("81IAthSlhI4XfQTtedQ0d3OXt5WYynOX");
1010

1111
/*Gleap.setUrlHandler((url, newTab) => {
1212
alert("URL: " + url + " newTab: " + newTab);

‎published/12.2.0/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎published/latest/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Gleap.js‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import GleapBannerManager from "./GleapBannerManager";
2323
import GleapAudioManager from "./GleapAudioManager";
2424
import GleapTagManager from "./GleapTagManager";
2525
import GleapAdminManager from "./GleapAdminManager";
26-
import DriverJS from "./Driver";
26+
import GleapProductTours from "./GleapProductTours";
2727

2828
if (typeof HTMLCanvasElement !== "undefined" && HTMLCanvasElement.prototype && HTMLCanvasElement.prototype.__originalGetContext === undefined) {
2929
HTMLCanvasElement.prototype.__originalGetContext =
@@ -1019,7 +1019,6 @@ class Gleap {
10191019
* @param {*} action
10201020
*/
10211021
performActions(actions) {
1022-
console.log(actions);
10231022
for (let i = 0; i < actions.length; i++) {
10241023
const action = actions[i];
10251024
if (action && action.actionType) {
@@ -1039,36 +1038,8 @@ class Gleap {
10391038
}
10401039

10411040
static startProductTour(tourId, config) {
1042-
const steps = config.steps;
10431041

1044-
var driverSteps = [];
1045-
1046-
for (let i = 0; i < steps.length; i++) {
1047-
const step = steps[i];
1048-
1049-
var driverStep = {
1050-
popover: {
1051-
description: step.message
1052-
},
1053-
}
1054-
if (step.selector && step.selector.length > 0) {
1055-
driverStep.element = step.selector;
1056-
}
1057-
driverSteps.push(driverStep);
1058-
}
1059-
1060-
const driverObj = DriverJS({
1061-
showProgress: true,
1062-
steps: driverSteps,
1063-
allowClose: config.allowClose,
1064-
nextBtnText: config.nextText,
1065-
doneBtnText: config.doneText,
1066-
showButtons: [
1067-
'next',
1068-
'close'
1069-
],
1070-
});
1071-
driverObj.drive();
1042+
GleapProductTours.getInstance().startWithConfig(tourId, config);
10721043
}
10731044

10741045
static showBanner(data) {

‎src/GleapAdminManager.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
export default class GleapAdminManager {
33
libraryInstance = null;
4+
lastUrl = undefined;
45

56
// GleapAdminManager singleton
67
static instance;
@@ -11,6 +12,27 @@ export default class GleapAdminManager {
1112
return this.instance;
1213
}
1314

15+
logCurrentPage() {
16+
const currentUrl = window.location.href;
17+
if (currentUrl && currentUrl !== this.lastUrl) {
18+
this.lastUrl = currentUrl;
19+
20+
this.sendMessage({
21+
name: "page-changed",
22+
data: {
23+
page: currentUrl,
24+
}
25+
});
26+
}
27+
}
28+
29+
startPageListener() {
30+
const self = this;
31+
setInterval(function () {
32+
self.logCurrentPage();
33+
}, 1000);
34+
}
35+
1436
loadScript(url, callback) {
1537
var script = document.createElement('script');
1638
script.type = 'text/javascript';
@@ -76,14 +98,14 @@ export default class GleapAdminManager {
7698
if (data.name === "navigate") {
7799
self.libraryInstance.stopPicker();
78100
}
79-
} catch (exp) {
80-
console.log(exp);
81-
}
101+
} catch (exp) { }
82102
});
83103

84104
this.sendMessage({
85105
name: "init",
86106
});
107+
108+
this.startPageListener();
87109
}
88110

89111
sendMessage(data) {

‎src/GleapProductTours.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { loadIcon } from "./UI";
2+
import GleapTours from "./GleapTours";
3+
4+
export default class GleapProductTours {
5+
productTourData = undefined;
6+
productTourId = undefined;
7+
8+
// GleapReplayRecorder singleton
9+
static instance;
10+
static getInstance() {
11+
if (!this.instance) {
12+
this.instance = new GleapProductTours();
13+
return this.instance;
14+
} else {
15+
return this.instance;
16+
}
17+
}
18+
19+
constructor() { }
20+
21+
startWithConfig(tourId, config) {
22+
this.productTourId = tourId;
23+
this.productTourData = config;
24+
25+
return this.start();
26+
}
27+
28+
start() {
29+
const config = this.productTourData;
30+
if (!config) {
31+
return;
32+
}
33+
34+
const steps = config.steps;
35+
36+
var driverSteps = [];
37+
38+
for (let i = 0; i < steps.length; i++) {
39+
const step = steps[i];
40+
41+
var message = "";
42+
43+
if (step.type === "video-pointer") {
44+
message = `<div class="gleap-tour-video">
45+
<video class="gleap-tour-video-obj">
46+
<source src="${step.videoUrl}" type="video/mp4">
47+
</video>
48+
<div class="gleap-tour-video-playpause">${loadIcon("play")}</div>
49+
</div>`;
50+
} else {
51+
var senderHTML = ``;
52+
if (step.sender && step.sender.name) {
53+
senderHTML = `<div class="gleap-tour-sender">
54+
<div class="gleap-tour-sender-image" style="background-image: url('${step.sender.profileImageUrl}');"></div>
55+
<div class="gleap-tour-sender-name">${step.sender.name}</div>
56+
</div>`;
57+
}
58+
59+
message = `${senderHTML}<div class="gleap-tour-message">${step.message}</div>`;
60+
}
61+
62+
var driverStep = {
63+
popover: {
64+
description: message,
65+
popoverClass: `gleap-tour-popover-${step.type}`,
66+
},
67+
}
68+
if (step.selector && step.selector.length > 0) {
69+
driverStep.element = step.selector;
70+
}
71+
driverSteps.push(driverStep);
72+
}
73+
74+
const driverObj = GleapTours({
75+
showProgress: true,
76+
steps: driverSteps,
77+
allowClose: config.allowClose,
78+
nextBtnText: config.nextText,
79+
doneBtnText: config.doneText,
80+
showButtons: [
81+
'next',
82+
'close'
83+
],
84+
onPopoverRender: (popoverElement) => {
85+
// Fix for images and videos.
86+
if (popoverElement) {
87+
const mediaElements = document.querySelectorAll('.gleap-tour-popover-description img, .gleap-tour-popover-description video');
88+
89+
const performRequentialRefresh = () => {
90+
driverObj.refresh();
91+
92+
setTimeout(() => {
93+
driverObj.refresh();
94+
}, 250);
95+
96+
setTimeout(() => {
97+
driverObj.refresh();
98+
}, 500);
99+
100+
setTimeout(() => {
101+
driverObj.refresh();
102+
}, 1000);
103+
};
104+
105+
for (let i = 0; i < mediaElements.length; i++) {
106+
const mediaElement = mediaElements[i];
107+
if (mediaElement.tagName === 'IMG') {
108+
mediaElement.addEventListener('load', () => {
109+
performRequentialRefresh();
110+
});
111+
mediaElement.addEventListener('error', () => {
112+
performRequentialRefresh();
113+
});
114+
} else if (mediaElement.tagName === 'VIDEO') {
115+
mediaElement.addEventListener('canplaythrough', () => {
116+
performRequentialRefresh();
117+
});
118+
mediaElement.addEventListener('error', () => {
119+
performRequentialRefresh();
120+
});
121+
}
122+
}
123+
}
124+
125+
// Video player controller.
126+
const playButtonElem = document.querySelector('.gleap-tour-video-playpause');
127+
if (playButtonElem) {
128+
playButtonElem.addEventListener('click', () => {
129+
const playingClass = 'gleap-tour-video--playing';
130+
const videoElement = playButtonElem.previousElementSibling;
131+
const videoContainer = playButtonElem.closest('.gleap-tour-video');
132+
133+
const onVideoEnded = () => {
134+
videoElem.innerHTML = loadIcon("play");
135+
videoContainer.classList.remove(playingClass);
136+
};
137+
138+
if (videoElement.paused) {
139+
videoElement.play();
140+
playButtonElem.innerHTML = loadIcon("pause");
141+
videoContainer.classList.add(playingClass);
142+
143+
// Add event listener for video ended
144+
videoElement.addEventListener('ended', onVideoEnded);
145+
} else {
146+
videoElement.pause();
147+
playButtonElem.innerHTML = loadIcon("play");
148+
videoContainer.classList.remove(playingClass);
149+
150+
// Remove event listener for video ended
151+
videoElement.removeEventListener('ended', onVideoEnded);
152+
}
153+
});
154+
}
155+
}
156+
});
157+
driverObj.drive();
158+
}
159+
}

0 commit comments

Comments
 (0)