njpma/app/static/js/films.js

// 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)
    }
})