main.js

let touchWorkTime = 0;
let touchStartTime = 0;
let touchEndTime = 0;
let touchStartX = 0;
let touchStartY = 0;
let touchEndX = 0;
let touchEndY = 0;

let thumbChangeInterval;

const TOUCH_WORK_TIME_MIN = 10;
const TOUCH_WORK_TIME_MAX = 400;

function showPagesActions(e, elem, id) {
    let actions_row = document.getElementById('actions-' + id) || undefined;
    let actions_rows = document.getElementsByClassName('actions') || undefined;

    if (typeof actions_rows !== 'undefined') {
        for (i = 0; i < actions_rows.length; i++) {
            actions_rows[i].classList.add('hide');
        }
    }

    if (typeof actions_row !== 'undefined') {
        actions_row.classList.remove('hide');
    }

}


function offcanvasOpenElements() {
    document.body.style.overflow = 'hidden';
    //document.querySelector('.darkBG_wrap').style.display = 'block';
    document.querySelector('.navbar-toggler').className = 'navbar-toggler mr-2 p180';
}

function offcanvasCloseElements() {
    document.body.style.overflow = '';
    //document.querySelector('.darkBG_wrap').style.display = 'none';
    document.querySelector('.navbar-toggler').className = 'navbar-toggler mr-2 m180';
}


function resizeContainer() {
    let container = document.querySelector('[data-resize="resize"]') || undefined;
    let nav = document.querySelector('nav.navbar');
    let footer = document.querySelector('footer');

    if (typeof container !== 'undefined') {
        container.style.minHeight = window.innerHeight - nav.offsetHeight - footer.offsetHeight + 'px';
    }
}

function removeClassFromAll(elem, className) {
    //let elem = document.querySelectorAll('.' + className) || undefined;

    if (typeof elem !== 'undefined') {
        elem.forEach(function(elem) {
            elem.classList.remove(className);
        });
    }
}

function removeClassFromAllByGroupAttr(elem, className, attr) {
    if (typeof elem !== 'undefined') {
        elem.forEach(function(elem) {
            if (elem.getAttribute('data-group') == attr) {
                elem.classList.remove(className);
            }
        });
    }
}

function xhr_post(url, data, callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    let postData = [];
    for (const [key, val] of Object.entries(data)) {
        postData.push(key + '=' + val);
    }
    postData = postData.join('&');
    xhr.send(postData);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
            if (typeof callback !== 'undefined') callback(this.responseText);
        }
    }
}

function shape_resize(elem) {
    if (typeof elem !== 'undefined') {
        if (window.scrollY > 0) {
            if (!elem.classList.contains('active')) elem.classList.add('active');
        } else {
            if (elem.classList.contains('active')) elem.classList.remove('active');
        }
    }
}

function request_poll_answer(e, elem, name) {
    let answerElems = document.getElementsByName('answer') || undefined;

    if (typeof answerElems !== 'undefined') {
        answerElems.forEach(function(elem) {
            if (elem.checked) {
                let id = elem.value;
                xhr_post('/act', { act: 'vote_poll', poll: name, id: id }, function(response) {
                    let pollsContainer = document.getElementById('polls_container-' + name) || undefined;

                    if (typeof pollsContainer !== 'undefined') pollsContainer.innerHTML = response;
                });
            }
        });
    }
}



function getServices(city) {
    let servicesContainer = document.getElementById('services') || undefined;
    if (typeof servicesContainer !== 'undefined') {
        xhr_post('/act', { act: 'get_services_html', city: city }, function(response) {
            servicesContainer.innerHTML = response;
        });
    }
}

function getStreets(city) {
    let streetsSelect = document.getElementById('streets') || undefined;
    if (typeof streetsSelect !== 'undefined') {
        streetsSelect.setAttribute('disabled', '');
        xhr_post('/act', { act: 'get_streets_html', city: city }, function(response) {
            streetsSelect.innerHTML = response;
            streetsSelect.removeAttribute('disabled');
        });
    }
}

function selectCity(e, elem) {
    getStreets(elem.value);
    getServices(elem.value);
}

function checkbox_process() {
    let checkUI = document.querySelectorAll('.check_label') || undefined;
    if (typeof checkUI !== 'undefined') {
        for (var i = 0; i < checkUI.length; i++) {
            let chUI = checkUI[i] || undefined;
            if (typeof chUI !== 'undefined') {

                chUI.addEventListener('mouseenter', function(e) {
                    if (!chUI.classList.contains('hover')) {
                        chUI.classList.add('hover');
                    }
                });

                chUI.addEventListener('mouseleave', function(e) {
                    if (chUI.classList.contains('hover')) {
                        chUI.classList.remove('hover');
                    }
                });

                chUI.querySelector('input').addEventListener('change', function(e) {
                    this.checked ? chUI.classList.add('checked') : chUI.classList.remove('checked');
                });

            }
        }
    }
}

function radio_process() {
    let radioUI = document.querySelectorAll('.radio_label') || undefined;
    if (typeof radioUI !== 'undefined') {
        for (var i = 0; i < radioUI.length; i++) {
            let UI = radioUI[i] || undefined;
            if (typeof UI !== 'undefined') {

                UI.addEventListener('mouseenter', function(e) {
                    if (!UI.classList.contains('hover')) {
                        UI.classList.add('hover');
                    }
                });

                UI.addEventListener('mouseleave', function(e) {
                    if (UI.classList.contains('hover')) {
                        UI.classList.remove('hover');
                    }
                });

                UI.addEventListener('click', function(e) {
                    removeClassFromAll(radioUI, 'checked');
                    if (!UI.classList.contains('checked')) UI.classList.add('checked');
                });

            }
        }
    }
}

function tariffs_process() {
    let tariffRadioUI = document.querySelectorAll('.tariff') || undefined;
    if (typeof tariffRadioUI !== 'undefined') {
        tariffRadioUI.forEach(function(elem) {
            elem.addEventListener('click', function(e) {
                removeClassFromAllByGroupAttr(tariffRadioUI, 'checked', elem.getAttribute('data-group'));
                elem.classList.add('checked');
            });
        });
    }
}

window.addEventListener('DOMNodeInserted', function(e) {
    checkbox_process();
    radio_process();
    tariffs_process();
});

window.onload = function(event) {
    let head = document.getElementById('test') || undefined;
    let shape = document.querySelector('.shape') || undefined;

    shape_resize(shape);
    checkbox_process();
    radio_process();
    resizeContainer();

    window.addEventListener('scroll', function(e) {
        shape_resize(shape);
    });

    window.onresize = function(e) {
        resizeContainer();
    }

    if (typeof head !== 'undefined') {
        let rect = head.getBoundingClientRect();
        head.style.width = rect.width + 'px';
        head.style.left = rect.x + 14 + 'px';
        head.style.top = '76px';
        head.style.position = 'fixed';
        head.style.visibility = 'hidden';
        head.style.zIndex = '999';

        window.addEventListener('scroll', function(event) {
            let firstElemY = document.querySelector('.row.first').offsetTop;
            let lastElemY = document.querySelector('.row.last').offsetTop;

            if (window.pageYOffset >= firstElemY && window.pageYOffset <= lastElemY) {
                head.style.visibility = 'visible';
            } else if (window.pageYOffset >= lastElemY || pageYOffset <= firstElemY) {
                head.style.visibility = 'hidden';
            }
        });
    }
    document.querySelectorAll('[data-select="select"]').forEach(elem =>
        elem.addEventListener('click', function(event) {
            document.querySelectorAll('.trader').forEach(elem =>
                elem.classList.remove('active')
            )
            elem.classList.add('active');
            document.getElementById(elem.getAttribute('data-select-input')).value = elem.getAttribute('data-trader-id');
        })
    );
    /*
    document.querySelector('.darkBG_wrap').addEventListener('click', function(event) {
        document.querySelectorAll('.offcanvas-collapse')[0].classList.remove('open');
        offcanvasCloseElements();
    });
    */
    window.addEventListener('touchstart', function(e) {
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
        touchStartTime = e.timeStamp;
    });

    window.addEventListener('touchend', function(e) {
        let windowWidth = window.innerWidth;
        let touchYConfirm = false;
        let touchTConfirm = false;
        let touchYDiff = 0;
        let touchBeginOffsetStart = windowWidth;
        let touchBeginOffsetEnd = windowWidth - (windowWidth / 2);
        let touchEndOffsetX = windowWidth - (windowWidth / 2);
        let touchBeginOffsetStartRev = (windowWidth / 2);
        let touchEndOffsetXEndRev = (windowWidth);

        touchEndX = e.changedTouches[0].clientX;
        touchEndY = e.changedTouches[0].clientY;
        touchEndTime = e.timeStamp;
        touchWorkTime = touchEndTime - touchStartTime;

        if (touchStartY > touchEndY) touchYDiff = touchStartY - touchEndY;
        if (touchStartY < touchEndY) touchYDiff = touchEndY - touchStartY;
        if (touchYDiff >= 0 && touchYDiff <= 160) touchYConfirm = true;
        if (touchWorkTime >= TOUCH_WORK_TIME_MIN && touchWorkTime <= TOUCH_WORK_TIME_MAX) touchTConfirm = true;

        if ((touchStartX <= touchBeginOffsetStart && touchStartX >= touchBeginOffsetEnd) && (touchEndX <= touchEndOffsetX) &&
            touchTConfirm && touchYConfirm) {
            document.querySelectorAll('.offcanvas-collapse')[0].classList.add('open');
            offcanvasOpenElements();
        }

        if ((touchStartX >= 0 && touchStartX <= touchBeginOffsetStartRev) && (touchEndX <= touchEndOffsetXEndRev) && touchYConfirm && touchTConfirm) {
            document.querySelectorAll('.offcanvas-collapse')[0].classList.remove('open');
            offcanvasCloseElements();
        }

        touchStartX = 0;
        touchEndX = 0;
        touchYDiff = 0;
        touchYConfirm = false;
        touchTConfirm = false;
    });


    document.querySelectorAll('[data-toggle="offcanvas"]').forEach(function(elem) {
        elem.addEventListener('click', function(event) {

        document.querySelectorAll('.offcanvas-collapse').forEach(function(elem) {
            elem.classList.toggle('open');

            if (elem.classList.contains('open')) {
                offcanvasOpenElements();
            } else {
                offcanvasCloseElements();
            }

        });

        event.preventDefault();
        event.stopPropagation();


        return false;
        });

        elem.addEventListener('blur', function(event) {
            if (elem.classList.contains('open')) {
                offcanvasOpenElements();
            } else {
                offcanvasCloseElements();
            }
        });
    });

    document.querySelectorAll('[data-toggle="focus"]').forEach(elem =>
        elem.addEventListener('focus', function(event) {
            this.previousElementSibling.classList.add('focused');
        })
    );

    document.querySelectorAll('[data-toggle="focus"]').forEach(elem =>
        elem.addEventListener('blur', function(event) {
            this.previousElementSibling.classList.remove('focused');
        })
    );

    document.querySelectorAll('[data-toggle="card"]').forEach(elem =>
        elem.addEventListener('click', function(event) {
            elem.classList.toggle('open');
            document.getElementById(elem.getAttribute('data-card')).classList.toggle('closed');

            event.stopPropagation();
            event.preventDefault();
        })
    );

}