From 0ea37ba7bbae393a6b12d783a8afbfa3fe127655 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Sun, 2 Sep 2018 10:05:23 -0500 Subject: [PATCH] Fixes issue where component view would listen to all component events instead own event --- .../app/directives/views/componentView.js | 71 +++++++++++-------- package-lock.json | 2 +- 2 files changed, 41 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/app/directives/views/componentView.js b/app/assets/javascripts/app/directives/views/componentView.js index d2a0916f1..9a6b95dd6 100644 --- a/app/assets/javascripts/app/directives/views/componentView.js +++ b/app/assets/javascripts/app/directives/views/componentView.js @@ -17,39 +17,8 @@ class ComponentView { link($scope, el, attrs, ctrl) { $scope.el = el; - $scope.identifier = "component-view-" + Math.random(); $scope.componentValid = true; - // console.log("Registering handler", $scope.identifier, $scope.component.name); - - this.componentManager.registerHandler({identifier: $scope.identifier, areas: [$scope.component.area], activationHandler: (component) => { - // activationHandlers may be called multiple times, design below to be idempotent - if(component.active) { - $scope.loading = true; - let iframe = this.componentManager.iframeForComponent(component); - if(iframe) { - // begin loading error handler. If onload isn't called in x seconds, display an error - if($scope.loadTimeout) { this.timeout.cancel($scope.loadTimeout);} - $scope.loadTimeout = this.timeout(() => { - if($scope.loading) { - $scope.issueLoading = true; - } - }, 3500) - iframe.onload = function(event) { - this.timeout.cancel($scope.loadTimeout); - $scope.loading = false; - $scope.issueLoading = false; - this.componentManager.registerComponentWindow(component, iframe.contentWindow); - }.bind(this); - } - } - }, - actionHandler: (component, action, data) => { - if(action == "set-size") { - this.componentManager.handleSetSizeEvent(component, data); - } - }}); - $scope.updateObserver = this.desktopManager.registerUpdateObserver((component) => { if(component == $scope.component && component.active) { $scope.reloadComponent(); @@ -64,6 +33,46 @@ class ComponentView { controller($scope, $rootScope, $timeout, componentManager, desktopManager) { 'ngInject'; + $scope.identifier = "component-view-" + Math.random(); + + componentManager.registerHandler({ + identifier: $scope.identifier, + areas: [$scope.component.area], + activationHandler: (component) => { + if(component !== $scope.component) { + 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); + } + } + }, + actionHandler: (component, action, data) => { + if(action == "set-size") { + componentManager.handleSetSizeEvent(component, data); + } + }} + ); + + /* General note regarding activation/deactivation of components: We pass `true` to componentManager.ac/detivateComponent for the `dontSync` parameter. diff --git a/package-lock.json b/package-lock.json index ae4e39e91..bb1083366 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "standard-notes-web", - "version": "1.0.0", + "version": "2.3.7", "lockfileVersion": 1, "requires": true, "dependencies": {