Add a button for removing all active filters.

3 files changed, 123 insertions, 83 deletions

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 16226936..2fb3a9b5 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -97,12 +97,29 @@ i.is-primary {
     color: #7289da;
 }
 
-/* A little space around the filter card, please! */
+/* A little space above the filter card, please! */
 .filter-tags {
     padding-bottom: .5em;
-    padding-right: .5em;
 }
 
+/* Style the close all filters button */
+.close-filters-button {
+    margin-left: auto;
+    display:none;
+}
+.close-filters-button a {
+    height: fit-content;
+    width: fit-content;
+    margin-right: 6px;
+}
+.close-filters-button a i {
+    color: #939bb3;
+}
+.close-filters-button a i:hover {
+    filter: brightness(115%);
+}
+
+
 /* Set default display to inline-flex, for centering. */
 span.filter-box-tag {
     display: none;
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 0e951c38..8627a359 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -8,42 +8,33 @@ var activeFilters = {
     difficulty: []
 };
 
+/* Add a filter, and update the UI */
 function addFilter(filterName, filterItem) {
-    // Push the filter into the stack
     var filterIndex = activeFilters[filterName].indexOf(filterItem);
     if (filterIndex === -1) {
         activeFilters[filterName].push(filterItem);
     }
     updateUI();
+}
 
-    // Show a corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
-
-    // Make corresponding resource tags active
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
-
-    // Hide the "No filters selected" tag.
-    $(".no-tags-selected.tag").hide();
+/* Remove all filters, and update the UI */
+function removeAllFilters() {
+    activeFilters = {
+        topics: [],
+        type: [],
+        "payment-tiers": [],
+        difficulty: []
+    };
+    updateUI();
 }
 
+/* Remove a filter, and update the UI */
 function removeFilter(filterName, filterItem) {
-    // Remove the filter from the stack
     var filterIndex = activeFilters[filterName].indexOf(filterItem);
     if (filterIndex !== -1) {
         activeFilters[filterName].splice(filterIndex, 1);
     }
     updateUI();
-
-    // Hide the corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
-
-    // Make corresponding resource tags inactive
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
-
-    // Show "No filters selected" tag, if there are no filters active
-    if (noFilters()) {
-        $(".no-tags-selected.tag").show();
-    }
 }
 
 /* Check if there are no filters */
@@ -76,7 +67,7 @@ function deserializeURLParams() {
                     window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
                 } else if (String(filter) === "sneakers" && filterType === "topics") {
                     window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI";
-                } else if (validFilters[filterType].includes(String(filter))) {
+                } else if (validFilters.hasOwnProperty(filterType) && validFilters[filterType].includes(String(filter))) {
                     let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                     let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                     let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
@@ -91,9 +82,10 @@ function deserializeURLParams() {
             // Ditch all the params from the URL, and recalculate the URL params
             updateURL();
 
-            // If we've added a filter, hide the no filters tag.
+            // If we've added a filter, hide stuff
             if (filterAdded) {
                 $(".no-tags-selected.tag").hide();
+                $(".close-filters-button").show();
             }
         }
     });
@@ -123,15 +115,36 @@ function updateURL() {
 function updateUI() {
     let resources = $('.resource-box');
     let filterTags = $('.filter-box-tag');
+    let noTagsSelected = $(".no-tags-selected.tag");
+    let closeFiltersButton = $(".close-filters-button");
 
     // Update the URL to match the new filters.
     updateURL();
 
-    // If there's nothing in the filters, show everything and return.
+    // If there's nothing in the filters, we can return early.
     if (noFilters()) {
         resources.show();
         filterTags.hide();
+        noTagsSelected.show();
+        closeFiltersButton.hide();
+        $(`.filter-checkbox:checked`).prop("checked", false)
         return;
+    } else {
+        $.each(activeFilters, function(filterType, filters) {
+            $.each(filters, function(index, filter) {
+                // Show a corresponding filter box tag
+                $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).show();
+
+                // Make corresponding resource tags active
+                $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).addClass("active");
+
+                // Hide the "No filters selected" tag.
+                noTagsSelected.hide();
+
+                // Show the close filters button
+                closeFiltersButton.show();
+            });
+        });
     }
 
     // Otherwise, hide everything and then filter the resources to decide what to show.
@@ -147,7 +160,6 @@ function updateUI() {
         let resourceBox = $(this);
 
         // Validate the filters
-
         $.each(activeFilters, function(filterType, filters) {
             // If the filter list is empty, this passes validation.
             if (filters.length === 0) {
@@ -256,6 +268,11 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    // When you click the little gray x, remove all filters.
+    $(".close-filters-button").on("click", function() {
+        removeAllFilters();
+    });
+
     // When checkboxes are toggled, trigger a filter update.
     $('.filter-checkbox').on("change", function (event) {
         let filterItem = this.dataset.filterItem;
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 4b7e9040..cebaace2 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -31,64 +31,70 @@
 
                         {# Filter box tags #}
                         <div class="card filter-tags">
-                            <div class="is-flex ml-auto is-flex-wrap-wrap">
-                                {# A little x in the top right, visible only when filters are active, which removes all filters. #}
-                                <i class="fas fa-window-close"></i>
-
-                                {# A filter tag for when there are no filters active #}
-                                <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
-                                        <i class="fas fa-ban mr-1"></i>
-                                        No filters selected
-                                </span>
+                            <div class="is-flex ml-auto">
+                                <div>
+                                    {# A filter tag for when there are no filters active #}
+                                    <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
+                                            <i class="fas fa-ban mr-1"></i>
+                                            No filters selected
+                                    </span>
 
-                                {% for filter_name, filter_data in filters.items %}
-                                    {% for filter_item in filter_data.filters %}
-                                        {% if filter_name == "Difficulty" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-info has-background-info-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Type" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-success has-background-success-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Payment tiers" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-danger has-background-danger-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Topics" %}
-                                            <span
-                                                    class="filter-box-tag tag is-primary is-light ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-primary has-background-primary-light"></button>
-                                                </span>
-                                        {% endif %}
+                                    {% for filter_name, filter_data in filters.items %}
+                                        {% for filter_item in filter_data.filters %}
+                                            {% if filter_name == "Difficulty" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-info has-background-info-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Type" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-success has-background-success-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Payment tiers" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-danger has-background-danger-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Topics" %}
+                                                <span
+                                                        class="filter-box-tag tag is-primary is-light ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-primary has-background-primary-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                        {% endfor %}
                                     {% endfor %}
-                                {% endfor %}
+                                </div>
+                                <div class="close-filters-button">
+                                    {# A little x in the top right, visible only when filters are active, which removes all filters. #}
+                                    <a class="icon">
+                                        <i class="fas fa-window-close"></i>
+                                    </a>
+
+                                </div>
                             </div>
                         </div>