phantasma/app/static/js/films.js
2022-01-28 16:08:31 +00:00

87 lines
2.6 KiB
JavaScript

// FIXME: move to utils
// From: https://stackoverflow.com/a/175787
function isNumeric (str) {
return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
}
var options = parseHash();
function sortChanged() {
const sortValue = document.getElementById('sort-select').value
const $films = [...document.querySelectorAll('.film')]
options.sort = sortValue
updateHash()
$films.sort((a, b) => {
let aVal = a.dataset[sortValue]
let bVal = b.dataset[sortValue]
if (isNumeric(aVal) && isNumeric(bVal)) {
aVal = parseFloat(aVal)
bVal = parseFloat(bVal)
}
return aVal < bVal ? -1 : 1
})
document.getElementById('films-list').innerHTML = ''
$films.forEach($film => {
document.getElementById('films-list').appendChild($film)
})
}
function filterChanged() {
const filterValue = document.getElementById('filter-select').value
options.filter = filterValue
document.querySelectorAll('.film').forEach(film => {
if (!options.filter || film.dataset.type.toLowerCase().split(',').indexOf(options.filter.toLowerCase()) > -1) {
console.log(film.dataset.type.split(','), film.dataset.type.split(',').indexOf(options.filter))
film.style.display = ''
} else {
film.style.display = 'none'
}
})
updateHash()
}
function parseHash() {
var options = {}
location.hash.slice(1).split('&').forEach(kv => {
kv = kv.split('=')
const k = kv.shift()
if (k.length) {
options[k] = kv.join('=')
}
})
return options;
}
function updateHash() {
const value = Object.keys(options).filter(key => {
return key && options[key];
}).map(key => {
return key + '=' + options[key];
}).join('&')
location.hash = value ? '#' + value : ''
}
document.getElementById('sort-select').addEventListener('change', sortChanged)
document.getElementById('filter-select').addEventListener('change', filterChanged)
if (options.sort) {
document.getElementById('sort-select').value = options.sort
sortChanged()
}
document.getElementById('filter-select').value = options.filter
if (options.filter) {
filterChanged()
}
document.querySelectorAll('.films .film figure').forEach(figure => {
var imgs = figure.querySelectorAll('img')
if (imgs.length > 1) {
setInterval(() => {
var img = figure.querySelector('img')
img.parentElement.appendChild(img)
}, 5000 + Math.random() * 1000)
}
})