14/09/2023

Viccos/js/main_pc.js

@@ -0,0 +1,364 @@
+$(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,
+      },
+    },
+  });
+}