Update 14h - 30/03/2023
This commit is contained in:
346
demo-audio-2/js/main_mobile.js
Normal file
346
demo-audio-2/js/main_mobile.js
Normal file
@@ -0,0 +1,346 @@
|
||||
// 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");
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -114,3 +114,9 @@ $('[data-fancybox="gallery"]').fancybox({
|
||||
}
|
||||
});
|
||||
|
||||
// TOGGLE MODAL
|
||||
function toggleModal(target) {
|
||||
$(target).toggleClass('d-none');
|
||||
$("body").toggleClass('overflow-hidden');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user