Custom Alpine.js Filter

// Import necessary libraries
import imagesLoaded from 'imagesloaded';
import Masonry from 'masonry-layout';

// Listen for the Alpine.js initialization event
document.addEventListener('alpine:init', () => {
    // Define Alpine.js data component named 'studyFilter'
    Alpine.data('studyFilter', () => ({
        // Data properties for filtering and displaying posts
        selectedAge: '',
        selectedCompensation: '',
        selectedCompAmount: '',
        selectedInvolvement: '',
        selectedNeurodevelopment: '',
        selectedStudentLed: '',
        selectedType: '',
        posts: postsData,
        filterData: filterData,
        showDialog: null,
        dropdowns: {
            // Data to track the visibility of dropdown menus
            'age': false,
            'study-compensation': false,
            'study-comp-amount': false,
            'study-involvement': false,
            'neurodevelopment': false,
            'study-led': false,
            'study-type': false
        },

        // Initialization function
        init() {
            // Initialize filter taxonomy counts and Masonry layout
            this.filterTaxonomyCounts();
            this.initMasonry();

            // Watch for changes in filter selections and trigger filtering
            this.$watch('selectedAge', () => {
                this.filterStudies();
            });
            this.$watch('selectedCompensation', () => {
                this.filterStudies();
            });
            this.$watch('selectedCompAmount', () => {
                this.filterStudies();
            });
            this.$watch('selectedInvolvement', () => {
                this.filterStudies();
            });
            this.$watch('selectedNeurodevelopment', () => {
                this.filterStudies();
            });
            this.$watch('selectedStudentLed', () => {
                this.filterStudies();
            });
            this.$watch('selectedType', () => {
                this.filterStudies();
            });
        },

        // Toggle visibility of dropdown menus
        toggleDropdown(name) {
            if (this.dropdowns[name]) {
                return this.toggleClose(name)
            }
            this.dropdowns[name] = true;
        },

        // Close a dropdown menu
        toggleClose(name) {
            if (!this.dropdowns[name]) return
            this.dropdowns[name] = false;
            let focusName = name + '-button';
            name && document.getElementById(focusName).focus()
        },

        // Select key or toggle
        filterClick(name, value) {
            if (this['selected' + name] == "") {
                this['selected' + name] = value;
            } else {
                this['selected' + name] = "";
            }
        },

        // Filter posts based on selected filters
        filterStudies() {
            // Reset post visibility and filter counts
            this.resetPostVisible();
            this.resetFilterCounts();
            this.filterTaxonomyCounts();
            
            // If all filters are empty, reset posts and return
            if ((this.selectedAge == "") && (this.selectedCompensation == "") && (this.selectedCompAmount == "") && (this.selectedInvolvement == "")
                 && (this.selectedNeurodevelopment == "") && (this.selectedStudentLed == "") && (this.selectedType == "")) {
                this.initMasonry();
                return;
            }
            
            // Loop through posts and determine visibility based on selected filters
            for (let post in this.posts) {
                if (this.posts.hasOwnProperty(post)) {
                    let visible = false;
                    const ageArray = Object.values(this.posts[post].taxonomies?.['study-age'] ?? []);
                    const compensationArray = Object.values(this.posts[post].taxonomies?.['study-compensation'] ?? []);
                    const compAmountArray = Object.values(this.posts[post].taxonomies?.['study-comp-amount'] ?? []);
                    const involvementArray = Object.values(this.posts[post].taxonomies?.['study-involvement'] ?? []);
                    const neurodevelopmentArray = Object.values(this.posts[post].taxonomies?.['neurodevelopment'] ?? []);
                    const studenLedArray = Object.values(this.posts[post].taxonomies?.['study-led'] ?? []);
                    const typeArray = Object.values(this.posts[post].taxonomies?.['study-type'] ?? []);

                    // Logic to determine post visibility based on selected filters
                    visible = (
                        (this.selectedAge === "" || ageArray.includes(parseInt(this.selectedAge))) &&
                        (this.selectedCompensation === "" || compensationArray.includes(parseInt(this.selectedCompensation))) &&
                        (this.selectedCompAmount === "" || compAmountArray.includes(parseInt(this.selectedCompAmount))) &&
                        (this.selectedInvolvement === "" || involvementArray.includes(parseInt(this.selectedInvolvement))) &&
                        (this.selectedNeurodevelopment === "" || neurodevelopmentArray.includes(parseInt(this.selectedNeurodevelopment))) &&
                        (this.selectedStudentLed === "" || studenLedArray.includes(parseInt(this.selectedStudentLed))) &&
                        (this.selectedType === "" || typeArray.includes(parseInt(this.selectedType)))
                    );

                    this.posts[post].visible = visible;
                }
            }
            // Update filter counts and Masonry layout
            this.filterTaxonomyCounts();
            this.initMasonry();
        },

        // Reset filter counts to zero
        resetFilterCounts() {
            for (let taxonomy in this.filterData) {
                if (this.filterData.hasOwnProperty(taxonomy)) {
                    for (let term in this.filterData[taxonomy]) {
                        if (this.filterData[taxonomy].hasOwnProperty(term)) {
                            this.filterData[taxonomy][term].count = 0;
                        }
                    }
                }
            }
        },

        // Update filter counts based on visible posts
        filterTaxonomyCounts() {
            //Reset counts
            this.resetFilterCounts();
            
            //Loop through posts
            for (let post in this.posts) {
                if (this.posts.hasOwnProperty(post)) {
                    if (this.posts[post].visible) {

                        // Loop through post taxonomies and count visible for each taxonomy
                        for (let taxonomy in this.posts[post].taxonomies) {
                            if (this.posts[post].taxonomies.hasOwnProperty(taxonomy)) {
                                this.posts[post].taxonomies[taxonomy].forEach((term) => {
                                    // Increase term count
                                    let count = this.filterData[taxonomy][term].count;
                                    this.filterData[taxonomy][term].count = count + 1;
                                })
                            }
                        }
                    }
                }
            }
            this.initMasonry();
        },

        // Reset all filter selections and post visibility
        resetFilters() {
            this.selectedAge = '';
            this.selectedCompensation = '';
            this.selectedCompAmount = '';
            this.selectedInvolvement = '';
            this.selectedNeurodevelopment = '';
            this.selectedStudentLed = '';
            this.selectedType = '';
            this.resetPostVisible();
            this.resetFilterCounts();
            this.filterTaxonomyCounts();
        },

        // Reset post visibility to true for all posts
        resetPostVisible() {
            for (let post in this.posts) {
                if (this.posts.hasOwnProperty(post)) {
                    this.posts[post].visible = true;
                    // post.count = 0;
                }
            }
        },

        // Initialize Masonry layout
        initMasonry() {
            console.log('initMasonry');
            var cardGrids = document.querySelectorAll('.masonry-cards');
            console.log(cardGrids);
            // Check if there is at least one post with the class name "masonry-cards"
            if (cardGrids.length > 0) {

                // Iterate through each post with the class name "masonry-cards"
                cardGrids.forEach(function (cardGrid) {

                    // Wait for all images to load before initializing the Masonry grid
                    imagesLoaded(cardGrid, function () {

                        // Create a new Masonry object with the "cardGrid" post as the container, and specify the "itemSelector", "columnWidth", "gutter", and "percentPosition" options
                        var masonry = new Masonry(cardGrid, {
                            itemSelector: '.masonry-cards__column',
                            columnWidth: '.masonry-cards__column',
                            gutter: 16,
                            percentPosition: true,
                        });
                    });
                });
            }
        },

        // Get the name of a filter term
        getFilterName(filter, key) {
            return this.filterData[filter][key].name;
        },
    }));
});