Latest News

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-latest-news {
	padding: rem-calc(10 0);

	&.theme-dark {
		.content-col {
			--text-color: var(--white);

			.content-container {
				--text-color: var(--white);
			}
		}

		.accordion-item .accordion-trigger:before,
		.accordion-item .accordion-trigger:after {
			background-color: var(--white);
		}

		.accordion-item {
			border-bottom: 1px solid rgba(255,255,255, 0.2);
		}
	}

	&__faux-background {
		position: absolute;
		top: 0;
		bottom: -50%;
		left: 0;
		right: 0;
		z-index: 1;

		@include bp($lg) {
			top: -50%;
		}
	}

	.content-col {
		position: relative;
		z-index: 5;

		&-inner {
			max-width: rem-calc(530);
			margin: 0 auto;
			padding-top: 4rem;
			padding-bottom: 2rem;

			@include bp($md) {
				padding-bottom: 4rem;
			}

			@include bp($lg) {
				@include padding-top(rem-calc(200));
				@include padding-bottom(rem-calc(200));
			}
		}
	}

	> picture {
		display: flex;
		flex-direction: column;
	}

	&.rounded-corners {
		overflow: hidden;

		> picture {
			border-radius: rem-calc(24);
		}
	}

	.cards-col {
		position: relative;

		&:has(.block-latest-news__faux-background) {
			padding-top: 2rem;

			@include bp($md) {
				padding-top: 4rem;
				padding-bottom: 4rem;
			}

			@include bp($lg) {
				padding-left: 2rem;
			}
		}

		@include bp($md - 1px, true) {
			padding-right: 0;
			padding-left: 0;
		}

		@include bp($md) {
			padding-right: 0;
		}
	}

	&.has-tertiary-background-color {
		.swiper {
			@include bp($md - 1px, true) {
				overflow: visible;
			}

			.swiper-wrapper {
				.swiper-slide {
					.cards-container {
						.post-card {
							&:hover {
								--post-card-bg: var(--grey-primary);
							}
						}
					}
				}
			}
		}
	}

	.swiper-wrapper{
		height: auto !important;
	}

	.cards-container{
		> a{
			min-height: 55vh;
		}
	}

	.swiper {
		.swiper-wrapper {
			.swiper-slide {
				box-sizing: border-box;

				.cards-container {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: flex-start;
					gap: rem-calc(10);
					overflow-x: auto;

					@include bp($md - 1px, true) {
						padding: rem-calc(0 12);
					}

					@include bp($md) {
						flex-wrap: wrap;
					}

					.post-card {
						width: 75vw;

						height: auto;
						flex-shrink: 0;

						@include bp($md) {
							width: calc(50% - #{rem-calc(10)});
						}

						@include bp($lg){
							max-width: rem-calc(362);
						}

						&--standard {
							.post-card__tags {
								top: 1.25rem;
								left: 1.25rem;
							}
						}
					}
				}
			}
		}
	}

    &.theme-light .cards-col .content-container {
        --text-color: var(--primary);
    }
    
    .cards-col .content-container {
        padding: 4rem 0 2rem;
        position: relative;
        z-index: 5;
    }
    
    &.theme-dark .cards-col .content-container {
        --text-color: var(--white);
    }
}

class LatestNews {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
		setTimeout(() => {
			this.init();
		}, 100);
	}

	init() {
		this.swiper = new Swiper(this.block.querySelector('.swiper'), {
			slidesPerView: 1,
			allowTouchMove: false,
			autoHeight: true,
		});

		this.accordionItems = this.block.querySelectorAll('.accordion-trigger-input');
		this.accordionItems.forEach(item => {
			item.addEventListener('change', (e) => {
				const index = e.target.dataset.index;
				this.swiper.slideTo(index);

				// uncheck all other accordion items
				this.accordionItems.forEach(item => {
					if (item !== e.target) {
						item.checked = false;
					}
				});
			});
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-latest-news').forEach( block => new LatestNews(block) );
});

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