From 8eb919b3ad57e9289750ec38ddf5d2e016df10bb Mon Sep 17 00:00:00 2001
From: Beth Davies <daviesba4@cardiff.ac.uk>
Date: Wed, 11 Dec 2024 22:12:51 +0000
Subject: [PATCH] Fix javascript functionality
---
.../static/js/layout/accountDropdown.js | 18 +++++++++++++++
src/main/resources/static/js/layout/layout.js | 23 -------------------
.../resources/templates/layout/layout.html | 4 ++--
3 files changed, 20 insertions(+), 25 deletions(-)
create mode 100644 src/main/resources/static/js/layout/accountDropdown.js
delete mode 100644 src/main/resources/static/js/layout/layout.js
diff --git a/src/main/resources/static/js/layout/accountDropdown.js b/src/main/resources/static/js/layout/accountDropdown.js
new file mode 100644
index 0000000..f7c5077
--- /dev/null
+++ b/src/main/resources/static/js/layout/accountDropdown.js
@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const accountOptions = document.getElementById('account-options');
+ const dropdownContent = document.getElementsByClassName('dropdown-content');
+
+ accountOptions.addEventListener('click', function (e) {
+ [...dropdownContent].forEach(dropdown => {
+ dropdown.style.display = dropdown.style.display ===
+ 'block' ? 'none' : 'block'
+ });
+ });
+
+ //hide dropdown when user clicks outside of element
+ document.addEventListener('click', function(e) {
+ if (!accountOptions.contains(e.target)) {
+ [...dropdownContent].style.display = 'none';
+ }
+ });
+});
\ No newline at end of file
diff --git a/src/main/resources/static/js/layout/layout.js b/src/main/resources/static/js/layout/layout.js
deleted file mode 100644
index b6061aa..0000000
--- a/src/main/resources/static/js/layout/layout.js
+++ /dev/null
@@ -1,23 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
- const accountOptions = document.getElementsByClassName('account-options');
- const dropdownContent = document.getElementsByClassName('dropdown-content');
-
- accountOptions.addEventListener('click', function (e) {
- if (window.innerWidth <= 768) {
- e.preventDefault();
- dropdownContent.style.display = dropdownContent.style.display ===
- 'block' ? 'none' : 'block';
- }
- });
- document.addEventListener('click', function(e) {
- if (!accountOptions.contains(e.target)) {
- dropdownContent.style.display = 'none';
- }
- });
- window.addEventListener('resize', function() {
- if (window.innerWidth > 768) {
- dropdownContent.style.display = '';
- }
- });
-
-});
\ No newline at end of file
diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html
index 13cb3fd..b71dc56 100644
--- a/src/main/resources/templates/layout/layout.html
+++ b/src/main/resources/templates/layout/layout.html
@@ -62,7 +62,7 @@
</div>
<!-- Profile -->
- <div class="account-options" id="dropdown">
+ <div id="account-options">
<div sec:authorize="isAnonymous()">
<img src="/assets/navbarImages/profile.png" class="navIcons anonymous">
<span class="navText">Sign in</span>
@@ -123,6 +123,6 @@
</div>
</footer>
<script th:replace="~{comments/commentFragment::commentScript}"></script>
- <script src="/js/layout/layout.js"></script>
+ <script src="/js/layout/accountDropdown.js"></script>
</body>
</html>
\ No newline at end of file
--
GitLab