Tool metadata
@@ -204,7 +225,7 @@ Relevant tools and resources
|
{% if tool.registry-link != blank %}
@@ -214,9 +235,11 @@ Relevant tools and resources
| {% if tool.id %} {{tool.id}} {%- endif %} |
{% if tool.topics %} {%- for topic in tool.topics %}
- {{topic}}
+ {{topic}}
+
{%- endfor %} {%- endif %}
|
@@ -333,5 +356,113 @@ Relevant tools and resources
});
table.buttons().container().prependTo("#DataTables_Table_0_length");
+
+ let searchTerm = "";
+ searchFilter(table, searchTerm);
+
+ // Event listener for Clear All Filters button
+ document
+ .querySelector(".clear-all-button")
+ .addEventListener("click", function () {
+ clearAllFilters();
+ });
+
+ // Event listener for Topic Badges
+ var badges = document.querySelectorAll(".topic-badge");
+ badges.forEach(function (badge) {
+ badge.addEventListener("click", function () {
+ handleBadgeClick(this);
+ });
+ });
+
+ function handleBadgeClick(badge) {
+ var topic = badge.textContent.trim();
+
+ // Check if a filter badge with the same text already exists
+ if (!filterBadgeExists(topic)) {
+ var filterBadge = document.createElement("span");
+ filterBadge.className =
+ "btn btn-light px-2 border border-dark text-dark btn-sm rounded-pill fw-bold mx-2 text-wrap filter-badge";
+ filterBadge.textContent = topic;
+
+ // Add '×' symbol for removing the filter chip
+ var removeButton = document.createElement("span");
+ removeButton.innerHTML = " ✕";
+ filterBadge.appendChild(removeButton);
+
+ searchTerm = `${searchTerm.trim()} ${topic}`.trim();
+ searchFilter(table, searchTerm);
+
+ // Add click event to remove the filter badge
+ filterBadge.addEventListener("click", function () {
+ handleBadgeRemoval(this);
+ });
+
+ document.getElementById("filterContainer").appendChild(filterBadge);
+
+ document.querySelector(".filter-message").style.display = "none";
+ document.querySelector(".clear-all-button").style.display =
+ "inline-block";
+ }
+ }
+
+ function searchFilter(table, searchTerm) {
+ table
+ .columns(4)
+ .search(searchTerm, {
+ boundary: true,
+ })
+ .draw();
+
+ // Add click event to new badges displayed
+ var badges = document.querySelectorAll(".topic-badge");
+ badges.forEach(function (badge) {
+ badge.addEventListener("click", function () {
+ handleBadgeClick(this);
+ });
+ });
+ }
+
+ // Function to check if a filter badge with the same text already exists
+ function filterBadgeExists(topic) {
+ var filterBadges = document.querySelectorAll(".filter-badge");
+ for (var i = 0; i < filterBadges.length; i++) {
+ if (filterBadges[i].textContent.includes(topic)) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ // Function to handle removal of filter badge
+ function handleBadgeRemoval(badge) {
+ badge.parentNode.removeChild(badge);
+
+ const filterBadgeText = badge.textContent.replace(" \u2715", "");
+ searchTerm = searchTerm
+ .replace(filterBadgeText, "")
+ .replace(/\s+/g, " ")
+ .trim();
+ searchFilter(table, searchTerm);
+
+ if (document.querySelectorAll(".filter-badge").length === 0) {
+ document.querySelector(".filter-message").style.display =
+ "inline-block";
+ document.querySelector(".clear-all-button").style.display = "none";
+ }
+ }
+
+ function clearAllFilters() {
+ var filterBadges = document.querySelectorAll(".filter-badge");
+ filterBadges.forEach(function (badge) {
+ badge.parentNode.removeChild(badge);
+ });
+
+ searchTerm = "";
+ searchFilter(table, searchTerm);
+
+ document.querySelector(".filter-message").style.display = "inline-block";
+ document.querySelector(".clear-all-button").style.display = "none";
+ }
});
|