index.js

import 'owl.carousel';
$(document).ready(function(){
    $('.clients__list').owlCarousel({
        margin: 63,
        responsiveClass:true,
        navContainer: '.carousel__navigations',
        navText: [],
        autoWidth: true,
        responsive:{
            0:{
                items:1,
                loop: true,
                nav:false,
                margin: 90,
                center: true
            },
            450:{
                items:3,
                nav:false,
                loop: true,
                margin: 80,
                center: true
            },
            768:{
                items:4,
                nav:false,
                loop: true,
                margin: 80
            },
            1100:{
                items:6,
                loop: true
            }
        }
    });
    $('.slider__cases').owlCarousel({

        responsiveClass:true,
        dots: true,
        navContainer: '.slider__control',
        navText: ["<",">"],
        items: 1,
        responsive:{
            0:{
                nav:false
            },
            450:{
                nav:false
            },
            768:{
                nav:false
            },
            1100:{
                nav:true,
                loop:false
            }
        }
    });
    const burgerBtn = document.querySelector('.header__burger');
    const menuList = document.querySelector('.header__menu');
    burgerBtn.addEventListener('click', ()=>{
        burgerBtn.classList.toggle('header__burger_active');
        menuList.classList.toggle('header__menu_open');
    });

    const headerBox = document.querySelector('.header__wrapper');
    let scrollFix = true;
    document.addEventListener('scroll', ()=>{
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > 350 && scrollFix) {
            headerBox.classList.add('header__wrapper_shadow');
            scrollFix = false;
        } else if (scrollTop <= 350 && !scrollFix) {
            headerBox.classList.remove('header__wrapper_shadow');
            scrollFix = true;
        }
    });
    let btn_popup = document.querySelectorAll('.button__popup');
    btn_popup = Array.prototype.slice.call(btn_popup);
    if (btn_popup) {
        let box_popup = document.querySelector('.popup__wrapper');
        let body_popup = document.querySelector('body');
        let box_contact = document.querySelector('.popup__box_contact');
        let box_thanks = document.querySelector('.popup__box_thanks');
        let footer = document.querySelector('.footer');
    }

    function getCoords(elem) {
        var box = elem.getBoundingClientRect();
    
        var body = document.body;
        var docEl = document.documentElement;
    
        var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
    
        var clientTop = docEl.clientTop || body.clientTop || 0;
        var clientLeft = docEl.clientLeft || body.clientLeft || 0;
    
        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
    
        return {
        top: top,
        left: left
        };
    }

    let coordFooter = getCoords(footer);

    let close_popup = document.querySelectorAll('.popup__close');
    close_popup = Array.prototype.slice.call(close_popup);
    close_popup.forEach((item) => {
        item.addEventListener('click', (e) => {
            box_popup.classList.remove('popup__wrapper_active');
            body_popup.classList.remove('fixed');
            box_contact.classList.remove('popup__box_active');
            box_thanks.classList.remove('popup__box_active');
        });
    });
    $(".send-form").on("submit", function (e) {
        e.preventDefault();
        var form = $(this);
        var inputs = $(this).find('.footer__form-valid'); 
        inputs.each(function() {
          var value = $(this).val();
          if (value == '' || !value) {
            $(this).closest('.footer__form-item').addClass('footer__form-item_error');
            $(this).val($(this).attr('data-valid'));
          }
        });
        if ($('.footer__form-item_error').length < 1) {
          sendMail(form);
        }
    });
    $('.footer__form-valid').on('focus', function(event){
        
        if ($(this).closest('.footer__form-item').hasClass('footer__form-item_error')) {
            $(this).closest('.footer__form-item').removeClass('footer__form-item_error');
            $(this).val('');
        } 
    });
    
    $('.footer__form-valid').on('change', function(event){
        if ($(this).val() == '') {
            $(this).closest('.footer__form-item').removeClass('footer__form-item_active');
        } else {
            $(this).closest('.footer__form-item').addClass('footer__form-item_active');
        }
    });
    $('.footer__close-thanks').on('click', function() {
        $('.footer__thanks').removeClass('footer__thanks_active');
        $('.footer__contact-form').removeClass('footer__contact-form_active');
        $('.footer__form-button').removeClass('footer__form-button_loader-end');
    });

    function sendMail(form) {
        var url = form.attr("action");
        var email = form.find('#email').val();
        var method = form.attr("method");
        var data = form.serialize();
        var self = form;
        var button = self.find('.footer__form-button');
        $.ajax({
          type: method,
          url: url,
          data: {'data' : data},
          beforeSend: function () {
              button.attr("disabled", true);
              button.addClass('footer__form-button_loader');
              button.find('.button__text').text(button.data('loading'));
          },
          success: function (data) {
                button.attr("disabled", false);
                button.addClass('footer__form-button_loader-end');
                button.find('.button__loader').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    button.removeClass('footer__form-button_loader');
                    button.find('.button__text').text('Send');
                    self.find('.footer__form-valid').val('');
                    self.find('.footer__form-valid').closest('.footer__form-item').removeClass('footer__form-item_active');
                    $('.footer__thanks').addClass('footer__thanks_active');
                    $('.footer__contact-form').addClass('footer__contact-form_active');
                    $('.footer__thanks-email').text(email);
                });
          },
          error: function (data) {
              console.error(data);
          }
      });  
    }
});




$(document).ready(function () {

    $('.faq-form-valid').on('change', function (event) {
        if ($(this).val() == '') {
            $(this).closest('.faq-form-item').removeClass('faq-form-item_active');
        } else {
            $(this).closest('.faq-form-item').addClass('faq-form-item_active');
        }
    });

    $('.faq-page.panel-group a:first-child').trigger('click');

    function initSlider(slider) {
        slider.owlCarousel({
            responsiveClass: true,
            dots: true,
            nav: true,
            navContainer: '.custom-owl-nav',
            dotsContainer: '.custom-owl-dots',
            navText: ["<img src='assets/design/img/slider-arrow.svg'>", "<img src='assets/design/img/slider-arrow.svg'>"],
            // paginationNumbers: true,
            // dotsData:true,
            smartSpeed:500,
            items: 1,
            responsive: {
                0: {
                },
                450: {
                },
                768: {
                },
                1100: {
                    loop: true
                }
            }

        });

        /*var owl = $('.owl-carousel');

        $('.custom-owl-dots').on('click', 'button', function (e) {
            owl.trigger('to.owl.carousel', [$(this).index(), 270]);
        });
        $('.custom-owl-next').click(function () {
            owl.trigger('next.owl.carousel');
        });

        $('.custom-owl-prev').click(function () {
            owl.trigger('prev.owl.carousel');
        });*/
    }


    initSlider($('.e-commerce-slider'));

    $('.nav-tabs  a[href="#web"]').on('shown.bs.tab', function () {
        $('.e-commerce-slider').trigger('destroy.owl.carousel');
        initSlider($('.web-slider').trigger('refresh.owl.carousel'));
    });


    $('.nav-tabs a[href="#e-commerce"]').on('shown.bs.tab', function () {
        $('.web-slider').trigger('destroy.owl.carousel');
        initSlider($('.e-commerce-slider').trigger('refresh.owl.carousel'));
    });



    $(".show_more").click(function() {
        $(this).toggleClass("show");
        if($(this).hasClass("show")) {
            $(".show_more span").html("Show less");
        }
        else {
            $(".show_more span").html("Show more");
        }
        $('.show-more').toggleClass("moved_down");
        $(".hidden-panels").slideToggle(500);
        $(".block-faq.panel-group").toggleClass("expanded-faq-margin");
    });
});


$(document).on("scroll", function () {
    var pageTop = $(document).scrollTop();
    var pageBottom;
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        pageBottom = pageTop + $(window).height();
    }
    else {
        pageBottom = pageTop + $(window).height();
    }

    var tags = $(".bounce-up-element");

    for (var i = 0; i < tags.length; i++) {
        var tag = tags[i];
        if ($(tag).position().top < pageBottom) {
            $(tag).addClass("visible");
        } else {
            $(tag).removeClass("visible");
        }
    }

    var animated_elements = $(".animated-element");

    for (var x = 0; x < animated_elements.length; x++) {
        var animated_element = animated_elements[x];
        if ($(animated_element).position().top < pageBottom) {
            $(animated_element).addClass("visible");
        } else {
            $(animated_element).removeClass("visible");
        }
    }
});