Fixing filters logic + adding titles to button for accessibility

This commit is contained in:
Lucas Cimon
2017-08-17 20:37:34 +02:00
parent e7488682d5
commit 754011615d
3 changed files with 31 additions and 29 deletions

View File

@@ -9,23 +9,25 @@ window.tagFilters = {}
function indexOf(array, predicate) {
for (var i = 0; i < array.length; i++) if (predicate(array[i])) return array[i];
}
function startsWith(searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
function includes(array, value) {
return array.indexOf(value) !== -1;
};
function toggleTagFilter(tag) {
var filterState = window.tagFilters[tag]
if (filterState === true) {
this.classList.remove('mg-tag-filter-enabled');
this.classList.remove('mg-tag-filter-exclude');
filterState = false;
this.classList.add('mg-tag-filter-disabled');
this.classList.add('mg-tag-filter-include');
this.title = 'Tag filter (include matching articles)';
} else if (filterState === false) {
this.classList.remove('mg-tag-filter-disabled');
this.classList.remove('mg-tag-filter-include');
filterState = undefined;
this.title = 'Tag filter (disabled)';
} else {
filterState = true;
this.classList.add('mg-tag-filter-enabled');
this.classList.add('mg-tag-filter-exclude');
this.title = 'Tag filter (exclude matching articles)';
}
window.tagFilters[tag] = filterState;
updateArticlesVisibility();
@@ -33,38 +35,38 @@ function toggleTagFilter(tag) {
function toggleLangTagFilter(langs) {
var lang = this.textContent;
if (lang === 'lang') {
lang = langs[0];
window.tagFilters['lang:'+lang] = true;
window.tagFilters['lang:'+lang] = undefined;
lang = langs[langs.indexOf(lang) + 1];
if (typeof lang === 'undefined') {
lang = 'lang'
this.title = 'Language filter (disabled)';
} else {
window.tagFilters['lang:'+lang] = undefined;
lang = langs[langs.indexOf(lang) + 1];
if (typeof lang === 'undefined') {
lang = 'lang'
} else {
window.tagFilters['lang:'+lang] = true;
}
window.tagFilters['lang:'+lang] = true;
this.title = 'Language filter (include only "' + lang + '" articles)';
}
this.textContent = lang;
updateArticlesVisibility();
}
function updateArticlesVisibility() {
var anyTrueFilter = Object.keys(window.tagFilters).some(function (tagFilter) {
return !!window.tagFilters[tagFilter];
var includeFilters = Object.keys(window.tagFilters).filter(function (tagFilter) {
return window.tagFilters[tagFilter] === true;
});
var excludeFilters = Object.keys(window.tagFilters).filter(function (tagFilter) {
return window.tagFilters[tagFilter] === false;
});
Array.prototype.slice.call(document.getElementsByTagName('article')).forEach(function (article) {
if (!article.dataset.tags) { // article-excerpt: we ignore it
return;
}
var articleTags = JSON.parse(article.dataset.tags);
var anyTagWhitelisted = articleTags.some(function (tag) { return window.tagFilters[tag] === true; });
var anyTagBlacklisted = articleTags.some(function (tag) { return window.tagFilters[tag] === false; });
var allIncludeTags = includeFilters.every(function (tag) { return includes(articleTags, tag); });
var anyExcludeTag = excludeFilters.some(function (tag) { return includes(articleTags, tag); });
// Now implementing the core logic
var shouldDisplay = !anyTagBlacklisted;
if (shouldDisplay && anyTrueFilter) {
shouldDisplay = anyTagWhitelisted;
var shouldDisplay = !anyExcludeTag;
if (shouldDisplay && includeFilters.length > 0) {
shouldDisplay = allIncludeTags;
}
if (shouldDisplay) {