let responsiveNavigate = (function(){
let nav = null;
let widthWrapper = 0;
let widthLastWrapper = null;
let usingMore = false;
return {
init: function(element) {
if (document.querySelector(element.wrapper)) {
this.start(element);
this.resize(element);
}
},
start: function (element) {
widthWrapper = document.querySelector(element.wrapper).clientWidth;
if (widthWrapper !== widthLastWrapper) {
if (window.screen.width > element.breakpoint) {
this.reset(element);
this.checkItems(element);
element && document.querySelector(element.wrapper).classList.add('js-responsive-navigate-processed');
}
}
},
resize: function (element) {
window.addEventListener('resize', e => {
if (window.screen.width > element.breakpoint) {
this.start(element);
widthLastWrapper = widthWrapper;
} else {
this.reset(element);
widthLastWrapper = null
element && document.querySelector(element.wrapper).classList.remove('js-responsive-navigate-processed');
}
});
},
checkItems: function () {
let width = getComputedStyle(nav).gap !== 'normal' ? parseInt(getComputedStyle(nav).gap) * (nav.children.length-1) : 0;
nav.children.forEach(item => {
if (!item.classList.contains('.menu__item-more')) {
width += item.clientWidth;
}
});
if (width > widthWrapper) {
this.addItemMore();
this.move();
this.positionMoreList();
}
},
positionMoreList: function () {
if (usingMore) {
if (nav.offsetLeft + nav.querySelector('.menu__item-more').offsetLeft + nav.querySelector('.menu__item-more ul').clientWidth > window.screen.width) {
nav.querySelector('.menu__item-more ul').style.left = 'auto';
nav.querySelector('.menu__item-more ul').style.right = 0;
} else {
nav.querySelector('.menu__item-more ul').style.left = 0;
nav.querySelector('.menu__item-more ul').style.right = 'auto';
}
}
},
addItemMore: function () {
if (!usingMore) {
usingMore = true;
nav.insertAdjacentHTML('beforeend', `
<li class='menu__item expanded menu__item-more'>
<a href='javascript://'>Меню</a>
<ul class='menu menu-level-1' style='opacity: 0; visibility: hidden;'></ul>
</li>
`);
}
},
move: function () {
if (nav.lastChild.classList.contains('menu__item-more')) {
nav.querySelector('.menu__item-more ul').insertAdjacentElement('beforeend', nav.children[nav.children.length-2]);
} else {
nav.querySelector('.menu__item-more ul').insertAdjacentElement('beforeend', nav.children[nav.children.length-1]);
}
this.checkItems();
},
reset: function (element) {
nav = document.querySelector(element.wrapper).querySelector('.menu');
usingMore = false;
if (nav.querySelector('.menu__item-more')) {
var moreItems = nav.querySelector('.menu__item-more ul').children;
for (let index = moreItems.length - 1; index >= 0; index--) {
nav.insertAdjacentElement('beforeend', moreItems[index].cloneNode(true));
}
nav.querySelector(".menu__item-more").remove();
}
},
}
responsiveNavigate.init({
wrapper: ".header-parts.header_type-device_desktop .header__menu-main",
breakpoint: 768,
});
})();