Post Feed

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

.block-post-feed {
	border-top: 1px solid $border-grey;
	border-bottom: none !important;

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

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

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

                &[data-found="1"]{
                    .plural{
                        display: none;
                    }
                }
            }

            // .post-card{
            //     @for $i from 1 through 20 {
            //         &:nth-child(#{$i}) {
            //             transition-delay: calc((0.1s * #{$i}));
            //         }
            //     }
            // }
            .pagination{
                transition-delay: .3s;
                margin-top: rem-calc(50);
				padding-bottom: 0;

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

				.pagination-pages {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
				}

				svg {
					path {
						stroke: var(--text-color);
					}
				}

				.page-numbers,
				.pagination-nav {
					padding: 8px 13px;
					color: var(--text-color);
					text-decoration: none;
					transition: background-color 0.3s ease;
					margin: 0 5px;

					&.current, &:hover {
						background-color: $secondary-light-green;
						color: $primary;
					}
				}
            }
        }
    }

	&.has-primary-background-color, .intelligence-feed {
		border-top: 0;

		@include bp($md) {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
		}

		div[data-post-feed] .filters__options, div[data-post-feed] .filters__search, div[data-post-feed] .filters__mobile-toggle {
			background-color: #083246;
			color: $white;
		}

		div[data-post-feed] .filters__options select, div[data-post-feed] .filters__search select {
			border-bottom: 1px solid $white;
			background-image: url('/wp-content/themes/moore-global/assets/icons/select-dropdown-white.svg');

			option {
				color: $white;
				background-color: #083246;

				&:hover {
					background-color: darken(#083246, 5%);
				}
			}
		}

		div[data-post-feed] .filters__search input {
			background-color: $primary;
			// background-image: url('/wp-content/themes/moore-global/assets/icons/search.svg');
			border-color: $primary;
			color: $white;

			// Remove autofill styling for all browsers
			&:-webkit-autofill,
			&:-webkit-autofill:hover,
			&:-webkit-autofill:focus,
			&:-webkit-autofill:active {
				-webkit-box-shadow: 0 0 0 30px $primary inset !important;
				-webkit-text-fill-color: $white !important;
				transition: background-color 5000s ease-in-out 0s;
			}
		}

		.post-card__image {
			border: 1px solid rgba(255, 255, 255, 0.1);
			padding: 5px;
			background-color: rgba(2, 33, 46, 0.4);

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50%;
				background: linear-gradient(180deg, rgba(2, 33, 46, 0) 0%, #02212E 100%);
			}
		}

		.post-card__row, .results-meta, .post-feed__posts {
			color: $white;
		}

		div[data-post-feed] .filters__search-button svg line, div[data-post-feed] .filters__search-button svg circle,div[data-post-feed] .filters__filter-button svg line {
			stroke: $white;
		}

		div[data-post-feed] .filters__search-button {
			border-right: 1px solid rgba(255, 255, 255, 0.1);
		}

		.post-card {
			&:hover {
				.post-card__title {
					color: $white;
				}
			}
		}

		.pagination-nav {
			&:hover {
				svg {
					path {
						stroke: $primary;
					}
				}
			}
		}

		.pagination {

			svg {
				path {
					stroke: $white;
				}
			}

			.page-numbers,
			.pagination-nav {
				color: $white;
				background-color: #033042;
				display: flex;
				justify-content: center;
				align-items: center;

				&.current, &:hover {
					color: $primary;
				}
			}
		}
	}
}

class PostFeed {

	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');

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

		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 - 100,
					behavior: 'smooth',
				});
			});
			feed.addEventListener('post-feed-update', (data) => {
				if (!data) {
					return;
				}

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

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

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


				if (resultsMeta) {
					resultsMeta.dataset.found = data.detail.found_posts;

					const currentPage = resultsMeta.querySelector('.current-page');
					if (currentPage) {
						currentPage.innerHTML = data.detail.page;
					}

					const totalPages = resultsMeta.querySelector('.total-pages');
					if (totalPages) {
						totalPages.innerHTML = data.detail.pages;
					}

					const total = resultsMeta.querySelector('.total');
					if (total) {
						total.innerHTML = data.detail.found_posts;
					}
				}
			});

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

				const total = resultsMeta.querySelector('.total');
				if (total) {
					total.innerHTML = '0';
				}
			});

			this.toggleFilters();
			this.toggleSearch();
		}
	}

	toggleFilters() {
		const filterButton = this.block.querySelector('.filters__filter-button');
		const filtersOptions = this.block.querySelector('.filters__options');
		const filterClose = this.block.querySelector('.filters__title--filter span');

		if(filterButton){
			filterButton.addEventListener('click', (e) => {
				e.preventDefault();
				filtersOptions.classList.add('filters__options--open');
			});

			filterClose.addEventListener('click', (e) => {
				e.preventDefault();
				filtersOptions.classList.remove('filters__options--open');
			});
		}
	}

	toggleSearch() {
		const searchButton = this.block.querySelector('.filters__search-button');
		const filtersSearch = this.block.querySelector('.filters__search');
		const searchClose = this.block.querySelector('.filters__title--search span');

		searchButton.addEventListener('click', (e) => {
			e.preventDefault();
			filtersSearch.classList.add('filters__search--open');
		});

		searchClose.addEventListener('click', (e) => {
			e.preventDefault();
			filtersSearch.classList.remove('filters__search--open');
		});
	}
}

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

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