Local Firm Carousel

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

// Location search
@import "../../resources/scss/elements/location-search";

.block-local-firm-carousel {

	&.background-color-blue {
		background-color: #F2FBFE;

		.slide-intro {
			background: #F2FBFE
		}
	}

	&__slide {
		position: relative;
		height: rem-calc(292);
		background-color: #cccccc;
		width: rem-calc(253);
		overflow: hidden;


		@include bp($lg) {
			height: rem-calc(704);
			width: rem-calc(464);
		}
		a {
			display: block;
			height: 100%;
			width: 100%;

			&:hover {
				picture {
					img {
						transform: scale(1.05);
					}
				}
			}
		}
		&-content {
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62.93%, rgba(0, 0, 0, 0.7) 100%);
			}
		}

		&-name {
			font-size: rem-calc(30px);
			font-weight: 600;
			color: $white;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: rem-calc(1);
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 1rem;
			margin-bottom: 0;
			transition: color 0.3s ease-in-out;
			line-height: 1.25;

			@include bp($lg) {
				font-size: rem-calc(40px);
				padding: 2rem;
			}
		}

		&-image {
			width: 100%;
			margin-bottom: rem-calc(24);

			picture {
				width: 100%;
			}

			img {
				transition: transform 0.3s ease-in-out;
			}
		}
	}

	.swiper-container {
		position: relative;
	}

	.slide-intro {
		width: 100%;
		padding: rem-calc(40 16);
		background-color: $white;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;

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

		@include bp($lg) {
			z-index: 10;
			position: absolute;
			left: rem-calc(30);
			top: rem-calc(0);
			width: 40%;
			padding: rem-calc(40 55);
		}

		@include bp($xl) {
			width: 43%;
		}

		@include bp($xxl) {
			padding: rem-calc(40 100);
		}

		&__overline {
			text-wrap: auto;
			font-weight: 500;
			font-size: rem-calc(16);
			color: $prussian-blue;
			margin-bottom: rem-calc(6);
			line-height: rem-calc(20);
			text-transform: uppercase;
		}
		&__content {
			h2 {
				@include fluid-type(28, 32);
				@include bp($xl) {
					@include fluid-type(28, 48);
				}
			}
		}
		&__search {
			@include bp($lg) {
				width: 80%;
			}
		}
		&__cta {
			margin-top: 1rem;
			font-size: 14px;

			a {
				color: #552E91;
			}
		}
	}

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

    .swiper-slide {
		width: rem-calc(253);
		@include bp($lg) {
			width: rem-calc(464);
		}
        &__inner {
            min-height: rem-calc(232);
            position: relative;
			z-index: 1;

			@include bp($md) {
				min-height: rem-calc(700);
			}
        }

		img {
			object-fit: cover;
		}
    }



	@include slider-navigation;

	.slider-navigation {
		position: absolute;
		top: 50%;
		padding: 0;
		z-index: 20;
		transform: translateY(-50%);
		margin-top:0;
		border:none;
		right: 0;
		width: auto;
	}

	.slider-navigation {
		.slider-button {
			height: rem-calc(165);
			width: rem-calc(45);
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background-color 0.3s ease-in-out;
			&:hover {
				background-color: $indigo;
			}
			&--prev {
				position: absolute;
				left:0;
			}
			&--next {
				svg {
					width: rem-calc(15) !important;
					height: rem-calc(29) !important;
				}
			}
		}
	}
}

import STQ_LocationSearch from '../../resources/js/classes/LocationSearch';

class LocalFirmCarousel {
    block;

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

	init() {

		this.swiperElem = this.block.querySelector('.swiper-container');
		this.prevBtnElem = this.block.querySelector('.slider-button--prev');
		this.nextBtnElem = this.block.querySelector('.slider-button--next');

		this.swiper = new Swiper(this.swiperElem, {
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            // slidesPerView: 1.25,
            spaceBetween: 24,
			loop: true,
			autoplay: {
				delay: 0, // No delay between transitions
				disableOnInteraction: false,
			},
			centeredSlides: true,
			centerInsufficientSlides: true,
			speed: 6000,
			slidesPerView: 'auto'
            // breakpoints: {
            //     541: {
            //         slidesPerView: 2.5,
            //     },
            //     1025: {
            //         slidesPerView: 3.5
            //     },
			// 	1200: {
            //         slidesPerView: auto
            //     },
            // },

		});

		new STQ_LocationSearch();
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-local-firm-carousel').forEach((block) => {
		new LocalFirmCarousel(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/local-firm-carousel",
    "title": "Local Firm Carousel",
    "description": "A carousel of firm locations",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-local-firm-carousel.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 - Local Firm Carousel",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/local-firm-carousel/block-local-firm-carousel.css", "swiper-css"],
    "viewScript": ["swiper-js", "local-firm-carousel"]
}