Publications Feed

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-publications-feed {
	padding-top: clamp(40px, 4vw, 60px);
	padding-bottom: clamp(40px, 4vw, 60px);

    .filters {
        &__inner {
            background-color: var(--background-color, var(--white)) !important;
        }
    }

    .post-feed {
        &__posts {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

            @include bp($xl) {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        .post-grid {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

            @include bp($xl) {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        &__results {
            .results-meta {
                display: block;
                text-align: right;
                font-size: .875rem;
                margin-bottom: 1rem;
            }

            .pagination {
                transition-delay: .3s;
                margin-top: 1rem;

                @include bp($md) {
                    margin-top: 2rem;
                }

                @include bp($xl) {
                    margin-top: 4rem;
                }
            }
        }

        select {
            position: absolute;
        }
    }

    .nice-select {
		border: none;
		width: 100%;
		background-color: var(--white);
		display: flex;
    	align-items: center;
        font-family: 'Source Sans 3';
        font-size: 22px;

		&-dropdown {
			border-radius: 15px;
			border: 2px solid var(--secondary);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			width:100%;
            z-index: 500;
		}
	}

    .card-post {
        &.d-flex {
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            @include bp($md, true) {
                min-height: rem-calc(150);
            }
        }

        &__title {
            padding-right: 3rem;
        }
    }

    .is-page-one {
        @include bp($md) {
            & > * {
                &:nth-child(1) {
                    grid-column: span 2;
                }
            }
        }

        @include bp($lg) {
            & > * {
                &:nth-child(1),
                &:last-child {
                    grid-column: span 2;
                }
            }
        }

        @include bp($xl) {
            & > * {
                &:nth-child(1),
                &:nth-child(10),
                &:last-child {
                    grid-column: span 2;
                }
            }
        }
    }

    .results:not(.is-page-one) {
        @include bp($xl) {
            & > * {
                &:nth-child(1),
                &:last-child {
                    grid-column: span 2;
                }
            }
        }
    }
}

class PublicationsFeed {
	block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		const feed = this.block.querySelector('[data-post-feed]');
		const resultsElem = feed.querySelector('.results');
		const resultsMeta = feed.querySelector('.results-meta');
		const scrollHint = feed.querySelector('.filters__scroll-hint');
		const filters = feed.querySelector('.filters__inner');
		const totalPostsElem = feed.querySelector('.total-posts');
		const niceSelects = this.block.querySelectorAll('select');
		// console.log(niceSelects);

		// on scroll hint, scroll the filters horizontally by 100px
		if (scrollHint) {
			scrollHint.addEventListener('click', () => {
				filters.scrollBy({
					left: 200,
					behavior: 'smooth',
				});
			});
		}

		// if(typeof NiceSelect === 'undefined') {
			niceSelects.forEach((select) => {
				NiceSelect.bind(select);
			});
		// }

		if (feed) {
			feed.addEventListener('post-feed-pre-update', (data) => {
				// scroll to top of block, but add offset of 100
				const blockTop = this.block.getBoundingClientRect().top + window.scrollY;
				window.scrollTo({
					top: blockTop - 350,
					behavior: 'smooth',
				});
				// get dropdown
				const dropdown = feed.querySelector('.btn--dropdown');
				if (dropdown) {
					dropdown.classList.remove('open');
				}
			});

			feed.addEventListener('post-feed-update', (data) => {
				// console.log(data.detail);
				if (!data) {
					return;
				}


				if (!data.detail && !data.detail.results) {
					if(data.results){
						resultsElem.innerHTML = data.results;
					}
					return;
				}

				const results = data.detail.results;
				resultsElem.innerHTML = '';

				results.forEach(result => {
					resultsElem.innerHTML += result;
				});

				resultsElem.classList.remove('is-page-one');

				totalPostsElem.innerHTML = data.detail.found_posts;
			});

			feed.addEventListener('post-feed-error', (data) => {
				if(data.detail && data.detail.reason){
					resultsElem.innerHTML = data.detail.reason;
				}
			});
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-publications-feed').forEach((block) => {
		new PublicationsFeed(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/publications-feed",
    "title": "Publications Feed",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-publications-feed.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Publications feed",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/publications-feed/block-publications-feed.css", "nice-select"],
    "viewScript": ["nice-select","publications-feed"]
}