Using hideReveal, with combination and URL hash

[gmzbri]

Hello,

I've managed to integrate the 'hideReveal' feature with the URL hash one. Now the filtering is generating a '#' that can be accessed also if copying/paste the route.

This all happens by keeping the layout and showing/hiding the items with the 'hideReveal' option. Like here:

I would like to also be able to combine the filters so many can be chosen and displayed. Is this possible with the URL hash approach?

I've seen a Codepen where URL hash and combine where implemented, but couldn't find any topic regarding 'hideReveal'.

I would really appreciate some help if anyone knows something about that.

Here's my code so far:

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

            $.fn.hideReveal = function(options) {
       options = $.extend({
         filter: '*',
         hiddenStyle: {
           opacity: 0
         },
         visibleStyle: {
           opacity: 1
         },
       }, options);
       this.each(function() {
         var $items = $('.home-product');
         var $visible = $items.filter(options.filter);
         var $hidden = $items.not(options.filter);
         // reveal visible
         $visible.css(options.visibleStyle);
         // hide hidden
         $hidden.css(options.hiddenStyle);
       });
      };

      $(function() {

       var $container = $('.home');

       // bind filter button click
       $('.filter').on('click', function() {
         // var filterValue = $(this).attr('data-filter');
         // use filterFn if matches value
             var filterValue = $(this).attr('data-filter');
             // set filter in hash
             location = '/#=' + encodeURIComponent(filterValue);

             $container.hideReveal({
               filter: filterValue
             });

       });

         function onHashchange() {
           var filterValue = getHashFilter();
           if (!filterValue && isIsotopeInit) {
             $container.hideReveal({
               filter: filterValue
             });
           }
           // filter isotope
           $container.hideReveal({
             filter: filterValue
           });

         }

          onHashchange();

       // filter items on button click
       $('.filter').on( 'click', function() {
         $('.filter').removeClass('active');
         $(this).addClass('active');
       });

      });

})

[thesublimeobject]

@scrgb — Of course! I have accomplished something similar to this before by simply adding on query params to the hash/url (or just using query params instead of a hash), and then parsing them and adding them as filters requisitely. For example,

https://urlOfWebsite.com/path?color=red&shape=green&type=cat

You can parse this query using many different methods, and end up with something like,

let queryFilters = {
    color: 'red',
    shape: 'green',
    type: 'cat',
}

and then apply the filters however you need/would like to your isotope instance.