Reload component on update

app/assets/javascripts/app/directives/views/componentView.js

@@ -1,6 +1,6 @@
 class ComponentView {
 
-  constructor(componentManager, $timeout) {
+  constructor(componentManager, desktopManager, $timeout) {
     this.restrict = "E";
     this.templateUrl = "directives/component-view.html";
     this.scope = {
@@ -9,6 +9,7 @@ class ComponentView {
     };
 
     this.componentManager = componentManager;
+    this.desktopManager = desktopManager;
     this.timeout = $timeout;
   }
 
@@ -37,6 +38,12 @@ class ComponentView {
        }
     }});
 
+    $scope.updateObserver = this.desktopManager.registerUpdateObserver((component) => {
+      if(component == $scope.component && component.active) {
+        $scope.reloadComponent();
+      }
+    })
+
     $scope.$watch('component', function(component, prevComponent){
       ctrl.componentValueChanging(component, prevComponent);
     });
@@ -53,12 +60,20 @@ class ComponentView {
 
       if(component) {
         componentManager.activateComponent(component);
-        console.log("Loading", $scope.component.name, $scope.getUrl(), component.valid_until);
+        console.log("Loading", $scope.component.name, $scope.getUrl(), component.valid_until, $scope.component);
 
         $scope.reloadStatus();
       }
     }
 
+    $scope.reloadComponent = function() {
+      console.log("Reloading component", $scope.component);
+      componentManager.deactivateComponent($scope.component);
+      $timeout(() => {
+        componentManager.activateComponent($scope.component);
+      })
+    }
+
     $scope.reloadStatus = function() {
       let component = $scope.component;
       $scope.reloading = true;
@@ -99,9 +114,11 @@ class ComponentView {
       if($scope.component && !$scope.manualDealloc) {
         componentManager.deactivateComponent($scope.component);
       }
+
+      desktopManager.deregisterUpdateObserver($scope.updateObserver);
     });
   }
 
 }
 
-angular.module('app').directive('componentView', (componentManager, $timeout) => new ComponentView(componentManager, $timeout));
+angular.module('app').directive('componentView', (componentManager, desktopManager, $timeout) => new ComponentView(componentManager, desktopManager, $timeout));

app/assets/javascripts/app/models/app/component.js

@@ -56,7 +56,7 @@ class Component extends Item {
 
   handleDeletedContent() {
     super.handleDeletedContent();
-    
+
     this.active = false;
   }
 
@@ -94,6 +94,10 @@ class Component extends Item {
     return this.area == "editor-editor";
   }
 
+  isTheme() {
+    return this.content_type == "SN|Theme" || this.area == "themes";
+  }
+
   isDefaultEditor() {
     return this.getAppDataItem("defaultEditor") == true;
   }

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