['load', 'resize'].forEach(evt => { window.addEventListener(evt, mobnav_init); }); function mobnav_init() { if (window.innerWidth > 920) return; let sel = t => { return document.querySelector(t) }; let selAll = t => { return document.querySelectorAll(t) }; let prev_btn = sel('.mobnav .default'); const observer = new IntersectionObserver( (entries, observer) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { let b = sel('.mobnav-btn[href*="#' + entry.target.id + '"]'); btn_activate(b, true); // console.log('IN : ', entry.target); prev_btn = b; } else { // console.log('OUT : ', entry.target); btn_activate(prev_btn); } }); }, { root: null, rootMargin: '-48% 0px -48%', threshold: [0, 1] }); function btn_activate(b, def = false) { if (!b) return; const wasActive = b.classList.contains('active'); selAll('.mobnav .active').forEach(el => { el.classList.remove('active'); //if(def)el.classList.remove('default'); //sel(el.getAttribute('href')).classList.remove('active'); let t = el.getAttribute('data-target'); // console.log('data-target: ',t); if (t) sel(t).classList.remove('active'); }); if (!wasActive) { b.classList.add('active'); let t = b.getAttribute('data-target'); if (t) sel(t).classList.add('active'); } else { let t = sel('.mobnav .default'); if (t) t.classList.add('active'); } if (def) { sel('.mobnav .default').classList.remove('default'); b.classList.add('default'); } } function mobnav_activate(e) { btn_activate(this); e.preventDefault(); if (this.href.indexOf('#main') > -1 || this.dataset.target === '#main-nav') { location.href = '#top'; } else { console.log(this.getAttribute('href'), $(this.getAttribute('href')).offset()); $('body, html').animate({ 'scrollTop': $(this.getAttribute('href')).offset().top - 35 }, 200); } }; selAll('.mobnav-btn').forEach(el => { el.onclick = mobnav_activate; if (el.href) { let t = sel('#' + el.href.split('#').pop()); if (t) observer.observe(t); } }); // hide on scroll let prevScroll = 0, menu = sel('.mobnav'); document.addEventListener('scroll', e => { if (window.scrollY > prevScroll) menu.classList.add('hidden-on-scroll'); else menu.classList.remove('hidden-on-scroll'); prevScroll = window.scrollY; }, { passive: true }); /* let main_nav = sel('#main-nav'); sel('.mobnav-btn-sitemap').onclick = function(e){ was_active = this.classList.contains('active'); this.classList.toggle('active'); main_nav.classList.toggle('active'); if(was_active){ } }*/ //sel('#main').classList.add('active'); //mobnav_activate.call(sel('.mobnav .default')); } /* Main Menu hover */ $($=>{ if (false === window.matchMedia("(hover: hover)").matches) { $("#main-menu li").on('touchend', e => { let trg = e.target; $('.hover').each((i, el) => { if (el!==trg && !$.contains(el, trg)) { el.classList.remove('hover'); } }); trg.classList.toggle('hover'); $(trg).parents().toggleClass('hover'); if(trg.dataset['hoverDelay']) setTimeout(() => e.target.classList.remove('hover'), trg.dataset['hoverDelay']*1000); }); } });