archive/pelican-mg
1
0
Fork 0
mirror of https://github.com/c0de-archive/pelican-mg.git synced 2024-12-22 08:22:40 +00:00
Code Issues Projects Releases Wiki Activity

Fixing filters logic + adding titles to button for accessibility

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/main.css
View File

@ -122,7 +122,7 @@ a {
background-color: transparent; background-color: transparent;
border: 2px solid white; border: 2px solid white;
overflow: visible; overflow: visible;
color: #444; color: white;
font: inherit; font: inherit;
padding: .5rem 1.5rem; padding: .5rem 1.5rem;
margin: .5rem 1rem; margin: .5rem 1rem;
@ -131,9 +131,9 @@ a {
.mg-tag-filter:hover { .mg-tag-filter:hover {
border-color: #b2b2b2; border-color: #b2b2b2;
text-decoration: none; } text-decoration: none; }
.mg-tag-filter-enabled { .mg-tag-filter-include {
background-color: #33b5e5; } background-color: #33b5e5; }
.mg-tag-filter-disabled { .mg-tag-filter-exclude {
background-color: #FF9148; } background-color: #FF9148; }
.mg-nav-small { .mg-nav-small {

4
templates/index.html
View File

@ -6,11 +6,11 @@
{% if MG_LANG_FILTER_TAGS or MG_FILTER_TAGS %} {% if MG_LANG_FILTER_TAGS or MG_FILTER_TAGS %}
<ul class="mg-tag-filters"> <ul class="mg-tag-filters">
{% if MG_LANG_FILTER_TAGS %} {% if MG_LANG_FILTER_TAGS %}
<li><button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})'>lang</button></li> <li><button class="mg-tag-filter" onclick='toggleLangTagFilter.bind(this)({{ MG_LANG_FILTER_TAGS|tojson }})' title="Language filter (disabled)">lang</button></li>
{% endif %} {% endif %}
{% if MG_FILTER_TAGS %} {% if MG_FILTER_TAGS %}
{% for filter_tag in MG_FILTER_TAGS %} {% for filter_tag in MG_FILTER_TAGS %}
<li><button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')">{{ filter_tag.replace('lang:', '') }}</button></li> <li><button class="mg-tag-filter" onclick="toggleTagFilter.bind(this)('{{ filter_tag }}')" title="Tag filter (disabled)">{{ filter_tag.replace('lang:', '') }}</button></li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}

50
templates/js/filter-tags.js
View File

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