From 4135cb4570b9a6c7f8a2a82be05678f8e26d18d3 Mon Sep 17 00:00:00 2001
From: Taro Matsuzawa <btm@tech.email.ne.jp>
Date: Tue, 10 Oct 2023 07:25:09 +0900
Subject: [PATCH] #257 map doesn't be blank

---
 app/helpers/gtt_map_helper.rb | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/app/helpers/gtt_map_helper.rb b/app/helpers/gtt_map_helper.rb
index 88da261e..4e913f94 100644
--- a/app/helpers/gtt_map_helper.rb
+++ b/app/helpers/gtt_map_helper.rb
@@ -39,9 +39,37 @@ def map_tag(map: nil, layers: map&.layers,
       content_tag(:div, "", data: data, id: uid, class: 'ol-map',
         style: (collapsed ? "display: none" : "display: block")),
       javascript_tag("
+        var contentObserver = () => {
+          const target = document.getElementById('#{uid}');
+          const observerCallback = function(mutations) {
+            mutations.forEach(function(mutation) {
+              if (mutation.removedNodes.length) {
+                mutation.removedNodes.forEach(function(node) {
+                  if (node === target) {
+                    observer.disconnect();
+                    let event = new Event('contentUpdated');
+                    document.dispatchEvent(event);
+                  }
+                });
+              }
+            });
+          };
+          const observer = new MutationObserver(observerCallback);
+          const config = {
+            childList: true,
+            subtree: true
+          };
+          observer.observe(document.body, config);
+        }
+        document.addEventListener('contentUpdated', function(){
+          var target = document.getElementById('#{uid}');
+          window.createGttClient(target);
+          contentObserver();
+        }, { once: true });
         document.addEventListener('DOMContentLoaded', function(){
           var target = document.getElementById('#{uid}');
           window.createGttClient(target);
+          contentObserver();
         });
       ")
     ]