People Grid

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

.select2-dropdown {
	border: none !important;
	border-top: 3px solid $blueGrey !important;
	box-shadow: 0 2px 12px 2px rgba(0,0,0,0.1);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: $veryLightBlue !important;
	color: $darkBlue !important;
}

.select2-results__option--selectable {
	padding: rem-calc(15 25) !important;
}

.select2-container--default .select2-results__option--selected {
	background-color: $veryLightBlue !important;
	color: $darkBlue !important;
	font-weight: 700 !important;
}

.block-people-grid {
	padding-bottom: rem-calc(80);

	&__no-posts {
		margin-top: rem-calc(40);
		font-size: rem-calc(18);

		button {
			color: $darkBlue;
			background: transparent;
			border: none;
			font-weight: 700;
			text-decoration: underline;
			padding: 0;
			transition: all 0.2s ease-in-out;

			&:hover {
				color: lighten($darkBlue, 10%);
			}
		}
	}

	.heading {
		@include fluid-type(24, 34);
	}

	.nice-select-dropdown {
		box-shadow: 0 2px 12px 2px rgba(0,0,0,0.1);
	}

	.select2-container {
		width: 100% !important;
	}

	.select2-selection {
		position: relative;
		padding-right: rem-calc(25) !important;

		&:after {
			content: '';
			width: rem-calc(18);
			height: rem-calc(18);
			background-image: url('#{$asset-path}/icons/icon-arrow-down.svg');
			background-size: 80%;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: rem-calc(5);
			right: 0;
		}
	}

	.select2-container--default .select2-search--inline .select2-search__field {
		font-family: "PT Sans", sans-serif;
		height: rem-calc(30);
		margin: 0;
		cursor: pointer;

		&::-webkit-input-placeholder { /* Edge */
			color: $darkBlue;
			@include fluid-type(18, 20);
		}

		&:-ms-input-placeholder { /* Internet Explorer 10-11 */
			color: $darkBlue;
			@include fluid-type(18, 20);
		}

		&::placeholder {
			color: $darkBlue;
			@include fluid-type(18, 20);
		}
	}

	.select2-container--default
	.select2-selection--multiple {
		border-radius: 0;
		color: $darkBlue;
		// border: 1px solid darken($lightGrey, 10%);
		border: none;
		margin-top: rem-calc(10);
		border-radius: rem-calc(5);
		min-height: rem-calc(40);
		cursor: pointer;
		// line-height: rem-calc(24);
		@include fluid-type(18, 20);
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
		padding-left: rem-calc(15);
		line-height: normal;
		margin: 0;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		padding: rem-calc(4 5);
		border-right: none;
		font-size: rem-calc(16);
		color: $darkBlue;
		transition: all 0.2s ease-in-out;

		&:hover {
			background-color: $darkBlue;
			color: $white;
		}
	}

	.select2-container--default.select2-container--focus .select2-selection--multiple {
		// border: 1px solid darken($lightGrey, 20%);
		border: none;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		background-color: $veryLightBlue;
		border: none;
		font-weight: 700;
		text-transform: uppercase;
		font-size: rem-calc(11);
		letter-spacing: 1.5px;
		padding: rem-calc(8 10);
		line-height: normal;
		margin-left: 0;
		margin-right: rem-calc(5);
	}

	&__search-dropdowns {
		margin-top: rem-calc(40);

		label {
			font-weight: 700;
		}
	}


	&__search {
		background-color: $white;
		padding: rem-calc(40 15);
		margin-top: rem-calc(-80);

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

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

		select {
			display: none;
		}

		.nice-select {
			border: none;
			border-bottom: 3px solid $darkBlue;
			border-radius: 0;
			height: rem-calc(60);
			padding: 0;

			&:after {
				width: rem-calc(28);
				height: rem-calc(28);
				border-bottom: none;
				border-right: none;
				margin-top: 0;
				top: rem-calc(5);
				transform: none;
				background-image: url('#{$asset-path}/icons/icon-search.svg');
				background-size: cover;
				background-repeat: no-repeat
			}

			.option {
				@include fluid-type(16, 18);
				padding-top: rem-calc(5);
				padding-bottom: rem-calc(5);

				&:hover {
					background-color: $veryLightBlue;
				}
			}
		}

		.nice-select-dropdown {
			width: 100%;
		}

		.current {
			@include fluid-type(24, 32);
			font-weight: 700;
			color: $darkBlue;
			width: calc(100% - 50px);
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
		}
	}

	&__intro {
		margin-bottom: rem-calc(20);
		margin-top: rem-calc(0);

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

class PeopleGrid {
	/**
	 * 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-people-grid');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {


			const featuredBlocks = block.querySelectorAll(".e-profile-block");

			if (featuredBlocks !== null)  {
				gsap.set(".block-people-grid .e-profile-block ", {y: 50, opacity: 0});

				ScrollTrigger.batch(".block-people-grid .e-profile-block ", {
					start: "top 100%",
					onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger:  0.15, overwrite: true}),
					onLeave: batch => gsap.set(batch, {opacity: 0, y: -50, overwrite: true}),
					onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
					onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 50, overwrite: true}),
				});

				ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".block-people-grid .e-profile-block ", {y: 0}));
			}

			const nameSearch = block.querySelector("#block-people-grid__name-search");
			const positionSearch = block.querySelector("#block-people-grid__positions-search");

			if (nameSearch) {
				var options = {
					searchable: true,
					placeholder: 'Who are you looking for?'
				};
				NiceSelect.bind(nameSearch, options);
			}

			$(document).ready(function() {
				$('#block-people-grid__positions-search').select2({
					placeholder: 'Search by Positions',
					tags : false,
				});
				$('#block-people-grid__services-search').select2({
					placeholder: 'Search by Services'
				});
				$('#block-people-grid__sectors-search').select2({
					placeholder: 'Search by Sectors'
				});
			});

			nameSearch.addEventListener('change', function() {
				window.location.href = this.value;
			});

			const teamFilters = block.querySelectorAll(".js-team-filters");

			if (teamFilters) {
				jQuery(function($){

					$('.js-team-filters').on('change', function() {

						var filter = $('#filter');
						var filterData = filter.serializeArray();
						var pageNo = '1';

						filterData.push({name: 'paged', value: pageNo});

						$.ajax({
							url:filter.attr('action'),
							data:filterData, // form data
							type:filter.attr('method'), // POST
							beforeSend:function(xhr){
								$('#response').css('opacity', '0.2');
							},
							success:function(data){
								// filter.find('button').text('Apply filter'); // changing the button label back
								$('#response').html(data); // insert data
								$('#response').css('opacity', '1');
								// setTimeout(() => {
								// 	// document.getElementById("response").scrollIntoView({ behavior: 'smooth', block: 'start' });
								// 	$('html,body').animate({scrollTop: $("#response").offset().top - 141}, 700);
								// }, 100);
							}
						});
						return false;
					});

					$(".block-people-grid").on('click','.e-pagination a', function(e) {
						e.preventDefault();
						var thisHref = $(this).attr('href');
						let cleanedUrl = thisHref.replace(/\/$/, '');
						let pageNo = cleanedUrl.split('/').pop();

						var filter = $('#filter');
						var filterData = filter.serializeArray();

						if (!pageNo) {
							pageNo = '1';
						}

						filterData.push({name: 'paged', value: pageNo});

						$.ajax({
							url:filter.attr('action'),
							data:filterData, // form data
							type:filter.attr('method'), // POST
							beforeSend:function(xhr){
								$('#response').css('opacity', '0.2');
							},
							success:function(data){
								// filter.find('button').text('Apply filter'); // changing the button label back
								$('#response').html(data); // insert data
								$('#response').css('opacity', '1');
								// setTimeout(() => {
								// 	// document.getElementById("response").scrollIntoView({ behavior: 'smooth', block: 'start' });
								// 	$('html,body').animate({scrollTop: $("#response").offset().top - 141}, 700);
								// }, 100);
							}
						});
						return false;

					});




					$(".block-people-grid").on('click','#people-reset', function(e) {
						// $(".js-team-filters").each(function(){
						// 	$(this).prop('selectedIndex',-1);
						// });
						$('#block-people-grid__positions-search').val('').trigger('change');
						$('#block-people-grid__services-search').val('').trigger('change');
						$('#block-people-grid__sectors-search').val('').trigger('change');
					});


				});


			}

		});
	}
}

new PeopleGrid();