💥 feat!: add tag filtering for projects (#431)
- Card (project) images no longer require manual top/bottom margin adjustments for proper spacing. Action needed: Review existing card images as previous manual margin adjustments may now be unnecessary/excessive. - Sites using `cards.html` with tags will now load JavaScript by default when tags are present. To maintain no-JS behaviour, explicitly set `enable_cards_tag_filtering = false` in either `config.toml` or the `_index.md` file where `cards.html` is used.main
welpo
3 months ago
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 9.9 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 62 KiB |
@ -0,0 +1,99 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const cards = document.querySelectorAll('.card');
|
||||
const filterLinks = document.querySelectorAll('.filter-controls a');
|
||||
const allProjectsFilter = document.querySelector('#all-projects-filter');
|
||||
if (!cards.length || !filterLinks.length) return;
|
||||
allProjectsFilter.style.display = 'block';
|
||||
|
||||
// Create a Map for O(1) lookups of links by filter value.
|
||||
const linkMap = new Map(
|
||||
Array.from(filterLinks).map(link => [link.dataset.filter, link])
|
||||
);
|
||||
|
||||
// Pre-process cards data for faster filtering.
|
||||
const cardData = Array.from(cards).map(card => ({
|
||||
element: card,
|
||||
tags: card.dataset.tags?.toLowerCase().split(',').filter(Boolean) ?? []
|
||||
}));
|
||||
|
||||
function getTagSlugFromUrl(url) {
|
||||
return url.split('/').filter(Boolean).pop();
|
||||
}
|
||||
|
||||
function getFilterFromHash() {
|
||||
if (!window.location.hash) return 'all';
|
||||
const hash = decodeURIComponent(window.location.hash.slice(1));
|
||||
const matchingLink = Array.from(filterLinks).find(link =>
|
||||
getTagSlugFromUrl(link.getAttribute('href')) === hash
|
||||
);
|
||||
return matchingLink?.dataset.filter ?? 'all';
|
||||
}
|
||||
|
||||
function setActiveFilter(filterValue, updateHash = true) {
|
||||
if (updateHash) {
|
||||
if (filterValue === 'all') {
|
||||
history.pushState(null, '', window.location.pathname);
|
||||
} else {
|
||||
const activeLink = linkMap.get(filterValue);
|
||||
if (activeLink) {
|
||||
const tagSlug = getTagSlugFromUrl(activeLink.getAttribute('href'));
|
||||
history.pushState(null, '', `#${tagSlug}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
const isAll = filterValue === 'all';
|
||||
const display = isAll ? '' : 'none';
|
||||
const ariaHidden = isAll ? 'false' : 'true';
|
||||
requestAnimationFrame(() => {
|
||||
filterLinks.forEach(link => {
|
||||
const isActive = link.dataset.filter === filterValue;
|
||||
link.classList.toggle('active', isActive);
|
||||
link.setAttribute('aria-pressed', isActive);
|
||||
});
|
||||
if (isAll) {
|
||||
cardData.forEach(({ element }) => {
|
||||
element.style.display = display;
|
||||
element.setAttribute('aria-hidden', ariaHidden);
|
||||
});
|
||||
} else {
|
||||
cardData.forEach(({ element, tags }) => {
|
||||
const shouldShow = tags.includes(filterValue);
|
||||
element.style.display = shouldShow ? '' : 'none';
|
||||
element.setAttribute('aria-hidden', !shouldShow);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const filterContainer = filterLinks[0].parentElement.parentElement;
|
||||
filterContainer.addEventListener('click', e => {
|
||||
const link = e.target.closest('a');
|
||||
if (!link) return;
|
||||
e.preventDefault();
|
||||
const filterValue = link.dataset.filter;
|
||||
if (filterValue) setActiveFilter(filterValue);
|
||||
});
|
||||
|
||||
filterContainer.addEventListener('keydown', e => {
|
||||
const link = e.target.closest('a');
|
||||
if (!link) return;
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
link.click();
|
||||
}
|
||||
});
|
||||
|
||||
filterLinks.forEach(link => {
|
||||
link.setAttribute('role', 'button');
|
||||
link.setAttribute('aria-pressed', link.classList.contains('active'));
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', () => {
|
||||
setActiveFilter(getFilterFromHash(), false);
|
||||
});
|
||||
|
||||
const initialFilter = getFilterFromHash();
|
||||
if (initialFilter !== 'all') {
|
||||
setActiveFilter(initialFilter, false);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
document.addEventListener("DOMContentLoaded",()=>{var t=document.querySelectorAll(".card");const l=document.querySelectorAll(".filter-controls a");var e=document.querySelector("#all-projects-filter");if(t.length&&l.length){e.style.display="block";const s=new Map(Array.from(l).map(t=>[t.dataset.filter,t])),i=Array.from(t).map(t=>({element:t,tags:t.dataset.tags?.toLowerCase().split(",").filter(Boolean)??[]}));function o(t){return t.split("/").filter(Boolean).pop()}function a(){if(!window.location.hash)return"all";const e=decodeURIComponent(window.location.hash.slice(1));return Array.from(l).find(t=>o(t.getAttribute("href"))===e)?.dataset.filter??"all"}function r(a,t=!0){t&&("all"===a?history.pushState(null,"",window.location.pathname):(t=s.get(a))&&(t=o(t.getAttribute("href")),history.pushState(null,"","#"+t)));const e="all"===a,r=e?"":"none",n=e?"false":"true";requestAnimationFrame(()=>{l.forEach(t=>{var e=t.dataset.filter===a;t.classList.toggle("active",e),t.setAttribute("aria-pressed",e)}),e?i.forEach(({element:t})=>{t.style.display=r,t.setAttribute("aria-hidden",n)}):i.forEach(({element:t,tags:e})=>{e=e.includes(a),t.style.display=e?"":"none",t.setAttribute("aria-hidden",!e)})})}(e=l[0].parentElement.parentElement).addEventListener("click",t=>{var e=t.target.closest("a");e&&(t.preventDefault(),t=e.dataset.filter)&&r(t)}),e.addEventListener("keydown",t=>{var e=t.target.closest("a");!e||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),e.click())}),l.forEach(t=>{t.setAttribute("role","button"),t.setAttribute("aria-pressed",t.classList.contains("active"))}),window.addEventListener("popstate",()=>{r(a(),!1)}),"all"!==(t=a())&&r(t,!1)}});
|
||||
@ -0,0 +1,34 @@
|
||||
{#- Collect all terms. -#}
|
||||
{#- We don't use `get_taxonomy` so users aren't forced to use 'tags' -#}
|
||||
{% set all_terms = [] %}
|
||||
{% for page in show_pages %}
|
||||
{% if page.taxonomies %}
|
||||
{% for tax_name, terms in page.taxonomies %}
|
||||
{% for term in terms %}
|
||||
{% set_global all_terms = all_terms | concat(with=term) %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{#- Display unique terms -#}
|
||||
{%- if all_terms -%}
|
||||
<ul class="filter-controls" role="group" aria-label="{{ macros_translate::translate(key='project_filters', default='Project filters', language_strings=language_strings) }}">
|
||||
<li class="taxonomy-item no-hover-padding">
|
||||
<a id="all-projects-filter" class="no-hover-padding active"
|
||||
href="{{ get_url(path="projects", lang=lang) }}"
|
||||
data-filter="all">
|
||||
{{- macros_translate::translate(key="all_projects", default="All projects", language_strings=language_strings) -}}
|
||||
</a>
|
||||
</li>
|
||||
{% for term in all_terms | unique | sort %}
|
||||
<li class="taxonomy-item no-hover-padding">
|
||||
<a class="no-hover-padding"
|
||||
href="{{ get_taxonomy_url(kind="tags", name=term, lang=lang) }}"
|
||||
data-filter="{{ term | lower }}">{{ term }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{#- Load the script -#}
|
||||
<script src="{{ get_url(path='js/filterCards.min.js', trailing_slash=false, cachebust=true) | safe }}" defer></script>
|
||||
{% endif %}
|
||||