Update 20/04/2023

demo-audio-3/js/main_mobile.js

@@ -0,0 +1,302 @@
+// READY FUNCTIONS
+$(document).ready(function () {
+  homepageHandler();
+  globalHandler();
+})
+
+// GLOBAL FUNCTIONS
+function globalHandler() {
+  swiperProductThumbs();
+  footerArccodion();
+}
+
+// FOOTER ARC
+function footerArccodion() {
+  document.querySelectorAll(".accordion").forEach((acc) => {
+    acc.addEventListener("click", function () {
+      const nextEl = this.nextElementSibling;
+      if (nextEl.style.maxHeight) {
+        nextEl.style.maxHeight = null;
+        nextEl.style.marginBottom = "0px";
+      } else {
+        nextEl.style.maxHeight = nextEl.scrollHeight + "px";
+        nextEl.style.marginBottom = "10px";
+      }
+    });
+  });
+}
+
+function viewMoreContent(target) {
+  let htmlStaticBlock = $(target).find(".static-html");
+  let viewMoreBtn = $(target).find(".js-view-more-content");
+
+  htmlStaticBlock.toggleClass("max-height-none").toggleClass("blur");
+  viewMoreBtn.html().trim() === "Xem thêm +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem thêm +");
+  if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
+}
+
+function swiperProductThumbs() {
+  new Swiper(".swiper-product-thumbs", {
+    slidesPerView: 1,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    breakpoints: {
+      768: {
+        spaceBetween: 12,
+      },
+    },
+  });
+}
+
+// HOMEAPGE FUNCTIONS
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionHomepageBanner();
+}
+
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    slidesPerView: 1,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    breakpoints: {
+      768: {
+        spaceBetween: 12,
+      },
+    },
+  });
+}
+
+function swiperSectionHomepageBanner() {
+  new Swiper(".swiper-section-homepage-banner", {
+    slidesPerView: 1,
+    spaceBetween: 10,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    breakpoints: {
+      768: {
+        spaceBetween: 12,
+      },
+    },
+  });
+}
+
+// CATEGORY
+function categoryHandler() {
+  $('.js-filter-title').click(function () {
+    var check = $(this).parents('.item');
+    if (check.hasClass('active') == true) {
+      check.removeClass('active');
+      $('.product-cate-bannner, .box-product-hot, .p-filter-group').removeClass('active');
+    } else {
+      $('.filter-list-box .item').removeClass('active')
+      $(this).parents('.item').addClass('active')
+      $('.product-cate-bannner, .box-product-hot, .p-filter-group').addClass('active');
+    }
+  });
+
+  $('.js-sort-check .sort-by-list a').each(function () {
+    if ($(this).hasClass('current') == true) {
+      var name = $(this).text();
+      $('.js-sort-check span').text(name)
+    }
+  });
+
+  $('.js-filter-selected').click(function () {
+    if ($(this).hasClass('current') == true) {
+      $(this).removeClass('current');
+    } else {
+      $(this).parents('.js-filter-item').find('.js-filter-selected').removeClass('current');
+      $(this).addClass('current');
+    }
+  });
+
+  $(".popup-filter-group").on("click", function (e) {
+    if (e.target === document.querySelector(".popup-filter-group")) {
+      $(".popup-filter-group").css("display", "none");
+      $("body").removeClass("overflow-hidden");
+    }
+  })
+}
+
+// CHECK VIEW MORE POPUP
+function filterPopupListViewMore() {
+  $(".list-holder").each(function () {
+    let summaryHeight = $(this).height();
+    if (summaryHeight >= 133) {
+    } else {
+      $(this).next().css("display", "none");
+    }
+  })
+}
+
+// ONCLICK VIEW MORE POPUP
+function showFilterMoreBtn(_this) {
+  $(_this).prev().toggleClass("view-more");
+  let viewMoreEle = $(_this).find(".js-view-more-popup");
+  let viewMoreIcon = $(_this).find(".fa-angle-double-down");
+
+  viewMoreEle.html() === "Xem thêm" ? viewMoreEle.html("Thu gọn") : viewMoreEle.html("Xem thêm");
+  viewMoreIcon.toggleClass("rotate-90deg");
+}
+
+// filter
+function _getLink(current_url) {
+  var brand = 'brand=';
+  var max = '&max=';
+  var min = '&min=';
+  var attr = '&filter=';
+
+  if ($('.js-brand-list a').hasClass('current') == true) {
+    brand = '&brand=' + $('.js-brand-list .current').attr('data-brand');
+  }
+
+  if ($('.js-price-list a').hasClass('current') == true) {
+    max = '&max=' + $('.js-price-list .current').attr('data-max');
+  }
+
+  if ($('.js-price-list a').hasClass('current') == true) {
+    min = '&min=' + $('.js-price-list .current').attr('data-min');
+  }
+
+  $('.js-attr-list .current').each(function () {
+    attr += $(this).attr('data-attr') + '_'
+  });
+
+  var sort = '';
+  if (GetURLParameter('sort')) {
+    sort = '&sort=' + GetURLParameter('sort')
+  }
+
+  var link = current_url + brand + max + min + attr + sort;
+
+  location.href = link;
+}
+
+function _openFilter() {
+  $('.popup-filter-group').fadeIn(150);
+  $('body').addClass('overflow-hidden');
+  $('#js-p-filter-group .item.active').removeClass('active');
+  $('.product-cate-bannner, .box-product-hot, .p-filter-group').removeClass('active');
+  filterPopupListViewMore();
+}
+
+function _closeFilter() {
+  $('.popup-filter-group').hide();
+  $('body').removeClass('overflow-hidden bg-filter');
+}
+// end filter
+
+function GetURLParameter(sParam) {
+  var sPageURL = window.location.search.substring(1);
+  var sURLVariables = sPageURL.split('&');
+  for (var i = 0; i < sURLVariables.length; i++) {
+    var sParameterName = sURLVariables[i].split('=');
+    if (sParameterName[0] == sParam) {
+      return sParameterName[1];
+    }
+  }
+}
+
+// PRODUCT DETAIL
+function detailHandler() {
+
+}
+
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 12,
+  slidesPerView: 4,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+  breakpoints: {
+    1600: {
+      spaceBetween: 16,
+    },
+  },
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 12,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  breakpoints: {
+    1600: {
+      spaceBetween: 16,
+    },
+  },
+  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 toggleAttr(target, _this) {
+  $('[data-type="attr-item-content"]').addClass('d-none');
+  $(target).toggleClass('d-none');
+  $(_this).closest('.attr-list-name').find('.title').removeClass('active');
+  $(_this).addClass('active');
+}
+
+// CART
+function cartHandler() {
+
+}
+
+function toggleDisplay(target) {
+  $(target).toggleClass('d-none');
+}

demo-audio-3/js/main_pc.js

@@ -0,0 +1,174 @@
+// READY FUNCTIONS
+$(document).ready(function () {
+  homepageHandler();
+  globalHandler();
+})
+
+// GLOBAL FUNCTIONS
+function globalHandler() {
+  swiperProductThumbs();
+}
+
+function viewMoreContent(target) {
+  let htmlStaticBlock = $(target).find(".static-html");
+  let viewMoreBtn = $(target).find(".js-view-more-content");
+
+  htmlStaticBlock.toggleClass("max-height-none").toggleClass("blur");
+  viewMoreBtn.html().trim() === "Xem thêm +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem thêm +");
+  if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
+}
+
+function swiperProductThumbs() {
+  new Swiper(".swiper-product-thumbs", {
+    slidesPerView: 1,
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    breakpoints: {
+      1600: {
+        spaceBetween: 16,
+      },
+    },
+  });
+}
+
+// HOMEAPGE FUNCTIONS
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionHomepageBanner();
+}
+
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    slidesPerView: 1,
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    breakpoints: {
+      1600: {
+        spaceBetween: 16,
+      },
+    },
+  });
+}
+
+function swiperSectionHomepageBanner() {
+  new Swiper(".swiper-section-homepage-banner", {
+    slidesPerView: 2,
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    breakpoints: {
+      1600: {
+        spaceBetween: 16,
+      },
+    },
+  });
+}
+
+// PRODUCT DETAIL
+function detailHandler() {
+
+}
+
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 12,
+  slidesPerView: 4,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+  breakpoints: {
+    1600: {
+      spaceBetween: 16,
+    },
+  },
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 12,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  breakpoints: {
+    1600: {
+      spaceBetween: 16,
+    },
+  },
+  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
+  }
+});
+
+function toggleAttr(target, _this) {
+  $('[data-type="attr-item-content"]').addClass('d-none');
+  $(target).toggleClass('d-none');
+  $(_this).closest('.attr-list-name').find('.title').removeClass('active');
+  $(_this).addClass('active');
+}
+
+// CART
+function cartHandler() {
+
+}
+
+function toggleDisplay(target) {
+  $(target).toggleClass('d-none');
+}