From 9cf3f27e992952c69dcad53c91c191e1c103a752 Mon Sep 17 00:00:00 2001
From: Lova Andriarimalala <43842786+Xpirix@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:02:14 +0300
Subject: [PATCH] Fix plugin tags modal

---
 .../templates/plugins/plugin_sidebar.html     |  4 +-
 .../templates/plugins/plugin_tags_modal.html  | 59 +++++++++++++++++++
 .../plugins_tagcloud_modal_include.html       | 16 +----
 qgis-app/static/style/style.css               |  9 ---
 qgis-app/templates/base.html                  |  1 +
 5 files changed, 63 insertions(+), 26 deletions(-)
 create mode 100644 qgis-app/plugins/templates/plugins/plugin_tags_modal.html

diff --git a/qgis-app/plugins/templates/plugins/plugin_sidebar.html b/qgis-app/plugins/templates/plugins/plugin_sidebar.html
index e7b7cdb9..911e7c1e 100644
--- a/qgis-app/plugins/templates/plugins/plugin_sidebar.html
+++ b/qgis-app/plugins/templates/plugins/plugin_sidebar.html
@@ -104,9 +104,7 @@
   
       <li>
         <div>
-          <a href="">
-            {% include_plugins_tagcloud_modal 'plugins.plugin' %}
-          </a>
+        {% include_plugins_tagcloud_modal 'plugins.plugin' %}
         </div>
       </li>
     </ul>
diff --git a/qgis-app/plugins/templates/plugins/plugin_tags_modal.html b/qgis-app/plugins/templates/plugins/plugin_tags_modal.html
new file mode 100644
index 00000000..c707fd45
--- /dev/null
+++ b/qgis-app/plugins/templates/plugins/plugin_tags_modal.html
@@ -0,0 +1,59 @@
+{% load i18n plugins_tagcloud %}
+{% trans "Plugin Tags" as tags_title %}
+<div id="pluginTagsModal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card" style="max-height: 50vh; overflow-y: auto">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ tags_title }}</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      {% include_plugins_tagcloud 'plugins.plugin' %}
+    </section>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+      $el.classList.add('is-active');
+    }
+  
+    function closeModal($el) {
+      $el.classList.remove('is-active');
+    }
+  
+    function closeAllModals() {
+      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+        closeModal($modal);
+      });
+    }
+  
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.tagcloudModalButton') || []).forEach(($trigger) => {
+      const modal = $trigger.dataset.target;
+      const $target = document.getElementById(modal);
+  
+      $trigger.addEventListener('click', () => {
+        openModal($target);
+      });
+    });
+  
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+      const $target = $close.closest('.modal');
+  
+      $close.addEventListener('click', () => {
+        closeModal($target);
+      });
+    });
+  
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+      if(event.key === "Escape") {
+        closeAllModals();
+      }
+    });
+  });
+</script>
diff --git a/qgis-app/plugins/templates/plugins/plugins_tagcloud_modal_include.html b/qgis-app/plugins/templates/plugins/plugins_tagcloud_modal_include.html
index ac6f535b..a8b26d4f 100644
--- a/qgis-app/plugins/templates/plugins/plugins_tagcloud_modal_include.html
+++ b/qgis-app/plugins/templates/plugins/plugins_tagcloud_modal_include.html
@@ -2,20 +2,8 @@
 
 {% trans "Plugin Tags" as tags_title %}
 
-<a id="tagcloudModalButton" href="#tagcloudModal" role="button" class="button  btn-link btn-large" data-toggle="modal">
-  <i class="icon-tags icon-white icon-2x"></i>
+<a class="tagcloudModalButton" href="#tagcloudModal" role="button" data-target="pluginTagsModal">
+  <i class="fas fa-tags mr-3"></i>
   {{ tags_title }}
-  <i class="icon-resize-full icon-white"></i>
 </a>
 
-<div id="tagcloudModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="tag_cloud_modal">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-      <h3>{{ tags_title }}</h3>
-    </div>
-    <div class="modal-body">
-    {% include_plugins_tagcloud 'plugins.plugin' %}
-    </div>
-  </div>
-</div>
diff --git a/qgis-app/static/style/style.css b/qgis-app/static/style/style.css
index 27f934f1..68819f06 100644
--- a/qgis-app/static/style/style.css
+++ b/qgis-app/static/style/style.css
@@ -86,12 +86,3 @@ label.required:after { content:" *"; color: red; }
   }
 }
 
-.modal {
-  /* make modal fullscreen */
-  bottom: 20px;
-}
-
-.modal-header {
-  border-bottom: none;
-  text-align: center;
-}
diff --git a/qgis-app/templates/base.html b/qgis-app/templates/base.html
index b485dfc9..d70ab426 100644
--- a/qgis-app/templates/base.html
+++ b/qgis-app/templates/base.html
@@ -108,6 +108,7 @@
         {{ sustaining_members_section|safe }}
         {% include 'layouts/footer.html' %}
     </div>
+    {% include "plugins/plugin_tags_modal.html" %}
 <script type="text/javascript">
 $('#user-tooltip').tooltip('hide');
 </script>