jQuery Isotope Combination Filters with BBQ Hash History - Highlight filter options when stepping through history -
i have page using excellent isotope , bbq jquery plugins. have followed combo filters , has history demo/test amongst other things, cannot figure out how filters select when stepping through page history (as seen on regular hash history demo).
here's complete js code:
// modified isotope methods gutters in masonry $.isotope.prototype._getmasonryguttercolumns = function() { var gutter = this.options.masonry && this.options.masonry.gutterwidth || 0; containerwidth = this.element.width(); this.masonry.columnwidth = this.options.masonry && this.options.masonry.columnwidth || // or use size of first item this.$filteredatoms.outerwidth(true) || // if there's no items, use size of container containerwidth; this.masonry.columnwidth += gutter; this.masonry.cols = math.floor( ( containerwidth + gutter ) / this.masonry.columnwidth ); this.masonry.cols = math.max( this.masonry.cols, 1 ); }; $.isotope.prototype._masonryreset = function() { // layout-specific props this.masonry = {}; // fixme shouldn't have call again this._getmasonryguttercolumns(); var = this.masonry.cols; this.masonry.colys = []; while (i--) { this.masonry.colys.push( 0 ); } }; $.isotope.prototype._masonryresizechanged = function() { var prevsegments = this.masonry.cols; // update cols/rows this._getmasonryguttercolumns(); // return if updated cols/rows not equal previous return ( this.masonry.cols !== prevsegments ); }; $(function(){ var wait = $(".loading"); wait.animate({opacity: 0}, 500, 'linear').animate({opacity: 1}, 500, 'linear'); var $container = $('#container'); var initialoptions = { filter: '*', itemselector : '.item', sortby: 'random', layoutmode: 'masonry', masonry: { columnwidth: 170, gutterwidth: 6.6 } }; $container.imagesloaded( function(){ // build hash our options var options = { // special hash combination filters combofilters: {} }; var $optionsets = $('#options').find('.option-set'), isoptionlinkclicked = false; // filter buttons $optionsets.find('a').click(function(){ //$('.filter').on( 'click', 'a', function( event ) { event.preventdefault(); var $this = $(this); // don't proceed if selected if ( $this.hasclass('selected') ) { return false; } selectlink( $this ); var $optionset = $this.parents('.option-set'); var group = $optionset.attr('data-filter-group'); options.combofilters[ group ] = $this.attr('data-filter-value'); $.bbq.pushstate( options ); isoptionlinkclicked = true; }); function selectlink( $link ) { $link.parents('.option-set').f ind('.selected').removeclass('selected'); $link.addclass('selected') } var location = window.location; var $combofilteroptionsets = $('.combo-filters .option-set'); var hashchanged = false; function getcombofilterselector( combofilters ) { // build filter var isofilters = []; var filtervalue, $link, $optionset; ( var prop in combofilters ) { filtervalue = combofilters[ prop ]; isofilters.push( filtervalue ); // change selected combo filter link $optionset = $combofilteroptionsets.filter('[data-filter-group="' + prop + '"]'); $link = $optionset.find('a[data-filter-value="' + filtervalue + '"]'); //selectlink( $link ); } var selector = isofilters.join(''); return selector; } $( window ).on( 'hashchange', function() { //var aniengine = hashchanged ? 'best-available' : 'none' //var isooptions = $.extend( {}, setupoptions, options ); if ( location.hash ) { $.extend( options, $.deparam.fragment( location.hash, true ) ); } // build options hash , initial options var isooptions = $.extend( {}, initialoptions, options ); if ( options.combofilters ) { isooptions.filter = getcombofilterselector( options.combofilters ); } $container.isotope( isooptions ); // if option link not clicked // we'll need update selected links if ( !isoptionlinkclicked ) { // iterate on options var hrefobj, hrefvalue, $selectedlink; ( var key in options ) { hrefobj = {}; hrefobj[ key ] = options[ key ]; // convert object parameter string // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition' hrefvalue = $.param( hrefobj ); alert(hrefvalue); // matching link $selectedlink = $optionsets.find('a[href="#' + hrefvalue + '"]'); selectlink( $selectedlink ); } } isoptionlinkclicked = false; hashchanged = true; }) // trigger hashchange capture initial hash options .trigger( 'hashchange' ); wait.fadeout(300); $('.item').delay(800).fadein(500); }); });
my problem in area:
if ( !isoptionlinkclicked ) { // iterate on options var hrefobj, hrefvalue, $selectedlink; ( var key in options ) { hrefobj = {}; hrefobj[ key ] = options[ key ]; // convert object parameter string // i.e. { filter: '.inner-transition' } -> 'filter=.inner-transition' hrefvalue = $.param( hrefobj ); alert(hrefvalue); // matching link $selectedlink = $optionsets.find('a[href="#' + hrefvalue + '"]'); selectlink( $selectedlink ); } }