From 28c55ca80c309263cd0cdf1698cb60411d678b55 Mon Sep 17 00:00:00 2001 From: a Date: Sat, 21 Sep 2024 11:59:36 +0100 Subject: [PATCH] navbar enhancements Signed-off-by: a --- src/main/resources/messages_en_GB.properties | 1 + src/main/resources/static/css/navbar.css | 8 ++ src/main/resources/static/js/favourites.js | 68 ++++++++++---- src/main/resources/static/js/homecard.js | 52 +++++++++-- .../resources/templates/fragments/card.html | 2 +- src/main/resources/templates/home.html | 91 +++++++++++++------ 6 files changed, 167 insertions(+), 55 deletions(-) diff --git a/src/main/resources/messages_en_GB.properties b/src/main/resources/messages_en_GB.properties index d1ef95c76..4c2a40cbf 100644 --- a/src/main/resources/messages_en_GB.properties +++ b/src/main/resources/messages_en_GB.properties @@ -126,6 +126,7 @@ navbar.sections.convertFrom=Convert from PDF navbar.sections.security=Sign & Security navbar.sections.advance=Advanced navbar.sections.edit=View & Edit +navbar.sections.popular=Popular ############# # SETTINGS # diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css index ca543ee4a..b8d671035 100644 --- a/src/main/resources/static/css/navbar.css +++ b/src/main/resources/static/css/navbar.css @@ -89,6 +89,14 @@ width: 80%; } +.close-icon { + color: var(--md-sys-color-secondary); +} + +.close-icon:hover { + transform: scale(1.15); +} + span.icon-text::after { content: attr(data-text); content: attr(data-text) / ""; diff --git a/src/main/resources/static/js/favourites.js b/src/main/resources/static/js/favourites.js index dbecd013f..16e219f77 100644 --- a/src/main/resources/static/js/favourites.js +++ b/src/main/resources/static/js/favourites.js @@ -1,45 +1,73 @@ function updateFavoritesDropdown() { var dropdown = document.querySelector("#favoritesDropdown"); - // Check if dropdown exists if (!dropdown) { console.error('Dropdown element with ID "favoritesDropdown" not found!'); - return; // Exit the function + return; } - dropdown.innerHTML = ""; // Clear the current favorites + dropdown.innerHTML = ""; var hasFavorites = false; + var addedFeatures = new Set(); for (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); - if (localStorage.getItem(key) === "favorite") { - // Find the corresponding navbar entry + var value = localStorage.getItem(key); + + if (value === "favorite") { var navbarEntry = document.querySelector(`a[href='${key}']`); if (navbarEntry) { - // Create a new dropdown entry - var dropdownItem = document.createElement("a"); - dropdownItem.className = "dropdown-item"; - dropdownItem.href = navbarEntry.href; - dropdownItem.innerHTML = navbarEntry.innerHTML; - dropdown.appendChild(dropdownItem); - hasFavorites = true; + var featureName = navbarEntry.textContent.trim(); + + if (!addedFeatures.has(featureName)) { + var dropdownItem = document.createElement("div"); + dropdownItem.className = "dropdown-item d-flex justify-content-between align-items-center"; + + // Create a wrapper for the original content + var contentWrapper = document.createElement("div"); + contentWrapper.className = "d-flex align-items-center flex-grow-1"; + contentWrapper.style.textDecoration = "none"; + contentWrapper.style.color = "inherit"; + + // Clone the original content + var originalContent = navbarEntry.querySelector('div').cloneNode(true); + contentWrapper.appendChild(originalContent); + + // Create the remove button + var removeButton = document.createElement("button"); + removeButton.className = "btn btn-sm btn-link p-0 ml-2"; + removeButton.innerHTML = 'close'; + removeButton.onclick = function(itemKey, event) { + event.preventDefault(); + event.stopPropagation(); + localStorage.removeItem(itemKey); + updateFavoritesSection(); + updateFavoritesDropdown(); + filterCards(); + }.bind(null, key); + + // Add click event to the content wrapper + contentWrapper.onclick = function(itemHref, event) { + event.preventDefault(); + window.location.href = itemHref; + }.bind(null, navbarEntry.href); + + dropdownItem.appendChild(contentWrapper); + dropdownItem.appendChild(removeButton); + dropdown.appendChild(dropdownItem); + hasFavorites = true; + addedFeatures.add(featureName); + } } else { console.warn(`Navbar entry not found for key: ${key}`); } } } - // Show or hide the default item based on whether there are any favorites if (!hasFavorites) { var defaultItem = document.createElement("a"); defaultItem.className = "dropdown-item"; - defaultItem.textContent = noFavourites; + defaultItem.textContent = noFavourites || "No favorites added"; dropdown.appendChild(defaultItem); } } - -// Ensure that the DOM content has been fully loaded before calling the function -document.addEventListener("DOMContentLoaded", function () { - console.log("DOMContentLoaded event fired"); - updateFavoritesDropdown(); -}); diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js index 4cdecdb7e..d6aa3c29b 100644 --- a/src/main/resources/static/js/homecard.js +++ b/src/main/resources/static/js/homecard.js @@ -24,28 +24,37 @@ function filterCards() { function updateFavoritesSection() { const favoritesContainer = document.getElementById("groupFavorites").querySelector(".feature-group-container"); - favoritesContainer.innerHTML = ""; - const cards = Array.from(document.querySelectorAll(".feature-card")); + favoritesContainer.innerHTML = ""; // Clear the container first + const cards = Array.from(document.querySelectorAll(".feature-card:not(.duplicate)")); + const addedCardIds = new Set(); // To keep track of added card IDs let favoritesAmount = 0; + cards.forEach(card => { - if (localStorage.getItem(card.id) === "favorite") { + if (localStorage.getItem(card.id) === "favorite" && !addedCardIds.has(card.id)) { const duplicate = card.cloneNode(true); + duplicate.classList.add("duplicate"); favoritesContainer.appendChild(duplicate); + addedCardIds.add(card.id); // Mark this card as added favoritesAmount++; } }); + if (favoritesAmount === 0) { document.getElementById("groupFavorites").style.display = "none"; } else { document.getElementById("groupFavorites").style.display = "flex"; - }; + } reorderCards(favoritesContainer); -}; +} function toggleFavorite(element) { var span = element.querySelector("span.material-symbols-rounded"); var card = element.closest(".feature-card"); var cardId = card.id; + + // Prevent the event from bubbling up to parent elements + event.stopPropagation(); + if (span.classList.contains("no-fill")) { span.classList.remove("no-fill"); span.classList.add("fill"); @@ -57,7 +66,33 @@ function toggleFavorite(element) { card.classList.remove("favorite"); localStorage.removeItem(cardId); } - reorderCards(card.parentNode); + + + + // Use setTimeout to ensure this runs after the current call stack is clear + setTimeout(() => { + reorderCards(card.parentNode); + updateFavoritesSection(); + updateFavoritesDropdown(); + filterCards(); + }, 0); +} + +function syncFavorites() { + const cards = Array.from(document.querySelectorAll(".feature-card")); + cards.forEach(card => { + const isFavorite = localStorage.getItem(card.id) === "favorite"; + const starIcon = card.querySelector(".favorite-icon span.material-symbols-rounded"); + if (isFavorite) { + starIcon.classList.remove("no-fill"); + starIcon.classList.add("fill"); + card.classList.add("favorite"); + } else { + starIcon.classList.remove("fill"); + starIcon.classList.add("no-fill"); + card.classList.remove("favorite"); + } + }); updateFavoritesSection(); updateFavoritesDropdown(); filterCards(); @@ -213,5 +248,8 @@ document.addEventListener("DOMContentLoaded", function () { } }) - showFavoritesOnly(); + window.onload = function() { + initializeCards(); + syncFavorites(); // Add this line to ensure everything is in sync on page load + }; }); diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html index df236c589..e4f5e9130 100644 --- a/src/main/resources/templates/fragments/card.html +++ b/src/main/resources/templates/fragments/card.html @@ -15,7 +15,7 @@
- + star
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html index f8f85440c..255867d46 100644 --- a/src/main/resources/templates/home.html +++ b/src/main/resources/templates/home.html @@ -68,11 +68,39 @@ + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + + +
+
+
@@ -199,6 +227,9 @@
+
+
@@ -215,9 +246,7 @@
-
-
+
@@ -227,9 +256,6 @@
-
-
@@ -259,15 +285,15 @@
-
-
+
+
@@ -299,8 +325,7 @@ -