giao_dien_web_mau/demo-audio-3/js/main_mobile.js

// 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');
}