Deferred appending plugin element to the DOM until when it is active.

altair-graphql · Feb 1, 2020 · 48d5ccf · 48d5ccf
1 parent 541a2d6
commit 48d5ccf
Showing 1 changed file with 20 additions and 18 deletions.
diff --git a/packages/altair-app/src/app/components/plugin-element/plugin-element.component.ts b/packages/altair-app/src/app/components/plugin-element/plugin-element.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit, ElementRef, Input, OnChanges } from '@angular/core';
+import { Component, ViewChild, ElementRef, Input, OnChanges } from '@angular/core';
 import { debug } from 'app/utils/logger';
 import { PluginComponentData, PluginElement } from 'app/services/plugin/plugin';
 
@@ -7,35 +7,37 @@ import { PluginComponentData, PluginElement } from 'app/services/plugin/plugin';
   templateUrl: './plugin-element.component.html',
   styles: []
 })
-export class PluginElementComponent implements OnInit, AfterViewInit, OnChanges {
+export class PluginElementComponent implements OnChanges {
 
   @Input() pluginData?: PluginComponentData;
 
   @ViewChild('pluginElRef', { static: true }) pluginElRef: ElementRef;
   pluginElement: PluginElement;
 
-  constructor() { }
+  isAppended = false;
 
-  ngOnInit() {
-  }
-  ngAfterViewInit() {
-    if (!this.pluginData) {
-      return;
-    }
-    const elementName = (this.pluginData.sidebar_opts && this.pluginData.sidebar_opts.element_name) || this.pluginData.name;
-    this.pluginElement = document.createElement(elementName);
-    if (!this.pluginElement) {
-      debug.error(`Plugin "${elementName}" does not have a custom element defined!`);
-      return;
-    }
+  constructor() { }
 
-    this.pluginElRef.nativeElement.appendChild(this.pluginElement);
-    this.renderElement();
-  }
   ngOnChanges() {
+    if (!this.isAppended && this.pluginData && this.pluginData.isActive) {
+      this.appendPluginElement();
+    }
     this.renderElement();
   }
 
+  appendPluginElement() {
+    if (this.pluginData) {
+      const elementName = (this.pluginData.sidebar_opts && this.pluginData.sidebar_opts.element_name) || this.pluginData.name;
+      this.pluginElement = document.createElement(elementName);
+      if (!this.pluginElement) {
+        debug.error(`Plugin "${elementName}" does not have a custom element defined!`);
+        return;
+      }
+
+      this.pluginElRef.nativeElement.appendChild(this.pluginElement);
+      this.isAppended = true;
+    }
+  }
   renderElement() {
     if (this.pluginElement && this.pluginData) {
       this.pluginElement.props = this.pluginData.props;