diff --git a/resource-list.js b/resource-list.js new file mode 100644 index 0000000..5e1d339 --- /dev/null +++ b/resource-list.js @@ -0,0 +1,113 @@ +function updateResourceList(data) { + const activeTags = Array.from(document.querySelectorAll(".tag-filter input:checked")) + .map(input => input.value); + + const exclusiveToggle = document.getElementById("exclusive-filter-toggle").checked; + + console.log("Active tags:", activeTags); // Debugging line + console.log("Exclusive mode:", exclusiveToggle); // Debugging line + + // Filter resources based on active tags + const filteredData = data.filter(d => { + const resourceTags = Object.keys(d) + .filter(key => !["Name", "Link", "Description"].includes(key) && d[key].toLowerCase() === "yes"); + if (exclusiveToggle) { + // In exclusive mode, include only resources with EXACTLY the active tags + return resourceTags.length === activeTags.length && activeTags.every(tag => resourceTags.includes(tag)); + } else { + // Default mode: include resources with ANY of the active tags + return activeTags.some(tag => resourceTags.includes(tag)); + } + }); + + // If no resources match, show a message + if (filteredData.length === 0) { + document.getElementById("resources-list").innerHTML = "No resources match the selected filters."; + return; + } + + // Generate HTML for the filtered list + let html = ""; + + // Update the resource list with filtered resources + document.getElementById("resources-list").innerHTML = html; +} + +// Generate filter checkboxes based on unique tag headers +function generateFilterCheckboxes(data) { + const tagHeaders = Object.keys(data[0]).filter(key => !["Name", "Link", "Description"].includes(key)); + + console.log("Tag Headers:", tagHeaders); // Debugging line + + let filterHTML = ""; + tagHeaders.forEach(tag => { + filterHTML += ` +
+ +
`; + }); + + document.getElementById("filter-controls").innerHTML = filterHTML; +} + +// Attach event listeners to checkboxes +function attachFilterListeners(data) { + const checkboxes = document.querySelectorAll(".tag-filter input"); + checkboxes.forEach(checkbox => { + checkbox.addEventListener("change", () => updateResourceList(data)); + }); + + const exclusiveToggle = document.getElementById("exclusive-filter-toggle"); + exclusiveToggle.addEventListener("change", () => updateResourceList(data)); + + const selectAllButton = document.getElementById("select-all-btn"); + selectAllButton.addEventListener("click", () => { + // Check all checkboxes + checkboxes.forEach(checkbox => checkbox.checked = true); + + // Update the resource list after selecting all + updateResourceList(data); + }); + + const deselectAllButton = document.getElementById("deselect-all-btn"); + deselectAllButton.addEventListener("click", () => { + // Uncheck all checkboxes + checkboxes.forEach(checkbox => checkbox.checked = false); + + // Update the resource list after deselecting all + updateResourceList(data); + }); +} + +// Load data and initialize filters +d3.csv("resources/resources.csv").then(function (data) { + // If no data, show an empty state message + if (!data || data.length === 0) { + document.getElementById("resources-list").innerHTML = "No resources listed yet."; + return; + } + + // Generate and populate filters + generateFilterCheckboxes(data); + + // Populate initial resource list + updateResourceList(data); + + // Attach filter listeners + attachFilterListeners(data); +}).catch(function (error) { + console.error("Error loading resources:", error); + document.getElementById("resources-list").innerHTML = "Could not load resources list."; +}); diff --git a/resources.html b/resources.html index 04fd619..e2ca47c 100644 --- a/resources.html +++ b/resources.html @@ -6,7 +6,8 @@ Interactive Blueprint - + + BioEcoOcean Logo BioEcoOcean Logo BioEcoOcean Logo @@ -23,18 +24,25 @@

Resources

-

Here you will find a list of resources that are relevant to each of the components of Blueprint.

+

Here you will find a list of resources that are relevant to each of the components of Blueprint. Check each box to display resources associated with a specific Blueprint component.



Under development: more content to come!


-

Resources include:

- +

Resources:

+
+ + +
+
+ Show only resources with selected tags exclusively + + +
+
+ +