Collapse when opening and expand after rendered

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;

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;
     }

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 {

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();

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;