✨ Sending message to iframe for theme switching (#4951)

Author: ignapas

services/static-webserver/client/source/class/osparc/ui/switch/ThemeSwitcher.js

@@ -36,6 +36,7 @@ qx.Class.define("osparc.ui.switch.ThemeSwitcher", {
       if (idx !== -1) {
         const theme = validThemes[1-idx];
         osparc.Preferences.getInstance().setThemeName(theme.name);
+        qx.event.message.Bus.getInstance().dispatchByName("themeSwitch", theme.name);
       }
     },
 

services/static-webserver/client/source/class/osparc/widget/PersistentIframe.js

@@ -26,6 +26,28 @@ qx.Class.define("osparc.widget.PersistentIframe", {
    */
   construct: function(source, el) {
     this.base(arguments, source);
+
+    this.themeSwitchHandler = msg => {
+      this.postThemeSwitch(msg.getData());
+    };
+
+    this.postThemeSwitch = theme => {
+      const iframe = this._getIframeElement();
+      if (this._getIframeElement()) {
+        const iframeDomEl = iframe.getDomElement();
+        const iframeSource = iframe.getSource();
+        if (iframeDomEl && iframeSource) {
+          const msg = "osparc;theme=" + theme;
+          try {
+            iframeDomEl.contentWindow.postMessage(msg, iframeSource);
+          } catch (err) {
+            console.log(`Failed posting message ${msg} to iframe ${iframeSource}\n${err.message}`);
+          }
+        }
+      }
+    };
+
+    qx.event.message.Bus.getInstance().subscribe("themeSwitch", this.themeSwitchHandler);
   },
 
   statics: {
@@ -87,7 +109,14 @@ qx.Class.define("osparc.widget.PersistentIframe", {
     // override
     _createContentElement : function() {
       let iframe = this.__iframe = new qx.ui.embed.Iframe(this.getSource());
-      iframe.addListener("load", () => this.fireEvent("load"));
+      const persistentIframe = this;
+      iframe.addListener("load", () => {
+        const currentTheme = qx.theme.manager.Meta.getInstance().getTheme();
+        if (currentTheme && persistentIframe.postThemeSwitch) {
+          persistentIframe.postThemeSwitch(currentTheme.name);
+        }
+        this.fireEvent("load");
+      });
       iframe.addListener("navigate", e => this.fireDataEvent("navigate", e.getData()));
 
       let standin = new qx.html.Element("div");
@@ -251,5 +280,6 @@ qx.Class.define("osparc.widget.PersistentIframe", {
     this.__iframe.exclude();
     this.__iframe.dispose();
     this.__iframe = undefined;
+    qx.event.message.Bus.getInstance().unsubscribe("themeSwitch", this.themeSwitchHandler);
   }
 });