releasebird-javascript-sdk 1.0.34 → 1.0.35
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/build/index.js +1 -1
- package/package.json +1 -1
- package/published/1.0.35/index.js +1 -0
- package/published/latest/index.js +1 -1
- package/src/RbirdWebsiteWidget.js +10 -0
- package/src/Styles.js +7 -7
|
@@ -34,6 +34,8 @@ export default class RbirdWebsiteWidget {
|
|
|
34
34
|
|
|
35
35
|
noButton;
|
|
36
36
|
|
|
37
|
+
backdrop;
|
|
38
|
+
|
|
37
39
|
static getInstance() {
|
|
38
40
|
if (!this.instance) {
|
|
39
41
|
this.instance = new RbirdWebsiteWidget();
|
|
@@ -99,6 +101,7 @@ export default class RbirdWebsiteWidget {
|
|
|
99
101
|
|
|
100
102
|
openWebsiteWidget() {
|
|
101
103
|
RbirdUtils.addClass(this.widgetContent, "cta__modal--visible");
|
|
104
|
+
RbirdUtils.addClass(this.backdrop, "cta__modal-dimmer--visible");
|
|
102
105
|
this.registerListeners();
|
|
103
106
|
if (this.hideWidgetButton) {
|
|
104
107
|
this.hideWidgetButton.style.display = "none";
|
|
@@ -229,6 +232,7 @@ export default class RbirdWebsiteWidget {
|
|
|
229
232
|
this.hideWidgetButton.style.display = "block";
|
|
230
233
|
}
|
|
231
234
|
RbirdUtils.removeClass(this.widgetContent, "cta__modal--visible");
|
|
235
|
+
RbirdUtils.removeClass(this.backdrop, "cta__modal-dimmer--visible");
|
|
232
236
|
|
|
233
237
|
this.initButton();
|
|
234
238
|
if (!this.noButton) {
|
|
@@ -295,6 +299,12 @@ export default class RbirdWebsiteWidget {
|
|
|
295
299
|
styleWidget() {
|
|
296
300
|
this.websiteWidget.className=RbirdSessionManager.getInstance().widgetSettings.launcher === 5 ? 'launcherButton5' : 'launcherButton' ;
|
|
297
301
|
this.initButton();
|
|
302
|
+
|
|
303
|
+
// Create backdrop
|
|
304
|
+
this.backdrop = document.createElement("div");
|
|
305
|
+
this.backdrop.className = "cta__modal-dimmer";
|
|
306
|
+
document.body.appendChild(this.backdrop);
|
|
307
|
+
|
|
298
308
|
this.widgetContent = document.createElement("div");
|
|
299
309
|
this.widgetContent.className = "cta__modal";
|
|
300
310
|
|
package/src/Styles.js
CHANGED
|
@@ -32,12 +32,12 @@ export const injectStyledCSS = (
|
|
|
32
32
|
.cta__modal-dimmer {
|
|
33
33
|
position: fixed;
|
|
34
34
|
display: none;
|
|
35
|
-
z-index:
|
|
35
|
+
z-index: 9999998;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
38
38
|
right: 0;
|
|
39
39
|
bottom: 0;
|
|
40
|
-
background-color: rgba(0, 0, 0, 0);
|
|
40
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
|
|
@@ -77,7 +77,7 @@ export const injectStyledCSS = (
|
|
|
77
77
|
.cta__modal {
|
|
78
78
|
position: fixed;
|
|
79
79
|
outline: none;
|
|
80
|
-
z-index:
|
|
80
|
+
z-index: 9999999;
|
|
81
81
|
background-color: transparent;
|
|
82
82
|
display: none !important;
|
|
83
83
|
width: ${!isMobile ? '450px' : '100% !important'};
|
|
@@ -159,7 +159,7 @@ export const injectStyledCSS = (
|
|
|
159
159
|
backgroundColor:transparent;
|
|
160
160
|
width:50px;
|
|
161
161
|
height:50px;
|
|
162
|
-
z-index:
|
|
162
|
+
z-index: 10000000;
|
|
163
163
|
position:fixed;
|
|
164
164
|
bottom:${spaceBottom}px;
|
|
165
165
|
right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
|
|
@@ -171,7 +171,7 @@ export const injectStyledCSS = (
|
|
|
171
171
|
backgroundColor:transparent;
|
|
172
172
|
width:70px;
|
|
173
173
|
height:50px;
|
|
174
|
-
z-index:
|
|
174
|
+
z-index: 10000000;
|
|
175
175
|
position:fixed;
|
|
176
176
|
bottom:${spaceBottom}px;
|
|
177
177
|
right:${launcherPosition === 'right' ? spaceLeftRight + 'px' : 'unset'};
|
|
@@ -184,7 +184,7 @@ export const injectStyledCSS = (
|
|
|
184
184
|
bottom: ${spaceBottom + 35}px;
|
|
185
185
|
right: ${launcherPosition === 'right' ? (spaceLeftRight - 10) + 'px' : 'unset'};
|
|
186
186
|
left: ${launcherPosition === 'left' ? (spaceLeftRight + 35) + 'px' : 'unset'};
|
|
187
|
-
z-index:
|
|
187
|
+
z-index: 10000000;
|
|
188
188
|
padding: 5px 10px;
|
|
189
189
|
border-radius: 50%;
|
|
190
190
|
background-color: red;
|
|
@@ -310,7 +310,7 @@ cursor: pointer;
|
|
|
310
310
|
bottom: ${spaceBottom + 45}px;
|
|
311
311
|
right: ${launcherPosition === 'right' ? (spaceLeftRight -15) + 'px' : 'unset'};
|
|
312
312
|
left: ${launcherPosition === 'left' ? (spaceLeftRight -15) + 'px' : 'unset'};
|
|
313
|
-
z-index:
|
|
313
|
+
z-index: 10000000;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
.rbird_closeclose:hover,
|