/*global jQuery */
(function($) {
"use strict";
jQuery(document).ready(function($) {
/*--------------------------
01. Background Image JS
---------------------------*/
const bgSelector = $("[data-bg]");
bgSelector.each(function(index, elem) {
let element = $(elem),
bgSource = element.data('bg');
element.css('background-image', 'url(' + bgSource + ')');
});
/*---------------------------------
02. OffCanvas Show Hide JS
-----------------------------------*/
const offCanvasWrapper = ".offCanvas-wrapper",
btnOpen = $(".btn-open"),
btnClose = $(".btn-close");
btnOpen.on('click', function() {
let dataSrc = '.' + $(this).data('src');
$(offCanvasWrapper + dataSrc).addClass("show");
$("body").addClass("fix");
console.log(offCanvasWrapper + dataSrc);
});
btnClose.on('click', function() {
$(offCanvasWrapper).removeClass("show");
setTimeout(function() {
$("body").removeClass("fix");
}, 2000);
});
/*---------------------------------
03. Sticky Header JS
-----------------------------------*/
const headroom = $(".sticky-header");
headroom.headroom({
offset: 205,
tolerance: 5,
classes: {
initial: "headroom",
pinned: "slideDown",
unpinned: "slideUp",
notTop: "is-sticky"
}
});
/*-----------------------------------------
04. Vertical DropDown Menu Expand JS
------------------------------------------*/
let $verticalNav = $('.main-nav.vertical'),
$$verticalNavSubMenu = $verticalNav.find('.sub-nav');
$$verticalNavSubMenu.slideUp();
$verticalNav.on('click', 'li a', function(e) {
let $this = $(this);
if ($this.parent().attr('class').match(/\b(menu-item-has-children|has-children|has-submenu)\b/)) {
e.preventDefault();
if ($this.siblings('ul:visible').length) {
$this.parent('li').removeClass('active');
$this.siblings('ul').slideUp();
} else {
$this.parent('li').addClass('active');
$this.closest('li').siblings('li').removeClass('active').find('li').removeClass('active');
$this.closest('li').siblings('li').find('ul:visible').slideUp();
$this.siblings('ul').slideDown();
}
}
});
/*------------------------------------
05. Vertical Sub Menu Animation
--------------------------------------*/
let menuItem = $(".main-nav.vertical > li"),
offCanvas = $(".offCanvas-wrapper.popup-menu"),
transitionDelay = [];
for (let i = 1, j = 7; i <= menuItem.length; i++, j++) {
$('.main-nav.vertical > li:nth(' + i + ')').css('transition-delay', j / 10 + 's');
transitionDelay[i - 1] = j;
offCanvas.css('-webkit-transition-delay', (transitionDelay[transitionDelay.length - 1] + 3) / 10 + 's');
}
/*------------------------------------
06. Instagram Instafeed JS
--------------------------------------*/
let activeId = $(".instagram-gallery");
let myTemplate = '
';
myTemplate += '
![{{id}}]({{image}})
';
myTemplate += '
';
myTemplate += '{{likes}}';
myTemplate += '';
myTemplate += '
';
myTemplate += '
';
if (activeId.length) {
activeId.each(function() {
let $this = $(this),
$id = $this.attr('id'),
userID = activeId.attr('data-userid'),
accessTokenID = activeId.attr('data-accesstoken'),
limit = activeId.data("limit") ? activeId.data("limit") : 6,
$feed = new Instafeed({
get: 'user',
userId: userID,
accessToken: accessTokenID,
target: $id,
resolution: 'standard_resolution',
limit: limit,
template: myTemplate
});
$feed.run();
});
}
/*------------------------------
07. Responsive Slicknav JS
--------------------------------*/
$('.main-nav:not(.vertical)').slicknav({
appendTo: '.responsive-mobile-menu',
closeOnClick: true,
removeClasses: true,
closedSymbol: '',
openedSymbol: ''
});
/*---------------------------
08. Magnific Popup JS
------------------------------*/
// For Video Popup
const videopopup = $(".btn-video-popup");
videopopup.magnificPopup({
type: 'iframe',
mainClass: 'ht-mfp zoom-animate',
removalDelay: 800,
closeBtnInside: false
});
// For Image Gallery Popup
const imgGallery = $(".image-gallery-popup");
imgGallery.magnificPopup({
delegate: '[data-mfp-src]',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'ht-mfp mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 400,
opener: function(element) {
return element.find('img');
}
}
});
// Custom Gallery on Button Click
const galleryBtnPopup = $(".btn-gallery-popup");
galleryBtnPopup.on('click', function(event) {
event.preventDefault();
const gallery = $(this).attr('href');
$(gallery).magnificPopup({
delegate: '[data-mfp-src]',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'ht-mfp zoom-animate mfp-img-mobile',
removalDelay: 800,
image: {
verticalFit: true
},
gallery: {
enabled: true
}
}).magnificPopup('open');
});
// For Single Image Popup
const imgpopup = $(".btn-img-popup");
imgpopup.magnificPopup({
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'ht-mfp zoom-animate',
removalDelay: 800
});
/*------------------------------
09. Counter Odometer JS
--------------------------------*/
$('.odometer').each(function() {
$(this).appear(function() {
const $this = $(this),
$dataValue = $this.data('count');
setTimeout(function() {
$this.html($dataValue);
}, 800);
})
});
/*------------------------------
10. Pie Chart JS
--------------------------------*/
const chartSelector = $(".ht-pie-chart");
chartSelector.each(function() {
$(this).appear(function() {
let $this = $(this),
amount = '' + $this.data('percent') + '%';
$this.html(amount);
$this.easyPieChart({
trackColor: "#F9F9F9",
scaleColor: false,
lineWidth: 6
});
})
});
/*------------------------------
11. Progressbar JS
--------------------------------*/
const progressBar = $(".progress-line-bar");
progressBar.appear(function() {
progressBar.each(function(index, elem) {
let elementItem = $(elem),
skillBarAmount = elementItem.data('percent');
elementItem.animate({
width: skillBarAmount
}, 800);
elementItem.closest('.progressbar-item').find('.percent').text(skillBarAmount);
elementItem.closest('.progressbar-item').find('.progress-info').css('width', skillBarAmount);
});
});
/*------------------------------
12. FullPage JS
--------------------------------*/
const fullPageSelector = $(".fullPage"),
header = $(".header-presentation"),
footer = $(".footer-presentation"),
windowWidth = $(window).width();
if (fullPageSelector.length && windowWidth > 767) {
fullPageSelector.fullpage({
navigation: true,
paddingTop: '0px',
paddingBottom: '0px',
lockAnchors: false,
sectionSelector: '.section',
afterLoad: function() {
const activeSection = $('.fp-section.active'),
mode = activeSection.data('skin') === 'dark' ? 'is-sticky' : ' ';
header.removeClass('is-sticky').addClass(mode);
footer.removeClass('light dark').addClass(activeSection.data('skin'));
$("#fp-nav").removeClass('light dark').addClass(activeSection.data('skin'));
}
});
}
/*-------------------------
13. Contact Map JS
-----------------------------*/
const map_id = $('#map');
if (map_id.length > 0) {
const $lat = map_id.data('lat'),
$lng = map_id.data('lng'),
$zoom = map_id.data('zoom'),
$maptitle = map_id.data('maptitle'),
$mapaddress = map_id.data('mapaddress'),
mymap = L.map('map').setView([$lat, $lng], $zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map',
maxZoom: 14,
minZoom: 2,
id: 'mapbox.streets',
scrollWheelZoom: false,
accessToken: 'sk.eyJ1IjoicmFqdWh0IiwiYSI6ImNqdHk5dGdpYzJqM3A0NGxsYmI3NmhnN3EifQ.kNdHkgfVGmSz6XPmmfG02A'
}).addTo(mymap);
const marker = L.marker([$lat, $lng]).addTo(mymap);
mymap.zoomControl.setPosition('bottomright');
mymap.scrollWheelZoom.disable();
}
/*---------------------
14. Parallax JS
----------------------*/
$('.parallax').jarallax({
speed: 0.2
});
/*------------------------------
15. Ajax Contact Form JS
--------------------------------*/
const form = $('#contact-form');
const formNotification = $('.form-notification');
$(form).submit(function(e) {
e.preventDefault();
const formData = form.serialize();
$.ajax({
type: 'POST',
url: form.attr('action'),
data: formData
}).done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formNotification).removeClass('alert alert-danger mt-3 mb-0');
$(formNotification).addClass('alert alert-success fade show mt-3 mb-0');
// Set the message text.
formNotification.html("");
formNotification.append(response);
// Clear the form.
$('#contact-form input,#contact-form textarea').val('');
}).fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formNotification).removeClass('alert alert-success mt-3 mb-0');
$(formNotification).addClass('alert alert-danger fade show mt-3 mb-0');
// Set the message text.
if (data.responseText !== '') {
formNotification.html("");
formNotification.append(data.responseText);
} else {
$(formNotification).text('Oops! An error occurred and your message could not be sent.');
}
});
});
/*------------------------------
16. MultiScroll JS
--------------------------------*/
const splitWrapper = $('#multiscroll');
if (splitWrapper.length) {
splitWrapper.multiscroll({
css3: true,
navigation: true,
loopBottom: true,
loopTop: true,
navigationPosition: 'left',
afterRender: function() {
const header = $('.header').outerHeight();
$(".service-split-wrapper").css('height', 'calc(100vh - ' + header + 'px)');
$('.service-split-content').css('margin-top', '-' + header + '+px');
}
});
}
/*------------------------------
17. Nice Select JS
--------------------------------*/
/*$('select').niceSelect();*/
/*------------------------------
18. Scroll Top JS
--------------------------------*/
$(".btn-scroll-top").on('click', function() {
$('html, body').animate({
scrollTop: 0
}, 1500);
});
/*------------------------------------
18. Product Quantity JS
-------------------------------------*/
var proQty = $(".pro-qty");
proQty.append('+');
proQty.append('-');
$('.qty-btn').on('click', function(e) {
e.preventDefault();
var $button = $(this);
var oldValue = $button.parent().find('input').val();
if ($button.hasClass('inc')) {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find('input').val(newVal);
});
/*--------------------------------------
19. Checkout Page Checkbox Accordion
----------------------------------------*/
$("#create_pwd").on("change", function() {
$(".account-create").slideToggle("100");
});
$("#ship_to_different").on("change", function() {
$(".ship-to-different").slideToggle("100");
});
/*-------------------------
20. Countdown JS
-----------------------------*/
$(".ht-countdown").each(function(index, element) {
let $element = $(element),
$date = $element.data('date');
$element.countdown($date, function(event) {
let $this = $(this).html(event.strftime('' +
'%DDays
' +
'%HHours
' +
'%MMinutes
' +
'%SSeconds
'));
});
});
/*---------------------------------------
All Slick Slider Activation JS
-----------------------------------------*/
// Home Agency Portfolio Testimonial
const testSlider = $(".testimonial-slider"),
testSliderThumb = $('.testimonial-thumb');
testSlider.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
fade: false,
asNavFor: '.slider-nav'
});
testSliderThumb.slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
arrows: false
});
// Brand Logo Carousel Slider JS
const brandCarousel = $(".brand-logo-content");
brandCarousel.slick({
slidesToShow: 5,
slidesToScroll: 5,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
dots: false,
fade: false,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}
]
});
// Product Carousel Slider JS
const proCarousel = $(".product-carousel");
proCarousel.slick({
slidesToShow: 4,
slidesToScroll: 4,
autoplay: false,
autoplaySpeed: 3000,
arrows: true,
nextArrow: '',
prevArrow: '',
dots: false,
fade: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 501,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
// Multipurpose Home Portfolio Carousel JS
const proMultiCarousel = $(".portfolio-multipurpose-carousel");
proMultiCarousel.slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000,
arrows: false,
nextArrow: '',
prevArrow: '',
dots: true,
fade: false
});
// Home Multipurpose Testimonial JS
const multiTestSlider = $(".multipurpose-testimonial-slider");
multiTestSlider.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
fade: false
});
// Home Marketing Agency Case Study JS
const caseStudyCarousel = $(".case-study-carousel");
caseStudyCarousel.slick({
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
dots: true,
fade: false,
responsive: [{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 501,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
// Home Side Menu Service JS
const serviceCarousel = $(".service-carousel");
serviceCarousel.slick({
slidesToShow: 3,
slidesToScroll: 3,
arrows: false,
dots: false,
fade: false,
responsive: [{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 501,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
// Portfolio Details Slider JS
const portDetailsThumb = $(".portfolio-details-thumb--slider");
portDetailsThumb.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true
});
// Element Image Carousel
const elementCarousel = $(".element-carousel");
elementCarousel.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: '',
prevArrow: '',
dots: true
});
// Home Multipurpose Slider JS
const homeMultipurpose = $(".slider-activation");
homeMultipurpose.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
nextArrow: '',
prevArrow: '',
dots: true,
customPaging: function(slider, i) {
return (i + 1) + '/' + slider.slideCount;
}
});
}); //End Ready Function
jQuery(window).on('scroll', function() {
//Scroll top Hide Show
if ($(window).scrollTop() >= 400) {
$('.btn-scroll-top').addClass('show');
} else {
$('.btn-scroll-top').removeClass('show');
}
}); // End Scroll Function
jQuery(window).on('load', function() {
// Masonry Grid JS
//$(".masonry-grid").isotope();
/*-------------------------
Portfolio Filter JS
--------------------------*/
/*const activeId = $(".filter-menu li");
$(".filter-content").isotope();
activeId.on('click', function() {
const $this = $(this),
filterValue = $this.data('filter');
$(".filter-content").isotope({
filter: filterValue
});
activeId.removeClass('active');
$this.addClass('active');
});*/
// Remove Preloader Active Class
$('body').removeClass('preloader-active');
}); // End Load Function
}(jQuery));