diff --git a/app/assets/javascripts/app/directives/views/componentView.js b/app/assets/javascripts/app/directives/views/componentView.js index ecfa5ba14..5c92ffac6 100644 --- a/app/assets/javascripts/app/directives/views/componentView.js +++ b/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)); diff --git a/app/assets/javascripts/app/models/app/component.js b/app/assets/javascripts/app/models/app/component.js index 18ca71daa..8ae195e1e 100644 --- a/app/assets/javascripts/app/models/app/component.js +++ b/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; } diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js index d15e8b816..f34a916c7 100644 --- a/app/assets/javascripts/app/services/componentManager.js +++ b/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(); } } diff --git a/app/assets/javascripts/app/services/desktopManager.js b/app/assets/javascripts/app/services/desktopManager.js index 3d858bca4..145124fbd 100644 --- a/app/assets/javascripts/app/services/desktopManager.js +++ b/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://" */ diff --git a/app/assets/javascripts/app/services/themeManager.js b/app/assets/javascripts/app/services/themeManager.js index 74dad17ff..deda2e089 100644 --- a/app/assets/javascripts/app/services/themeManager.js +++ b/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);