fix #1 behavior with a close button

Author: tchiotludo

assets/js/main.js

@@ -145,26 +145,35 @@ $(document).on('ready turbolinks:load', function () {
     });
 
     // Highlight
-    $('pre.highlight code').on('dblclick', function() {
-        let code = $(this);
+    $('pre.highlight code')
+        .on('click', function() {
+            let code = $(this);
 
-        if (code.closest('tr').hasClass("hightlight")) {
-            code.
-                removeClass()
-                .html(code.data('raw'))
-                .closest('tr')
-                .removeClass("hightlight")
-        } else {
-            code.data('raw', code.html());
+            if (!code.closest('tr').hasClass("hightlight")) {
+                code.data('raw', code.html());
 
-            try {
-                let json = JSON.parse(code.html());
-                code.html(JSON.stringify(json, null, 2));
-            } catch (e) {}
+                try {
+                    let json = JSON.parse(code.html());
+                    code.html(JSON.stringify(json, null, 2));
+                } catch (e) {}
 
-            hljs.highlightBlock(code[0]);
+                hljs.highlightBlock(code[0]);
 
-            code.closest('tr').addClass("hightlight");
-        }
-    });
+                code.closest('tr').addClass("hightlight");
+                code.closest('td').find('button.close').toggleClass('d-none');
+            }
+        })
+        .closest('td')
+        .find('button.close')
+        .on('click', function() {
+            $(this).toggleClass('d-none');
+
+            let code = $(this).parent().find('code');
+            $(this).parent().find('code')
+                .removeClass()
+                .html(code.data('raw'))
+                .closest('tr')
+                .removeClass("hightlight")
+        })
+    ;
 });

public/blocks/topic/data.ftl

@@ -134,6 +134,9 @@
                 </tr>
                 <tr <#if !(data.getValue())??>class="deleted"</#if>>
                     <td colspan="${(canDeleteRecords == true)?then("6", "5")}">
+                        <button type="button" class="close d-none" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
                         <#if data.getHeaders()?size != 0>
                             <table class="table table-sm collapse headers-${i}">
                                 <#list data.getHeaders() as key, value>