462 lines
11 KiB
JavaScript
462 lines
11 KiB
JavaScript
|
/***************************************************
|
||
|
|
/***************************************************
|
||
|
|
==================== JS INDEX ======================
|
||
|
|
****************************************************
|
||
|
|
|
||
|
|
****************************************************/
|
||
|
|
|
||
|
|
(function ($) {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var windowOn = $(window);
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 01. PreLoader Js
|
||
|
|
windowOn.on('load', function () {
|
||
|
|
$(".tp-preloader").fadeOut(500);
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 02. Mobile Menu Js
|
||
|
|
$('#mobile-menu').meanmenu({
|
||
|
|
meanMenuContainer: '.mobile-menu',
|
||
|
|
meanScreenWidth: "991",
|
||
|
|
meanExpand: ['<i class="fal fa-plus"></i>'],
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 03. Sidebar Js
|
||
|
|
$(".offcanvas-open-btn").on("click", function () {
|
||
|
|
$(".offcanvas__area").addClass("offcanvas-opened");
|
||
|
|
$(".body-overlay").addClass("opened");
|
||
|
|
});
|
||
|
|
$(".offcanvas-close-btn").on("click", function () {
|
||
|
|
$(".offcanvas__area").removeClass("offcanvas-opened");
|
||
|
|
$(".body-overlay").removeClass("opened");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 04. Body overlay Js
|
||
|
|
$(".body-overlay").on("click", function () {
|
||
|
|
$(".offcanvas__area").removeClass("offcanvas-opened");
|
||
|
|
$(".body-overlay").removeClass("opened");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 05. Search Js
|
||
|
|
$(".search-toggle").on("click", function () {
|
||
|
|
$(".search__area").addClass("opened");
|
||
|
|
});
|
||
|
|
$(".search-close-btn").on("click", function () {
|
||
|
|
$(".search__area").removeClass("opened");
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 06. Sticky Header Js
|
||
|
|
windowOn.on('scroll', function () {
|
||
|
|
var scroll = $(window).scrollTop();
|
||
|
|
if (scroll < 300) {
|
||
|
|
$("#header-sticky").removeClass("header-sticky");
|
||
|
|
} else {
|
||
|
|
$("#header-sticky").addClass("header-sticky");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// last child menu
|
||
|
|
$('.wp-menu nav > ul > li').slice(-4).addClass('menu-last');
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 07. 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"));
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 07. Nice Select Js
|
||
|
|
$('select').niceSelect();
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 07. Smooth Scroll Js
|
||
|
|
function smoothSctollTop() {
|
||
|
|
$('.smooth a').on('click', function (event) {
|
||
|
|
var target = $(this.getAttribute('href'));
|
||
|
|
if (target.length) {
|
||
|
|
event.preventDefault();
|
||
|
|
$('html, body').stop().animate({
|
||
|
|
scrollTop: target.offset().top - 120
|
||
|
|
}, 1500);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
smoothSctollTop();
|
||
|
|
|
||
|
|
// mainSlider
|
||
|
|
function mainSlider() {
|
||
|
|
var BasicSlider = $('.tp-slilder-active');
|
||
|
|
BasicSlider.on('init', function (e, slick) {
|
||
|
|
var $firstAnimatingElements = $('.tp-slider__item:first-child').find('[data-animation]');
|
||
|
|
doAnimations($firstAnimatingElements);
|
||
|
|
});
|
||
|
|
BasicSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) {
|
||
|
|
var $animatingElements = $('.tp-slider__item[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
|
||
|
|
doAnimations($animatingElements);
|
||
|
|
});
|
||
|
|
BasicSlider.slick({
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 4000,
|
||
|
|
dots: false,
|
||
|
|
fade: true,
|
||
|
|
arrows: true,
|
||
|
|
appendArrows: '.tp-slider__arrows',
|
||
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="arrow_carrot-left"></i></button>',
|
||
|
|
nextArrow: '<button type="button" class="slick-next"><i class="arrow_carrot-right"></i></button>',
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 767,
|
||
|
|
settings: {
|
||
|
|
dots: false,
|
||
|
|
arrows: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
function doAnimations(elements) {
|
||
|
|
var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||
|
|
elements.each(function () {
|
||
|
|
var $this = $(this);
|
||
|
|
var $animationDelay = $this.data('delay');
|
||
|
|
var $animationType = 'animated ' + $this.data('animation');
|
||
|
|
$this.css({
|
||
|
|
'animation-delay': $animationDelay,
|
||
|
|
'-webkit-animation-delay': $animationDelay
|
||
|
|
});
|
||
|
|
$this.addClass($animationType).one(animationEndEvents, function () {
|
||
|
|
$this.removeClass($animationType);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
mainSlider();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$('.tp-slick-test').slick({
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 4000,
|
||
|
|
dots: true,
|
||
|
|
fade: true,
|
||
|
|
arrows: true,
|
||
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="far fa-arrow-left"></i></button>',
|
||
|
|
nextArrow: '<button type="button" class="slick-next"><i class="far fa-arrow-right"></i></button>',
|
||
|
|
infinite: true,
|
||
|
|
speed: 300,
|
||
|
|
slidesToShow: 4,
|
||
|
|
slidesToScroll: 4,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 1024,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 3,
|
||
|
|
infinite: true,
|
||
|
|
dots: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 600,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 2,
|
||
|
|
slidesToScroll: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// tesimonial slider
|
||
|
|
$('.tp-testimonial__slider').slick({
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 4000,
|
||
|
|
dots: true,
|
||
|
|
arrows: true,
|
||
|
|
appendArrows: '.tp-testimonial__arrows',
|
||
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="arrow_carrot-left"></i></button>',
|
||
|
|
nextArrow: '<button type="button" class="slick-next"><i class="arrow_carrot-right"></i></button>',
|
||
|
|
appendDots: ".tp-testimonial__dots",
|
||
|
|
infinite: true,
|
||
|
|
speed: 300,
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 1024,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
infinite: true,
|
||
|
|
arrows: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
arrows: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// tesimonial slider
|
||
|
|
$('.tp-testimonial-2__slider').slick({
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 4000,
|
||
|
|
dots: true,
|
||
|
|
arrows: false,
|
||
|
|
appendDots: ".tp-testimonial-2__dots",
|
||
|
|
infinite: true,
|
||
|
|
speed: 300,
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 1024,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
infinite: true,
|
||
|
|
arrows: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
arrows: false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
// brnad slider
|
||
|
|
$('.tp-brand_slider').slick({
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 4000,
|
||
|
|
dots: false,
|
||
|
|
arrows: false,
|
||
|
|
infinite: true,
|
||
|
|
speed: 300,
|
||
|
|
slidesToShow: 6,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
responsive: [
|
||
|
|
{
|
||
|
|
breakpoint: 1024,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 3,
|
||
|
|
slidesToScroll: 1,
|
||
|
|
infinite: true,
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 600,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 2,
|
||
|
|
slidesToScroll: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
breakpoint: 480,
|
||
|
|
settings: {
|
||
|
|
slidesToShow: 1,
|
||
|
|
slidesToScroll: 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 13. Masonary Js
|
||
|
|
$('.grid').imagesLoaded(function () {
|
||
|
|
// init Isotope
|
||
|
|
var $grid = $('.grid').isotope({
|
||
|
|
itemSelector: '.grid-item',
|
||
|
|
percentPosition: true,
|
||
|
|
masonry: {
|
||
|
|
// use outer width of grid-sizer for columnWidth
|
||
|
|
columnWidth: '.grid-item',
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// filter items on button click
|
||
|
|
$('.masonary-menu').on('click', 'button', function () {
|
||
|
|
var filterValue = $(this).attr('data-filter');
|
||
|
|
$grid.isotope({ filter: filterValue });
|
||
|
|
});
|
||
|
|
|
||
|
|
//for menu active class
|
||
|
|
$('.masonary-menu button').on('click', function (event) {
|
||
|
|
$(this).siblings('.active').removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
/* magnificPopup img view */
|
||
|
|
$('.popup-image').magnificPopup({
|
||
|
|
type: 'image',
|
||
|
|
gallery: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* magnificPopup video view */
|
||
|
|
$(".popup-video").magnificPopup({
|
||
|
|
type: "iframe",
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 14. Wow Js
|
||
|
|
new WOW().init();
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 16. Cart Quantity Js
|
||
|
|
$('.cart-minus').on('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').on('click', function () {
|
||
|
|
var $input = $(this).parent().find('input');
|
||
|
|
$input.val(parseInt($input.val()) + 1);
|
||
|
|
$input.change();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 17. Show Login Toggle Js
|
||
|
|
$('#showlogin').on('click', function () {
|
||
|
|
$('#checkout-login').slideToggle(900);
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 18. Show Coupon Toggle Js
|
||
|
|
$('#showcoupon').on('click', function () {
|
||
|
|
$('#checkout_coupon').slideToggle(900);
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 19. Create An Account Toggle Js
|
||
|
|
$('#cbox').on('click', function () {
|
||
|
|
$('#cbox_info').slideToggle(900);
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 20. Shipping Box Toggle Js
|
||
|
|
$('#ship-box').on('click', function () {
|
||
|
|
$('#ship-box-info').slideToggle(1000);
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 21. Counter Js
|
||
|
|
$('.counter').counterUp({
|
||
|
|
delay: 10,
|
||
|
|
time: 1000
|
||
|
|
});
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 22. Parallax Js
|
||
|
|
if ($('.scene').length > 0) {
|
||
|
|
$('.scene').parallax({
|
||
|
|
scalarX: 10.0,
|
||
|
|
scalarY: 15.0,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 23. InHover Active Js
|
||
|
|
$('.hover__active').on('mouseenter', function () {
|
||
|
|
$(this).addClass('active').parent().siblings().find('.hover__active').removeClass('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
if ($('#nft-slider').length > 0) {
|
||
|
|
var stepsSlider = document.getElementById('nft-slider');
|
||
|
|
var input0 = document.getElementById('input-with-keypress-0');
|
||
|
|
var input1 = document.getElementById('input-with-keypress-1');
|
||
|
|
var inputs = [input0, input1];
|
||
|
|
|
||
|
|
noUiSlider.create(stepsSlider, {
|
||
|
|
start: [0, 4],
|
||
|
|
connect: true,
|
||
|
|
range: {
|
||
|
|
'min': [0],
|
||
|
|
'max': 10
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
stepsSlider.noUiSlider.on('update', function (values, handle) {
|
||
|
|
inputs[handle].value = values[handle];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
////////////////////////////////////////////////////
|
||
|
|
// 25. back to top Js
|
||
|
|
var btn = $('.tp-backtotop');
|
||
|
|
$(window).on('scroll', function () {
|
||
|
|
if ($(window).scrollTop() > 300) {
|
||
|
|
btn.addClass('show');
|
||
|
|
} else {
|
||
|
|
btn.removeClass('show');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
btn.on('click', function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: 0
|
||
|
|
}, '300');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 36. Data Countdown Js
|
||
|
|
$('[data-countdown]').each(function() {
|
||
|
|
var $this = $(this),
|
||
|
|
finalDate = $(this).data('countdown');
|
||
|
|
$this.countdown(finalDate, function(event) {
|
||
|
|
$this.html(event.strftime('<span class="cdown days"><span class="time-count">%-D</span> <p>DAYS</p></span> <span class="cdown hour"><span class="time-count">%-H</span> <p>HOURS</p></span> <span class="cdown minutes"><span class="time-count">%M</span> <p>MINS</p></span> <span class="cdown second"> <span><span class="time-count">%S</span> <p>SECS</p></span>'));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|
||
|
|
|
||
|
|
|
||
|
|
|