I have the following code for hashing the results of mixitup filter. You can see the working example at: https://demos.kunkalabs.com/mixitup/filtering-by-url/
what I need is to display the proper checkbox as checked when page loads.
Any help would be appreciated.
<script>
var targetSelector = '.mix';
function getSelectorFromHash() {
var hash = window.location.hash.replace(/^#/g, '');
var selector = hash ? '.' + hash : targetSelector;
return selector;
}
function setHash(state) {
var selector = state.activeFilter.selector;
var newHash = '#' + selector.replace(/^\./g, '');
if (selector === targetSelector && window.location.hash) {
// Equivalent to filter "all", remove the hash
history.pushState(null, document.title, window.location.pathname); // or history.replaceState()
} else if (newHash !== window.location.hash && selector !== targetSelector) {
// Change the hash
history.pushState(null, document.title, window.location.pathname + newHash); // or history.replaceState()
}
}
// Instantiate and configure the mixer
var mixer = mixitup('.container', {
selectors: {
target: targetSelector
},
load: {
filter: getSelectorFromHash() // Ensure that the mixer's initial filter matches the URL on startup
},
callbacks: {
onMixEnd: setHash // Call the setHash() method at the end of each operation
}
});
window.onhashchange = function() {
var selector = getSelectorFromHash();
if (selector === mixer.getState().activeFilter.selector) return; // no change
mixer.filter(selector);
};
</script>
Aucun commentaire:
Enregistrer un commentaire