window.initMetatron = function () {
(function ($) {
"use strict";
var windowOn = $(window);
/*======================================
Preloader activation
========================================*/
if ($('#preloader').length > 0) {
$('#preloader').delay(500).fadeOut(500);
}
/*======================================
button hover
========================================*/
$('.btn-hover').off('mouseenter mouseout').on('mouseenter', function (e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({
top: 0,
left: 0
})
$(this).find('span').css({
top: relY,
left: relX
})
}).on('mouseout', function (e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('span').css({
top: 0,
left: 0
})
$(this).find('span').css({
top: relY,
left: relX
})
});
/*======================================
Mobile Menu Js
========================================*/
$('#mobile-menu').meanmenu({
meanMenuContainer: '.mobile-menu',
meanScreenWidth: "991",
meanExpand: [''],
});
$("#mobile-menu-2").meanmenu({
meanMenuContainer: ".mobile-menu-2",
meanScreenWidth: "4000",
meanExpand: [''],
});
/*======================================
Sidebar Toggle
========================================*/
$(".offcanvas__close,.offcanvas__overlay").off("click").on("click", function () {
$(".offcanvas__info").removeClass("info-open");
$(".offcanvas__overlay").removeClass("overlay-open");
});
$(".sidebar__toggle").off("click").on("click", function () {
$(".offcanvas__info").addClass("info-open");
$(".offcanvas__overlay").addClass("overlay-open");
});
/*======================================
Body overlay Js
========================================*/
$(".body-overlay").off("click").on("click", function () {
$(".offcanvas__area").removeClass("offcanvas-opened");
$(".df-search-area").removeClass("opened");;
$(".body-overlay").removeClass("opened");
});
/*======================================
Search Header Js
========================================*/
$(".search-toggle-open").off("click").on("click", function () {
$(".df-search-area").addClass("opened");
$(".body-overlay").addClass("opened");
});
$(".tp-search-close-btn").off("click").on("click", function () {
$(".df-search-area").removeClass("opened");
$(".body-overlay").removeClass("opened");
});
/*======================================
Sticky Header Js
========================================*/
$(window).off("scroll.sticky").on("scroll.sticky", function () {
if ($(this).scrollTop() > 250) {
$("#header-sticky").addClass("sticky");
} else {
$("#header-sticky").removeClass("sticky");
}
});
/*======================================
Data Css js
========================================*/
$("[data-background").each(function () {
$(this).css("background-image", "url( " + $(this).attr("data-background") + " )");
});
$("[data-width]").each(function () {
$(this).css("width", $(this).attr("data-width"));
});
$("[data-bg-color]").each(function () {
$(this).css("background-color", $(this).attr("data-bg-color"));
});
/*======================================
Cart Quantity Js
========================================*/
$(".cart-minus").off("click").click(function () {
var $input = $(this).parent().find("input");
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$(".cart-plus").off("click").click(function () {
var $input = $(this).parent().find("input");
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
/*======================================
MagnificPopup image view
========================================*/
$('.popup-image').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
if ($(".post-filter").length) {
var postFilterList = $(".post-filter li");
// for first init
$(".filter-layout").isotope({
filter: ".filter-item",
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
// on click filter links
postFilterList.off("click").on("click", function () {
var Self = $(this);
var selector = Self.attr("data-filter");
postFilterList.removeClass("active");
Self.addClass("active");
$(".filter-layout").isotope({
filter: selector,
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
return false;
});
}
/*======================================
MagnificPopup video view
========================================*/
$(".popup-video").magnificPopup({
type: "iframe",
});
/*======================================
Counter Js (Robust Re-triggering)
========================================*/
const initCounters = () => {
const counterElements = document.querySelectorAll('.counter');
const animateCounter = (el) => {
const target = parseFloat(el.dataset.target.replace(/,/g, ''));
if (isNaN(target)) return;
const duration = 2000;
const stepTime = 20;
const steps = duration / stepTime;
const increment = target / steps;
let current = 0;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
el.innerText = target.toLocaleString() + (el.dataset.suffix || '');
clearInterval(timer);
} else {
el.innerText = Math.floor(current).toLocaleString() + (el.dataset.suffix || '');
}
}, stepTime);
el.dataset.counterTimer = timer;
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const el = entry.target;
if (entry.isIntersecting) {
if (el.dataset.counterTimer) clearInterval(el.dataset.counterTimer);
animateCounter(el);
} else {
if (el.dataset.counterTimer) clearInterval(el.dataset.counterTimer);
el.innerText = '0' + (el.dataset.suffix || '');
}
});
}, { threshold: 0.1 });
counterElements.forEach(el => {
const text = el.innerText;
const match = text.match(/([\d,.]+)(\+?)/);
if (match) {
el.dataset.target = match[1];
el.dataset.suffix = match[2] || '';
} else {
el.dataset.target = text;
}
observer.observe(el);
});
};
initCounters();
/*======================================
Wow Js
========================================*/
if (typeof WOW !== 'undefined') {
new WOW().init();
}
/*======================================
Back To Top Js
========================================*/
var progressPath = document.querySelector('.backtotop-wrap path');
if (progressPath) {
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function () {
var scroll = $(window).scrollTop();
var height = $(document).height() - $(window).height();
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
$(window).off("scroll.backtotop").on('scroll.backtotop', updateProgress);
var offset = 150;
var duration = 550;
$(window).off("scroll.backtotop_active").on('scroll.backtotop_active', function () {
if ($(this).scrollTop() > offset) {
$('.backtotop-wrap').addClass('active-progress');
} else {
$('.backtotop-wrap').removeClass('active-progress');
}
});
$('.backtotop-wrap').off('click').on('click', function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, duration);
return false;
})
}
/*======================================
For language Js
========================================*/
if ($("#header-lang-toggle").length > 0) {
window.addEventListener('click', function (e) {
if (document.getElementById('header-lang-toggle').contains(e.target)) {
$(".header-lang ul").toggleClass("lang-list-open");
}
else {
$(".header-lang ul").removeClass("lang-list-open");
}
});
}
/*======================================
For header header Js
========================================*/
if ($("#header-currency-toggle").length > 0) {
window.addEventListener('click', function (e) {
if (document.getElementById('header-currency-toggle').contains(e.target)) {
$(".tp-header-currency ul").toggleClass("tp-currency-list-open");
}
else {
$(".tp-header-currency ul").removeClass("tp-currency-list-open");
}
});
}
/*======================================
For header setting Js
========================================*/
if ($("#header-setting-toggle").length > 0) {
window.addEventListener('click', function (e) {
if (document.getElementById('header-setting-toggle').contains(e.target)) {
$(".tp-header-setting ul").toggleClass("tp-setting-list-open");
}
else {
$(".tp-header-setting ul").removeClass("tp-setting-list-open");
}
});
}
/*======================================
For before-after Js
========================================*/
if ($(".beforeAfter").length > 0) {
$('.beforeAfter').beforeAfter({
movable: true,
clickMove: true,
position: 50,
separatorColor: '#fafafa',
bulletColor: '#fafafa',
onMoveStart: function (e) {
console.log(event.target);
},
onMoving: function () {
console.log(event.target);
},
onMoveEnd: function () {
console.log(event.target);
},
});
}
/*======================================
Testimonial slider Js Metatron Home One
========================================*/
if ($('.testimonial-active-1').length > 0 && $('.testimonial-active-1 .swiper-slide').length > 0) {
new Swiper('.testimonial-active-1', {
slidesPerView: 1,
spaceBetween: 30,
loop: $('.testimonial-active-1 .swiper-slide').length >= 1,
roundLengths: true,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: ".testimonial-1-button-next",
prevEl: ".testimonial-1-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 1 },
'1200': { slidesPerView: 1 },
'992': { slidesPerView: 1 },
'768': { slidesPerView: 1 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
if ($('.testimonial-active-2').length > 0 && $('.testimonial-active-2 .swiper-slide').length > 0) {
new Swiper('.testimonial-active-2', {
slidesPerView: 2,
spaceBetween: 20,
loop: $('.testimonial-active-2 .swiper-slide').length >= 2,
roundLengths: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".testimonial-swiper-dot",
clickable: true,
},
navigation: {
nextEl: ".testimonial-button-next",
prevEl: ".testimonial-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 2 },
'1200': { slidesPerView: 2 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 1 },
'500': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
if ($('.testimonial-active-3').length > 0 && $('.testimonial-active-3 .swiper-slide').length > 0) {
new Swiper('.testimonial-active-3', {
slidesPerView: 4,
spaceBetween: 24,
loop: $('.testimonial-active-3 .swiper-slide').length >= 4,
roundLengths: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
navigation: {
nextEl: ".testimonial-button-next",
prevEl: ".testimonial-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 4 },
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 2 },
'500': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
if ($('.team-active-3').length > 0 && $('.team-active-3 .swiper-slide').length > 0) {
new Swiper('.team-active-3', {
slidesPerView: 3,
spaceBetween: 24,
loop: $('.team-active-3 .swiper-slide').length >= 3,
roundLengths: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
navigation: {
nextEl: ".team-3-button-next",
prevEl: ".team-3-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 3 },
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 2 },
'500': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
/*======================================
Review slider Js
========================================*/
if ($('.review-active').length > 0 && $('.review-active .swiper-slide').length > 0) {
new Swiper('.review-active', {
slidesPerView: 1,
spaceBetween: 30,
loop: $('.review-active .swiper-slide').length >= 1,
roundLengths: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: ".review-button-prev",
prevEl: ".review-button-next",
},
});
}
if ($(".review-active-two").length > 0) {
$(".review-active-two").slick({
infinite: true,
vertical: true,
speed: 1000,
autoplaySpeed: 2000,
slidesToShow: 1,
autoplay: true,
arrows: true,
prevArrow: '',
nextArrow: '',
appendArrows: $(".review-slider-navigation"),
slidesToScroll: 1,
responsive: [
{ breakpoint: 1400, settings: { slidesToShow: 1 } },
{ breakpoint: 1200, settings: { slidesToShow: 1 } },
{ breakpoint: 992, settings: { slidesToShow: 1 } },
{ breakpoint: 768, settings: { slidesToShow: 1 } },
{ breakpoint: 480, settings: { slidesToShow: 1 } },
],
});
}
/*======================================
product slider Js
========================================*/
if ($('.product-active').length > 0 && $('.product-active .swiper-slide').length > 0) {
new Swiper('.product-active', {
slidesPerView: 4,
spaceBetween: 15,
loop: $('.product-active .swiper-slide').length >= 4,
roundLengths: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
breakpoints: {
'1200': { slidesPerView: 4 },
'992': { slidesPerView: 3 },
'768': { slidesPerView: 3 },
'576': { slidesPerView: 2 },
'0': { slidesPerView: 1 },
},
});
}
if ($('.discount-active').length > 0 && $('.discount-active .swiper-slide').length > 0) {
new Swiper('.discount-active', {
slidesPerView: 5,
spaceBetween: 15,
loop: $('.discount-active .swiper-slide').length >= 5,
roundLengths: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
navigation: {
nextEl: ".discount-slider-button-prev",
prevEl: ".discount-slider-button-next",
},
breakpoints: {
'1400': { slidesPerView: 5 },
'1200': { slidesPerView: 4 },
'992': { slidesPerView: 4 },
'768': { slidesPerView: 3 },
'576': { slidesPerView: 2 },
'0': { slidesPerView: 1 },
},
});
}
/*======================================
brand slider Js Metatron Home One
========================================*/
if ($('.brand-active').length > 0 && $('.brand-active .swiper-slide').length > 0) {
new Swiper('.brand-active', {
slidesPerView: 5,
spaceBetween: 99,
loop: $('.brand-active .swiper-slide').length >= 5,
roundLengths: true,
autoplay: {
delay: 3000,
},
breakpoints: {
'1400': { slidesPerView: 5 },
'1200': { slidesPerView: 4 },
'992': { slidesPerView: 4 },
'768': { slidesPerView: 4 },
'576': { slidesPerView: 3 },
'500': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
speed: 1000,
});
}
/*======================================
service slider Js Metatron Home One
========================================*/
if ($('.service-active-2').length > 0 && $('.service-active-2 .swiper-slide').length > 0) {
new Swiper('.service-active-2', {
slidesPerView: 4,
spaceBetween: 30,
loop: $('.service-active-2 .swiper-slide').length >= 4,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
navigation: {
nextEl: ".service-active-2-button-next",
prevEl: ".service-active-2-button-prev",
},
breakpoints: {
'1200': { slidesPerView: 4 },
'992': { slidesPerView: 3 },
'768': { slidesPerView: 2 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
/*======================================
Project slider Js Metatron Home One
========================================*/
if ($('.project-active-1').length > 0) {
new Swiper('.project-active-1', {
slidesPerView: 4,
spaceBetween: 30,
loop: $('.project-active-1 .swiper-slide').length >= 4,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: ".project-1-button-next",
prevEl: ".project-1-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 4 },
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 2 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
speed: 1000,
});
}
if ($('.service-active-1').length > 0 && $('.service-active-1 .swiper-slide').length > 0) {
new Swiper('.service-active-1', {
slidesPerView: 3,
spaceBetween: 30,
loop: $('.service-active-1 .swiper-slide').length >= 3,
roundLengths: true,
autoplay: {
delay: 3000,
},
navigation: {
nextEl: ".service-1-button-next",
prevEl: ".service-1-button-prev",
},
breakpoints: {
'1400': { slidesPerView: 3 },
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 1 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
speed: 1500,
});
}
if ($('.service-one-home__carousel').length > 0 && $('.service-one-home__carousel .swiper-slide').length > 0) {
new Swiper('.service-one-home__carousel', {
slidesPerView: 3,
spaceBetween: 30,
loop: $('.service-one-home__carousel .swiper-slide').length >= 3,
roundLengths: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
breakpoints: {
'1400': { slidesPerView: 3 },
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 2 },
'768': { slidesPerView: 2 },
'500': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
speed: 1500,
});
}
/*======================================
slider Js
========================================*/
if (jQuery(".slider-active").length > 0 && jQuery(".slider-active .swiper-slide").length > 0) {
let sliderActive1 = ".slider-active";
let sliderInit1 = new Swiper(sliderActive1, {
slidesPerView: 1,
slidesPerColumn: 1,
paginationClickable: true,
fadeEffect: { crossFade: true },
loop: jQuery(".slider-active .swiper-slide").length >= 1,
effect: 'fade',
autoplay: { delay: 5000 },
navigation: {
nextEl: ".slider-button-prev",
prevEl: ".slider-button-next",
},
pagination: {
el: ".banner-dot-2",
clickable: true,
},
a11y: false,
});
function animated_swiper(selector, init) {
let animated = function animated() {
$(selector + " [data-animation]").each(function () {
let anim = $(this).data("animation");
let delay = $(this).data("delay");
let duration = $(this).data("duration");
$(this)
.removeClass("anim" + anim)
.addClass(anim + " animated")
.css({
webkitAnimationDelay: delay,
animationDelay: delay,
webkitAnimationDuration: duration,
animationDuration: duration,
})
.one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
$(this).removeClass(anim + " animated");
}
);
});
};
animated();
init.on("slideChange", function () {
$(sliderActive1 + " [data-animation]").removeClass("animated");
});
init.on("slideChange", animated);
}
animated_swiper(sliderActive1, sliderInit1);
}
if (jQuery(".banner-active").length > 0 && jQuery(".banner-active .swiper-slide").length > 0) {
let sliderActive1 = ".banner-active";
let sliderInit1 = new Swiper(sliderActive1, {
slidesPerView: 1,
slidesPerColumn: 1,
paginationClickable: true,
fadeEffect: { crossFade: true },
loop: jQuery(".banner-active .swiper-slide").length >= 1,
effect: "fade",
autoplay: { delay: 5000 },
navigation: {
nextEl: ".slider__button-prev",
prevEl: ".slider__button-next",
},
pagination: {
el: ".banner-dot",
clickable: true,
},
a11y: false,
});
function animated_swiper_banner(selector, init) {
let animated = function animated() {
$(selector + " [data-animation]").each(function () {
let anim = $(this).data("animation");
let delay = $(this).data("delay");
let duration = $(this).data("duration");
$(this)
.removeClass("anim" + anim)
.addClass(anim + " animated")
.css({
webkitAnimationDelay: delay,
animationDelay: delay,
webkitAnimationDuration: duration,
animationDuration: duration,
})
.one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
$(this).removeClass(anim + " animated");
}
);
});
};
animated();
init.on("slideChange", function () {
$(sliderActive1 + " [data-animation]").removeClass("animated");
});
init.on("slideChange", animated);
}
animated_swiper_banner(sliderActive1, sliderInit1);
}
/*======================================
Postbox slider Js
========================================*/
if ($('.postbox__slider').length > 0 && $('.postbox__slider .swiper-slide').length > 0) {
new Swiper('.postbox__slider', {
slidesPerView: 1,
spaceBetween: 0,
loop: $('.postbox__slider .swiper-slide').length >= 1,
autoplay: { delay: 3000 },
navigation: {
nextEl: ".postbox-slider-button-next",
prevEl: ".postbox-slider-button-prev",
},
breakpoints: {
'1200': { slidesPerView: 1 },
'992': { slidesPerView: 1 },
'768': { slidesPerView: 1 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
/*======================================
whyChoose slider Js
========================================*/
if ($('.why-choose-active').length > 0 && $('.why-choose-active .swiper-slide').length > 0) {
new Swiper('.why-choose-active', {
slidesPerView: 1,
spaceBetween: 0,
loop: $('.why-choose-active .swiper-slide').length >= 1,
autoplay: { delay: 3000 },
pagination: {
el: ".bd-swiper-dot",
clickable: true,
},
breakpoints: {
'1200': { slidesPerView: 3 },
'992': { slidesPerView: 3 },
'768': { slidesPerView: 1 },
'576': { slidesPerView: 1 },
'0': { slidesPerView: 1 },
},
});
}
/*======================================
SECTION ACTIVE
========================================*/
$(document).off('mouseover', '.icon-box-area').on('mouseover', '.icon-box-area', function () {
$('.icon-box-area').removeClass('active');
$(this).addClass('active');
});
/*======================================
Countdown slider Js
========================================*/
if ($(".countdown-wrapper").length > 0) {
function updateCountdown() {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
let today = new Date();
let dd = String(today.getDate()).padStart(2, "0");
let mm = String(today.getMonth() + 1).padStart(2, "0");
let yyyy = today.getFullYear();
let nextYear = yyyy + 1;
let dayMonth = "12/30/";
let birthday = dayMonth + yyyy;
today = mm + "/" + dd + "/" + yyyy;
if (today > birthday) {
birthday = dayMonth + nextYear;
}
const countDownDate = new Date(birthday).getTime();
const x = setInterval(function () {
const now = new Date().getTime();
const distance = countDownDate - now;
const days = Math.floor(distance / day);
const hours = Math.floor((distance % day) / hour);
const minutes = Math.floor((distance % hour) / minute);
const seconds = Math.floor((distance % minute) / second);
if (document.getElementById("days")) document.getElementById("days").innerText = days;
if (document.getElementById("hours")) document.getElementById("hours").innerText = hours;
if (document.getElementById("minutes")) document.getElementById("minutes").innerText = minutes;
if (document.getElementById("seconds")) document.getElementById("seconds").innerText = seconds;
if (distance < 0) {
clearInterval(x);
if (document.getElementById("headline")) document.getElementById("headline").innerText = "It's my birthday!";
if (document.getElementById("countdown")) document.getElementById("countdown").style.display = "none";
}
}, 1000);
}
updateCountdown();
}
})(jQuery);
};
// Initial call if not in a React environment or for the first load
if (typeof window !== 'undefined' && !window.next) {
window.initMetatron();
}