https://acestream.media/js/modal.js?10

1const ModalState = {};
2
3const MODAL_ACTIVE_CLASS = 'modal-active';
4const BODY_SCROLL_DISABLE_CLASS = 'body-scroll-disable';
5
6$(document).ready(function() {
7    ModalState.modalCloseBtns = document.querySelectorAll('.modal-menu-close-btn');
8    ModalState.modalsWrappers = document.querySelectorAll('.mobile-menu-bg');
9    ModalState.modalContainers = document.querySelectorAll('.modal__area__content');
10
11    enableCloseModalOnBgdClick();
12    hideModalOnMobileMenuElementsClick();
13
14    $('.action--open-menu').on('click', event => {
15        event.preventDefault();
16
17        console.log('open menu');
18
19        if($('#modal-menu-laptop').hasClass(MODAL_ACTIVE_CLASS)) {
20            // Modal is active - close it
21            hideMenuModal();
22        }
23        else {
24            // Modal is not active - show it
25            showMenuModal();
26        }
27    });
28
29    ModalState.modalCloseBtns.forEach(btn => {
30        btn.addEventListener('click', event => {
31            event.preventDefault();
32            hideMenuModal();
33        });
34    })
35});
36
37
38function enableCloseModalOnBgdClick() {
39    if (ModalState.modalContainers.length) {
40        ModalState.modalContainers.forEach( container => {
41            container.addEventListener('click', event => event.stopPropagation());
42        });
43    }
44
45    if (ModalState.modalsWrappers.length) {
46        ModalState.modalsWrappers.forEach( container => {
47            container.addEventListener('click', event => {
48                event.preventDefault();
49                hideMenuModal();
50            });
51        });
52    }
53}
54
55function showMenuModal(options) {
56    options = options || {};
57
58    const modal = document.getElementById('modal-menu-laptop');
59
60    // make modal visible right now
61    modal.style.visibility = 'visible';
62    modal.classList.add(MODAL_ACTIVE_CLASS);
63
64    $('.button--menu').addClass('as-active');
65    document.body.classList.add(BODY_SCROLL_DISABLE_CLASS);
66
67    if(!isMobile() && signInFinished() && !isUserSignedIn()) {
68        $('.modal-registration-holder').hide().delay(375).fadeIn(375);
69    }
70
71    if(!options.skipState) {
72        pushState(PAGE_MENU);
73    }
74}
75
76function hideMenuModalInternal() {
77    const modal = document.getElementById('modal-menu-laptop');
78    modal.classList.remove(MODAL_ACTIVE_CLASS);
79
80    // Make modal invisible when animation ends
81    // Need to hide modal otherwise it will show for a moment on screen rotation.
82    const animationDuration = isMobile() ? 500 : 750;
83    setTimeout(() => {
84            modal.style.visibility = 'hidden';
85    }, animationDuration);
86
87    document.body.classList.remove(BODY_SCROLL_DISABLE_CLASS);
88    $('.button--menu').removeClass('as-active');
89}
90
91function hideMenuModal(options) {
92    options = options || {};
93
94    if(isMobile() || isUserSignedIn()) {
95        hideMenuModalInternal();
96    }
97    else {
98        $('.modal-registration-holder').fadeOut(375);
99        hideMenuModalInternal();
100    }
101
102    if(!options.skipState) {
103        history.replaceState(null, '', buildUrl(null));
104    }
105}
106
107function hideModalOnMobileMenuElementsClick() {
108    const MOBILE_MENU_ITEM_CLOSE_DELAY = 150;
109    const menuElements = document.querySelectorAll('.modal-menu-hide');
110
111    if (menuElements.length) {
112        menuElements.forEach( container => {
113            container.addEventListener('click', () => setTimeout(hideMenuModal, MOBILE_MENU_ITEM_CLOSE_DELAY));
114        });
115    }
116}