From 2983a62fa6564f3eefd1d6da48663975ec782c21 Mon Sep 17 00:00:00 2001
From: Omry Zobel <omry@strigo.io>
Date: Mon, 24 Oct 2022 13:04:34 +0300
Subject: [PATCH] Collapse when opening and expand after rendered

---
 src/modules/document/document.ts   | 12 +++++++++---
 src/modules/listeners/listeners.ts | 13 ++++++++++---
 src/modules/widgets/overlay.ts     |  4 ++--
 src/strigo/index.ts                | 12 ++++++++++++
 src/strigo/types.ts                |  1 +
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/modules/document/document.ts b/src/modules/document/document.ts
index 384b307..3f69788 100644
--- a/src/modules/document/document.ts
+++ b/src/modules/document/document.ts
@@ -127,7 +127,7 @@ export function openWidget(): void {
   academyHat.classList.remove('slide-in');
 }
 
-export function collapseWidget(): void {
+function collapse(): void {
   const widget = document.getElementById('strigo-widget');
   widget.classList.remove('slide-in');
   widget.classList.remove('loaded');
@@ -139,6 +139,12 @@ export function collapseWidget(): void {
   academyHat.classList.add('slide-in');
 }
 
+export function collapseWidget(): void {
+  sessionManager.setSessionValue('shouldPanelBeOpen', false);
+
+  collapse();
+}
+
 const navigationObserver = function (pageMutations): void {
   const filteredMutations = pageMutations.filter((mutation) => {
     return ['HTML', 'BODY'].includes(mutation.target.nodeName);
@@ -167,7 +173,7 @@ export function toggleWidget(): void {
   if (shouldPanelBeOpen) {
     openWidget();
   } else {
-    collapseWidget();
+    collapse();
   }
 }
 
@@ -219,7 +225,7 @@ export function createWidget(url: string): HTMLIFrameElement {
   if (shouldPanelBeOpen) {
     openWidget();
   } else {
-    collapseWidget();
+    collapse();
   }
 
   return strigoExercisesIframe;
diff --git a/src/modules/listeners/listeners.ts b/src/modules/listeners/listeners.ts
index 4719039..8c00918 100644
--- a/src/modules/listeners/listeners.ts
+++ b/src/modules/listeners/listeners.ts
@@ -1,6 +1,6 @@
 import * as sessionManager from '../session/session';
 import * as configManager from '../config/config';
-import ovelayWidget from '../widgets/overlay';
+import overlayWidget from '../widgets/overlay';
 import { Logger } from '../../services/logger';
 import { WidgetFlavors } from '../widgets/widget.types';
 
@@ -16,7 +16,7 @@ function onHostEventHandler(ev: MessageEvent<any>): void {
       Logger.info('Panel move message received');
 
       if (sessionManager.getWidgetFlavor() === WidgetFlavors.OVERLAY) {
-        ovelayWidget.move();
+        overlayWidget.move();
       }
 
       break;
@@ -40,12 +40,19 @@ function onHostEventHandler(ev: MessageEvent<any>): void {
       Logger.info('Challenge event success received');
 
       if (sessionManager.getWidgetFlavor() === WidgetFlavors.OVERLAY) {
-        ovelayWidget.open();
+        overlayWidget.open();
       }
 
       break;
     }
 
+    case MessageTypes.RENDERED: {
+      Logger.info('Panel rendered message received');
+      window.Strigo?.expandPanel();
+
+      break;
+    }
+
     default: {
       break;
     }
diff --git a/src/modules/widgets/overlay.ts b/src/modules/widgets/overlay.ts
index 0c812d6..ba0e30c 100644
--- a/src/modules/widgets/overlay.ts
+++ b/src/modules/widgets/overlay.ts
@@ -14,7 +14,7 @@ import { IOverlayWidget } from './widget.types';
 const MINIMUM_WIDTH = 342;
 
 function postDockableStateToStrigo(): void {
-  Logger.info('Posting dockable state to Strigo...');
+  Logger.info('Posting dockable state to Strigo', {});
   const dockingSide = configManager.getConfigValue('dockingSide');
   const strigoIframe = document.getElementById('strigo-exercises') as HTMLIFrameElement;
   strigoIframe.contentWindow.postMessage({ dockable: true, dockingSide }, '*');
@@ -114,7 +114,7 @@ class OverlayWidget implements IOverlayWidget {
 
   collapse(): void {
     Logger.info('overlay collapse called');
-    documentTools.toggleWidget();
+    documentTools.collapseWidget();
   }
 
   open(): void {
diff --git a/src/strigo/index.ts b/src/strigo/index.ts
index 16a442a..b2820fe 100644
--- a/src/strigo/index.ts
+++ b/src/strigo/index.ts
@@ -150,6 +150,10 @@ class StrigoSDK implements IStrigoSDK {
 
       if (openWidget) {
         this.open();
+
+        // Collapse the panel so it would open when fully loaded
+        sessionManager.setSessionValue('shouldPanelBeOpen', false);
+        this.collapse();
       }
     } catch (err) {
       Logger.error('Could not setup SDK', { err });
@@ -191,6 +195,14 @@ class StrigoSDK implements IStrigoSDK {
     }
   }
 
+  expandPanel(): void {
+    Logger.info('Expanding academy panel');
+    const config = configManager.getLocalStorageConfig();
+
+    const widget = widgetFactory.getWidget(config.selectedWidgetFlavor);
+    widget.open();
+  }
+
   collapse(): void {
     Logger.info('Collapsing academy panel');
     const { selectedWidgetFlavor } = configManager.getLocalStorageConfig();
diff --git a/src/strigo/types.ts b/src/strigo/types.ts
index 7309f1f..14d3b89 100644
--- a/src/strigo/types.ts
+++ b/src/strigo/types.ts
@@ -25,6 +25,7 @@ export interface IStrigoSDK {
   init: () => void;
   setup: (data?: SDKSetupData) => Promise<void>;
   open: () => void;
+  expandPanel: () => void;
   collapse?: () => void;
   shutdown: () => void;
   destroy: () => void;