Skip to content

Instantly share code, notes, and snippets.

@zellwk
Created July 14, 2016 06:13
Show Gist options
  • Save zellwk/c372c2e30c14903c4c6806ac154daa5e to your computer and use it in GitHub Desktop.
Save zellwk/c372c2e30c14903c4c6806ac154daa5e to your computer and use it in GitHub Desktop.
// Masonry Layout
let grid = document.querySelector('.l-paintings-grid')
let paintingsGrid
if (grid) {
imagesLoaded(grid, () => {
paintingsGrid = new Masonry(grid, {
itemSelector: '.l-painting'
})
})
}
// Filters
let filterTriggers = document.querySelectorAll('.jsFiltersTrigger')
if (filterTriggers) {
Array.from(filterTriggers).forEach(el => {
el.addEventListener('click', triggerFilter)
})
}
// triggerFilter
// - Requires paintingsGrid. (Side effect)
// ----------
function triggerFilter (e) {
if (window.innerWidth > 800) { return false }
e.preventDefault()
let filterClasses = document.body.classList
if (filterClasses.contains('is-filtering-on-mobile')) {
filterClasses.remove('is-filtering-on-mobile')
paintingsGrid.layout()
} else {
filterClasses.add('is-filtering-on-mobile')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment