Logo Scroller

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

.block-logo-scroller {
	.content-col {
		display: flex;
		flex-direction: column;
		padding: 0;

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

	.title-container {
		width: 100%;
		padding: rem-calc(20);
		padding-bottom: rem-calc(48);
		position: relative;
		text-align: center;

		@include bp($md) {
			width: 31%;
			padding: rem-calc(20);
			border-right: 1px solid var(--border-color);
			text-align: left;
		}

		@include bp($lg) {
			width: 20%;
			padding: rem-calc(32);
		}

		.title {
			margin-bottom: 0;
		}

		.swiper-navigation {
			width: 100%;
			height: 2rem;
			position: absolute;
			bottom: 0.5rem;
			left: 50%;
			transform: translateX(-50%);

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: rem-calc(8);

			@include bp($md) {
				width: 2rem;
				height: 100%;
				flex-direction: column;
				top: 0;
				right: rem-calc(8);
				bottom: auto;
				left: auto;
				transform: none;
			}

			.swiper-button-prev,
			.swiper-button-next {
				width: rem-calc(24);
				height: rem-calc(24);
				margin: 0;

				border-radius: 100%;
				background-color: var(--white);

				position: relative;
				inset: 0;

				@include ts(background-color);

				&:hover {
					background-color: var(--primary);

					&:after {
						background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
					}
				}

				&:after {
					width: 100%;
					height: 100%;

					content: '';
					background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z' fill-rule='nonzero'/%3E%3C/svg%3E");

					background-position: center;
					background-repeat: no-repeat;
					background-size: 90%;

					@include ts(background-image);
				}
			}

			.swiper-button-prev {
				&:after {
					transform: rotate(180deg);
				}
			}
		}
	}

	.logo-container {
		width: 100%;

		@include bp($md) {
			width: 69%;
		}

		@include bp($lg) {
			width: 80%;
		}

		.swiper {
			height: 100%;
			border-top: 1px solid var(--border-color);

			@include bp($md) {
				border-top: none;
			}

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

					flex: 0 0 calc(30% - #{rem-calc(3)});
					padding: rem-calc(8);

					@include bp($lg - 1px, true) {
						&.swiper-slide-active + .swiper-slide + .swiper-slide {
							// border-right-color: transparent;
						}
					}

					@include bp($lg) {
						flex: 0 0 calc(25% - #{rem-calc(3)});

						&.swiper-slide-prev,
						&.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
							// border-right-color: transparent;
						}
					}

					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					border-right: rem-calc(1) solid var(--border-color);

					text-align: center;
					@include ts(border-color);

					&:last-child {
						border-right: none;
					}

					&:hover {
						.hover {
							opacity: 1;
						}
					}

					.logo {
						max-width: rem-calc(200);
						max-height: rem-calc(80);
						z-index: 10;
					}

					.hover {
						max-height: rem-calc(160);
						opacity: 0;
						@include ts(opacity);
						overflow: hidden;
						border-radius: rem-calc(100);
						top: 50%;
						left: 50%;
						transform: translate3d(-50%, -50%, 0);

						@media (pointer: coarse) {
							display: none;
						}
					}

					a {
						width: 100%;
						height: 100%;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
}

class LogoScroller {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		this.swiper = new Swiper(this.block.querySelector('.swiper'), {
			slidesPerView: 'auto',
			spaceBetween: 0,
			navigation: {
				nextEl: this.block.querySelector('.swiper-button-next'),
				prevEl: this.block.querySelector('.swiper-button-prev'),
			},
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-logo-scroller').forEach( block => new LogoScroller(block) );
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/logo-scroller",
    "title": "Logo scroller",
    "description": "Logo scroller block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-logo-scroller.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [],
            "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/logo-scroller/block-logo-scroller.css"
}