karma/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

formatted main.js

Browse Source
This commit is contained in:
Karma Riuk 2023-09-02 15:07:03 +02:00
parent 1c4cdb5155
commit a30c03c88c
1 changed files with 268 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
assets/js/main.js
View File

@ -12,149 +12,162 @@
* Easy selector helper function * Easy selector helper function
*/ */
const select = (el, all = false) => { const select = (el, all = false) => {
el = el.trim() el = el.trim();
if (all) { if (all) {
return [...document.querySelectorAll(el)] return [...document.querySelectorAll(el)];
} else { } else {
return document.querySelector(el) return document.querySelector(el);
}
} }
};
/** /**
* Easy event listener function * Easy event listener function
*/ */
const on = (type, el, listener, all = false) => { const on = (type, el, listener, all = false) => {
let selectEl = select(el, all) let selectEl = select(el, all);
if (selectEl) { if (selectEl) {
if (all) { if (all) {
selectEl.forEach(e => e.addEventListener(type, listener)) selectEl.forEach((e) => e.addEventListener(type, listener));
} else { } else {
selectEl.addEventListener(type, listener) selectEl.addEventListener(type, listener);
}
} }
} }
};
/** /**
* Easy on scroll event listener * Easy on scroll event listener
*/ */
const onscroll = (el, listener) => { const onscroll = (el, listener) => {
el.addEventListener('scroll', listener) el.addEventListener("scroll", listener);
} };
/** /**
* Navbar links active state on scroll * Navbar links active state on scroll
*/ */
let navbarlinks = select('#navbar .scrollto', true) let navbarlinks = select("#navbar .scrollto", true);
const navbarlinksActive = () => { const navbarlinksActive = () => {
let position = window.scrollY + 200 let position = window.scrollY + 200;
navbarlinks.forEach(navbarlink => { navbarlinks.forEach((navbarlink) => {
if (!navbarlink.hash) return if (!navbarlink.hash) return;
let section = select(navbarlink.hash) let section = select(navbarlink.hash);
if (!section) return if (!section) return;
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { if (
navbarlink.classList.add('active') position >= section.offsetTop &&
position <= section.offsetTop + section.offsetHeight
) {
navbarlink.classList.add("active");
} else { } else {
navbarlink.classList.remove('active') navbarlink.classList.remove("active");
} }
}) });
} };
window.addEventListener('load', navbarlinksActive) window.addEventListener("load", navbarlinksActive);
onscroll(document, navbarlinksActive) onscroll(document, navbarlinksActive);
/** /**
* Scrolls to an element with header offset * Scrolls to an element with header offset
*/ */
const scrollto = (el) => { const scrollto = (el) => {
let header = select('#header') let header = select("#header");
let offset = header.offsetHeight let offset = header.offsetHeight;
if (!header.classList.contains('header-scrolled')) { if (!header.classList.contains("header-scrolled")) {
offset -= 20 offset -= 20;
} }
let elementPos = select(el).offsetTop let elementPos = select(el).offsetTop;
window.scrollTo({ window.scrollTo({
top: elementPos - offset, top: elementPos - offset,
behavior: 'smooth' behavior: "smooth",
}) });
} };
/** /**
* Toggle .header-scrolled class to #header when page is scrolled * Toggle .header-scrolled class to #header when page is scrolled
*/ */
let selectHeader = select('#header') let selectHeader = select("#header");
if (selectHeader) { if (selectHeader) {
const headerScrolled = () => { const headerScrolled = () => {
if (window.scrollY > 100) { if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled') selectHeader.classList.add("header-scrolled");
} else { } else {
selectHeader.classList.remove('header-scrolled') selectHeader.classList.remove("header-scrolled");
} }
} };
window.addEventListener('load', headerScrolled) window.addEventListener("load", headerScrolled);
onscroll(document, headerScrolled) onscroll(document, headerScrolled);
} }
/** /**
* Back to top button * Back to top button
*/ */
let backtotop = select('.back-to-top') let backtotop = select(".back-to-top");
if (backtotop) { if (backtotop) {
const toggleBacktotop = () => { const toggleBacktotop = () => {
if (window.scrollY > 100) { if (window.scrollY > 100) {
backtotop.classList.add('active') backtotop.classList.add("active");
} else { } else {
backtotop.classList.remove('active') backtotop.classList.remove("active");
} }
} };
window.addEventListener('load', toggleBacktotop) window.addEventListener("load", toggleBacktotop);
onscroll(document, toggleBacktotop) onscroll(document, toggleBacktotop);
} }
/** /**
* Mobile nav toggle * Mobile nav toggle
*/ */
on('click', '.mobile-nav-toggle', function(e) { on("click", ".mobile-nav-toggle", function(e) {
select('#navbar').classList.toggle('navbar-mobile') select("#navbar").classList.toggle("navbar-mobile");
this.classList.toggle('bi-list') this.classList.toggle("bi-list");
this.classList.toggle('bi-x') this.classList.toggle("bi-x");
}) });
/** /**
* Mobile nav dropdowns activate * Mobile nav dropdowns activate
*/ */
on('click', '.navbar .dropdown > a', function(e) { on(
if (select('#navbar').classList.contains('navbar-mobile')) { "click",
e.preventDefault() ".navbar .dropdown > a",
this.nextElementSibling.classList.toggle('dropdown-active') function(e) {
if (select("#navbar").classList.contains("navbar-mobile")) {
e.preventDefault();
this.nextElementSibling.classList.toggle("dropdown-active");
} }
}, true) },
true,
);
/** /**
* Scrool with ofset on links with a class name .scrollto * Scrool with ofset on links with a class name .scrollto
*/ */
on('click', '.scrollto', function(e) { on(
"click",
".scrollto",
function(e) {
if (select(this.hash)) { if (select(this.hash)) {
e.preventDefault() e.preventDefault();
let navbar = select('#navbar') let navbar = select("#navbar");
if (navbar.classList.contains('navbar-mobile')) { if (navbar.classList.contains("navbar-mobile")) {
navbar.classList.remove('navbar-mobile') navbar.classList.remove("navbar-mobile");
let navbarToggle = select('.mobile-nav-toggle') let navbarToggle = select(".mobile-nav-toggle");
navbarToggle.classList.toggle('bi-list') navbarToggle.classList.toggle("bi-list");
navbarToggle.classList.toggle('bi-x') navbarToggle.classList.toggle("bi-x");
} }
scrollto(this.hash) scrollto(this.hash);
} }
}, true) },
true,
);
/** /**
* Scroll with ofset on page load with hash links in the url * Scroll with ofset on page load with hash links in the url
*/ */
window.addEventListener('load', () => { window.addEventListener("load", () => {
if (window.location.hash) { if (window.location.hash) {
if (select(window.location.hash)) { if (select(window.location.hash)) {
scrollto(window.location.hash) scrollto(window.location.hash);
} }
} }
}); });
@ -162,93 +175,95 @@
/** /**
* Skills animation * Skills animation
*/ */
let skilsContent = select('.skills-content'); let skilsContent = select(".skills-content");
if (skilsContent) { if (skilsContent) {
new Waypoint({ new Waypoint({
element: skilsContent, element: skilsContent,
offset: '80%', offset: "80%",
handler: function(direction) { handler: function(direction) {
let progress = select('.progress .progress-bar', true); let progress = select(".progress .progress-bar", true);
progress.forEach((el) => { progress.forEach((el) => {
el.style.width = el.getAttribute('aria-valuenow') + '%' el.style.width = el.getAttribute("aria-valuenow") + "%";
});
},
}); });
}
})
} }
/** /**
* Testimonials slider * Testimonials slider
*/ */
new Swiper('.testimonials-slider', { new Swiper(".testimonials-slider", {
speed: 600, speed: 600,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000, delay: 5000,
disableOnInteraction: false disableOnInteraction: false,
}, },
slidesPerView: 'auto', slidesPerView: "auto",
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
type: 'bullets', type: "bullets",
clickable: true clickable: true,
} },
}); });
/** /**
* Porfolio isotope and filter * Porfolio isotope and filter
*/ */
window.addEventListener('load', () => { window.addEventListener("load", () => {
let portfolioContainer = select('.portfolio-container'); let portfolioContainer = select(".portfolio-container");
if (portfolioContainer) { if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, { let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item' itemSelector: ".portfolio-item",
}); });
let portfolioFilters = select('#portfolio-flters li', true); let portfolioFilters = select("#portfolio-flters li", true);
on('click', '#portfolio-flters li', function(e) { on(
"click",
"#portfolio-flters li",
function(e) {
e.preventDefault(); e.preventDefault();
portfolioFilters.forEach(function(el) { portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active'); el.classList.remove("filter-active");
}); });
this.classList.add('filter-active'); this.classList.add("filter-active");
portfolioIsotope.arrange({ portfolioIsotope.arrange({
filter: this.getAttribute('data-filter') filter: this.getAttribute("data-filter"),
}); });
},
}, true); true,
);
} }
}); });
/** /**
* Initiate portfolio lightbox * Initiate portfolio lightbox
*/ */
const portfolioLightbox = GLightbox({ const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox' selector: ".portfolio-lightbox",
}); });
/** /**
* Portfolio details slider * Portfolio details slider
*/ */
new Swiper('.portfolio-details-slider', { new Swiper(".portfolio-details-slider", {
speed: 400, speed: 400,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000, delay: 5000,
disableOnInteraction: false disableOnInteraction: false,
}, },
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
type: 'bullets', type: "bullets",
clickable: true clickable: true,
} },
}); });
/** /**
* Initiate Pure Counter * Initiate Pure Counter
*/ */
new PureCounter(); new PureCounter();
})();
})()