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

// GLOBALFUNC
function globalHandler() {
  $('#menu').mmenu();
  setTimeout(function () {
    $('#menu').removeClass("d-none");
  }, 500)
  footerArccodion();
}
globalHandler();

function toogleSearchBar() {
  $('.header-search-box').toggleClass('d-none');
}

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() === "Xem tất cả +" ? viewMoreBtn.html("Thu gọn -") : viewMoreBtn.html("Xem tất cả +");
  if (!$(".static-html").hasClass("max-height-none")) document.querySelector(target).scrollIntoView({ behavior: 'smooth' });
}

// HOMEAPGE FUNC
function homepageHandler() {
  swiperSectionHero();
  swiperSectionBrand();
  swiperSectionDealBanner();
  //swiperDealList();
}
homepageHandler();

function swiperSectionHero() {
  new Swiper(".swiper-section-hero", {
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
}

function swiperSectionBrand() {
  new Swiper(".swiper-section-banner", {
    spaceBetween: 0,
    slidesPerView: 4,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

function swiperDealList() {
  new Swiper(".swiper-deal-list", {
    direction: 'vertical',
    spaceBetween: 10,
    slidesPerView: 3,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

function swiperSectionDealBanner() {
  new Swiper(".swiper-section-deal-banner", {
    spaceBetween: 10,
    slidesPerView: 1,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
    },
  });
}

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

  setTimeout(function () {
    filter_fixed();
  }, 500);
}
categoryHandler();

function filterPopupListViewMore() {
  $(".list-holder").each(function () {
    let summaryHeight = $(this).height();
    if (summaryHeight >= 133) {
    } else {
      $(this).next().css("display", "none");
    }
  })
}

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");
}

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 filter_fixed() {
  var topTab = $("#js-p-filter-group").offset();
  if (topTab) {
    var headerHeight = $('header').height();

    $(window).scroll(function () {
      if ($(window).scrollTop() > 400) {
        $(".box-filter-list.box-filter-attribute-list").addClass("fixed");
        $('#js-filter-block').show();
      } else {
        $(".box-filter-list.box-filter-attribute-list").removeClass("fixed");
        $('#js-filter-block').hide();
      }
    });
  }
}

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

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() {
  relativeProductSwiper();
  ratingHover();
}
detailHandler();

let galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 10,
  slidesPerView: 5,
  slideToClickedSlide: true,
  freeMode: true,
  watchSlidesProgress: true,
  centerInsufficientSlides: true,
});

let galleryTop = new Swiper(".gallery-top", {
  spaceBetween: 10,
  slidesPerView: 1,
  speed: 1000,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    pauseOnMouseEnter: "true",
  },
  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 toggleModal(target) {
  $(target).toggleClass('d-none');
  $("body").toggleClass('overflow-hidden');
}

function relativeProductSwiper() {
  new Swiper(".swiper-relative-product", {
    spaceBetween: 10,
    slidesPerView: 2,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    breakpoints: {
      768: {
        slidesPerView: 3,
      },
    },
  });
}

function ratingHover() {
  $('.rating-star').hover(function () {
    $(this).addClass('hover');
    $('#star_tip').html($(this).attr('data-title'))
  },
    function () {
      $(this).removeClass('hover');
      $('#star_tip').html($('.rating-review input:checked').attr('data-title'));
    })
}

function toogleReviewForm(target) {
  $(target).toggleClass("d-block");
}