Isotope.js

/**
 * How can we get the container? 
 * Any valid querySelector option...
 */
const gridSelector = '.grid';

/**
 * How can we get the container items? 
 * Any valid querySelectorAll option...
 */
const gridItemSelector = '.grid-item';

/**
 * How can we get the cotroling buttons? 
 * Any valid querySelectorAll option...
 */
const buttonSelector = 'button[data-sort]';

/**
 * 
 * @param {*} param0 
 */
const sortElements = ({ container, childSelector, getScore, sortBy, direction }) => {
    const items = [...container.querySelectorAll(childSelector)];

    items.sort((a, b) => {
        b = getScore(b);
        a = getScore(a);
        if (direction === 'desc') {
            if (sortBy === 'name') {
                return b.localeCompare(a, 'en', { sensitivity: 'base' });
            } else if (sortBy = 'date') {
                return Math.round((new Date(b)).getTime() / 1000) - Math.round((new Date(a)).getTime() / 1000);
            } else {
                return b - a;
            }
        } else {
            if (sortBy === 'name') {
                return a.localeCompare(b, 'en', { sensitivity: 'base' });
            } else if (sortBy = 'date') {
                return Math.round((new Date(a)).getTime() / 1000) - Math.round((new Date(b)).getTime() / 1000);
            } else {
                return a - b;
            }
        }
    }).forEach(item => {
        container.appendChild(item)
    });
};

[].slice.call(document.querySelectorAll(buttonSelector)).forEach(button => {
    button.addEventListener('click', (event) => {
        const el = event.target;
        const data = el.dataset;
        sortElements({
            container: document.querySelector(gridSelector),
            childSelector: gridItemSelector,
            getScore: item => {
                return item.dataset[data.sort];
            },
            sortBy: data.sort,
            direction: data.sortDirection,
        });
    });
});