Jontil88
2b462bc0e6
- Static HTML hotel website with Bootstrap 5 - i18next-based client-side internationalization - Language switcher (DE/EN) in navbar - German and English translation JSON files - Translated: navigation, content, forms, FAQ, legal pages (AGB) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
90 lines
No EOL
2.3 KiB
JavaScript
90 lines
No EOL
2.3 KiB
JavaScript
(function(){
|
|
|
|
'use strict'
|
|
|
|
|
|
var siteMenuClone = function() {
|
|
var jsCloneNavs = document.querySelectorAll('.js-clone-nav');
|
|
var siteMobileMenuBody = document.querySelector('.site-mobile-menu-body');
|
|
|
|
|
|
|
|
jsCloneNavs.forEach(nav => {
|
|
var navCloned = nav.cloneNode(true);
|
|
navCloned.setAttribute('class', 'site-nav-wrap');
|
|
siteMobileMenuBody.appendChild(navCloned);
|
|
});
|
|
|
|
setTimeout(function(){
|
|
|
|
var hasChildrens = document.querySelector('.site-mobile-menu').querySelectorAll(' .has-children');
|
|
|
|
var counter = 0;
|
|
hasChildrens.forEach( hasChild => {
|
|
|
|
var refEl = hasChild.querySelector('a');
|
|
|
|
var newElSpan = document.createElement('span');
|
|
newElSpan.setAttribute('class', 'arrow-collapse collapsed');
|
|
|
|
// prepend equivalent to jquery
|
|
hasChild.insertBefore(newElSpan, refEl);
|
|
|
|
var arrowCollapse = hasChild.querySelector('.arrow-collapse');
|
|
arrowCollapse.setAttribute('data-bs-toggle', 'collapse');
|
|
arrowCollapse.setAttribute('data-bs-target', '#collapseItem' + counter);
|
|
|
|
var dropdown = hasChild.querySelector('.dropdown');
|
|
dropdown.setAttribute('class', 'collapse');
|
|
dropdown.setAttribute('id', 'collapseItem' + counter);
|
|
|
|
counter++;
|
|
});
|
|
|
|
}, 1000);
|
|
|
|
|
|
// Click js-menu-toggle
|
|
|
|
var menuToggle = document.querySelectorAll(".js-menu-toggle");
|
|
var mTog;
|
|
menuToggle.forEach(mtoggle => {
|
|
mTog = mtoggle;
|
|
mtoggle.addEventListener("click", (e) => {
|
|
if ( document.body.classList.contains('offcanvas-menu') ) {
|
|
document.body.classList.remove('offcanvas-menu');
|
|
mtoggle.classList.remove('active');
|
|
mTog.classList.remove('active');
|
|
} else {
|
|
document.body.classList.add('offcanvas-menu');
|
|
mtoggle.classList.add('active');
|
|
mTog.classList.add('active');
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
|
|
var specifiedElement = document.querySelector(".site-mobile-menu");
|
|
var mt, mtoggleTemp;
|
|
document.addEventListener('click', function(event) {
|
|
var isClickInside = specifiedElement.contains(event.target);
|
|
menuToggle.forEach(mtoggle => {
|
|
mtoggleTemp = mtoggle
|
|
mt = mtoggle.contains(event.target);
|
|
})
|
|
|
|
if (!isClickInside && !mt) {
|
|
if ( document.body.classList.contains('offcanvas-menu') ) {
|
|
document.body.classList.remove('offcanvas-menu');
|
|
mtoggleTemp.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
siteMenuClone();
|
|
|
|
|
|
})() |