Created
March 13, 2019 14:24
-
-
Save robwent/ef96e4f82f49a1442069aaf0d99ca0c1 to your computer and use it in GitHub Desktop.
Filters list of items from select using url hash and no layout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function ($) { | |
Isotope.Item.prototype._create = function () { | |
// assign id, used for original-order sorting | |
this.id = this.layout.itemGUID++; | |
// transition objects | |
this._transn = { | |
ingProperties: {}, | |
clean: {}, | |
onEnd: {} | |
}; | |
this.sortData = {}; | |
}; | |
Isotope.Item.prototype.layoutPosition = function () { | |
this.emitEvent('layout', [this]); | |
}; | |
Isotope.prototype.arrange = function (opts) { | |
// set any options pass | |
this.option(opts); | |
this._getIsInstant(); | |
// just filter | |
this.filteredItems = this._filter(this.items); | |
// flag for initalized | |
this._isLayoutInited = true; | |
}; | |
// layout mode that does not position items | |
Isotope.LayoutMode.create('none'); | |
function getHashFilter() { | |
var hash = location.hash; | |
// get filter=filterName | |
var matches = location.hash.match(/filter=([^&]+)/i); | |
var hashFilter = matches && matches[1]; | |
return hashFilter && decodeURIComponent(hashFilter); | |
} | |
//Job page | |
if (jQuery('.jobs-list')[0]) { | |
// bind filter on select change | |
var $filters = jQuery('.jobs-select').on('change', function () { | |
var filterValue = this.value; | |
location.hash = 'filter=' + encodeURIComponent(filterValue); | |
}); | |
var isIsotopeInit = false; | |
function onHashchange() { | |
var hashFilter = getHashFilter(); | |
if (!hashFilter && isIsotopeInit) { | |
return; | |
} | |
isIsotopeInit = true; | |
var $grid = jQuery('.jobs-list').isotope({ | |
// options | |
itemSelector: '.card-filterable', | |
layoutMode: 'none', | |
filter: hashFilter | |
}); | |
} | |
jQuery(window).on('hashchange', onHashchange); | |
// trigger event handler to init Isotope | |
onHashchange(); | |
//Check if a hash is set on pageload and change the select | |
var hashOnLoad = getHashFilter(); | |
if (hashOnLoad) { | |
if (jQuery('.jobs-select option[value="' + hashOnLoad + '"]').length) { | |
jQuery('.jobs-select').val(hashOnLoad); | |
jQuery(window).trigger('hashchange'); | |
} | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment