https://www.webself.net/Js/menu.js

1
2(function (window, document)
3{
4    var menu = document.getElementById('menu'),
5        WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
6    var langSelectorCheckbox = $("#langSelectorCheckbox");
7    var langSelectorPopup = $("#langSelectorPopup");
8    var langSelectorImageButton = $('.langSelectorInner > img');
9    var langSelectorInner = $('.langSelector > .langSelectorInner');
10
11    function toggleHorizontal()
12    {
13        [].forEach.call(
14            document.getElementById('menu').querySelectorAll('.custom-can-transform'),
15            function (el)
16            {
17                el.classList.toggle('pure-menu-horizontal');
18            }
19        );
20    };
21
22    function toggleMenu()
23    {
24        // set timeout so that the panel has a chance to roll up
25        // before the menu switches states
26        if (menu.classList.contains('open'))
27        {
28            setTimeout(toggleHorizontal, 500);
29        }
30        else
31        {
32            toggleHorizontal();
33        }
34        menu.classList.toggle('open');
35        document.getElementById('toggle').classList.toggle('x');
36    };
37
38    function closeMenu()
39    {
40        if (menu.classList.contains('open'))
41        {
42            toggleMenu();
43        }
44    }
45
46    function setLanguagePopupData(data) {
47        localStorage.setItem("WSLanguagePopupData", JSON.stringify(data));
48    }
49
50    function getLanguagePopupData() {
51        var storedLanguagePopupData = JSON.parse(localStorage.getItem("WSLanguagePopupData"));
52        if (!storedLanguagePopupData) {
53            storedLanguagePopupData = {isHidden: false};
54            setLanguagePopupData(storedLanguagePopupData);
55        }
56        return storedLanguagePopupData;
57    }
58
59    function onWindowResize() {
60        updateLangPopupPosition();
61    }
62
63    function updateLangPopupPosition() {
64        if (window.innerWidth > 1120) {
65            langSelectorPopup.css({
66                "left": langSelectorImageButton.offset().left - (langSelectorPopup.width() / 2) 
67            });
68        } else {
69            langSelectorPopup.css({
70                "left": "auto",
71                "right": 8,
72                "top": "4.3em"
73            });
74        }
75    }
76
77    document.getElementById('toggle').addEventListener('click', function (e)
78    {
79        toggleMenu();
80    });
81
82    window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
83
84    // Active menu
85    PageName = window.location.pathname;
86    PageName = PageName.substring(1);
87    
88    PageName = PageName.replace("en/", "");
89
90    if (PageName.indexOf('Default.aspx') !== -1) {
91        PageName = PageName.substring(0, PageName.indexOf('Default.aspx'));
92    }
93
94    $('#menu a[href*="' + PageName + '"]').addClass('active');
95    $('.footerMenu a[href="' + PageName + '"]').addClass('footerActive');
96
97    // Lang Menu
98    langSelectorInner.on('mouseenter', function () {
99        var SelectorPosition = $(this).offset();
100        var LeftSelectorPosition = SelectorPosition.left - $(window).scrollLeft();
101        var TopSelectorPosition = SelectorPosition.top - $(window).scrollTop();
102        var MiddleSelectorPosition = LeftSelectorPosition + ($(this).outerWidth() / 2);
103        var Container = $(this).closest(".langSelector");
104
105        var SubMenu = Container.find(".langSelectorSubMenu.langSelectorList").eq(0);
106
107        var SubMenuTopPosition = TopSelectorPosition + Container.height();
108        var SubMenuLeftPosition = MiddleSelectorPosition - (SubMenu.outerWidth() / 2);
109
110        SubMenu.css({ "left": SubMenuLeftPosition, "top": SubMenuTopPosition });
111
112        if (!langSelectorPopup.is(":visible")) {
113            SubMenu.prepend("<div class=\"triangle\" style=\"left:" + (MiddleSelectorPosition - 4) + "px; top:" + (SubMenuTopPosition - 5) + "px\"></div>");
114        }
115    });
116
117    langSelectorInner.on('click', function() {
118        langSelectorPopup.hide();
119        langSelectorImageButton.trigger("mouseenter");
120    });
121
122    langSelectorInner.on('mouseleave', function () {
123        $(".langSelectorList .triangle").remove();
124    });

125
126    $(function() {
127        var shouldDisplayPopup = ("" + langSelectorPopup.data("shoulddisplay")).toLowerCase() === "true";
128        if (shouldDisplayPopup && !getLanguagePopupData().isHidden) {
129            window.addEventListener(WINDOW_CHANGE_EVENT, onWindowResize);
130
131            langSelectorCheckbox.on("change", function(e) {       
132                var storedLanguagePopupData = getLanguagePopupData();
133                // Store user choice
134                storedLanguagePopupData.isHidden = $(this).prop("checked");
135                setLanguagePopupData(storedLanguagePopupData);
136
137                if (storedLanguagePopupData.isHidden) langSelectorPopup.fadeOut();
138            });
139
140            langSelectorPopup.addClass("open");
141            langSelectorPopup.css('display', 'none');
142            langSelectorPopup.on('mouseup', function (e) { e.stopPropagation(); });
143
144            updateLangPopupPosition();
145
146            // Show after
147            setTimeout(function () {
148                var slideDuration = 300;
149                langSelectorPopup
150                    .stop(true, true)
151                    .fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);
152            }, 1000);
153        }
154
155        // After 2 seconds
156        setTimeout(function () {
157            var onWindowScroll = function () {
158                var scrollTop = $(this).scrollTop() || 0;
159                if (scrollTop >= 100) {
160                    langSelectorPopup.fadeOut();
161                    $(window).off('scroll', onWindowScroll);
162                }
163            }
164            var onDocumentClick = function (e) {
165                langSelectorPopup.fadeOut();
166                $(document).off('mouseup', onDocumentClick);
167            };
168            $(window).on('scroll', onWindowScroll)
169            $(document).on('mouseup', onDocumentClick);
170        }, 2000);
171    });    
172
173})(this, this.document);