v7.0.20

GleapSDK · Jun 25, 2022 · 05ea819 · 05ea819
1 parent 2dd1385
commit 05ea819
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 54 deletions.
diff --git a/build/index.js b/build/index.js
diff --git a/demo/main.js b/demo/main.js
@@ -6,7 +6,8 @@ Gleap.preFillForm({
 });
 
 // Gleap.setApiUrl("http://localhost:9000");
-//Gleap.setFrameUrl("http://localhost:3000");
+//Gleap.setLanguage("en");
+Gleap.setFrameUrl("http://localhost:3001");
 Gleap.initialize("MMxTvMklWdr6pgZzA3hJk9K0IvOsIT2A");
 
 Gleap.attachCustomData({

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "7.0.19",
+  "version": "7.0.20",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

diff --git a/published/7.0.20/index.js b/published/7.0.20/index.js
diff --git a/published/latest/index.js b/published/latest/index.js
diff --git a/src/GleapConfigManager.js b/src/GleapConfigManager.js
@@ -125,6 +125,7 @@ export default class GleapConfigManager {
 
       if (flowConfig.customTranslations) {
         GleapTranslationManager.getInstance().setCustomTranslation(flowConfig.customTranslations);
+        GleapTranslationManager.getInstance().updateRTLSupport();
       }
 
       Gleap.enableShortcuts(flowConfig.enableShortcuts ? true : false);

diff --git a/src/GleapFeedbackButtonManager.js b/src/GleapFeedbackButtonManager.js
@@ -82,6 +82,7 @@ export default class GleapFeedbackButtonManager {
         }
 
         this.feedbackButton.className = "bb-feedback-button gleap-hidden";
+        this.feedbackButton.setAttribute("dir", GleapTranslationManager.getInstance().isRTLLayout ? "rtl" : "ltr");
         if (
             flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC ||
             flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM ||

diff --git a/src/GleapFrameManager.js b/src/GleapFrameManager.js
@@ -94,6 +94,8 @@ export default class GleapFrameManager {
     if (styleToApply) {
       this.gleapFrameContainer.classList.add(styleToApply);
     }
+
+    this.gleapFrameContainer.setAttribute("dir", GleapTranslationManager.getInstance().isRTLLayout ? "rtl" : "ltr");
   }
 
   showWidget() {

diff --git a/src/GleapTranslationManager.js b/src/GleapTranslationManager.js
@@ -1,8 +1,9 @@
-import { GleapFrameManager } from "./Gleap";
+import { GleapFrameManager, GleapFeedbackButtonManager } from "./Gleap";
 
 export default class GleapTranslationManager {
   customTranslation = {};
   overrideLanguage = "";
+  isRTLLayout = false;
 
   // GleapTranslationManager singleton
   static instance;
@@ -28,6 +29,14 @@ export default class GleapTranslationManager {
   setOverrideLanguage(language) {
     this.overrideLanguage = language;
     GleapFrameManager.getInstance().sendConfigUpdate();
+    this.updateRTLSupport();
+  }
+
+  updateRTLSupport() {
+    // Update RTL support.
+    this.isRTLLayout = GleapTranslationManager.translateText("rtlLang") === "true";
+    GleapFeedbackButtonManager.getInstance().updateFeedbackButtonState();
+    GleapFrameManager.getInstance().updateFrameStyle();
   }
 
   /**
@@ -67,7 +76,7 @@ export default class GleapTranslationManager {
 
       return customTranslation;
     }
-    
+
     var customTranslation = searchForTranslationTable(language);
 
     // Extended search for language match only.

diff --git a/src/UI.js b/src/UI.js
@@ -75,38 +75,62 @@ export const injectStyledCSS = (
       user-select: none;
     }
 
-    .gleap-frame-container--animate {
-      transition: max-height 0.3s ease-in;
-    }
-
-    @keyframes gleapFadeInUp {
-      from {
-          opacity: 0;
-          transform: translate3d(0, 100%, 0);
-      }
-      to {
-          opacity: 1;
-          transform: translate3d(0, 0, 0);
-      }
+    [dir=rtl].gleap-frame-container {
+      right: auto;
+      left: 20px;
+      bottom: 95px;
     }
 
     .gleap-frame-container--classic {
       right: 20px;
       bottom: 20px;
     }
 
+    [dir=rtl].gleap-frame-container--classic {
+      right: auto;
+      left: 20px;
+      bottom: 20px;
+    }
+
     .gleap-frame-container--classic-left {
       right: auto;
       left: 20px;
       bottom: 20px;
     }
 
+    [dir=rtl].gleap-frame-container--classic-left {
+      left: auto;
+      right: 20px;
+      bottom: 20px;
+    }
+
     .gleap-frame-container--modern-left {
       right: auto;
       left: 20px;
       bottom: 95px;
     }
 
+    [dir=rtl].gleap-frame-container--modern-left {
+      left: auto;
+      right: 20px;
+      bottom: 95px;
+    }
+
+    .gleap-frame-container--animate {
+      transition: max-height 0.3s ease-in;
+    }
+
+    @keyframes gleapFadeInUp {
+      from {
+          opacity: 0;
+          transform: translate3d(0, 100%, 0);
+      }
+      to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+      }
+    }
+
     .gleap-frame-container-inner {
       width: 100%;
       height: 100%;
@@ -152,24 +176,31 @@ export const injectStyledCSS = (
       align-items: center;
       padding: 0px;
     }
-    
-    .bb-feedback-button--disabled .bb-feedback-button-icon {
-      display: none !important;
-    }
-    
-    .bb-feedback-button--disabled .bb-feedback-button-text {
-      display: none;
+
+    [dir=rtl].bb-feedback-button {
+      bottom: 20px;
+      right: auto;
+      left: 20px;
     }
     
     .bb-feedback-button--bottomleft {
       bottom: 20px;
       right: auto;
       left: 20px;
     }
+
+    [dir=rtl].bb-feedback-button--bottomleft {
+      bottom: 20px;
+      right: 20px;
+      left: auto;
+    }
     
-    .bb-feedback-button--bottomleft .bb-feedback-button-shoutout {
-      right: auto;
-      left: 94px;
+    .bb-feedback-button--disabled .bb-feedback-button-icon {
+      display: none !important;
+    }
+    
+    .bb-feedback-button--disabled .bb-feedback-button-text {
+      display: none;
     }
     
     .bb-feedback-button-text {
@@ -255,6 +286,14 @@ export const injectStyledCSS = (
       animation-fill-mode: both;
       animation-name: bbFadeInOpacity;
     }
+
+    [dir=rtl].bb-feedback-button .bb-feedback-button-classic {
+      top: 50%;
+      left: 0px;
+      right: auto;
+      transform: rotate(90deg) translate(-50%, -100%);
+      transform-origin: 0% 0%;
+    }
     
     .bb-feedback-button-classic--left {
       top: 50%;
@@ -263,12 +302,29 @@ export const injectStyledCSS = (
       transform: rotate(90deg) translate(-50%, -100%);
       transform-origin: 0% 0%;
     }
+
+    [dir=rtl].bb-feedback-button .bb-feedback-button-classic--left {
+      top: 50%;
+      right: 0px;
+      left: auto;
+      transform: rotate(-90deg) translate(50%, -50%);
+      transform-origin: 100% 50%;
+    }
     
     .bb-feedback-button-classic--bottom {
       top: auto;
       bottom: 0px;
       transform: none;
       right: 20px;
+      left: auto;
+    }
+    
+    [dir=rtl].bb-feedback-button .bb-feedback-button-classic--bottom {
+      top: auto;
+      bottom: 0px;
+      transform: none;
+      left: 20px;
+      right: auto;
     }
     
     .bb-feedback-button--open .bb-feedback-button-classic {
@@ -316,11 +372,6 @@ export const injectStyledCSS = (
       box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), 0px 0px 20px rgba(0, 0, 0, 0.2);
     }
     
-    .bb-feedback-button--bottomleft.bb-feedback-button--open {
-      padding-left: 0px;
-      padding-right: 5px;
-    }
-    
     .bb-feedback-button--open .bb-feedback-button-text {
       animation-name: bbFadeOutDown;
     }
@@ -329,21 +380,6 @@ export const injectStyledCSS = (
       display: flex;
     }
     
-    .bb-feedback-button--bottomleft .bb-feedback-dialog {
-      right: auto;
-      left: 16px;
-    }
-    
-    .bb-feedback-button--classic .bb-feedback-dialog,
-    .bb-feedback-button--disabled .bb-feedback-dialog {
-      bottom: 20px;
-    }
-    
-    .bb-feedback-button--classic-left .bb-feedback-dialog {
-      right: auto;
-      left: 16px;
-    }
-    
     .bb-capture-svg {
       position: absolute;
       z-index: ${zIndexBase + 14};
@@ -925,11 +961,6 @@ export const injectStyledCSS = (
         display: none;
       }
     
-      .bb-feedback-button--bottomleft .bb-feedback-dialog {
-        left: 10px;
-        right: 10px;
-      }
-    
       .bb-capture-editor-borderlayer {
         border-width: 4px;
       }