From 1877412ebf3f5f08e6969f1825d22f9e3a3d6036 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Wed, 12 Dec 2018 16:21:19 -0600 Subject: [PATCH] Loading overlay for componentView --- .../app/directives/views/componentView.js | 63 ++++++++++++------- .../app/services/componentManager.js | 21 ++++--- .../javascripts/app/services/themeManager.js | 3 - app/assets/stylesheets/app/_modals.scss | 7 +++ .../directives/component-view.html.haml | 2 + 5 files changed, 60 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/app/directives/views/componentView.js b/app/assets/javascripts/app/directives/views/componentView.js index a68ea4be5..efe212198 100644 --- a/app/assets/javascripts/app/directives/views/componentView.js +++ b/app/assets/javascripts/app/directives/views/componentView.js @@ -45,34 +45,49 @@ class ComponentView { return; } - // activationHandlers may be called multiple times, design below to be idempotent - if(component.active) { - $scope.loading = true; - let iframe = componentManager.iframeForComponent(component); - if(iframe) { - // begin loading error handler. If onload isn't called in x seconds, display an error - if($scope.loadTimeout) { $timeout.cancel($scope.loadTimeout);} - $scope.loadTimeout = $timeout(() => { - if($scope.loading) { - $scope.issueLoading = true; - } - }, 3500); - iframe.onload = function(event) { - // console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout); - $timeout.cancel($scope.loadTimeout); - $scope.loading = false; - $scope.issueLoading = false; - componentManager.registerComponentWindow(component, iframe.contentWindow); - }.bind(this); - } - } - }, + $timeout(() => { + $scope.handleActivation(); + }) + }, actionHandler: (component, action, data) => { if(action == "set-size") { componentManager.handleSetSizeEvent(component, data); } - }} - ); + } + }); + + $scope.handleActivation = function() { + // activationHandlers may be called multiple times, design below to be idempotent + let component = $scope.component; + if(!component.active) { + return; + } + + $scope.loading = true; + + let iframe = componentManager.iframeForComponent(component); + if(iframe) { + // begin loading error handler. If onload isn't called in x seconds, display an error + if($scope.loadTimeout) { $timeout.cancel($scope.loadTimeout);} + $scope.loadTimeout = $timeout(() => { + if($scope.loading) { + $scope.issueLoading = true; + } + }, 3500); + iframe.onload = (event) => { + // console.log("iframe loaded for component", component.name, "cancelling load timeout", $scope.loadTimeout); + $timeout.cancel($scope.loadTimeout); + componentManager.registerComponentWindow(component, iframe.contentWindow); + + // Add small timeout to, as $scope.loading controls loading overlay, + // which is used to avoid flicker when enabling extensions while having an enabled theme + $timeout(() => { + $scope.loading = false; + $scope.issueLoading = false; + }, 5) + }; + } + } /* diff --git a/app/assets/javascripts/app/services/componentManager.js b/app/assets/javascripts/app/services/componentManager.js index dbeffcf90..b6a2bba0b 100644 --- a/app/assets/javascripts/app/services/componentManager.js +++ b/app/assets/javascripts/app/services/componentManager.js @@ -154,7 +154,7 @@ class ComponentManager { if(component.isTheme() || !component.active || !component.window) { continue; } - this.postActiveThemeToComponent(component); + this.postActiveThemesToComponent(component); } } @@ -162,14 +162,16 @@ class ComponentManager { return this.componentsForArea("themes").filter((theme) => {return theme.active}); } - postActiveThemeToComponent(component) { - var themes = this.getActiveThemes(); - var urls = themes.map((theme) => { + urlsForActiveThemes() { + let themes = this.getActiveThemes(); + return themes.map((theme) => { return this.urlForComponent(theme); }) - var data = { - themes: urls - } + } + + postActiveThemesToComponent(component) { + let urls = this.urlsForActiveThemes(); + let data = { themes: urls } this.sendMessageToComponent(component, {action: "themes", data: data}) } @@ -805,10 +807,11 @@ class ComponentManager { data: { uuid: component.uuid, environment: isDesktopApplication() ? "desktop" : "web", - platform: getPlatformString() + platform: getPlatformString(), + activeThemeUrls: this.urlsForActiveThemes() } }); - this.postActiveThemeToComponent(component); + this.postActiveThemesToComponent(component); this.desktopManager.notifyComponentActivation(component); } diff --git a/app/assets/javascripts/app/services/themeManager.js b/app/assets/javascripts/app/services/themeManager.js index 76a473ebe..c35a7d021 100644 --- a/app/assets/javascripts/app/services/themeManager.js +++ b/app/assets/javascripts/app/services/themeManager.js @@ -60,8 +60,6 @@ class ThemeManager { return; } - console.log("Activating theme", theme.uuid); - this.activeThemes.push(theme); var url = this.componentManager.urlForComponent(theme); @@ -97,7 +95,6 @@ class ThemeManager { return params; })); let data = JSON.stringify(mapped); - console.log("Caching themes", data); return this.storageManager.setItem(ThemeManager.CachedThemesKey, data, StorageManager.Fixed); } diff --git a/app/assets/stylesheets/app/_modals.scss b/app/assets/stylesheets/app/_modals.scss index 09ac067f2..2e41059fa 100644 --- a/app/assets/stylesheets/app/_modals.scss +++ b/app/assets/stylesheets/app/_modals.scss @@ -178,6 +178,13 @@ min-width: 100%; } + .loading-overlay { + position: absolute; + background-color: var(--sn-stylekit-editor-background-color); + width: 100%; + height: 100%; + } + iframe { // We're disabling flex: 1; because on Firefox, it causes weird sizing issues with component stack items. // Not sure yet if totally required. diff --git a/app/assets/templates/directives/component-view.html.haml b/app/assets/templates/directives/component-view.html.haml index eba49d1c9..985e64a45 100644 --- a/app/assets/templates/directives/component-view.html.haml +++ b/app/assets/templates/directives/component-view.html.haml @@ -111,3 +111,5 @@ "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms", "data-component-id" => "{{component.uuid}}"} Loading + +.loading-overlay{"ng-if" => "loading"}