Update 06/07/2023

Teahouse/js/main_pc.js

@@ -0,0 +1,191 @@
+$(document).ready(function () {
+  // GLOBAL CALL
+  globalHandler();
+
+  // PAGE CALL
+
+  homepageHandler();
+
+  categoryHandler();
+
+});
+
+
+// 
+function globalHandler() {
+  mmenuHandler();
+  headerFixedScroll();
+  arccodionHandler();
+
+  swiperSectionBoxBottom();
+}
+
+// 
+function headerFixedScroll() {
+  $(window).scroll(function () {
+    let distanceFromTop = $(document).scrollTop();
+    const global_header = $(".global-header");
+
+    if (distanceFromTop > 50) {
+      global_header.addClass("fixed");
+    } else {
+      global_header.removeClass("fixed");
+    }
+  });
+}
+
+// MMENU HANDLER
+function mmenuHandler() {
+  $('#menu').mmenu();
+  setTimeout(function () {
+    $('#menu').removeClass("d-none");
+  }, 500)
+  $('.mm-navbar .mm-navbar__title').html('Danh mục').attr('href', 'javascript:;');
+}
+
+// FOOTER ARC
+function arccodionHandler() {
+  const arccodionItems = document.querySelectorAll(".accordion");
+
+  if (arccodionItems.length > 0) {
+    arccodionItems.forEach((acc) => {
+      acc.addEventListener("click", function () {
+        const nextEl = this.nextElementSibling;
+        const childEl = this.firstElementChild;
+
+        if (nextEl.style.maxHeight) {
+          nextEl.style.maxHeight = null;
+          childEl.style.transform = "translateY(-50%) rotate(0)";
+        } else {
+          nextEl.style.maxHeight = nextEl.scrollHeight + "px";
+          childEl.style.transform = "translateY(-50%) rotate(90deg)";
+        }
+      });
+    });
+  }
+}
+
+// 
+function fadeToggle(target) {
+  $(target).fadeToggle();
+}
+
+// 
+function swiperSectionBoxBottom() {
+  new Swiper(".swiper-section-box-bottom", {
+    slidesPerView: 2,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    breakpoints: {
+      577: {
+        slidesPerView: 3,
+        spaceBetween: 12,
+      },
+      769: {
+        slidesPerView: 4,
+        spaceBetween: 16,
+      },
+    },
+  });
+}
+
+// 
+function homepageHandler() {
+  swiperSectionHero()
+}
+
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    slidesPerView: 1,
+    spaceBetween: 0,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+//
+function categoryHandler() {
+
+}
+
+// 
+function productDetailHandler() {
+
+}
+
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 4,
+  slidesPerView: 4,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+  breakpoints: {
+    577: {
+      slidesPerView: 6,
+    },
+  },
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 0,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  navigation: {
+    nextEl: ".swiper-button-next",
+    prevEl: ".swiper-button-prev",
+  },
+  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();
+      }
+    },
+  },
+});
+
+$('[data-fancybox="gallery"]').fancybox({
+  thumbs: {
+    autoStart: true
+  }
+});