From a25eaf74903ab064e40e5ddd3cff027d0990da2b Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Fri, 22 Jan 2021 12:16:37 -0600 Subject: [PATCH 1/6] Use the upstream component, adds a bit better screen reader behavior when filtering happens. --- .eleventy.js | 3 +- package.json | 3 +- src/js/filter-container.js | 114 ------------------------------------- src/site/community.njk | 4 +- src/site/generators.njk | 4 +- src/site/headless-cms.njk | 4 +- 6 files changed, 10 insertions(+), 122 deletions(-) delete mode 100644 src/js/filter-container.js diff --git a/.eleventy.js b/.eleventy.js index 300f53926..abba975f5 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -8,7 +8,8 @@ module.exports = function(eleventyConfig) { // pass images directly through to the output eleventyConfig.addPassthroughCopy("src/site/img"); eleventyConfig.addPassthroughCopy({ - "src/js": "js" + "src/js": "js", + "node_modules/@zachleat/filter-container/*.js": "js", }); // Date helper diff --git a/package.json b/package.json index 20eb8141e..99978e5c1 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "@11ty/eleventy": "^0.11.1", "@11ty/eleventy-cache-assets": "^2.0.3", + "@zachleat/filter-container": "^1.0.3", "autoprefixer": "^10.0.4", "cssnano": "^4.1.10", "dotenv": "^8.2.0", @@ -37,9 +38,9 @@ "netlify-plugin-minify-html": "^0.3.0", "node-fetch": "^2.6.1", "npm-run-all": "^4.1.5", + "placename": "^1.1.2", "postcss": "^8.1.10", "postcss-cli": "^8.3.0", - "placename": "^1.1.2", "postcss-import": "^13.0.0", "spdx-correct": "^3.1.1", "tailwindcss": "^2.0.1" diff --git a/src/js/filter-container.js b/src/js/filter-container.js deleted file mode 100644 index 77d11517a..000000000 --- a/src/js/filter-container.js +++ /dev/null @@ -1,114 +0,0 @@ -class FilterContainer extends HTMLElement { - constructor() { - super(); - this.attrs = { - bind: "data-filter-bind", - delimiter: "data-filter-delimiter", - results: "data-filter-results", - }; - this.classes = { - hidden: "filter--hide", - } - } - - connectedCallback() { - this.results = this.querySelector(`[${this.attrs.results}]`); - let formElements = this.getAllFormElements(); - this.bindEvents(formElements); - this.filterAll(formElements); - } - - getAllFormElements() { - return this.querySelectorAll(`[${this.attrs.bind}]`); - } - - getAllKeys() { - let keys = new Set(); - for(let formEl of this.getAllFormElements()) { - keys.add(formEl.getAttribute(this.attrs.bind)); - } - return Array.from(keys); - } - - getElementSelector(key) { - return `data-filter-${key}` - } - - getAllFilterableElements() { - let keys = this.getAllKeys(); - let selector = keys.map(key => { - return `[${this.getElementSelector(key)}]`; - }).join(","); - return this.querySelectorAll(selector); - } - - bindEvents(formElements) { - for(let el of formElements) { - el.addEventListener("change", e => { - this.filter(e.target); - requestAnimationFrame(() => { - this.renderResultCount(); - }) - }, false); - } - } - - filterAll(formElements) { - for(let el of formElements) { - this.filter(el); - } - this.renderResultCount(); - } - - filter(formElement) { - let key = formElement.getAttribute(this.attrs.bind); - let delimiter = formElement.getAttribute(this.attrs.delimiter); - - let value = formElement.value; - let elementsSelectorAttr = this.getElementSelector(key); - - let elements = this.querySelectorAll(`[${elementsSelectorAttr}]`); - let count = 0; - let cls = `filter-${key}--hide`; - for(let element of Array.from(elements)) { - if(this.elementIsValid(element, elementsSelectorAttr, value, delimiter)) { - element.classList.remove(cls); - } else { - element.classList.add(cls); - } - } - } - - elementIsValid(element, attributeName, value, delimiter) { - if(!value && element.hasAttribute(attributeName)) { - return true; - } - let attrValue = element.getAttribute(attributeName); - if(delimiter && attrValue.split(delimiter).indexOf(value) > -1) { - return true; - } - if(!delimiter && attrValue === value) { - return true; - } - return false; - } - - elementIsVisible(element) { - for(let cls of element.classList) { - if(cls.startsWith("filter-") && cls.endsWith("--hide")) { - return false; - } - } - return true; - } - - renderResultCount() { - let count = Array.from(this.getAllFilterableElements()) - .filter(entry => this.elementIsVisible(entry)) - .length; - - this.results.innerHTML = `${count} Result${count !== 1 ? "s" : ""}`; - } -} - -window.customElements.define("filter-container", FilterContainer); \ No newline at end of file diff --git a/src/site/community.njk b/src/site/community.njk index 437bb9efd..d375a70c9 100644 --- a/src/site/community.njk +++ b/src/site/community.njk @@ -70,11 +70,11 @@ layout: layouts/base.njk

Find a Local User Group

- +
Filter - +