v13.0.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.0.4",
+  "version": "13.0.5",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/GleapAdminManager.js

@@ -1,8 +1,12 @@
+import { loadIcon } from "./UI";
+
 export default class GleapAdminManager {
   libraryInstance = null;
   lastUrl = undefined;
   injectedFrame = false;
   gleapFrameContainer = null;
+  gleapCollapseUI = null;
+  injectedCollapseUI = false;
   gleapFrame = null;
   configData = null;
   status = "navigate";
@@ -64,6 +68,7 @@ export default class GleapAdminManager {
         self.libraryInstance = new window.GleapHelper.default();
         if (self.libraryInstance) {
           self.libraryInstance.onElementPicked = (selector) => {
+            self.toggleCollapseUI(true);
             self.sendMessageToTourBuilder({
               name: "element-picked",
               data: {
@@ -73,6 +78,7 @@ export default class GleapAdminManager {
           };
 
           self.injectFrame();
+          self.injectCollapseUI();
           self.setFrameHeight("loading");
         }
       }
@@ -176,6 +182,49 @@ export default class GleapAdminManager {
     } catch (e) { }
   }
 
+  toggleCollapseUI = (onlyIfActive = false) => {
+    const COLLAPSE_UI_ACTIVE_CLASS = "gleap-admin-collapse-ui-active";
+    const FRAME_CONTAINER_ACTIVE_CLASS = "gleap-admin-frame-container-active";
+
+    // Helper function to check if an element has an active class
+    const isActive = (element, activeClass) => element && element.classList.contains(activeClass);
+
+    // Check if onlyIfActive is true and if the UI elements are already inactive
+    if (onlyIfActive && (!isActive(this.gleapCollapseUI, COLLAPSE_UI_ACTIVE_CLASS) || !isActive(this.gleapFrameContainer, FRAME_CONTAINER_ACTIVE_CLASS))) {
+      return; // Return early without toggling the UI
+    }
+
+    // Toggle the UI elements
+    if (this.gleapCollapseUI) {
+      this.gleapCollapseUI.classList.toggle(COLLAPSE_UI_ACTIVE_CLASS);
+    }
+    if (this.gleapFrameContainer) {
+      this.gleapFrameContainer.classList.toggle(FRAME_CONTAINER_ACTIVE_CLASS);
+    }
+  }
+
+  injectCollapseUI = () => {
+    if (this.injectedCollapseUI) {
+      return;
+    }
+    this.injectedCollapseUI = true;
+
+    // Inject widget HTML.
+    var elem = document.createElement("div");
+    elem.className =
+      "gleap-admin-collapse-ui";
+    elem.innerHTML = `<div class="gleap-admin-collapse-ui-icon">
+    ${loadIcon("arrowdown")}
+    </div>`;
+    document.body.appendChild(elem);
+
+    this.gleapCollapseUI = elem;
+
+    elem.addEventListener("click", () => {
+      this.toggleCollapseUI();
+    });
+  }
+
   injectFrame = () => {
     if (this.injectedFrame) {
       return;

src/UI.js

@@ -1690,13 +1690,48 @@ export const injectStyledCSS = (
       border-radius: 8px;
     }
 
+    .gleap-admin-collapse-ui {
+      z-index: ${zIndexBase + 35};
+      cursor: pointer;
+      position: fixed;
+      bottom: 75px;
+      right: 20px;
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+      background-color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    }
+
+    .gleap-admin-collapse-ui svg {
+      width: 20px;
+      height: 14px;
+      margin-top: 6px;
+      fill: #000 !important;
+    }
+
+    .gleap-admin-collapse-ui-active {
+      bottom: 20px !important;
+    }
+
+    .gleap-admin-collapse-ui-active svg {
+      transform: rotate(180deg);
+    }
+
+    .gleap-admin-frame-container-active {
+      display: none !important;
+    }
+
     .gleap-admin-frame-container {
       position: fixed;
       bottom: 0px;
       left: 0px;
       right: 0px;
       width: 100vw;
-      z-index: 2147483730;
+      z-index: ${zIndexBase + 40};
     }
 
     .gleap-admin-frame {