#24830 add flotiq.detached event

docs/panel/PluginsDevelopment/plugin-examples.md

@@ -186,21 +186,19 @@ FlotiqPlugins.add(
     handler.on(
       `flotiq.grid.cell::render`,
       ({ data, contentType, accessor }) => {
-        if (contentType.name !== 'blogpost') return;
-        if (accessor === 'title') {
-          const titleSpan = document.createElement('span');
-          titleSpan.textContent = data;
+        if (contentType.name !== 'blogpost' || accessor !== 'title') return;
 
-          titleSpan.addEventListener('flotiq.attached', () => {
-            const parentWidth = Math.round(
-              titleSpan.parentElement.getBoundingClientRect().width,
-            );
+        const titleSpan = document.createElement('span');
+        titleSpan.textContent = data;
 
-            titleSpan.innerHTML = `${data} <span style="font-size: 0.9em; color: gray;">(${parentWidth} px)</span>`;
-          });
-          return titleSpan;
-        }
-        return null;
+        titleSpan.addEventListener('flotiq.attached', () => {
+          const parentWidth = Math.round(
+            titleSpan.parentElement.getBoundingClientRect().width,
+          );
+
+          titleSpan.innerHTML = `${data} <span style="font-size: 0.9em; color: gray;">(${parentWidth} px)</span>`;
+        });
+        return titleSpan;
       },
     );
   },
@@ -212,6 +210,47 @@ Result:
 
 ![Title width added to the object data table](img/title-width-plugin.png)
 
+## Clear global counter after element is detached
+
+In some cases, you may need to know when element is detached from the DOM tree. To be able to act immediately after the element is detached, you can use `flotiq.detached` html event. 
+
+Here we clear the global counter after element is detached:
+
+```javascript
+let counter = 0;
+
+FlotiqPlugins.add(
+  {
+    id: 'mycompany.click-counter',
+    name: `Count clicks on the blog post titles`,
+    version: `1.0.0`,
+  },
+  function (handler) {
+    handler.on(
+      `flotiq.grid.cell::render`,
+      ({ data, contentType, accessor }) => {
+        if (contentType.name !== 'blogpost' || accessor !== 'title') return;
+
+        const button = document.createElement('button');
+        button.textContent = `${data} (${counter})`;
+
+        button.addEventListener('click', () => {
+          counter++;
+          button.textContent = `${data} (${counter})`;
+        });
+
+        button.addEventListener('flotiq.detached', () => {
+          counter = 0;
+        });
+
+        return button;
+      },
+    );
+  },
+);
+```
+{ data-search-exclude }
+
 ## Open custom modal 
 
 Open the modal by clicking on the grid ID cell.

docs/panel/PluginsDevelopment/plugins.md

@@ -293,6 +293,21 @@ return element;
 ```
 { data-search-exclude }
 
+### Acting when an element is detached from the DOM tree
+
+If you want to do something after detaching an element from the DOM tree (e.g. clear the element cache), you can use `flotiq.detached` DOM event.
+
+**Important**: This event is only fired on the root element returned by the plugin. Elements inside will not receive this event.
+
+```javascript
+const element = document.createElement('span');
+element.addEventListener('flotiq.detached', () => { 
+  console.log('element removed'); // will be fired after element is detached
+});
+return element;
+```
+{ data-search-exclude }
+
 ## Plugin Installation
 
 Once you have your plugin written, you have several options to install it into Flotiq UI. Multiple instances of the plugin with the same `id` will override each other, so you can easily update your plugin as needed.