Merge pull request #2 from flotiq/feature/add-detach-event-listener

add detached event listener and remove manage modal event

Author: rgembalik

common/plugin-element-cache.js

@@ -1,24 +1,17 @@
 const appRoots = {};
 
-export const onElementRemoved = (element, callback) => {
-  new MutationObserver(function () {
-    if (!document.contains(element)) {
-      callback();
-      this.disconnect();
-    }
-  }).observe(element.parentElement, { childList: true });
-};
-
 export const addElementToCache = (element, key, data = {}) => {
   appRoots[key] = {
     element,
     data,
   };
 
-  element.addEventListener(
-    "flotiq.attached",
-    () => onElementRemoved(element, () => delete appRoots[key]),
-    true,
+  setTimeout(
+    () =>
+      element.addEventListener("flotiq.detached", () => {
+        delete appRoots[key];
+      }),
+    50,
   );
 };
 

plugin-manifest.json

@@ -2,7 +2,7 @@
   "id": "flotiq.plain-js-template",
   "name": "Plain JS Plugin Template",
   "description": "A plain js example of Flotiq plugin. This plugin changes the rendering of some data in the grid. It renders colorful text properties, bold numbers, and relations as text.",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "repository": "https://github.com/flotiq/flotiq-ui-plugin-templates-plain-js",
   "url": "https://localhost:3053/index.js",
   "permissions": [

plugins/index.js

@@ -2,7 +2,6 @@ import { registerFn } from "../common/plugin-element-cache";
 import pluginInfo from "../plugin-manifest.json";
 import cssString from "inline:./styles/style.css";
 import { handleGridPlugin } from "./grid-renderers";
-import { handleManagePlugin } from "./manage-modal";
 
 registerFn(pluginInfo, (handler, client) => {
   /**
@@ -18,7 +17,4 @@ registerFn(pluginInfo, (handler, client) => {
   handler.on("flotiq.grid.cell::render", (data) =>
     handleGridPlugin(data, client, pluginInfo),
   );
-  handler.on("flotiq.plugins.manage::render", (data) =>
-    handleManagePlugin(data, pluginInfo),
-  );
 });