Career Testimonials

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";

.block-career-testimonials{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }
    
    .ct{
        &-carousel{
            display: none;
            margin-bottom: rem-calc(32);
            &.slick-initialized{
                display: block;
            }
        }

        &-slide{
            text-decoration: none;
            position: relative;
            display: block;
            margin: rem-calc(0 12);
            width: rem-calc(296);

            @include bp($sm){
                width: rem-calc(416);
            }

            @include bp($md){
                width: rem-calc(638);
            }

            .quote-icon{
                margin-bottom: rem-calc(16);
                @include bp($md){
                    margin-bottom: rem-calc(24);
                }
            }

            &-image-col{
                display: flex;
                justify-content: flex-start;
                position: relative;
            }
            &-content-col{
                margin-top: -20%;
                display: flex;
                justify-content: flex-end;

                @include bp($md){
                    margin-top: rem-calc(-210);
                }
            }
            &-image-wrapper{
                overflow: hidden;
                position: relative;
                width: 100%;
                z-index: 1;
                //padding-top: calc( calc( 344 / 398 ) - 100%);
                picture img{
                    border-radius: rem-calc(20);
                }

                @include bp($sm){
                    max-width: rem-calc(416);
                    //padding-top: calc( calc( 360 / 416 ) - 100%);
                }

                @include bp($md){
                    picture img{
                        border-radius: rem-calc(40);
                    }
                }                
            }

            &-content{
                background-color: $grey-tertiary;
                padding: rem-calc(16);
                border-radius: rem-calc(20);
                width: calc( 100% - 32px );
                z-index: 1;                

                @include bp($sm){
                    max-width: rem-calc(416);
                }

                @include bp($md){
                    width: 100%;
                    padding: rem-calc(30 32 60 32);
                }

                &-text{
                    font-weight: 400;
                    font-size: rem-calc(16);
                    line-height: rem-calc(24);
                    letter-spacing: 0.05em;
                    margin-bottom: rem-calc(16);
                    
                    @include bp($sm){
                        font-size: rem-calc(20);
                        line-height: rem-calc(32);
                        overflow-y: auto;

                        height: rem-calc(128);

                        &::-webkit-scrollbar {
                            width: 4px;                    
                        }
                        
                        /* Track */
                        &::-webkit-scrollbar-track {
                            background: #f1f1f1;
                        }
                        
                        /* Handle */
                        &::-webkit-scrollbar-thumb {
                            background: #888;
                        }
                        
                        /* Handle on hover */
                        &::-webkit-scrollbar-thumb:hover {
                            background: #555;
                        }
                    }                  
                }

                &-by{
                    font-weight: 600;
                    font-size: rem-calc(16);
                    line-height: rem-calc(24);
                    letter-spacing: 0.05em;
                    @include bp($md){
                        font-size: rem-calc(20);
                        line-height: rem-calc(32);
                    }
                }
            }
        }                
    }

    @include bp($md){
        .slick-list{        
            margin: 0 -12px;
        }
    }
    .slick--arrow-wrap .slides--numbers{
        display: none;
    }
}

import 'slick-carousel';

class CareerTestimonial {
	/**
	 * 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-career-testimonials');
        this.init();
	}

	init() {
        var $ct_carousel = $('.block-career-testimonials').find('.ct-carousel');
		var $ct_progressbar = $('.block-career-testimonials').find('.slick--progress');
        var $ctprogressBarLabel = $ct_progressbar.find( '.slider__label' );

        $ct_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
            $ct_progressbar
            .css('background-size', calc + '% 100%')
            .attr('aria-valuenow', calc );

            $ctprogressBarLabel.text( calc + '% completed' );
        });

        $ct_carousel.on('init', function(event, slick) {
            if(slick.slideCount>1){
            var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
                $ct_progressbar
                .css('background-size', calc + '% 100%')
                .attr('aria-valuenow', calc );

                $ctprogressBarLabel.text( calc + '% completed' );
            }
            else{
                $ct_progressbar.hide();
            }
        });

		$ct_carousel.each(function(){
            var $sliderParent = $(this).parent();
            $(this).slick({
                slidesToShow: 1,
                arrows: true,
                dots: false,
                slidesToScroll: 1,
                autoplay: false,
                autoplaySpeed: 4000,
                infinite: true,
                //appendDots: $(".cs-slick-slider-dots"),
                prevArrow: $sliderParent.find(".slick-arrow--prev"),
			    nextArrow: $sliderParent.find(".slick-arrow--next"),
                variableWidth:true,
                rows:0,            
            });

            $(this).on('afterChange', function(event, slick, currentSlide){
                $sliderParent.find('.slides--numbers .active').html(currentSlide + 1);
            });
          
            var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
            $sliderParent.find('.slides--numbers .total').html(sliderItemsNum);
        });
    }
}

new CareerTestimonial();