From 449853e9a76e43c168dfaa7a3490a7013e8cc5dc Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 2 Dec 2024 17:23:19 +0100
Subject: [PATCH] switch theme driven by the iframe

---
 .../class/osparc/widget/PersistentIframe.js   | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js b/services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js
index 5dafcac9b16..e6bd9a59433 100644
--- a/services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js
+++ b/services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js
@@ -267,6 +267,41 @@ qx.Class.define("osparc.widget.PersistentIframe", {
         this.postThemeSwitch(msg.getData());
       };
       qx.event.message.Bus.getInstance().subscribe("themeSwitch", this.themeSwitchHandler);
+      
+      // listen to messages
+      this.__iframe.addListener("load", () => {
+        const iframe = this._getIframeElement();
+        if (iframe) {
+          const iframeDomEl = iframe.getDomElement();
+          if (iframeDomEl) {
+            const iframeWindow = iframe.getDomElement().contentWindow;
+            window.addEventListener('message', message => {
+              if (message.source === iframeWindow) {
+                const data = message.data;
+                if (data) {
+                  this.__handleIframeMessage(data);
+                }
+              }
+            });
+          }
+        }
+      }, this);
+    },
+
+    __handleIframeMessage: function(data) {
+      // switch theme driven by the iframe
+      if (data["type"] && data["type"] === "theme") {
+        const message = data["message"];
+        console.log(message);
+        if (message.includes("osparc;theme=")) {
+          const themeName = message.replace("osparc;theme=", "");
+          const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();
+          const themeFound = validThemes.find(theme => theme.basename === themeName);
+          if (themeFound) {
+            qx.theme.manager.Meta.getInstance().setTheme(themeFound);
+          }
+        }
+      }
     },
 
     // override