Logo Slider

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

.block-logo-slider {
	padding: 2rem;
	background: $grey-4;

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

	&[data-curved-corners="true"]{
		border-radius: 40px 40px 0 0;
		overflow: hidden;

		@include bp($md){
			border-radius: 52px 52px 0 0;
		}

		&[data-image="true"]{
			border-radius: 40px 40px;

			@include bp($md){
				border-radius: 52px 52px;
			}
		}
	}

	&[data-image="true"]{
		height: 76vh;
		display: flex;
		align-items: flex-end;
		position: relative;

		&::before{
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: linear-gradient(0, var(--primary), transparent);
		}

		&[data-gradient="blue"]{
			&::before{
				background: linear-gradient(0, var(--accentBlue), transparent);
			}
		}

		.block-logo-slider__heading{
			margin-bottom: 1rem;
			*{
				color: var(--white);
			}
		}

		@include bp($md, true) {
			max-height: rem-calc(420) !important;
		}
	}

	&[data-border-bottom="true"]{
		border-bottom: solid 1px #362E8033;
	}

	&.letterbox-mode {
		max-height: rem-calc(570);

		&::before {
			background: linear-gradient(0, var(--primary), rgba($primary, 0.5));
		}
	}

	&__background-image-container{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		display: flex;

		img, picture{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	.container{
		z-index: 2;
		position: relative;
	}

	.swiper{
		overflow: visible;
	}

	.swiper-wrapper{
		transition-timing-function : linear;
	}

	&__heading{
		margin-bottom: 2rem;
		text-align: center;

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

		*{
			margin: 0;
			@include fluid-type(24, 44);
			font-weight: 600;
			color: var(--text-color);
		}
	}

	&__cta{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2rem;

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

	&__logo {
		display: flex;
		height: auto;
		border: solid 1px transparent;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		// padding: 2rem 1rem;
		min-height: 18vh;
		transition: .3s ease-out;
		position:relative;

		&::before{
			content: '';
			width: 24px;
			height: 24px;
			position: absolute;
			left: 50%;
			bottom: 1rem;
			transform: translateX(-50%);
			background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.0869' cy='11.3359' r='10.5' stroke='%23383551'/%3E%3Cpath d='M14.3867 15.3359L17.5867 11.3359L14.3867 7.33594' stroke='%23383551'/%3E%3Cpath d='M17.5869 11.3359L4.58691 11.3359' stroke='%23383551'/%3E%3C/svg%3E%0A");
			background-position: center;
			background-size: contain;
			opacity: 0;
			background-repeat: no-repeat;
			transition: .3s ease-out;
		}


		&:hover{
			background: var(--white);
			transform: scale(1.025);
			border: solid 1px #362E8033;
			transition: .3s ease-out;

			&::before{
				opacity: 1;
				transition: .3s ease-out;
			}

			.logo-dark {
				opacity: 1;
			}

			.logo-light {
				opacity: 0;
			}
		}

		img {
			width: 24vw;
			max-width: 140px;
		}
	}

	.logo-dark,
	.logo-light {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity .3s ease-out;
	}

	.logo-dark {
		opacity: 0;
	}

	&[data-gradient="blue"],
	&[data-gradient="purple"]{
		.block-logo-slider__cta .btn{
			color: var(--white);
			text-align: center;

			&:after {
				background-image: url("data:image/svg+xml,%3Csvg width='18' height='27' viewBox='0 0 18 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.870117 19.6006L8.87012 26.0006L16.8701 19.6006' stroke='%23fff'/%3E%3Cpath d='M8.87011 26L8.87012 0' stroke='%23fff'/%3E%3C/svg%3E%0A");
				border-color: var(--white);
			}

			&:hover {
				color: var(--secondary);

				&:after {
					border-color: var(--secondary);
				}
			}
		}
	}

}

class LogoSlider {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-logo-slider');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const logoSlide = block.querySelector('.block-logo-slider__slider-wrap');
			const totalSlides = logoSlide.querySelectorAll('.swiper-slide').length;
			if(logoSlide){
				const swiper = new Swiper(logoSlide, {
					slidesPerView: 1.5,
					autoplay:{
						delay: 0,
						pauseOnMouseEnter: true
					},
					speed: 6000,
					loop: true,
					centeredSlides: true,
					centerInsufficientSlides: true,
					breakpoints: {
						460: {
							spaceBetween: 16,
							slidesPerView: 2,
							loop: totalSlides > 2,
							centeredSlides: true,
							centeredSlidesBounds: true,
							autoplay: totalSlides > 2 ? {
								delay: 0,
								pauseOnMouseEnter: true
							} : false,
						},
						767: {
							spaceBetween: 32,
							slidesPerView: 3,
							loop: totalSlides > 3,
							centeredSlides: true,
							centeredSlidesBounds: true,
							autoplay: totalSlides > 3 ? {
								delay: 0,
								pauseOnMouseEnter: true
							} : false,
						},
						992: {
							slidesPerView: 4,
							loop: totalSlides > 4,
							centeredSlides: true,
							centeredSlidesBounds: true,
							initialSlide: Math.floor(totalSlides / 2),
							autoplay: totalSlides > 4 ? {
								delay: 0,
								pauseOnMouseEnter: true
							} : false,
						},
						1024: {
							slidesPerView: 5,
							loop: totalSlides > 5,
							centeredSlidesBounds: true,
							initialSlide: Math.floor(totalSlides / 2),
							autoplay: totalSlides > 5 ? {
								delay: 0,
								pauseOnMouseEnter: true
							} : false,
						}
					},
				});
			}
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	new LogoSlider();
});

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