summaryrefslogtreecommitdiff
path: root/html/content/js/Plugins/menu.js
blob: d6dced27bff58f9862ad5bf80f8e68dad155c9aa (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$$plugins.define('menu', ['domHelper'], function (element, options, $) {
    var level1 = $('.mainNav__link--hasChildren', element),
        closeElements = $('.mainLayer, .megamenu__close'),
        body = $('body'),
        burgerMenu = $('.burgerMenu'),
        mainContainer = $('.mainContainer'),
        header = $('.header'),
        megaMenuBack = $('.megamenu__back'),
        positionTopDesktop,
        scrollBarWidth;


    level1.on('click', function (event) {
        event.preventDefault();
        var $this = $(this);
        if ($this.parent('.mainNav__item').is('.mainNav__item--active')) {
            closeMenuLevel1($this);
        }
        else {
            openMenuLevel1($this);
        }
    });

    //close menu
    closeElements.on('click', function () {
        if (window.innerWidth < 1024) {
            closeMobileMenu();
        } else {
            closeMenuLevel1($('.mainNav__item--active .mainNav__link'));
        }
    });

    function openMenuLevel1($activeItem) {
        var $activeItemParent = $activeItem.parent('.mainNav__item');

        positionTopDesktop = -window.scrollY;
        scrollBarWidth = window.innerWidth - mainContainer.innerWidth();

        var activeItemsExceptCurrent = $('.mainNav__item--active').not($activeItemParent);
        if (activeItemsExceptCurrent.length > 0) {
            activeItemsExceptCurrent.removeClass('mainNav__item--active').addClass('mainNav__item--fadeOut');
            setTimeout(function () {
                activeItemsExceptCurrent.removeClass('mainNav__item--fadeOut');
            }, 350);
        }

        $activeItemParent.addClass('mainNav__item--active');
        body.addClass('menuOpened menuOpened--level2').each(e => e.style.paddingRight = scrollBarWidth + "px");
        burgerMenu.addClass('burgerMenu--opened');

        mainContainer.each(e => e.style.transform = "translateY(" + positionTopDesktop + "px)");
        header.each(e => e.style.width = "calc(100vw - " + scrollBarWidth + "px)");
    }

    function closeMenuLevel1($activeItem) {
        var $activeItemParent = $activeItem.parent('.mainNav__item');
        $activeItemParent.removeClass('mainNav__item--active');
        body.removeClass('menuOpened').each(e => e.style.paddingRight = "");
        burgerMenu.removeClass('burgerMenu--opened');
        mainContainer.each(e => e.style.transform = "");
        header.each(e => e.style.width = "");
        body.scroll({
            top: -positionTopDesktop
        });
    }

    burgerMenu.on('click', function (e) {
        e.preventDefault();
        if (e.target.matches('.burgerMenu--opened')) {
            closeMobileMenu();
        } else {
            openMobileMenu();
        }
    });

    var positionTop;
    function openMobileMenu() {
        positionTop = -window.scrollY;
        burgerMenu.addClass('burgerMenu--opened');
        body.addClass('menuOpened menuOpened--level2');
        mainContainer.each(e => e.style.transform = "translateY(" + positionTop + "px)");
    }

    function closeMobileMenu() {
        burgerMenu.removeClass('burgerMenu--opened');
        body.removeClass('menuOpened menuOpened--level2');
        mainContainer.each(e => e.style.transform = "");
        body.scroll({
            top: -positionTop
        });
    }

    megaMenuBack.on('click', function (event) {
        $('.mainNav__item--active').removeClass('mainNav__item--active');
        body.removeClass('menuOpened--level2');
    });
});