I've created the demo. See Pen https://codepen.io/desandro/pen/ooEZyj and debug view https://s.codepen.io/desandro/debug/ooEZyj#filter=.nonmetal

var grid = document.querySelector('.grid');
var iso;

function onHashchange() {
  var hashFilter = getHashFilter();
  if ( !hashFilter && iso ) {
    return;
  }
  if ( !iso ) {
    // init Isotope for first time
    iso = new Isotope( grid, {
      itemSelector: '.element-item',
      layoutMode: 'fitRows',
      filter: hashFilter || '',
    });
  } else {
    // just filter with hash
    iso.arrange({
      filter: hashFilter
    });
  }
  
  // set selected class on button
  if ( hashFilter ) {
    var checkedButton  = filterButtonGroup.querySelector('.is-checked');
    if ( checkedButton ) {
      checkedButton.classList.remove('is-checked');
    }
    filterButtonGroup.querySelector('[data-filter="' + hashFilter + '"]').classList.add('is-checked');
  }
}

window.addEventListener( 'hashchange', onHashchange );
// trigger event handler to init Isotope
onHashchange();


// bind filter button click
var filterButtonGroup = document.querySelector('.filter-button-group');
filterButtonGroup.addEventListener( 'click', function( event ) {
  var filterAttr = event.target.getAttribute('data-filter');
  if ( !filterAttr ) {
    return;
  }
  location.hash = 'filter=' + encodeURIComponent( filterAttr );
});

function getHashFilter() {
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

URL hash – vanilla js #1330

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions