Isotope - Cases à cocher basées sur hash d'URL

Question

J'utilise le plugin Isotope et je l'utilise pour filtrer en utilisant plusieurs groupes de boutons et en créant également un hash d'URL.

Tout semble fonctionner correctement, sauf si je vais à une adresse de page avec un hachage d'URL déjà rempli, les cases ne sont pas cochées. Par exemple, lorsque vous arrivez à cette page, ces cases doivent déjà être cochées: "abstract", "portraits", "fruit". https://s.codepen.io/happyvalley/debug/OjOpKJ/NjrYzwQWZRZA#filter=.abstract.fruit%2C.abstract.portrait

Voici un lien vers la codepen: https://codepen.io/happyvalley/pen/OjOpKJ/

$(document).ready(function() { 

    // init Isotope 
    var $grid = $('.tool-grid-wrap').isotope({ 
     itemSelector: '.grid-item', 
     sortBy : 'random', 
     // set itemSelector so .grid-sizer is not used in layout 
     percentPosition: true, 
     layoutMode: 'masonry', 
    }); 

    // layout Isotope after each image loads 
    $grid.imagesLoaded().progress(function() { 
     $grid.isotope('layout') 
    }); 


    // store filter per group 
    var filters = {}; 
    var $filterDisplay = $('#filter-display'); 
    var $container = $('.tool-grid-wrap'); 


    $(function() { 
     $container.isotope(); 
     // do stuff when checkbox change 
     $('#options').on('change', function(jQEvent) { 
     var $checkbox = $(jQEvent.target); 
     manageCheckbox($checkbox); 
     var comboFilter = getComboFilter(filters); 
     $container.isotope({ 
      filter: comboFilter 
     }); 
     $filterDisplay.text(comboFilter); 
     location.hash = 'filter=' + encodeURIComponent(comboFilter); 
     }); 
    }); 

    function getComboFilter(filters) { 
     var i = 0; 
     var comboFilters = []; 
     var message = []; 
     for (var prop in filters) { 
     message.push(filters[prop].join('')); 
     var filterGroup = filters[prop]; 
     // skip to next filter group if it doesn't have any values 
     if (!filterGroup.length) { 
      continue; 
     } 
     if (i === 0) { 
      // copy to new array 
      comboFilters = filterGroup.slice(0); 
     } else { 
      var filterSelectors = []; 
      // copy to fresh array 
      var groupCombo = comboFilters.slice(0); // [ A, B ] 
      // merge filter Groups 
      for (var k = 0, len3 = filterGroup.length; k < len3; k++) { 
      for (var j = 0, len2 = groupCombo.length; j < len2; j++) { 
       filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
      } 
      } 
      // apply filter selectors to combo filters for next group 
      comboFilters = filterSelectors; 
     } 
     i++; 
     } 
     var comboFilter = comboFilters.join(','); 
     return comboFilter; 
    } 

    function manageCheckbox($checkbox) { 
     var checkbox = $checkbox[0]; 
     var group = $checkbox.parents('.option-set').attr('data-group'); 
     // create array for filter group, if not there yet 
     var filterGroup = filters[group]; 
     if (!filterGroup) { 
     filterGroup = filters[group] = []; 
     } 
     var isAll = $checkbox.hasClass('all'); 
     // reset filter group if the all box was checked 
     if (isAll) { 
     delete filters[group]; 
     if (!checkbox.checked) { 
      checkbox.checked = 'checked'; 
     } 
     } 
     // index of 
     var index = $.inArray(checkbox.value, filterGroup); 
     if (checkbox.checked) { 
     var selector = isAll ? 'input' : 'input.all'; 
     $checkbox.siblings(selector).removeAttr('checked'); 
     if (!isAll && index === -1) { 
      // add filter to group 
      filters[group].push(checkbox.value); 
     } 
     } else if (!isAll) { 
     // remove filter from group 
     filters[group].splice(index, 1); 
     // if unchecked the last box, check the all 
     if (!$checkbox.siblings('[checked]').length) { 
      $checkbox.siblings('input.all').attr('checked', 'checked'); 
     } 
     } 
    } 



    $(window).on('load', function() { 
     var hashFilter = getHashFilter(); 
     // filter isotope 
     $container.isotope({ 
     itemSelector: '.item', 
     filter: hashFilter, 
     }); 
    }); 

    // filter with selects and checkboxes 
    var $checkboxes = $('#options input'); 

    // set initial checkboxes from hash 
    var hashFilter = getHashFilter(); 
    if (hashFilter) { 
     var startFilters = hashFilter.split(','); 
     startFilters.forEach(function(filter) { 
     var $checkbox = $checkboxes.filter('[value="' + filter + '"]'); 
     $checkbox.attr('checked', 'checked'); 
     }); 
    } 

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


    }); 

Answer 1

Il semble que le fichier https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js, qui est l'endroit où la redirection de votre script inclus va, est très court, et semble mettre fin à abrubptly. Je l'ai changé à la version 3.03 passée, qui semble être la bonne longueur, et cela fonctionne (vous devriez ajouter le code pour vérifier les cases à cocher affichées cependant).

https://codepen.io/poootaatoooo/pen/vJWmPN

https://s.codepen.io/poootaatoooo/debug/vJWmPN/mWMoNbwLwVnk#filter=.abstract.fruit%2C.abstract.portrait