script.js

'use strict';
////////////////////////////////////
// Sticky navigation
const nav = document.querySelector('.nav');
const header = document.querySelector('.header');

const headerObserver = new IntersectionObserver(entries => {
    const [entry] = entries;

    if (entry.isIntersecting)
        nav.classList.remove('sticky');
    else
        nav.classList.add('sticky');
}, {
    root: null,
    rootMargin: '80px',
    threshold: 0.2
});

headerObserver.observe(header);

////////////////////////////////////
// Smooth scrolling
const btnScroll = document.querySelector('.btn--scroll-to');
const scrollTillElement = document.getElementById('section--1');

btnScroll.addEventListener('click', () => scrollTillElement.scrollIntoView({ behavior: 'smooth' }));

////////////////////////////////////
// Tab component
const tabBtnsContainer = document.querySelector('.operations__tab-container');
const tabs = document.querySelectorAll('.operations__content');

tabBtnsContainer.addEventListener('click', e => {
    const clickedBtn = e.target.closest('.operations__tab');

    if (!clickedBtn) return;

    document.querySelector('.operations__tab--active').classList.remove('operations__tab--active');
    document.querySelector('.operations__content--active').classList.remove('operations__content--active');

    clickedBtn.classList.add('operations__tab--active');
    tabs[clickedBtn.dataset.tab - 1].classList.add('operations__content--active');
});

////////////////////////////////////
// Fade in effect for all sections
const sections = document.querySelectorAll('.section');

const sectionObserver = new IntersectionObserver(entries => {
    const [entry] = entries;

    if (!entry.isIntersecting) return;

    entry.target.classList.remove('section--hidden');

    sectionObserver.unobserve(entry.target);
}, {
    root: null,
    threshold: 0.2
});

sections.forEach(section => {
    section.classList.add('section--hidden');
    sectionObserver.observe(section);
});

////////////////////////////////////
// Modal popup
const popup = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const openBtns = document.querySelectorAll('.btn--show-modal');
const closeBtn = document.querySelector('.btn--close-modal');

const showModal = () => {
    popup.classList.remove('hidden');
    overlay.classList.remove('hidden');
};

const closeModal = () => {
    popup.classList.add('hidden');
    overlay.classList.add('hidden');
};

openBtns.forEach(btn => btn.addEventListener('click', showModal));
closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
document.addEventListener('keydown', e => {
    if (e.key === 'Escape') closeModal();
});

////////////////////////////////////
// Lazy loading images
const imgs = document.querySelectorAll('.lazy-img');

const imgObserver = new IntersectionObserver(entries => {
    const [entry] = entries;

    if (!entry.isIntersecting) return;

    const img = entry.target;

    img.src = img.dataset.src;
    img.classList.remove('lazy-img');
    imgObserver.unobserve(img);
}, {
    root: null,
    threshold: 0.2
});

imgs.forEach(img => imgObserver.observe(img));

///////////////////////////////////////
// Slider
const slider = function () {
    const slides = document.querySelectorAll('.slide');
    const btnLeft = document.querySelector('.slider__btn--left');
    const btnRight = document.querySelector('.slider__btn--right');
    const dotContainer = document.querySelector('.dots');

    let curSlide = 0;
    const maxSlide = slides.length;

    // Functions
    const createDots = function () {
        slides.forEach(function (_, i) {
            dotContainer.insertAdjacentHTML(
                'beforeend',
                `<button class="dots__dot" data-slide="${i}"></button>`
            );
        });
    };

    const activateDot = function (slide) {
        document
            .querySelectorAll('.dots__dot')
            .forEach(dot => dot.classList.remove('dots__dot--active'));

        document
            .querySelector(`.dots__dot[data-slide="${slide}"]`)
            .classList.add('dots__dot--active');
    };

    const goToSlide = function (slide) {
        slides.forEach(
            (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
        );
    };

    // Next slide
    const nextSlide = function () {
        if (curSlide === maxSlide - 1) {
            curSlide = 0;
        } else {
            curSlide++;
        }

        goToSlide(curSlide);
        activateDot(curSlide);
    };

    const prevSlide = function () {
        if (curSlide === 0) {
            curSlide = maxSlide - 1;
        } else {
            curSlide--;
        }
        goToSlide(curSlide);
        activateDot(curSlide);
    };

    const init = function () {
        goToSlide(0);
        createDots();

        activateDot(0);
    };
    init();

    // Event handlers
    btnRight.addEventListener('click', nextSlide);
    btnLeft.addEventListener('click', prevSlide);

    document.addEventListener('keydown', function (e) {
        if (e.key === 'ArrowLeft') prevSlide();
        e.key === 'ArrowRight' && nextSlide();
    });

    dotContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('dots__dot')) {
            const { slide } = e.target.dataset;
            goToSlide(slide);
            activateDot(slide);
        }
    });
};
slider();

///////////////////////////////////////
// Menu fade animation
const handleHover = function (e) {
    if (!e.target.classList.contains('nav__link')) return;

    const link = e.target;
    const siblings = link.closest('.nav').querySelectorAll('.nav__link');
    const logo = link.closest('.nav').querySelector('img');

    siblings.forEach(el => {
        if (el !== link) el.style.opacity = this;
    });
    logo.style.opacity = this;
};

nav.addEventListener('mouseover', handleHover.bind(0.5));
nav.addEventListener('mouseout', handleHover.bind(1));