Skip to content

Commit 24edd0a

Browse files
lemonsauruslemonsaurus
committed
Add a button for removing all active filters.
1 parent ee1c5e7 commit 24edd0a

File tree

3 files changed

+123
-83
lines changed

3 files changed

+123
-83
lines changed

‎pydis_site/static/css/resources/resources.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,29 @@ i.is-primary {
9797
color: #7289da;
9898
}
9999

100-
/* A little space around the filter card, please! */
100+
/* A little space above the filter card, please! */
101101
.filter-tags {
102102
padding-bottom: .5em;
103-
padding-right: .5em;
104103
}
105104

105+
/* Style the close all filters button */
106+
.close-filters-button {
107+
margin-left: auto;
108+
display:none;
109+
}
110+
.close-filters-button a {
111+
height: fit-content;
112+
width: fit-content;
113+
margin-right: 6px;
114+
}
115+
.close-filters-button a i {
116+
color: #939bb3;
117+
}
118+
.close-filters-button a i:hover {
119+
filter: brightness(115%);
120+
}
121+
122+
106123
/* Set default display to inline-flex, for centering. */
107124
span.filter-box-tag {
108125
display: none;

‎pydis_site/static/js/resources/resources.js

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,33 @@ var activeFilters = {
88
difficulty: []
99
};
1010

11+
/* Add a filter, and update the UI */
1112
function addFilter(filterName, filterItem) {
12-
// Push the filter into the stack
1313
var filterIndex = activeFilters[filterName].indexOf(filterItem);
1414
if (filterIndex === -1) {
1515
activeFilters[filterName].push(filterItem);
1616
}
1717
updateUI();
18+
}
1819

19-
// Show a corresponding filter box tag
20-
$(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
21-
22-
// Make corresponding resource tags active
23-
$(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
24-
25-
// Hide the "No filters selected" tag.
26-
$(".no-tags-selected.tag").hide();
20+
/* Remove all filters, and update the UI */
21+
function removeAllFilters() {
22+
activeFilters = {
23+
topics: [],
24+
type: [],
25+
"payment-tiers": [],
26+
difficulty: []
27+
};
28+
updateUI();
2729
}
2830

31+
/* Remove a filter, and update the UI */
2932
function removeFilter(filterName, filterItem) {
30-
// Remove the filter from the stack
3133
var filterIndex = activeFilters[filterName].indexOf(filterItem);
3234
if (filterIndex !== -1) {
3335
activeFilters[filterName].splice(filterIndex, 1);
3436
}
3537
updateUI();
36-
37-
// Hide the corresponding filter box tag
38-
$(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
39-
40-
// Make corresponding resource tags inactive
41-
$(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
42-
43-
// Show "No filters selected" tag, if there are no filters active
44-
if (noFilters()) {
45-
$(".no-tags-selected.tag").show();
46-
}
4738
}
4839

4940
/* Check if there are no filters */
@@ -76,7 +67,7 @@ function deserializeURLParams() {
7667
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
7768
} else if (String(filter) === "sneakers" && filterType === "topics") {
7869
window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI";
79-
} else if (validFilters[filterType].includes(String(filter))) {
70+
} else if (validFilters.hasOwnProperty(filterType) && validFilters[filterType].includes(String(filter))) {
8071
let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
8172
let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
8273
let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
@@ -91,9 +82,10 @@ function deserializeURLParams() {
9182
// Ditch all the params from the URL, and recalculate the URL params
9283
updateURL();
9384

94-
// If we've added a filter, hide the no filters tag.
85+
// If we've added a filter, hide stuff
9586
if (filterAdded) {
9687
$(".no-tags-selected.tag").hide();
88+
$(".close-filters-button").show();
9789
}
9890
}
9991
});
@@ -123,15 +115,36 @@ function updateURL() {
123115
function updateUI() {
124116
let resources = $('.resource-box');
125117
let filterTags = $('.filter-box-tag');
118+
let noTagsSelected = $(".no-tags-selected.tag");
119+
let closeFiltersButton = $(".close-filters-button");
126120

127121
// Update the URL to match the new filters.
128122
updateURL();
129123

130-
// If there's nothing in the filters, show everything and return.
124+
// If there's nothing in the filters, we can return early.
131125
if (noFilters()) {
132126
resources.show();
133127
filterTags.hide();
128+
noTagsSelected.show();
129+
closeFiltersButton.hide();
130+
$(`.filter-checkbox:checked`).prop("checked", false)
134131
return;
132+
} else {
133+
$.each(activeFilters, function(filterType, filters) {
134+
$.each(filters, function(index, filter) {
135+
// Show a corresponding filter box tag
136+
$(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).show();
137+
138+
// Make corresponding resource tags active
139+
$(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).addClass("active");
140+
141+
// Hide the "No filters selected" tag.
142+
noTagsSelected.hide();
143+
144+
// Show the close filters button
145+
closeFiltersButton.show();
146+
});
147+
});
135148
}
136149

137150
// Otherwise, hide everything and then filter the resources to decide what to show.
@@ -147,7 +160,6 @@ function updateUI() {
147160
let resourceBox = $(this);
148161

149162
// Validate the filters
150-
151163
$.each(activeFilters, function(filterType, filters) {
152164
// If the filter list is empty, this passes validation.
153165
if (filters.length === 0) {
@@ -256,6 +268,11 @@ document.addEventListener("DOMContentLoaded", function () {
256268
}
257269
});
258270

271+
// When you click the little gray x, remove all filters.
272+
$(".close-filters-button").on("click", function() {
273+
removeAllFilters();
274+
});
275+
259276
// When checkboxes are toggled, trigger a filter update.
260277
$('.filter-checkbox').on("change", function (event) {
261278
let filterItem = this.dataset.filterItem;

‎pydis_site/templates/resources/resources.html

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -31,64 +31,70 @@
3131

3232
{# Filter box tags #}
3333
<div class="card filter-tags">
34-
<div class="is-flex ml-auto is-flex-wrap-wrap">
35-
{# A little x in the top right, visible only when filters are active, which removes all filters. #}
36-
<i class="fas fa-window-close"></i>
37-
38-
{# A filter tag for when there are no filters active #}
39-
<span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
40-
<i class="fas fa-ban mr-1"></i>
41-
No filters selected
42-
</span>
34+
<div class="is-flex ml-auto">
35+
<div>
36+
{# A filter tag for when there are no filters active #}
37+
<span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
38+
<i class="fas fa-ban mr-1"></i>
39+
No filters selected
40+
</span>
4341

44-
{% for filter_name, filter_data in filters.items %}
45-
{% for filter_item in filter_data.filters %}
46-
{% if filter_name == "Difficulty" %}
47-
<span
48-
class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
49-
data-filter-name="{{ filter_name|as_css_class }}"
50-
data-filter-item="{{ filter_item|as_css_class }}"
51-
>
52-
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
53-
{{ filter_item|title }}
54-
<button class="delete is-small is-info has-background-info-light"></button>
55-
</span>
56-
{% endif %}
57-
{% if filter_name == "Type" %}
58-
<span
59-
class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
60-
data-filter-name="{{ filter_name|as_css_class }}"
61-
data-filter-item="{{ filter_item|as_css_class }}"
62-
>
63-
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
64-
{{ filter_item|title }}
65-
<button class="delete is-small is-success has-background-success-light"></button>
66-
</span>
67-
{% endif %}
68-
{% if filter_name == "Payment tiers" %}
69-
<span
70-
class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
71-
data-filter-name="{{ filter_name|as_css_class }}"
72-
data-filter-item="{{ filter_item|as_css_class }}"
73-
>
74-
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
75-
{{ filter_item|title }}
76-
<button class="delete is-small is-danger has-background-danger-light"></button>
77-
</span>
78-
{% endif %}
79-
{% if filter_name == "Topics" %}
80-
<span
81-
class="filter-box-tag tag is-primary is-light ml-2 mt-2"
82-
data-filter-name="{{ filter_name|as_css_class }}"
83-
data-filter-item="{{ filter_item|as_css_class }}"
84-
>
85-
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
86-
{{ filter_item|title }}
87-
<button class="delete is-small is-primary has-background-primary-light"></button>
88-
</span>
89-
{% endif %}
42+
{% for filter_name, filter_data in filters.items %}
43+
{% for filter_item in filter_data.filters %}
44+
{% if filter_name == "Difficulty" %}
45+
<span
46+
class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
47+
data-filter-name="{{ filter_name|as_css_class }}"
48+
data-filter-item="{{ filter_item|as_css_class }}"
49+
>
50+
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
51+
{{ filter_item|title }}
52+
<button class="delete is-small is-info has-background-info-light"></button>
53+
</span>
54+
{% endif %}
55+
{% if filter_name == "Type" %}
56+
<span
57+
class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
58+
data-filter-name="{{ filter_name|as_css_class }}"
59+
data-filter-item="{{ filter_item|as_css_class }}"
60+
>
61+
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
62+
{{ filter_item|title }}
63+
<button class="delete is-small is-success has-background-success-light"></button>
64+
</span>
65+
{% endif %}
66+
{% if filter_name == "Payment tiers" %}
67+
<span
68+
class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
69+
data-filter-name="{{ filter_name|as_css_class }}"
70+
data-filter-item="{{ filter_item|as_css_class }}"
71+
>
72+
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
73+
{{ filter_item|title }}
74+
<button class="delete is-small is-danger has-background-danger-light"></button>
75+
</span>
76+
{% endif %}
77+
{% if filter_name == "Topics" %}
78+
<span
79+
class="filter-box-tag tag is-primary is-light ml-2 mt-2"
80+
data-filter-name="{{ filter_name|as_css_class }}"
81+
data-filter-item="{{ filter_item|as_css_class }}"
82+
>
83+
<i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
84+
{{ filter_item|title }}
85+
<button class="delete is-small is-primary has-background-primary-light"></button>
86+
</span>
87+
{% endif %}
88+
{% endfor %}
9089
{% endfor %}
91-
{% endfor %}
90+
</div>
91+
<div class="close-filters-button">
92+
{# A little x in the top right, visible only when filters are active, which removes all filters. #}
93+
<a class="icon">
94+
<i class="fas fa-window-close"></i>
95+
</a>
96+
97+
</div>
9298
</div>
9399
</div>
94100

0 commit comments

Comments
 (0)