Skip to content

Commit 37e483c

Browse files
boehlerlukasboehlerlukas
committed
v6.0.0
1 parent b94f4ca commit 37e483c

File tree

5 files changed

+146
-136
lines changed

5 files changed

+146
-136
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/index.html

Lines changed: 123 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,123 @@
1717
rel="stylesheet"
1818
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
1919
/>
20+
<style>
21+
* {
22+
box-sizing: border-box;
23+
border: none;
24+
padding: 0px;
25+
margin: 0px;
26+
font-family: "Montserrat", sans-serif;
27+
}
28+
29+
body,
30+
html {
31+
background-color: #fff;
32+
margin: 0;
33+
background-image: url(./pexels-christina-morillo-1181467.jpg);
34+
}
35+
36+
.header {
37+
width: 100%;
38+
min-height: 500px;
39+
background-color: #ffeec2;
40+
}
41+
42+
.header-container {
43+
max-width: 650px;
44+
margin: auto;
45+
padding-top: 200px;
46+
}
47+
48+
.header-container-image {
49+
max-width: 850px;
50+
margin: auto;
51+
margin-top: -200px;
52+
}
53+
54+
h1 {
55+
color: #333;
56+
font-size: 32px;
57+
font-weight: 900;
58+
}
59+
60+
h2 {
61+
color: #333;
62+
font-size: 20px;
63+
font-weight: 500;
64+
margin-top: 5px;
65+
}
66+
67+
.logo {
68+
width: 60px;
69+
height: auto;
70+
position: fixed;
71+
top: 40px;
72+
left: 40px;
73+
}
74+
75+
.head-image {
76+
margin-top: 40px;
77+
width: 100%;
78+
height: auto;
79+
max-height: 500px;
80+
border-radius: 10px;
81+
object-fit: cover;
82+
}
83+
84+
.content {
85+
max-width: 650px;
86+
margin: auto;
87+
margin-top: 40px;
88+
margin-bottom: 40px;
89+
color: #333;
90+
font-size: 18px;
91+
line-height: 26px;
92+
font-weight: 300;
93+
}
94+
95+
a {
96+
color: rgb(57, 140, 254);
97+
text-decoration: none;
98+
display: block;
99+
margin-top: 10px;
100+
margin-bottom: 10px;
101+
cursor: pointer;
102+
}
103+
104+
.buttonlink {
105+
display: inline-block;
106+
width: fit-content;
107+
font-size: 16px;
108+
font-weight: 600;
109+
color: rgb(255, 255, 255);
110+
background-color: rgb(57, 140, 254);
111+
border-style: solid;
112+
border-width: 0px;
113+
border-radius: 56px;
114+
padding: 15px 40px;
115+
text-decoration: none;
116+
cursor: pointer;
117+
}
118+
119+
@media only screen and (max-width: 600px) {
120+
.header-container {
121+
padding-left: 40px;
122+
padding-right: 40px;
123+
padding-top: 150px;
124+
}
125+
.head-image {
126+
border-radius: 0px;
127+
}
128+
.header {
129+
min-height: initial;
130+
}
131+
.content {
132+
margin-top: 0px;
133+
padding: 40px;
134+
}
135+
}
136+
</style>
20137
</head>
21138

22139
<body>
@@ -32,10 +149,10 @@ <h2>Gleap SDK for the Web</h2>
32149
</div>
33150
<div class="content">
34151
<span
35-
>The Gleap SDK for JavScript is the easiest way to integrate
36-
Gleap into your apps! Achieve better app quality & ratings with
37-
comprehensive in-app bug reporting. Gleap offers affordable In-App
38-
Bug Reporting for Apps, WebApps & Websites.</span
152+
>The Gleap SDK for JavScript is the easiest way to integrate Gleap into
153+
your apps! Achieve better app quality & ratings with comprehensive
154+
in-app bug reporting. Gleap offers affordable In-App Bug Reporting for
155+
Apps, WebApps & Websites.</span
39156
>
40157
<br /><br />
41158
<span
@@ -45,8 +162,8 @@ <h2>Gleap SDK for the Web</h2>
45162
>
46163
<br /><br />
47164
<span
48-
>In less than a minute you can add our Gleap SDK to your App or
49-
WebApp. Install our SDK, build and run. A piece of cake.</span
165+
>In less than a minute you can add our Gleap SDK to your App or WebApp.
166+
Install our SDK, build and run. A piece of cake.</span
50167
>
51168
</div>
52169
<!-- index.js as found in build/index.js -->

‎demo/main.css

Lines changed: 0 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +0,0 @@
1-
* {
2-
box-sizing: border-box;
3-
border: none;
4-
padding: 0px;
5-
margin: 0px;
6-
font-family: 'Montserrat', sans-serif;
7-
}
8-
9-
body, html {
10-
background-color: #fff;
11-
margin: 0;
12-
background-image: url(./pexels-christina-morillo-1181467.jpg);
13-
}
14-
15-
.header {
16-
width: 100%;
17-
min-height: 500px;
18-
background-color: #FFEEC2;
19-
}
20-
21-
.header-container {
22-
max-width: 650px;
23-
margin: auto;
24-
padding-top: 200px;
25-
}
26-
27-
.header-container-image {
28-
max-width: 850px;
29-
margin: auto;
30-
margin-top: -200px;
31-
}
32-
33-
h1 {
34-
color: #333;
35-
font-size: 32px;
36-
font-weight: 900;
37-
}
38-
39-
h2 {
40-
color: #333;
41-
font-size: 20px;
42-
font-weight: 500;
43-
margin-top: 5px;
44-
}
45-
46-
.logo {
47-
width: 60px;
48-
height: auto;
49-
position: fixed;
50-
top: 40px;
51-
left: 40px;
52-
}
53-
54-
.head-image {
55-
margin-top: 40px;
56-
width: 100%;
57-
height: auto;
58-
max-height: 500px;
59-
border-radius: 10px;
60-
object-fit: cover;
61-
}
62-
63-
.content {
64-
max-width: 650px;
65-
margin: auto;
66-
margin-top: 40px;
67-
margin-bottom: 40px;
68-
color: #333;
69-
font-size: 18px;
70-
line-height: 26px;
71-
font-weight: 300;
72-
}
73-
74-
a {
75-
color: rgb(57, 140, 254);
76-
text-decoration: none;
77-
display: block;
78-
margin-top: 10px;
79-
margin-bottom: 10px;
80-
cursor: pointer;
81-
}
82-
83-
.buttonlink {
84-
display: inline-block;
85-
width: fit-content;
86-
font-size: 16px;
87-
font-weight: 600;
88-
color: rgb(255, 255, 255);
89-
background-color: rgb(57, 140, 254);
90-
border-style: solid;
91-
border-width: 0px;
92-
border-radius: 56px;
93-
padding: 15px 40px;
94-
text-decoration: none;
95-
cursor: pointer;
96-
}
97-
98-
@media only screen and (max-width: 600px) {
99-
.header-container {
100-
padding-left: 40px;
101-
padding-right: 40px;
102-
padding-top: 150px;
103-
}
104-
.head-image {
105-
border-radius: 0px;
106-
}
107-
.header {
108-
min-height: initial;
109-
}
110-
.content {
111-
margin-top: 0px;
112-
padding: 40px;
113-
}
114-
}

‎published/6.0.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.

‎src/ScreenCapture.js

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,11 @@ const downloadAllImages = (dom) => {
159159
return Promise.all(imgItemsPromises);
160160
};
161161

162-
const replaceStyleNodes = (clone, styleSheet, cssTextContent) => {
162+
const replaceStyleNodes = (clone, styleSheet, cssTextContent, styleId) => {
163163
{
164164
var cloneTargetNode = null;
165165
if (styleSheet.ownerNode) {
166-
cloneTargetNode = clone.querySelector(
167-
'[bb-styleid="' + styleSheet.ownerNode.getAttribute("bb-styleid") + '"]'
168-
);
166+
cloneTargetNode = clone.querySelector('[bb-styleid="' + styleId + '"]');
169167
}
170168

171169
try {
@@ -228,27 +226,31 @@ const downloadAllCSSUrlResources = (clone, remote) => {
228226
}
229227
}
230228
}
231-
232-
if (cssTextContent != "" && styleSheet.href && !remote) {
229+
if (cssTextContent != "" && !remote) {
233230
// Resolve resources.
234-
const basePath = styleSheet.href.substring(
235-
0,
236-
styleSheet.href.lastIndexOf("/")
237-
);
238-
231+
const baseTags = document.getElementsByTagName("base");
232+
var basePathURL = baseTags.length
233+
? baseTags[0].href.substr(location.origin.length, 999)
234+
: window.location.href;
235+
if (styleSheet.href) {
236+
basePathURL = styleSheet.href;
237+
}
238+
const basePath = basePathURL.substring(0, basePathURL.lastIndexOf("/"));
239239
promises.push(
240240
loadCSSUrlResources(cssTextContent, basePath).then((replacedStyle) => {
241241
return {
242242
styletext: replacedStyle,
243243
stylesheet: styleSheet,
244+
styleId: styleSheet.ownerNode.getAttribute("bb-styleid"),
244245
};
245246
})
246247
);
247248
} else {
248249
promises.push(
249250
Promise.resolve({
250-
styletext: "",
251+
styletext: cssTextContent,
251252
stylesheet: styleSheet,
253+
styleId: styleSheet.ownerNode.getAttribute("bb-styleid"),
252254
})
253255
);
254256
}
@@ -257,7 +259,12 @@ const downloadAllCSSUrlResources = (clone, remote) => {
257259
return Promise.all(promises).then((results) => {
258260
if (results) {
259261
for (var i = 0; i < results.length; i++) {
260-
replaceStyleNodes(clone, results[i].stylesheet, results[i].styletext);
262+
replaceStyleNodes(
263+
clone,
264+
results[i].stylesheet,
265+
results[i].styletext,
266+
results[i].styleId,
267+
);
261268
}
262269
}
263270
return true;
@@ -385,7 +392,7 @@ const prepareScreenshotData = (snapshotPosition, remote) => {
385392
}
386393

387394
// Remove all scripts & style
388-
const scriptElems = clone.querySelectorAll("script, noscript, style");
395+
const scriptElems = clone.querySelectorAll("script, noscript");
389396
for (var i = 0; i < scriptElems.length; ++i) {
390397
scriptElems[i].remove();
391398
}

0 commit comments

Comments
 (0)