(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) } /*! * Nav */ const scrollto = (el) => { let header = select('#gnbArea') let offset = header.offsetHeight if (!header.classList.contains('fixed-top')) { offset += 70 } let elementPos = select(el).offsetTop window.scrollTo({ top: elementPos - offset, behavior: 'smooth' }) } /*! * Nav */ let selectHeader = select('#gnbArea') let selectTopbar = select('#topbar') if (selectHeader) { const headerScrolled = () => { if (window.scrollY > 100) { selectHeader.classList.add('gnb-scrolled') if (selectTopbar) { selectTopbar.classList.add('topbar-scrolled') } } else { selectHeader.classList.remove('gnb-scrolled') if (selectTopbar) { selectTopbar.classList.remove('topbar-scrolled') } } } window.addEventListener('load', headerScrolled) onscroll(document, headerScrolled) } /*! * Mobile Nav */ on('click', '.mobile-nav-toggle', function(e) { select('#navbar').classList.toggle('mobile-navbar'); }) $(document).mouseup(function(e) { let navbarLayer = $(".navbar"); if (navbarLayer.has(e.target).length === 0) { navbarLayer.removeClass("mobile-navbar"); } }); /*! * Mobile Nav */ on('click', '.navbar .dropdown > a', function(e) { if (select('#navbar').classList.contains('mobile-navbar')) { e.preventDefault() this.nextElementSibling.classList.toggle('dropdown-active') } }, true) /*! * Prevent Scrolling */ $('.gnb').on('DOMMouseScroll mousewheel', function(ev) { var $this = $(this), scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = $this.innerHeight(), delta = ev.originalEvent.wheelDelta, up = delta > 0; var prevent = function() { ev.stopPropagation(); ev.preventDefault(); ev.returnValue = false; return false; } if (!up && -delta > scrollHeight - height - scrollTop) { $this.scrollTop(scrollHeight); return prevent(); } else if (up && delta > scrollTop) { $this.scrollTop(0); return prevent(); } }); /*! * Cover */ let coverCarouselIndicators = select("#carouselIndicators") let coverCarouselItems = select('#carousel .carousel-item', true) coverCarouselItems.forEach((item, index) => { (index === 0) ? coverCarouselIndicators.innerHTML += "
  • ": coverCarouselIndicators.innerHTML += "
  • " }); /*! * Back to top */ let backtotop = select('#backToTop') if (backtotop) { const toggleBacktotop = () => { if (window.scrollY > 100) { backtotop.classList.add('active') } else { backtotop.classList.remove('active') } } window.addEventListener('load', toggleBacktotop) onscroll(document, toggleBacktotop) }; /*! * Swiper Slides */ new Swiper('.swiper-slides', { autoHeight: true, speed: 600, loop: true, autoplay: { delay: 5000, disableOnInteraction: false }, slidesPerView: 'auto', pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 320: { slidesPerView: 1, spaceBetween: 30 }, 768: { slidesPerView: 2, spaceBetween: 30 }, 992: { slidesPerView: 3, spaceBetween: 30 }, 1200: { slidesPerView: 4, spaceBetween: 30 } } }); /*! * Portfolio */ window.addEventListener('load', () => { let portfolioContainer = select('.portfolio-items-wrap'); if (portfolioContainer) { let portfolioIsotope = new Isotope(portfolioContainer, { itemSelector: '.portfolio-item', layoutMode: 'fitRows' }); let portfolioFilters = select('#portfolioFlters li', true); on('click', '#portfolioFlters 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') }); }, true); } }); /*! * Porfolio */ const portfolioLightbox = GLightbox({ selector: '.portfolio-lightbox' }); }());