https://v8soft.ru/bitrix/templates/ranx-landing/assets/js/headermenu.js

1
2$(document).ready(function(){
3
4    saveHeaderNavWidth();
5    calcPaddingsForHeaderfixedCenterMenu();
6    $(window).on('resize', function(){
7        calcPaddingsForHeaderfixedCenterMenu();
8        fitHeaderNav();
9    });
10
11    // these two events for calculating in which direction dropdown menu should go
12    $(document).on('mouseover', '.header-nav-dropdown li', function(e){
13        e.stopPropagation();
14
15        let $dropdown = $(this).find('> ul');
16
17        if (!$dropdown.length) {
18            return;
19        }
20
21        let dropdownWidth = $dropdown.width() * ($(this).parents('ul.header-nav-dropdown').length + 1);
22        let parentWidth = $(this).closest('.header-nav').width();
23        let freeSpaceRight = parentWidth - $(this).closest('td').position().left;
24
25        if (freeSpaceRight < dropdownWidth) {
26            $dropdown.css('right', '100%');
27            $dropdown.css('left', 'unset');
28        } else {
29            $dropdown.css('left', '100%');
30            $dropdown.css('right', 'unset');
31        }
32    });
33    $(document).on('mouseover', '.header-nav td', function(e){
34        let $dropdown = $(this).find('> ul.header-nav-dropdown');
35        let dropdownWidth = $dropdown.width();
36        let parentWidth = $(this).closest('.header-nav').width();
37        let freeSpaceRight = parentWidth - $(this).position().left;
38
39        if (freeSpaceRight < dropdownWidth) {
40            let moveLeftPx = freeSpaceRight - dropdownWidth;
41            $dropdown.css('left', moveLeftPx);
42        }
43    });
44
45    // set the position and size of the full drop down menu
46    $(document).on('mouseenter', '.header-nav td:not(.header-nav-more)', function(e){
47        const $dropdown = $(this).find('.header-nav-full-dropdown');
48        if ($dropdown.length) {
49            $dropdown.removeClass('loading');
50
51            if ($dropdown.hasClass('header-nav-by_size')) {
52                const $wrapper = $dropdown.closest('.maxwidth-theme');
53                const wrapperWidth = $wrapper.width();
54
55                const wrapperLeftOffset = parseInt($wrapper.offset().left);
56                const wrapperBorderLeftWidth = parseInt($wrapper.css('border-left-width'));
57                const wrapperLeftPadding = parseInt($wrapper.css('padding-left'));
58
59                $dropdown.offset({left: wrapperLeftOffset + wrapperBorderLeftWidth + wrapperLeftPadding});
60                $dropdown.css('width', wrapperWidth);
61            }
62
63            if ($dropdown.hasClass('header-nav-full')) {
64                $dropdown.offset({left: 0});
65                $dropdown.css('width', $('body').width());
66            }
67        }
68    });
69});
70
71function saveHeaderNavWidth()
72{
73    if ($('.header-nav').length) {
74        $('.header-nav td > a').each(function(){
75            $(this).data('width', $(this).outerWidth());
76            $(this).attr('data-width', $(this).outerWidth());
77        });
78    }
79    fitHeaderNav();
80}
81
82function fitHeaderNav()
83{
84    // if we have nav on the page, calc width and hide some elements to dots
85    if ($('.header-nav-wrap').length) {
86        $('.header-nav-wrap').each(function(){ // loop, because fixed header have nav too
87            let $navWrap = $(this);
88            let $nav = $navWrap.find('.header-nav');
89            let parentWidth = $navWrap.parent().width();
90
91            // calc total width of all siblings
92            let siblingsWidth = 0;
93            $navWrap.siblings().each(function(){
94                siblingsWidth += $(this).outerWidth(true); // width with paddings and margins
95            });
96
97            // now we have allowed width for our navbar
98            let maxNavWidth = parentWidth - siblingsWidth;
99
100            // calc width of nav elements
101            let totalNavWidth = 0;
102            if ($nav.find('.header-nav-more').is(':visible')) {
103                totalNavWidth += $('.header-nav-more').outerWidth(true);
104            }
105            let hideNextElements = false;
106            let hidedElements = [];
107
108            // hide elements, that doesn't fit
109            $nav.find('td').each(function(){
110                if ($(this).hasClass('header-nav-more')) {
111                    return false;

112                }
113
114                totalNavWidth += $(this).outerWidth(true);
115
116                if (totalNavWidth > maxNavWidth) {
117                    hideNextElements = true;
118                }
119
120                if (hideNextElements) {
121                    let innerHtml = $(this).html();
122
123                    innerHtml = '<li>' + innerHtml + '</li>';
124                    hidedElements.push(innerHtml);
125
126                    $(this).remove();
127
128                    if (!$nav.find('.header-nav-more').is(':visible')) {
129                        $nav.find('.header-nav-more').show();
130                    }
131                }
132            });
133
134            // add hided elements to dots
135            if (hidedElements.length) {
136                $nav.find('.header-nav-more > ul.header-nav-dropdown').prepend(hidedElements.join(''));
137            }
138
139            let newTotalNavWidth = $nav.width();
140
141            // if wide nav, calc width manually
142            if ($nav.hasClass('header-nav-wide')) {
143                newTotalNavWidth = 0;
144
145                $nav.find('td > a').each(function(){
146                    newTotalNavWidth += $(this).data('width');
147                });
148            }
149
150            // show elements that fit
151            if (newTotalNavWidth < maxNavWidth) {
152                $nav.find('.header-nav-more > ul.header-nav-dropdown > li').each(function(){
153                    let itemWidth = $(this).find('a').data('width');
154                    if (newTotalNavWidth + itemWidth < maxNavWidth) {
155                        newTotalNavWidth += itemWidth;
156
157                        let innerHtml = $(this).html();
158                        innerHtml = '<td>' + innerHtml + '</td>';
159
160                        $nav.find('.header-nav-more').before(innerHtml);
161
162                        $(this).remove();
163                    } else {
164                        return false;
165                    }
166                });
167            }
168
169            // if no elements in dots, hide it
170            if (!$nav.find('.header-nav-more > ul.header-nav-dropdown').children().length) {
171                $nav.find('.header-nav-more').hide();
172            }
173        });
174    }
175}
176
177function calcPaddingsForHeaderfixedCenterMenu()
178{
179    let $headerMenuCenter = $('.headerfixed-menu-center');
180    if ($headerMenuCenter.length) {
181        let paddingLeft = 20;
182        let paddingRight = 20;
183
184        $headerMenuCenter.siblings('.pull-left').each(function(){
185            paddingLeft += $(this).outerWidth(true);
186        });
187
188        $headerMenuCenter.siblings('.pull-right').each(function(){
189            paddingRight += $(this).outerWidth(true);
190        });
191
192        $headerMenuCenter.css('padding-left', paddingLeft);
193        $headerMenuCenter.css('padding-right', paddingRight);
194    }
195}