82 lines
2 KiB
JavaScript
82 lines
2 KiB
JavaScript
|
/**
|
||
|
|
* Developed by: Ben Hur Gonçalves
|
||
|
|
* Contact: benhur.goncalves@protonmail.com
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Easy selector helper function
|
||
|
|
*/
|
||
|
|
const select = (el, all = false) => {
|
||
|
|
el = el.trim()
|
||
|
|
if (all) {
|
||
|
|
return [...document.querySelectorAll(el)]
|
||
|
|
} else {
|
||
|
|
return document.querySelector(el)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Easy event listener function
|
||
|
|
*/
|
||
|
|
const on = (type, el, listener, all = false) => {
|
||
|
|
let selectEl = select(el, all)
|
||
|
|
if (selectEl) {
|
||
|
|
if (all) {
|
||
|
|
selectEl.forEach(e => e.addEventListener(type, listener))
|
||
|
|
} else {
|
||
|
|
selectEl.addEventListener(type, listener)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Easy on scroll event listener
|
||
|
|
*/
|
||
|
|
const onscroll = (el, listener) => {
|
||
|
|
el.addEventListener('scroll', listener)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Navbar links active state on scroll
|
||
|
|
*/
|
||
|
|
let navbarlinks = select('#navbar .scrollto', true)
|
||
|
|
const navbarlinksActive = () => {
|
||
|
|
let position = window.scrollY + 200
|
||
|
|
navbarlinks.forEach(navbarlink => {
|
||
|
|
if (!navbarlink.hash) return
|
||
|
|
let section = select(navbarlink.hash)
|
||
|
|
if (!section) return
|
||
|
|
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
|
||
|
|
navbarlink.classList.add('active')
|
||
|
|
} else {
|
||
|
|
navbarlink.classList.remove('active')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
window.addEventListener('load', navbarlinksActive)
|
||
|
|
onscroll(document, navbarlinksActive)
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile nav toggle
|
||
|
|
*/
|
||
|
|
on('click', '.mobile-nav-toggle', function(e) {
|
||
|
|
select('#navbar').classList.toggle('navbar-mobile')
|
||
|
|
this.classList.toggle('bi-list')
|
||
|
|
this.classList.toggle('bi-x')
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile nav dropdowns activate
|
||
|
|
*/
|
||
|
|
on('click', '.navbar .dropdown > a', function(e) {
|
||
|
|
if (select('#navbar').classList.contains('navbar-mobile')) {
|
||
|
|
e.preventDefault()
|
||
|
|
this.nextElementSibling.classList.toggle('dropdown-active')
|
||
|
|
}
|
||
|
|
}, true)
|
||
|
|
|
||
|
|
})()
|