frontend: templates: Prevent rapid btn clicks

#65
Open-Telecoms-Data · Dec 23, 2022 · 4a49e93 · 4a49e93
1 parent a21a3af
commit 4a49e93
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/cove_ofds/sass/_custom-ofds.sass b/cove_ofds/sass/_custom-ofds.sass
@@ -102,6 +102,8 @@ a pre
 h4.validation-title
   display: flex
   justify-content: space-between
+  margin-top: 15px
+  margin-bottom: -10px
 
   button.btn-link
     color: #777

diff --git a/cove_ofds/static/dataexplore/css/bootstrap-ofds.css b/cove_ofds/static/dataexplore/css/bootstrap-ofds.css
diff --git a/cove_ofds/templates/cove_ofds/jsonschema_validation_panel.html b/cove_ofds/templates/cove_ofds/jsonschema_validation_panel.html
@@ -208,15 +208,21 @@ <h4 class="validation-title">
   const buttons = document.querySelectorAll('.validation-error-toggle');
   buttons.forEach(button => {
     button.addEventListener('click', () => {
-      if (button.classList.contains('collapsed')) {
-      let span = button.querySelector(".glyphicon-chevron-down");
-      span.classList.remove("glyphicon-chevron-down");
-      span.classList.add("glyphicon-chevron-up");
-      } else {
-        let span = button.querySelector(".glyphicon-chevron-up");
-        span.classList.remove("glyphicon-chevron-up");
-        span.classList.add("glyphicon-chevron-down");
-      }
+      setTimeout(() => {
+        if (button.getAttribute('aria-expanded') !== 'false') {
+          let span = button.querySelector(".glyphicon-chevron-down");
+          if (span) {
+            span.classList.remove("glyphicon-chevron-down");
+            span.classList.add("glyphicon-chevron-up");
+          }
+        } else {
+          let span = button.querySelector(".glyphicon-chevron-up");
+          if (span) {
+            span.classList.remove("glyphicon-chevron-up");
+            span.classList.add("glyphicon-chevron-down");
+          }
+        }
+      }, 500)
     });
   });
 });