Update 14h30 19/06/2023
This commit is contained in:
338
Alpha/js/main_mobile.js
Normal file
338
Alpha/js/main_mobile.js
Normal file
@@ -0,0 +1,338 @@
|
||||
//
|
||||
$(document).ready(function () {
|
||||
// GLOBAL CALL
|
||||
globalHandler();
|
||||
|
||||
// PAGE CALL
|
||||
homepageHandler();
|
||||
|
||||
//categoryHanlder();
|
||||
|
||||
productDetailHandler();
|
||||
|
||||
//articleHandler();
|
||||
|
||||
//cartHandler();
|
||||
|
||||
//getOrderList();
|
||||
});
|
||||
|
||||
//
|
||||
function globalHandler() {
|
||||
runLazyImageLoad();
|
||||
$('#menu').mmenu();
|
||||
//headerCartChange();
|
||||
headerFixedScroll();
|
||||
setCategorySearch();
|
||||
swiperSectionBrand();
|
||||
footerArccodion();
|
||||
tooltip();
|
||||
}
|
||||
|
||||
// LAZY LOADING BLOCK
|
||||
var lazy_load_group = [];
|
||||
|
||||
// LAZY LOADING IMAGE
|
||||
function runLazyImageLoad() {
|
||||
var lazyLoadInstance = new LazyLoad({
|
||||
elements_selector: ".lazy"
|
||||
});
|
||||
}
|
||||
|
||||
function headerFixedScroll() {
|
||||
$(window).scroll(function () {
|
||||
let distanceFromTop = $(document).scrollTop();
|
||||
const global_header = $(".global-header .header-bottom");
|
||||
const global_fixed_block = $(".global-header-fixed-block");
|
||||
const global_navbar_list = $(".global-navbar .list");
|
||||
const homepage_check = $(".homepage").length;
|
||||
|
||||
if (distanceFromTop > 700) {
|
||||
if (homepage_check > 0 && !global_header.hasClass("header-fixed")) global_navbar_list.addClass("d-none");
|
||||
global_header.addClass("header-fixed");
|
||||
global_fixed_block.removeClass("d-none");
|
||||
} else {
|
||||
global_header.removeClass("header-fixed");
|
||||
global_fixed_block.addClass("d-none");
|
||||
if (homepage_check > 0) global_navbar_list.removeClass("d-none");
|
||||
else global_navbar_list.addClass("d-none");
|
||||
$(".global-header-fixed-bg").addClass("d-none");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// TOGGLE NAVBAR
|
||||
function toggleNavbar() {
|
||||
$(".global-navbar .list").toggleClass("d-none");
|
||||
$(".global-header-fixed-bg").toggleClass("d-none");
|
||||
}
|
||||
|
||||
// RESET SWIPER WRAPPER
|
||||
function resetSwiperWrapper(target) {
|
||||
$(target).css("visibility", "hidden");
|
||||
setTimeout(function () {
|
||||
$(target).css("visibility", "unset");
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// VIEW MORE CONTENT
|
||||
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 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' });
|
||||
}
|
||||
|
||||
// TOOL TIP PRODUCT
|
||||
function tooltip() {
|
||||
var w_tooltip = $("#tooltip").width();
|
||||
var h_tooltip = 0;
|
||||
var pad = 10;
|
||||
var x_mouse = 0;
|
||||
var y_mouse = 0;
|
||||
var wrap_left = 0;
|
||||
var wrap_right = 0;
|
||||
var wrap_top = 0;
|
||||
var wrap_bottom = 0;
|
||||
|
||||
$(".p-item .p-img").mousemove(function (e) {
|
||||
content_tooltip = $(this).parents(".p-item").find(".p-tooltip");
|
||||
if (content_tooltip.length == 0) {
|
||||
return;
|
||||
$("#tooltip").hide();
|
||||
}
|
||||
|
||||
$("#tooltip").html(content_tooltip.html());
|
||||
|
||||
wrap_left = 0;
|
||||
wrap_top = $(window).scrollTop();
|
||||
wrap_bottom = $(window).height();
|
||||
wrap_right = $(window).width();
|
||||
x_mouse = e.pageX;
|
||||
y_mouse = e.pageY;
|
||||
h_tooltip = $("#tooltip").height();
|
||||
|
||||
if (x_mouse + w_tooltip > wrap_right)
|
||||
$("#tooltip").css("left", x_mouse - w_tooltip - pad);
|
||||
else $("#tooltip").css("left", x_mouse + pad);
|
||||
|
||||
if (y_mouse - h_tooltip < wrap_top && 1 < 2) $("#tooltip").css("top", wrap_top);
|
||||
else $("#tooltip").css("top", y_mouse - h_tooltip - pad);
|
||||
|
||||
$("#tooltip").show();
|
||||
});
|
||||
|
||||
$(".p-item .p-img").mouseout(function () {
|
||||
$("#tooltip").hide();
|
||||
});
|
||||
}
|
||||
|
||||
//SEARCH CATEGORY
|
||||
function setCategorySearch() {
|
||||
$("#js-cat-list a").click(function (event) {
|
||||
event.preventDefault();
|
||||
var id = $(this).attr("href");
|
||||
var name = $(this).text();
|
||||
|
||||
$("#js-scat_id").attr("value", id);
|
||||
$("#js-search-cat-holder").html(name);
|
||||
});
|
||||
}
|
||||
|
||||
function swiperSectionBrand() {
|
||||
new Swiper(".swiper-section-brand", {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 10,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
1600: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 16,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// FOOTER ARC
|
||||
function footerArccodion() {
|
||||
document.querySelectorAll(".accordion").forEach((acc) => {
|
||||
acc.addEventListener("click", function () {
|
||||
const nextEl = this.nextElementSibling;
|
||||
const childEl = this.firstElementChild;
|
||||
|
||||
if (nextEl.style.maxHeight) {
|
||||
nextEl.style.maxHeight = null;
|
||||
nextEl.style.marginBottom = "0px";
|
||||
childEl.style.transform = "rotate(0)";
|
||||
} else {
|
||||
nextEl.style.maxHeight = nextEl.scrollHeight + "px";
|
||||
nextEl.style.marginBottom = "10px";
|
||||
childEl.style.transform = "rotate(90deg)";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
function homepageHandler() {
|
||||
swiperSectionHero();
|
||||
swiperSectionProductHot();
|
||||
}
|
||||
|
||||
function swiperSectionHero() {
|
||||
new Swiper(".swiper-section-hero", {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 12,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function swiperSectionProductHot() {
|
||||
new Swiper(".swiper-section-product-hot", {
|
||||
slidesPerView: 2.2,
|
||||
spaceBetween: 4,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
function productDetailHandler() {
|
||||
ratingHover();
|
||||
productBottomBoxSwiper();
|
||||
}
|
||||
|
||||
function toogleReviewForm(target) {
|
||||
$(target).toggleClass("d-block");
|
||||
}
|
||||
|
||||
let galleryThumbs = new Swiper(".gallery-thumbs", {
|
||||
spaceBetween: 12,
|
||||
slidesPerView: 5,
|
||||
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",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
// FUNC REVIEW FORM
|
||||
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'));
|
||||
})
|
||||
}
|
||||
|
||||
// SWIPER BOTTOM PRODUCT BOX
|
||||
function productBottomBoxSwiper() {
|
||||
new Swiper(".bottom-product-box-swiper", {
|
||||
slidesPerView: 2.3,
|
||||
spaceBetween: 10,
|
||||
rewind: true,
|
||||
speed: 1000,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: "true",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
786: {
|
||||
slidesPerView: 3.3,
|
||||
spaceBetween: 12,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user