v8.0.15

GleapSDK · Sep 24, 2022 · da5e891 · da5e891
1 parent dca97bf
commit da5e891
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 34 deletions.
diff --git a/build/index.js b/build/index.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "8.0.14",
+  "version": "8.0.15",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

diff --git a/published/8.0.15/index.js b/published/8.0.15/index.js
diff --git a/published/latest/index.js b/published/latest/index.js
diff --git a/src/Gleap.js b/src/Gleap.js
@@ -377,14 +377,18 @@ class Gleap {
     buttonColor,
     backgroundColor = "#ffffff",
     borderRadius = 20,
+    buttonX = 20,
+    buttonY = 20
   ) {
     runFunctionWhenDomIsReady(() => {
       injectStyledCSS(
         primaryColor,
         headerColor,
         buttonColor,
         borderRadius,
-        backgroundColor
+        backgroundColor,
+        buttonX,
+        buttonY
       );
     });
   }

diff --git a/src/GleapConfigManager.js b/src/GleapConfigManager.js
@@ -1,6 +1,14 @@
 import { loadFromGleapCache, saveToGleapCache } from "./GleapHelper";
 import Gleap, { GleapFrameManager, GleapFeedbackButtonManager, GleapTranslationManager, GleapNetworkIntercepter, GleapSession, GleapReplayRecorder, GleapNotificationManager } from "./Gleap";
 
+const parseIntWithDefault = (val, def) => {
+  const parsed = parseInt(val);
+  if (isNaN(parsed)) {
+    return def;
+  }
+  return parsed;
+}
+
 export default class GleapConfigManager {
   flowConfig = null;
   projectActions = null;
@@ -89,7 +97,9 @@ export default class GleapConfigManager {
       flowConfig.backgroundColor
         ? flowConfig.backgroundColor
         : "#FFFFFF",
-      flowConfig.borderRadius,
+      parseIntWithDefault(flowConfig.borderRadius, 20),
+      parseIntWithDefault(flowConfig.buttonX, 20),
+      parseIntWithDefault(flowConfig.buttonY, 20),
     );
   }
 

diff --git a/src/UI.js b/src/UI.js
@@ -36,7 +36,9 @@ export const injectStyledCSS = (
   headerColor,
   buttonColor,
   borderRadius,
-  backgroundColor
+  backgroundColor,
+  buttonX,
+  buttonY
 ) => {
   const contrastColor = calculateContrast(primaryColor);
   const contrastButtonColor = calculateContrast(buttonColor);
@@ -60,8 +62,8 @@ export const injectStyledCSS = (
 
   const colorStyleSheet = `
     .gleap-frame-container {
-      right: 20px;
-      bottom: 95px;
+      right: ${buttonX}px;
+      bottom: ${75 + buttonY}px;
       width: 375px;
       position: fixed;
       z-index: ${zIndexBase + 31};
@@ -78,12 +80,12 @@ export const injectStyledCSS = (
 
     [dir=rtl].gleap-frame-container {
       right: auto;
-      left: 20px;
-      bottom: 95px;
+      left: ${buttonX}px;
+      bottom: ${75 + buttonY}px;
     }
 
     .gleap-frame-container--survey {
-      bottom: 20px !important;
+      bottom: ${buttonY}px !important;
     }
 
     .gleap-frame-container--survey-full {
@@ -112,38 +114,38 @@ export const injectStyledCSS = (
     }
 
     .gleap-frame-container--classic {
-      right: 20px;
-      bottom: 20px;
+      right: ${buttonX}px;
+      bottom: ${buttonY}px;
     }
 
     [dir=rtl].gleap-frame-container--classic {
       right: auto;
-      left: 20px;
-      bottom: 20px;
+      left: ${buttonX}px;
+      bottom: ${buttonY}px;
     }
 
     .gleap-frame-container--classic-left {
       right: auto;
-      left: 20px;
-      bottom: 20px;
+      left: ${buttonX}px;
+      bottom: ${buttonY}px;
     }
 
     [dir=rtl].gleap-frame-container--classic-left {
       left: auto;
-      right: 20px;
-      bottom: 20px;
+      right: ${buttonX}px;
+      bottom: ${buttonY}px;
     }
 
     .gleap-frame-container--modern-left {
       right: auto;
-      left: 20px;
-      bottom: 95px;
+      left: ${buttonX}px;
+      bottom: ${75 + buttonY}px;
     }
 
     [dir=rtl].gleap-frame-container--modern-left {
       left: auto;
-      right: 20px;
-      bottom: 95px;
+      right: ${buttonX}px;
+      bottom: ${75 + buttonY}px;
     }
 
     .gleap-frame-container--animate {
@@ -236,7 +238,7 @@ export const injectStyledCSS = (
     .gleap-frame-container-inner {
       position: relative;
       width: 100%;
-      height: calc(100vh - 150px);
+      height: calc(100vh - ${130 + buttonY}px);
       max-height: ${widgetMaxHeight}px;
     }
 
@@ -266,8 +268,8 @@ export const injectStyledCSS = (
     .bb-feedback-button {
       margin: 0px;
       position: fixed;
-      bottom: 20px;
-      right: 20px;
+      bottom: ${buttonY}px;
+      right: ${buttonX}px;
       border-radius: 30px;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
@@ -281,20 +283,20 @@ export const injectStyledCSS = (
     }
 
     [dir=rtl].bb-feedback-button {
-      bottom: 20px;
+      bottom: ${buttonY}px;
       right: auto;
-      left: 20px;
+      left: ${buttonX}px;
     }
     
     .bb-feedback-button--bottomleft {
-      bottom: 20px;
+      bottom: ${buttonY}px;
       right: auto;
-      left: 20px;
+      left: ${buttonX}px;
     }
 
     [dir=rtl].bb-feedback-button--bottomleft {
-      bottom: 20px;
-      right: 20px;
+      bottom: ${buttonY}px;
+      right: ${buttonX}px;
       left: auto;
     }
     
@@ -441,15 +443,15 @@ export const injectStyledCSS = (
       top: auto;
       bottom: 0px;
       transform: none;
-      right: 20px;
+      right: ${buttonX}px;
       left: auto;
     }
     
     [dir=rtl].bb-feedback-button .bb-feedback-button-classic--bottom {
       top: auto;
       bottom: 0px;
       transform: none;
-      left: 20px;
+      left: ${buttonX}px;
       right: auto;
     }