kuchuz

Tugas 1 PWEB-D main.js

Oct 26th, 2021
779
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2. * Template Name: Personal - v4.3.0
  3. * Template URL: https://bootstrapmade.com/personal-free-resume-bootstrap-template/
  4. * Author: BootstrapMade.com
  5. * License: https://bootstrapmade.com/license/
  6. */
  7. (function() {
  8.   "use strict";
  9.  
  10.   /**
  11.    * Easy selector helper function
  12.    */
  13.   const select = (el, all = false) => {
  14.     el = el.trim()
  15.     if (all) {
  16.       return [...document.querySelectorAll(el)]
  17.     } else {
  18.       return document.querySelector(el)
  19.     }
  20.   }
  21.  
  22.   /**
  23.    * Easy event listener function
  24.    */
  25.   const on = (type, el, listener, all = false) => {
  26.     let selectEl = select(el, all)
  27.  
  28.     if (selectEl) {
  29.       if (all) {
  30.         selectEl.forEach(e => e.addEventListener(type, listener))
  31.       } else {
  32.         selectEl.addEventListener(type, listener)
  33.       }
  34.     }
  35.   }
  36.  
  37.   /**
  38.    * Scrolls to an element with header offset
  39.    */
  40.   const scrollto = (el) => {
  41.     window.scrollTo({
  42.       top: 0,
  43.       behavior: 'smooth'
  44.     })
  45.   }
  46.  
  47.   /**
  48.    * Mobile nav toggle
  49.    */
  50.   on('click', '.mobile-nav-toggle', function(e) {
  51.     select('#navbar').classList.toggle('navbar-mobile')
  52.     this.classList.toggle('bi-list')
  53.     this.classList.toggle('bi-x')
  54.   })
  55.  
  56.   /**
  57.    * Scrool with ofset on links with a class name .scrollto
  58.    */
  59.   on('click', '#navbar .nav-link', function(e) {
  60.     let section = select(this.hash)
  61.     if (section) {
  62.       e.preventDefault()
  63.  
  64.       let navbar = select('#navbar')
  65.       let header = select('#header')
  66.       let sections = select('section', true)
  67.       let navlinks = select('#navbar .nav-link', true)
  68.  
  69.       navlinks.forEach((item) => {
  70.         item.classList.remove('active')
  71.       })
  72.  
  73.       this.classList.add('active')
  74.  
  75.       if (navbar.classList.contains('navbar-mobile')) {
  76.         navbar.classList.remove('navbar-mobile')
  77.         let navbarToggle = select('.mobile-nav-toggle')
  78.         navbarToggle.classList.toggle('bi-list')
  79.         navbarToggle.classList.toggle('bi-x')
  80.       }
  81.  
  82.       if (this.hash == '#header') {
  83.         header.classList.remove('header-top')
  84.         sections.forEach((item) => {
  85.           item.classList.remove('section-show')
  86.         })
  87.         return;
  88.       }
  89.  
  90.       if (!header.classList.contains('header-top')) {
  91.         header.classList.add('header-top')
  92.         setTimeout(function() {
  93.           sections.forEach((item) => {
  94.             item.classList.remove('section-show')
  95.           })
  96.           section.classList.add('section-show')
  97.  
  98.         }, 350);
  99.       } else {
  100.         sections.forEach((item) => {
  101.           item.classList.remove('section-show')
  102.         })
  103.         section.classList.add('section-show')
  104.       }
  105.  
  106.       scrollto(this.hash)
  107.     }
  108.   }, true)
  109.  
  110.   /**
  111.    * Activate/show sections on load with hash links
  112.    */
  113.   window.addEventListener('load', () => {
  114.     if (window.location.hash) {
  115.       let initial_nav = select(window.location.hash)
  116.  
  117.       if (initial_nav) {
  118.         let header = select('#header')
  119.         let navlinks = select('#navbar .nav-link', true)
  120.  
  121.         header.classList.add('header-top')
  122.  
  123.         navlinks.forEach((item) => {
  124.           if (item.getAttribute('href') == window.location.hash) {
  125.             item.classList.add('active')
  126.           } else {
  127.             item.classList.remove('active')
  128.           }
  129.         })
  130.  
  131.         setTimeout(function() {
  132.           initial_nav.classList.add('section-show')
  133.         }, 350);
  134.  
  135.         scrollto(window.location.hash)
  136.       }
  137.     }
  138.   });
  139.  
  140.   /**
  141.    * Skills animation
  142.    */
  143.   let skilsContent = select('.skills-content');
  144.   if (skilsContent) {
  145.     new Waypoint({
  146.       element: skilsContent,
  147.       offset: '80%',
  148.       handler: function(direction) {
  149.         let progress = select('.progress .progress-bar', true);
  150.         progress.forEach((el) => {
  151.           el.style.width = el.getAttribute('aria-valuenow') + '%'
  152.         });
  153.       }
  154.     })
  155.   }
  156.  
  157.   /**
  158.    * Testimonials slider
  159.    */
  160.   new Swiper('.testimonials-slider', {
  161.     speed: 600,
  162.     loop: true,
  163.     autoplay: {
  164.       delay: 5000,
  165.       disableOnInteraction: false
  166.     },
  167.     slidesPerView: 'auto',
  168.     pagination: {
  169.       el: '.swiper-pagination',
  170.       type: 'bullets',
  171.       clickable: true
  172.     },
  173.     breakpoints: {
  174.       320: {
  175.         slidesPerView: 1,
  176.         spaceBetween: 20
  177.       },
  178.  
  179.       1200: {
  180.         slidesPerView: 3,
  181.         spaceBetween: 20
  182.       }
  183.     }
  184.   });
  185.  
  186.   /**
  187.    * Porfolio isotope and filter
  188.    */
  189.   window.addEventListener('load', () => {
  190.     let portfolioContainer = select('.portfolio-container');
  191.     if (portfolioContainer) {
  192.       let portfolioIsotope = new Isotope(portfolioContainer, {
  193.         itemSelector: '.portfolio-item',
  194.         layoutMode: 'fitRows'
  195.       });
  196.  
  197.       let portfolioFilters = select('#portfolio-flters li', true);
  198.  
  199.       on('click', '#portfolio-flters li', function(e) {
  200.         e.preventDefault();
  201.         portfolioFilters.forEach(function(el) {
  202.           el.classList.remove('filter-active');
  203.         });
  204.         this.classList.add('filter-active');
  205.  
  206.         portfolioIsotope.arrange({
  207.           filter: this.getAttribute('data-filter')
  208.         });
  209.       }, true);
  210.     }
  211.  
  212.   });
  213.  
  214.   /**
  215.    * Initiate portfolio lightbox
  216.    */
  217.   const portfolioLightbox = GLightbox({
  218.     selector: '.portfolio-lightbox'
  219.   });
  220.  
  221.   /**
  222.    * Initiate portfolio details lightbox
  223.    */
  224.   const portfolioDetailsLightbox = GLightbox({
  225.     selector: '.portfolio-details-lightbox',
  226.     width: '90%',
  227.     height: '90vh'
  228.   });
  229.  
  230.   /**
  231.    * Portfolio details slider
  232.    */
  233.   new Swiper('.portfolio-details-slider', {
  234.     speed: 400,
  235.     loop: true,
  236.     autoplay: {
  237.       delay: 5000,
  238.       disableOnInteraction: false
  239.     },
  240.     pagination: {
  241.       el: '.swiper-pagination',
  242.       type: 'bullets',
  243.       clickable: true
  244.     }
  245.   });
  246.  
  247. })()
RAW Paste Data