Add files via upload

assets/js/main.js

@@ -0,0 +1,215 @@
+
+(function() {
+ "use strict";
+
+ const select = (el, all = false) => {
+ el = el.trim()
+ if (all) {
+ return [...document.querySelectorAll(el)]
+ } else {
+ return document.querySelector(el)
+ }
+ }
+
+
+ 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)
+ }
+ }
+ }
+
+
+ const onscroll = (el, listener) => {
+ el.addEventListener('scroll', listener)
+ }
+
+
+ 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)
+
+
+ const scrollto = (el) => {
+ let header = select('#header')
+ let offset = header.offsetHeight
+
+ let elementPos = select(el).offsetTop
+ window.scrollTo({
+ top: elementPos - offset,
+ behavior: 'smooth'
+ })
+ }
+
+
+ let selectHeader = select('#header')
+ if (selectHeader) {
+ const headerScrolled = () => {
+ if (window.scrollY > 100) {
+ selectHeader.classList.add('header-scrolled')
+ } else {
+ selectHeader.classList.remove('header-scrolled')
+ }
+ }
+ window.addEventListener('load', headerScrolled)
+ onscroll(document, headerScrolled)
+ }
+
+
+ let backtotop = select('.back-to-top')
+ if (backtotop) {
+ const toggleBacktotop = () => {
+ if (window.scrollY > 100) {
+ backtotop.classList.add('active')
+ } else {
+ backtotop.classList.remove('active')
+ }
+ }
+ window.addEventListener('load', toggleBacktotop)
+ onscroll(document, toggleBacktotop)
+ }
+
+
+ on('click', '.mobile-nav-toggle', function(e) {
+ select('#navbar').classList.toggle('navbar-mobile')
+ this.classList.toggle('bi-list')
+ this.classList.toggle('bi-x')
+ })
+
+
+ on('click', '.navbar .dropdown > a', function(e) {
+ if (select('#navbar').classList.contains('navbar-mobile')) {
+ e.preventDefault()
+ this.nextElementSibling.classList.toggle('dropdown-active')
+ }
+ }, true)
+
+
+ on('click', '.scrollto', function(e) {
+ if (select(this.hash)) {
+ e.preventDefault()
+
+ let navbar = select('#navbar')
+ if (navbar.classList.contains('navbar-mobile')) {
+ navbar.classList.remove('navbar-mobile')
+ let navbarToggle = select('.mobile-nav-toggle')
+ navbarToggle.classList.toggle('bi-list')
+ navbarToggle.classList.toggle('bi-x')
+ }
+ scrollto(this.hash)
+ }
+ }, true)
+
+
+ window.addEventListener('load', () => {
+ if (window.location.hash) {
+ if (select(window.location.hash)) {
+ scrollto(window.location.hash)
+ }
+ }
+ });
+
+
+ let preloader = select('#preloader');
+ if (preloader) {
+ window.addEventListener('load', () => {
+ preloader.remove()
+ });
+ }
+
+
+ const glightbox = GLightbox({
+ selector: '.glightbox'
+ });
+
+
+ let skilsContent = select('.skills-content');
+ if (skilsContent) {
+ new Waypoint({
+ element: skilsContent,
+ offset: '80%',
+ handler: function(direction) {
+ let progress = select('.progress .progress-bar', true);
+ progress.forEach((el) => {
+ el.style.width = el.getAttribute('aria-valuenow') + '%'
+ });
+ }
+ })
+ }
+
+
+ window.addEventListener('load', () => {
+ let portfolioContainer = select('.portfolio-container');
+ if (portfolioContainer) {
+ let portfolioIsotope = new Isotope(portfolioContainer, {
+ itemSelector: '.portfolio-item'
+ });
+
+ let portfolioFilters = select('#portfolio-flters li', true);
+
+ on('click', '#portfolio-flters li', function(e) {
+ e.preventDefault();
+ portfolioFilters.forEach(function(el) {
+ el.classList.remove('filter-active');
+ });
+ this.classList.add('filter-active');
+
+ portfolioIsotope.arrange({
+ filter: this.getAttribute('data-filter')
+ });
+ portfolioIsotope.on('arrangeComplete', function() {
+ AOS.refresh()
+ });
+ }, true);
+ }
+
+ });
+
+
+ const portfolioLightbox = GLightbox({
+ selector: '.portfolio-lightbox'
+ });
+
+
+ new Swiper('.portfolio-details-slider', {
+ speed: 400,
+ loop: true,
+ autoplay: {
+ delay: 5000,
+ disableOnInteraction: false
+ },
+ pagination: {
+ el: '.swiper-pagination',
+ type: 'bullets',
+ clickable: true
+ }
+ });
+
+
+ window.addEventListener('load', () => {
+ AOS.init({
+ duration: 1000,
+ easing: "ease-in-out",
+ once: true,
+ mirror: false
+ });
+ });
+
+})()