$(document).ready(function () { // GLOBAL CALL globalHandler(); // PAGE CALL homepageHandler(); categoryHandler(); productDetailHandler(); articleHandler(); }); // GLOBAL HANDLER function globalHandler() { // Hura.UI.loadGroup(lazy_load_group); runLazyImageLoad(); viewMoreHandler('.js-vm-block'); searchHandler('#js-search-bar', 'search'); closeWhenClickOutside(); checkLanguageSelected(); AOS.init({ easing: 'ease-in-out', duration: 600, once: true, delay: 0, }); } // CHECK LANGUAGE SELECTED function checkLanguageSelected() { const lang_check = `{{ global.user_settings.product_display_type }}`; if (lang_check === 'vi|en') $('.language-current option[value="vi|en"]').attr('selected', 'selected'); } // TOGGLE DISPLAY MENU MOBILE function toggleMenu() { $("#js-global-menu").toggleClass("active"); $("body").toggleClass("overflow-hidden"); } // TOGGLE SLIDE MENU ITEM function slideMenuItem(_this, type) { $(_this).toggleClass("active"); switch (type) { case "sub-menu": $("#js-sub-menu").slideToggle(); break; case "sub-item": $(_this) .closest(".sub-item") .find(".cat-child") .first() .slideToggle(); break; default: break; } } // ARCCODION HANDLER function arccodionMBHandler(_this) { if (window.screen.availWidth > 768) return; const arccodionItem = $(_this).closest(".accordion"); const arccodionIcon = arccodionItem.find(".accordion-icon"); const arccodionContent = arccodionItem.find(".accordion-content"); arccodionContent.slideToggle(); if (arccodionIcon) arccodionIcon.toggleClass('rotate'); } // HOMEPAGE HANDLER function homepageHandler() { swiperHomepageHandler(); checkSliderFeaturesBtn(); } // CHECK SLIDER FEATURES BUTTON function checkSliderFeaturesBtn() { if (window.screen.availWidth < 576 && 1 < 2) return; if ($('.swiper-homepage-features .swiper-slide').length < 5 && window.screen.availWidth > 768) $('#js-f-slider-group').hide(); } // SWIPER HOMEPAGE HANDLER function swiperHomepageHandler() { swiperSectionHero(); swiperHomepageCertificate(); swiperProductFeatured(); swiperHomepageFeatures(); swiperArticleFeatured() swiperSectionCustomer(); } function swiperSectionHero() { new Swiper(".swiper-section-hero", { slidesPerView: 1, spaceBetween: 10, rewind: true, speed: 1000, autoplay: { delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: "true", }, pagination: { el: ".swiper-pagination", }, breakpoints: { 769: { pagination: { clickable: true, }, }, }, }); } function swiperHomepageCertificate() { new Swiper(".swiper-homepage-certificate", { slidesPerView: 1, spaceBetween: 10, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); } function swiperProductFeatured() { new Swiper(".swiper-category-featured", { slidesPerView: 1.5, spaceBetween: 10, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 577: { slidesPerView: 2, spaceBetween: 20, }, 769: { slidesPerView: 3, }, }, }); } function swiperHomepageFeatures() { new Swiper(".swiper-homepage-features", { slidesPerView: 1.5, spaceBetween: 10, rewind: true, speed: 1000, autoplay: { delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: "true", }, breakpoints: { 577: { slidesPerView: 3, spaceBetween: 12, }, 769: { slidesPerView: 4, }, }, }); } function swiperArticleFeatured() { new Swiper(".swiper-article-featured", { slidesPerView: 1, spaceBetween: 10, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 577: { slidesPerView: 2, spaceBetween: 12, }, }, }); } function swiperSectionCustomer() { new Swiper(".swiper-section-customer", { slidesPerView: 1.5, spaceBetween: 10, rewind: true, speed: 1000, pagination: { el: ".swiper-pagination", clickable: false, }, breakpoints: { 577: { slidesPerView: 2, spaceBetween: 20, }, 769: { slidesPerView: 3, }, }, }); } // function categoryHandler() { } // function productDetailHandler() { viewMoreHandler('.js-vm-block'); swiperThumbsHandler(); swiperSectionProHistory(); } function swiperThumbsHandler() { let galleryThumbs = new Swiper(".gallery-thumbs", { spaceBetween: 10, slidesPerView: 4, slideToClickedSlide: true, freeMode: true, watchSlidesProgress: true, centerInsufficientSlides: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { spaceBetween: 12, }, }, }); let galleryTop = new Swiper(".gallery-top", { spaceBetween: 10, slidesPerView: 1, initialSlide: 1, speed: 1000, // autoplay: { // delay: 2500, // disableOnInteraction: false, // pauseOnMouseEnter: "true", // }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 768: { spaceBetween: 12, }, }, thumbs: { swiper: galleryThumbs, }, // AUTO SILDED AT FISRT AND END on: { slideChange: function () { let activeIndex = this.activeIndex + 1; let activeSlide = document.querySelector( `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})` ); let nextSlide = document.querySelector( `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})` ); let prevSlide = document.querySelector( `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})` ); if ( nextSlide && !nextSlide.classList.contains("swiper-slide-visible") ) { this.thumbs.swiper.slideNext(); } else if ( prevSlide && !prevSlide.classList.contains("swiper-slide-visible") ) { this.thumbs.swiper.slidePrev(); } }, }, }); } function swiperSectionProHistory() { new Swiper(".swiper-section-pro-history", { slidesPerView: 2, spaceBetween: 10, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 569: { slidesPerView: 3, spaceBetween: 12, }, 769: { slidesPerView: 4, }, }, }); } // function articleHandler() { swiperArticleHomeShowcase(); swiperArticleHomeCategory(); } function swiperArticleHomeShowcase() { new Swiper(".swiper-article-home-showcase", { slidesPerView: 1, spaceBetween: 12, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); } function swiperArticleHomeCategory() { new Swiper(".swiper-article-home-category", { slidesPerView: 1.5, spaceBetween: 10, rewind: true, speed: 1000, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, breakpoints: { 569: { slidesPerView: 2, spaceBetween: 12, }, 769: { slidesPerView: 3, }, }, }); }