improvement: do not use active admin dialog, just use html5 dialog

Author: tsubik

app/admin/fmu.rb

@@ -117,16 +117,28 @@ def download_shapefiles(fmus)
           end
           if resource.geojson
             row(:geojson) do
-              div id: "geojson_modal", style: "display: none;" do
-                resource.geojson
+              dialog id: "geojson_modal" do
+                html5_header do
+                  strong Fmu.human_attribute_name(:geojson)
+                  button "Close", class: "button close-dialog-button"
+                end
+                div do
+                  resource.geojson
+                end
               end
-              link_to t("active_admin.view"), "javascript:void(0)", onclick: "$('#geojson_modal').dialog({ modal: true, dialogClass: 'custom_dialog' })"
+              link_to t("active_admin.view"), "javascript:void(0)", onclick: "document.querySelector('#geojson_modal').showModal()"
             end
             row(:properties) do
-              div id: "properties_modal", style: "display: none;" do
-                resource.properties
+              dialog id: "properties_modal" do
+                html5_header do
+                  strong Fmu.human_attribute_name(:properties)
+                  button "Close", class: "button close-dialog-button"
+                end
+                div do
+                  resource.properties
+                end
               end
-              link_to t("active_admin.view"), "javascript:void(0)", onclick: "$('#properties_modal').dialog({ modal: true, dialogClass: 'custom_dialog' })"
+              link_to t("active_admin.view"), "javascript:void(0)", onclick: "document.querySelector('#properties_modal').showModal()"
             end
           end
           row :created_at

app/assets/javascripts/active_admin.js

@@ -2,6 +2,7 @@
 //= require activeadmin_addons/all
 //= require access_control
 //= require editor
+//= require dialog
 //= require users
 //= require rod
 //= require fmu

app/assets/javascripts/dialog.js

@@ -0,0 +1,23 @@
+function initializeDialog() {
+  document.querySelectorAll("dialog").forEach((dialog) => {
+    // close when clicking outside
+    dialog.addEventListener("mousedown", (event) => {
+      // Check if the click is on the backdrop (not the dialog content)
+      const dialogDimensions = dialog.getBoundingClientRect();
+      if (
+        event.clientX < dialogDimensions.left ||
+        event.clientX > dialogDimensions.right ||
+        event.clientY < dialogDimensions.top ||
+        event.clientY > dialogDimensions.bottom
+      ) {
+        dialog.close();
+      }
+    });
+
+    dialog.querySelector(".close-dialog-button").addEventListener("click", () => {
+      dialog.close();
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", initializeDialog);

app/assets/stylesheets/active_admin.scss

@@ -214,13 +214,35 @@ body.active_admin {
   display: none;
 }
 
-.custom_dialog {
-  width: unset !important;
+dialog {
+  border: 0;
+  padding: 0;
+
   max-height: 80vh;
   max-width: 70vw;
   overflow-y: auto;
 
-  .ui-dialog-content {
+  header {
+    display: flex;
+    background-color: $panelHeaderBck;
+    color: #fff;
+    justify-content: space-between;
+    align-items: center;
     padding: 10px;
+    border-bottom: 1px solid #ccc;
+
+    .close-dialog {
+      cursor: pointer;
+      font-size: 1.5em;
+    }
   }
+
+  > div {
+    padding: 10px;
+  }
+}
+
+dialog::backdrop {
+  backdrop-filter: blur(2px);
 }
+

config/initializers/active_admin.rb

@@ -369,6 +369,18 @@ def set_admin_locale
   app.view_factory.register header: CustomAdminHeader
 end
 
+module Arbre
+  module HTML
+    class Dialog < Tag
+      builder_method :dialog
+    end
+
+    class Header < Tag
+      builder_method :html5_header
+    end
+  end
+end
+
 # activeadmin_addons update in 1.10 introduced a bug where it raises Formtastic::UnsupportedEnumCollection for multiple selects with enum values
 # not sure why it should be raising not supported but it works so for me it's supported just fine
 # https://github.com/platanus/activeadmin_addons/pull/442/files#diff-811ca221eee9c4866653114961ac21bcd0398557bb402c60f149be506c385a8eR3