vendredi 5 juillet 2019

activating mixitup filter checkbox as checked according to hash when page loads

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