Reload component on update

app/assets/javascripts/app/services/componentManager.js

@@ -15,6 +15,13 @@ class ComponentManager {
     this.contextStreamObservers = [];
     this.activeComponents = [];
 
+    desktopManager.registerUpdateObserver((component) => {
+      // Reload theme if active
+      if(component.active && component.isTheme()) {
+        this.postActiveThemeToAllComponents();
+      }
+    })
+
     // this.loggingEnabled = true;
 
     this.permissionDialogs = [];
@@ -107,12 +114,14 @@ class ComponentManager {
     });
   }
 
-  postThemeToAllComponents() {
+  postActiveThemeToAllComponents() {
     for(var component of this.components) {
-      if(component.area == "themes" || !component.active || !component.window) {
+      // Skip over components that are themes themselves,
+      // or components that are not active, or components that don't have a window
+      if(component.isTheme() || !component.active || !component.window) {
         continue;
       }
-      this.postThemeToComponent(component);
+      this.postActiveThemeToComponent(component);
     }
   }
 
@@ -120,7 +129,7 @@ class ComponentManager {
     return this.componentsForArea("themes").find((theme) => {return theme.active});
   }
 
-  postThemeToComponent(component) {
+  postActiveThemeToComponent(component) {
     var activeTheme = this.getActiveTheme();
     var data = {
       themes: [activeTheme ? this.urlForComponent(activeTheme) : null]
@@ -681,7 +690,7 @@ class ComponentManager {
         environment: isDesktopApplication() ? "desktop" : "web"
       }
     });
-    this.postThemeToComponent(component);
+    this.postActiveThemeToComponent(component);
   }
 
   activateComponent(component, dontSync = false) {
@@ -704,7 +713,7 @@ class ComponentManager {
     }
 
     if(component.area == "themes") {
-      this.postThemeToAllComponents();
+      this.postActiveThemeToAllComponents();
     }
   }
 
@@ -735,7 +744,7 @@ class ComponentManager {
     })
 
     if(component.area == "themes") {
-      this.postThemeToAllComponents();
+      this.postActiveThemeToAllComponents();
     }
   }
 

app/assets/javascripts/app/services/desktopManager.js

@@ -2,12 +2,14 @@
 
 class DesktopManager {
 
-  constructor($rootScope, modelManager, syncManager, authManager, passcodeManager) {
+  constructor($rootScope, $timeout, modelManager, syncManager, authManager, passcodeManager) {
     this.passcodeManager = passcodeManager;
     this.modelManager = modelManager;
     this.authManager = authManager;
     this.syncManager = syncManager;
     this.$rootScope = $rootScope;
+    this.timeout = $timeout;
+    this.updateObservers = [];
 
     this.isDesktop = isDesktopApplication();
 
@@ -49,6 +51,16 @@ class DesktopManager {
     this.installComponentHandler(this.convertComponentForTransmission(component));
   }
 
+  registerUpdateObserver(callback) {
+    var observer = {id: Math.random, callback: callback};
+    this.updateObservers.push(observer);
+    return observer;
+  }
+
+  deregisterUpdateObserver(observer) {
+    _.pull(this.updateObservers, observer);
+  }
+
   desktop_onComponentInstallationComplete(componentData, error) {
     console.log("Web|Component Installation/Update Complete", componentData, error);
 
@@ -67,6 +79,12 @@ class DesktopManager {
     }
     component.setDirty(true);
     this.syncManager.sync("onComponentInstallationComplete");
+
+    this.timeout(() => {
+      for(var observer of this.updateObservers) {
+        observer.callback(component);
+      }
+    })
   }
 
   /* Used to resolve "sn://" */

app/assets/javascripts/app/services/themeManager.js

@@ -1,8 +1,18 @@
 class ThemeManager {
 
-  constructor(componentManager) {
+  constructor(componentManager, desktopManager) {
     this.componentManager = componentManager;
 
+    desktopManager.registerUpdateObserver((component) => {
+      // Reload theme if active
+      if(component.active && component.isTheme()) {
+        this.deactivateTheme(component);
+        setTimeout(() => {
+          this.activateTheme(component);
+        }, 10);
+      }
+    })
+
     componentManager.registerHandler({identifier: "themeManager", areas: ["themes"], activationHandler: (component) => {
       if(component.active) {
         this.activateTheme(component);