Image List Content

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

.block-image-list-content {
	padding-top: 40px;

	@include bp($md){
		padding-top: 0;
		margin-bottom: rem-calc(50);
		border-bottom: 1px solid $border-grey;
		border-top: 1px solid $border-grey;
	}

	&__content {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;

		@include bp($md){
			padding: rem-calc(40) 1rem;
		}

		@include bp($lg){
			padding: rem-calc(40 75 40 75);
		}

		@include bp($xl){
			padding: rem-calc(80 155 40 115);
		}

		& > p {
			@include responsive-font($heading-8, $heading-4);
			line-height: 40px;
			margin-bottom: rem-calc(24);

			&:last-of-type {
				margin-bottom: 0;
			}

			.btn {
				line-height: 1.25;
			}

			@include bp($lg){
				margin-bottom: rem-calc(42);
			}
		}
	}

	&__list {
		list-style: none;
		margin: 0;
		padding-top: 20px;
		padding-bottom: 40px;
		padding-left: 0;

		@include bp($md) {
			padding: rem-calc(20);
		}

		@include bp($lg){
			padding: rem-calc(80) 0 0 0;
		}

		@include bp($xl){
			padding: rem-calc(165) 25% 0 0;
		}

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

		li {
			padding-bottom: rem-calc(24);

			p:last-of-type {
				margin-bottom: 0;
			}

			&:last-of-type {
				padding-bottom: 0;
			}
			h3 {
				color: $primary;
				font-size: $body-large;
				font-weight: 500;
			}
		}
	}

	&__image {
		img {
			width: 100%;
			vertical-align: bottom;
		}
		@include bp($lg){
			position: sticky;
			top: 25%;
		}
	}
}

class ImageListContent {
	block;

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

	init() {
		/* Swiper Example
		this.swiperElem = this.block.querySelector('.swiper');
		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				type: 'custom',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
		}); 
		*/
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-image-list-content').forEach((block) => {
		new ImageListContent(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/image-list-content",
    "title": "Image List Content",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-image-list-content.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 - Image List Content",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/image-list-content/block-image-list-content.css"],
    "viewScript": ["image-list-content"]
}