120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
export class Filters {
|
|
filters = {
|
|
style: false,
|
|
rendering: false,
|
|
liga: false,
|
|
zerostyle: false,
|
|
author: 'all',
|
|
name: ''
|
|
}
|
|
|
|
fontData = {}
|
|
|
|
constructor (data) {
|
|
this.fontData = data
|
|
}
|
|
|
|
init () {
|
|
document.getElementById('authors-list').onchange = (event) => {
|
|
this.filters.author = event.target.value
|
|
this.apply()
|
|
}
|
|
|
|
document.getElementById('name-search').onkeyup = (event) => {
|
|
this.filters.name = event.target.value.toLowerCase()
|
|
this.apply()
|
|
}
|
|
|
|
document
|
|
.getElementById('filters')
|
|
.querySelectorAll('button')
|
|
.forEach((button) => {
|
|
button.onclick = (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
this.toggle(button.value)
|
|
}
|
|
})
|
|
|
|
this.apply()
|
|
}
|
|
|
|
toggle (filter) {
|
|
// cycle through the possible values for each filter
|
|
// and set the filters[filter] value,
|
|
// or at the end of the cycle set it to false
|
|
const options = {
|
|
style: [false, 'sans', 'serif'],
|
|
rendering: [false, 'vector', 'bitmap'],
|
|
liga: [false, 'yes', 'no'],
|
|
zerostyle: [false, 'slashed', 'dotted', 'empty']
|
|
}
|
|
|
|
const index = options[filter].indexOf(this.filters[filter])
|
|
const next = index + 1
|
|
if (next < options[filter].length) {
|
|
this.filters[filter] = options[filter][next]
|
|
} else {
|
|
this.filters[filter] = options[filter][0]
|
|
}
|
|
|
|
this.apply()
|
|
}
|
|
|
|
setCounter (amount) {
|
|
const element = document.querySelector('h1 a:first-child')
|
|
if (amount === 1) {
|
|
element.innerHTML = `${amount} Programming Font`
|
|
} else {
|
|
element.innerHTML = `${amount} Programming Fonts`
|
|
}
|
|
}
|
|
|
|
apply () {
|
|
let count = 0
|
|
|
|
Object.keys(this.filters).forEach((filter) => {
|
|
const button = document.querySelector(`button[value="${filter}"]`)
|
|
if (!button) {
|
|
return
|
|
}
|
|
if (this.filters[filter]) {
|
|
button.classList.add('selected')
|
|
button.querySelectorAll('svg').forEach((image) => {
|
|
image.classList.remove('selected')
|
|
})
|
|
button.querySelector(`svg[alt="${this.filters[filter]}"]`).classList.add('selected')
|
|
} else {
|
|
button.classList.remove('selected')
|
|
button.querySelectorAll('svg').forEach((image) => {
|
|
image.classList.remove('selected')
|
|
})
|
|
}
|
|
})
|
|
|
|
document.querySelectorAll('.entry[data-alias]').forEach((element) => {
|
|
const data = this.fontData[element.dataset.alias]
|
|
|
|
if (
|
|
(!this.filters.style || data.style === this.filters.style) &&
|
|
(!this.filters.rendering || data.rendering === this.filters.rendering) &&
|
|
(!this.filters.liga ||
|
|
(data.ligatures === false && this.filters.liga === 'no') ||
|
|
(data.ligatures === true && this.filters.liga === 'yes')) &&
|
|
(!this.filters.zerostyle || data.zerostyle === this.filters.zerostyle) &&
|
|
(this.filters.author === 'all' || data.author === this.filters.author) &&
|
|
(!this.filters.name || data.name.toLowerCase().indexOf(this.filters.name) > -1 ||
|
|
data.author.toLowerCase().indexOf(this.filters.name) > -1 ||
|
|
data.year.toString().indexOf(this.filters.name) > -1)
|
|
) {
|
|
element.classList.remove('filtered-out')
|
|
count++
|
|
} else {
|
|
element.classList.add('filtered-out')
|
|
}
|
|
})
|
|
|
|
this.setCounter(count)
|
|
}
|
|
}
|