From b6b7d87168794f3dbb2a981f478fc2b03f7f9dda Mon Sep 17 00:00:00 2001
From: Dalia <dalia.bachmatiuk@codewave.pl>
Date: Wed, 12 Jun 2024 19:14:09 +0200
Subject: [PATCH 1/2] #24830 add flotiq.detached event

---
 .../PluginsDevelopment/plugin-examples.md     | 65 +++++++++++++++----
 docs/panel/PluginsDevelopment/plugins.md      | 15 +++++
 2 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/docs/panel/PluginsDevelopment/plugin-examples.md b/docs/panel/PluginsDevelopment/plugin-examples.md
index c44ac119..53c3b412 100644
--- a/docs/panel/PluginsDevelopment/plugin-examples.md
+++ b/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.
diff --git a/docs/panel/PluginsDevelopment/plugins.md b/docs/panel/PluginsDevelopment/plugins.md
index f8297952..7f703dba 100644
--- a/docs/panel/PluginsDevelopment/plugins.md
+++ b/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.

From 6a32ad2f7d0fce94404c8a71061388b8b1615324 Mon Sep 17 00:00:00 2001
From: rgembalik <rgembalik@users.noreply.github.com>
Date: Thu, 13 Jun 2024 09:41:53 +0200
Subject: [PATCH 2/2] Update docs/panel/PluginsDevelopment/plugins.md

---
 docs/panel/PluginsDevelopment/plugins.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/panel/PluginsDevelopment/plugins.md b/docs/panel/PluginsDevelopment/plugins.md
index 7f703dba..a54ad916 100644
--- a/docs/panel/PluginsDevelopment/plugins.md
+++ b/docs/panel/PluginsDevelopment/plugins.md
@@ -308,6 +308,9 @@ return element;
 ```
 { data-search-exclude }
 
+!!! note On multiple attaches/detaches
+    Your HTML element may be attached and detached multiple times, depending on the view and place being rendered. Be prepared to handle those situations accordingly. E.g. if you keep your elements in a cache across multiple renders, consider waiting at least 50ms before the element is removed from the cache.
+
 ## 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.