jquery - Adding hashchange to Isotope v2 with search -
i have following code , i'm trying implement hashchange isotope v2.
i have dropdown filter , search filter , have stumbled trying implement.
do need wrap in haschange function?
$(document).ready(function(){ var angle = 0; var qsregex; var buttonfilter; // old istope on /customers/ init var $iso_grid_old = $('#iso-grid'), filters = {}; // init isotope var $iso_grid = $('#iso-grid').isotope({ itemselector: '.card-wrap', layoutmode: 'fitrows', filter: function() { var $this = $(this); var searchresult = qsregex ? $this.text().match( qsregex ) : true; var buttonresult = buttonfilter ? $this.is( buttonfilter ) : true; return searchresult && buttonresult; }, }); // -------- filter function ----------// $('#iso-topic-filters li.filter-link').on( 'click', function() { buttonfilter = $(this).attr('data-filter'); console.log("clicked button",buttonfilter); $iso_grid.isotope(); }); // ----------- search function --------// // use value of search field filter function searchfilter() { qsregex = new regexp( $quicksearch.val(), 'gi' ); $iso_grid.isotope(); } var $quicksearch = $('.quicksearch').keyup( debounce( searchfilter ) ); // function check if filters have results var itemreveal = isotope.item.prototype.reveal; isotope.item.prototype.reveal = function() { itemreveal.apply( this, arguments ); jquery( this.element ).removeclass('isotope-hidden'); }; var itemhide = isotope.item.prototype.hide; isotope.item.prototype.hide = function() { itemhide.apply( this, arguments ); jquery( this.element ).addclass('isotope-hidden'); }; var noitemsalert = $('#msg-box'); $iso_grid.isotope( 'on', 'layoutcomplete', function() { var numitems = $iso_grid.find('.card-wrap:not(.isotope-hidden)').length; if (numitems == 0) { noitemsalert.show(); } else { noitemsalert.hide(); } }); // ----------- reset function --------// $('.iso-reset').on( 'click', function() { $quicksearch.val(''); searchfilter(); buttonfilter = undefined; qsregex = undefined; $('#msg-box').hide(); $iso_grid.isotope(); }); // debounce filtering doesn't happen every millisecond function debounce( fn, threshold ) { var timeout; return function debounced() { if ( timeout ) { cleartimeout( timeout ); } function delayed() { fn(); timeout = null; } settimeout( delayed, threshold || 100 ); }; } // old isotope setup on /customers/ $('select').change(function(){ var $this = $(this); // store filter value in object // i.e. filters.color = 'red' var group = $this.attr('data-filter-group'); filters[ group ] = $this.find(':selected').attr('data-filter-value'); // console.log( $this.find(':selected') ) // convert object array var isofilters = []; ( var prop in filters ) { isofilters.push( filters[ prop ] ) } console.log(filters); var selector = isofilters.join(''); $iso_grid_old.isotope({ filter: selector }); return false; }); // old /customers/ reset button $('.button--reset').on( 'click', function() { angle+=180; // reset filters filters = {}; $iso_grid_old.isotope({ filter: '*' }); // resets original option value $('option').prop('selected', function() { return this.defaultselected; }); $(this).find('i').css({'transform': 'rotate(' + angle + 'deg)','transition': 'all ease-in-out .3s'}); }); });
Comments
Post a Comment