js/application.js

(function () {

    // start: menu
    // var burger = document.querySelector('.header-top-bar .container');
    var $body = $('body');
    var body = document.querySelector('body');
    var navigation = document.querySelectorAll('.navigation li');

    // burger.onclick = function () {
    //     body.classList.toggle('menu-opened');
    //     animate();
    // }

    // navigation.forEach(function (e) {
    //     e.onclick = function () {
    //         // animate();
    //         // body.classList.remove('menu-opened');
    //     }
    // })

    // var animate = function (num = 0) {
    //     setTimeout(function () {
    //         for (let i of navigation) {
    //             num += 1;
    //             setTimeout(function () {
    //                 i.classList.toggle('active');
    //             }, 30 * num);
    //         }
    //     }, 300);
    // }
    // // end: menu

    window.helpers = {
        captcha() {
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.defer = true;
            script.src = 'https://www.google.com/recaptcha/api.js';

            document.head.appendChild(script);
        }
    }


    // start: page load
    var links = document.querySelectorAll('.navigation [data-remote="true"]');
    var container = document.querySelector('#main-container');
    var current_page = window.location.pathname;
    var hash = window.location.hash || '';

    if (current_page === '/') current_page = '/home';
    load_page(current_page + hash);

    function activeCurrentPage(page) {
        if (document.querySelector('.navigation .active')) {
            document.querySelector('.navigation .active').classList.remove('active');
        }

        if (document.querySelector(`.navigation [href="${page}"]`)) {
            document.querySelector(`.navigation [href="${page}"]`).parentNode.classList.add('active');
        }
    }

    activeCurrentPage(current_page);

    links.forEach(function (link) {
        link.onclick = function (event) {
            event.preventDefault();
            var page = this.getAttribute('href');
            load_page(page);
            activeCurrentPage(page);
            $('body').toggleClass('nav-open');
        }
    });

    window.onpopstate = function () {
        var page = window.location.pathname;
        hash = window.location.hash || '';
        if (page === '/') page = '/home';
        load_page(page, hash);
    };

    function load_page(page, hash = '') {
        fetch(`pages/${page}.html`)
            .then(function (response) {
                return response.text()
            })
            .then(function (html) {
                body.setAttribute('data-page', page.replace('/', ''));
                container.innerHTML = html;
                window.history.pushState(null, page, window.location.origin + page + hash);
                window.scrollTo({top: 0, behavior: 'smooth'});
                fade_in_elements();

                if ($('[data-load]').length) {
                    window.helpers[$('[data-load]').data('load')]()
                }
            })
            .catch(function (err) {
                console.log('Failed to fetch page: ', err);
            });
    }

    function fade_in_elements() {
        var elements = document.querySelectorAll('.fade-in');

        elements.forEach((element, index) => {
            setTimeout(() => {
                element.classList.add('fade-in--start');
                element.onanimationend = (e) => e.target.classList.add('fade-in--end');
            }, 250 * index);
        });
    }
    // end: page load

    $body.on('click', '[data-scroll-to]', e => {
        const header = document.querySelector('header');
        window.scrollTo({top: $(e.target.dataset.scrollTo).offset().top - header.offsetHeight, behavior: 'smooth'});
    });

    // mobile nav
    $('[data-toggle="offcanvas"], #navToggle').on('click', function () {
        $body.toggleClass('nav-open');
    });

    const navbar = $('.js-navbar');

    function matchViewport(mediaWidth) {
        return window.matchMedia(`screen and (${mediaWidth})`);
    }

    // run on window resize
    matchViewport('min-width: 1200px').addEventListener('change', function() {
        this.matches ? navbar.removeClass('offcanvas-collapse') : navbar.addClass('offcanvas-collapse');
    });

    // run on window load
    matchViewport('min-width: 1200px').matches ? (navbar.removeClass('offcanvas-collapse'), body.classList.remove('nav-open')) : navbar.addClass('offcanvas-collapse');

    // cookies
    const cookies = document.cookie.split('; ');
    const cookiesBox = document.querySelector('.cookies');

    if (!cookies.includes('cookie-accepted=true')) {
        showCookies();
    }

    function showCookies() {
        setTimeout(() => {
            cookiesBox.style.transform = 'translateY(0) scale(1)';
            cookiesBox.style.opacity = '1';
            cookiesBox.style.visibility = 'visible';
            cookiesBox.style.filter = 'blur(0)';
        }, 900);
    }

    function hideCookies() {
        cookiesBox.style.transform = 'translateY(100) scale(0)';
        cookiesBox.style.opacity = '0';
        cookiesBox.style.visibility = 'hidden';
        cookiesBox.style.filter = 'blur(100)';
    }

    const cookieAccept = document.querySelector('.cookies__button');
    cookieAccept.addEventListener('click', () => {
        document.cookie = `cookie-accepted=true; max-age=31536000;`;
        hideCookies();
    });


    // start: formularz
    $(document).on('submit', '.wedding-form', function (e) {
        e.preventDefault();

        var button = $('.wyslij-formularz');
        button.html('<div class="spinner-border" role="status"></div> Wysyłanie...').attr('disabled', true);

        var alert = $('.alert');
        alert.hide().removeClass('alert-danger alert-success');

        $.post('/php/form.class.php', $(this).serializeArray()).done(function (resp) {
            var resp = JSON.parse(resp);

            $('.wedding-form input').css('border', '1px solid transparent');
            $('.wedding-form label').css('color', 'white');

            if (resp.status === 'error') {
                for (let i in resp.elements) {
                    $('[name="' + resp.elements[i] + '"]').css('border', '2px solid red').next('label').css('color', 'red');
                }

                button.text('Wyślij').attr('disabled', false);
                alert.addClass('alert-danger').html('Pola oznaczone gwiazdką * są wymagane.<br>Prosimy uzpełnić brakujące pozycje, oraz ponownie wysłać formularz.').show();
            }

            if (resp.status === 'success') {
                button.text('Wyślij').attr('disabled', false);
                alert.addClass('alert-success').html('Dziękujemy za wypełnienie formularza planu wesela.<br>Na podany adres email została wysłana kopia dokumentu w formacie pdf.').show();
            }
        });
    });


    $(document).on('change', '.checkbox-option', function () {
        ($(this).val() === 'tak') ? $(this).closest('.has-hidden-contents').find('.hidden-contents:first').fadeIn(): $(this).closest('.has-hidden-contents').find('.hidden-contents:first').fadeOut();
    });

    $(document).on('change', '[name=first_dance]', function () {
        $('[name=first_dance_title]').prop('disabled', true);
        if ($(this).is(':checked')) $(this).parent().find('[name=first_dance_title]').prop('disabled', false);
    });
    // end: formularz

    // contact-form
    $(document).on('submit', '.contact-form', function (e) {
        e.preventDefault();

        $(e.target).find('.is-invalid').removeClass('is-invalid');
        $(e.target).find('.invalid-feedback').remove();
        $('.alert').remove();

        const button = $(e.target).find('button[type=submit]');
        button.html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span class="sr-only">Wysyłanie...</span>
        Wysyłanie..`);

        const action = $(e.target).attr('action');
        $.post(action, $(this).serializeArray()).done(function (response) {
            const resp = JSON.parse(response);

            setTimeout(function() {
                if (resp.error) {
                    for (let key in resp.elements) {
                        $(`#${key}`).addClass('is-invalid').parent().append(`<div class="invalid-feedback">
                            ${resp.elements[key]}
                        </div>`);
                    }
                } else {
                    $(e.target).append('<div class="alert alert-primary mt-3" role="alert">Wiadomość wysłana.</div>');
                    $('.alert').show();
                    $(e.target).trigger("reset");
                }

                button.text('Wyślij');
            }, 500);
        }).fail(function(err) {
            console.log(err);
            $(e.target).append('<div class="alert alert-danger mt-3" role="alert">Wystąpił problem z wysłaniem formularza.</div>');
            $('.alert').show();
        })
    });
    // end: contact-form
}());