File: /home/globfdxw/diasporameetsafrica.com/wp-content/themes/lavelo/assets/js/scripts.js
/*
Theme Name: Lavelo
Theme URI: https://wpocean.com
Description: Lavelo - Wedding WordPress Theme
Author: wpoceans
Author URI: https://themeforest.net/user/wpoceans
Version: 1.0
*/
/*============================
js index
==============================
1. Toggle mobile navigation
2. Function for toggle a class for small menu
3. Function for small menu
4. Parallax background
5. Hero slider background setting
6. Setting hero slider
7. WOW ANIMATION SETTING
8. STICKY HEADER
9. BACK TO TOP BTN SETTING
10. COUNTDOWN CLOCK
11. Gift-carousel
12. Gallery Masonary
13. Magnific Popup
14. Smoth Scroll
15. VIDEO BACKGROUND
15. WHEN DOCUMENT LOADING
16. WHEN WINDOW SCROLL
==========================================*/
(function($) {
"use strict";
/*------------------------------------------
= FUNCTIONS
-------------------------------------------*/
// Toggle mobile navigation
function toggleMobileNavigation() {
var navbar = $(".navigation-holder");
var openBtn = $(".navbar-header .open-btn");
var closeBtn = $(".navigation-holder .close-navbar");
openBtn.on("click", function() {
if (!navbar.hasClass("slideInn")) {
navbar.addClass("slideInn");
}
return false;
})
closeBtn.on("click", function() {
if (navbar.hasClass("slideInn")) {
navbar.removeClass("slideInn");
}
return false;
})
}
toggleMobileNavigation();
// Function for toggle a class for small menu
function toggleClassForSmallNav() {
var windowWidth = window.innerWidth;
var mainNav = $("#navbar > ul");
if (windowWidth <= 991) {
mainNav.addClass("small-nav");
} else {
mainNav.removeClass("small-nav");
}
}
toggleClassForSmallNav();
// Function for small menu
function smallNavFunctionality() {
var windowWidth = window.innerWidth;
var mainNav = $(".navigation-holder");
var smallNav = $(".navigation-holder > .small-nav");
var subMenu = smallNav.find(".sub-menu");
var megamenu = smallNav.find(".mega-menu");
var menuItemWidthSubMenu = smallNav.find(".menu-item-has-children > a");
if (windowWidth <= 991) {
subMenu.hide();
megamenu.hide();
menuItemWidthSubMenu.on("click", function(e) {
var $this = $(this);
$this.siblings().slideToggle();
e.preventDefault();
e.stopImmediatePropagation();
})
} else if (windowWidth > 991) {
mainNav.find(".sub-menu").show();
mainNav.find(".mega-menu").show();
}
}
smallNavFunctionality();
// Parallax background
function bgParallax() {
if ($(".parallax").length) {
$(".parallax").each(function() {
var height = $(this).position().top;
var resize = height - $(window).scrollTop();
var parallaxSpeed = $(this).data("speed");
var doParallax = -(resize / parallaxSpeed);
var positionValue = doParallax + "px";
var img = $(this).data("bg-image");
$(this).css({
backgroundImage: "url(" + img + ")",
backgroundPosition: "50%" + positionValue,
backgroundSize: "cover"
});
if ( window.innerWidth < 768) {
$(this).css({
backgroundPosition: "center center"
});
}
});
}
}
bgParallax();
// HIDE PRELOADER
function pageLoader() {
if($('.preloader').length) {
$('.preloader').delay(100).fadeOut(500, function() {
//active wow
wow.init();
});
}
}
/*------------------------------------------
= WOW ANIMATION SETTING
-------------------------------------------*/
var wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
});
/*------------------------------------------
= STICKY HEADER
-------------------------------------------*/
// Function for clone an element for sticky menu
function cloneNavForSticyMenu($ele, $newElmClass) {
$ele.addClass('original').clone().insertAfter($ele).addClass($newElmClass).removeClass('original');
}
// clone home style 1 navigation for sticky menu
if ($('.site-header .navigation.sticky-menu-on').length) {
cloneNavForSticyMenu($('.site-header .navigation.sticky-menu-on'), "sticky-header");
}
// Function for sticky menu
function stickIt($stickyClass, $toggleClass) {
if ($(window).scrollTop() >= 300) {
var orgElement = $(".original");
var coordsOrgElement = orgElement.offset();
var leftOrgElement = coordsOrgElement.left;
var widthOrgElement = orgElement.css("width");
$stickyClass.addClass($toggleClass);
$stickyClass.css({
"width": widthOrgElement
}).show();
$(".original").css({
"visibility": "hidden"
});
} else {
$(".original").css({
"visibility": "visible"
});
$stickyClass.removeClass($toggleClass);
}
}
/*------------------------------------------
= BACK TO TOP BTN SETTING
-------------------------------------------*/
$("body").append("<a href='#' class='back-to-top'><i class='ti-angle-up'></i></a>");
function toggleBackToTopBtn() {
var amountScrolled = 1000;
if ($(window).scrollTop() > amountScrolled) {
$("a.back-to-top").fadeIn("slow");
} else {
$("a.back-to-top").fadeOut("slow");
}
}
$(".back-to-top").on("click", function() {
$("html,body").animate({
scrollTop: 0
}, 700);
return false;
})
/*------------------------------------------
= COUNTDOWN CLOCK
-------------------------------------------*/
if ($("#clock").length) {
var weddingDate = $( '#clock' ).data('date');
$('#clock').countdown( weddingDate, function(event) {
var $this = $(this).html( event.strftime(''
+ '<div class="box"><div class="date">%D</div> <span>Days</span> </div>'
+ '<div class="box"><div class="date">%H</div> <span>Hours</span> </div>'
+ '<div class="box"><div class="date">%M</div> <span>Mins</span> </div>'
+ '<div class="box"><div class="date">%S</div> <span>Secs</span> </div>'));
});
}
/*================================
Gift-carousel
==================================*/
function gift_carousel() {
var owl = $(".Gift-carousel");
owl.owlCarousel({
loop: true,
margin: 0,
navText: false,
nav: false,
items: 5,
smartSpeed: 1000,
dots: false,
autoplay: true,
autoplayTimeout: 3000,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
760: {
items: 3
},
1080: {
items: 4
}
}
});
}
gift_carousel();
/*================================
Gallery Masonary
==================================*/
$('#container').imagesLoaded(function() {
// filter items on button click
$('.fortfolio-filter').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// init Isotope
var $grid = $('.portfolio-masonary').isotope({
itemSelector: '.prt-grid',
percentPosition: true,
masonry: {
// use outer width of grid-sizer for columnWidth
columnWidth: '.prt-grid',
}
});
});
$('.fortfolio-filter button').on('click', function(event) {
$(this).siblings('.active').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
/*================================
Magnific Popup
==================================*/
$('.expand-img').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.expand-video').magnificPopup({
type: 'iframe',
gallery: {
enabled: true
}
});
$('.video-btn').magnificPopup({
type: 'iframe',
gallery: {
enabled: true
}
});
/*================================
Smoth Scroll
==================================*/
function smoothScrolling($scrollLinks, $topOffset) {
var links = $scrollLinks;
var topGap = $topOffset;
links.on("click", function() {
if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) +"]");
if (target.length) {
$("html, body").animate({
scrollTop: target.offset().top - topGap
}, 1000, "easeInOutExpo");
return false;
}
}
return false;
});
}
/*------------------------------------------
= VIDEO BACKGROUND
-------------------------------------------*/
if ($("#video-background").length) {
$('#video-background').YTPlayer({
showControls: false,
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 1,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
}
});
}
/*------------------------------------------
= POST SLIDER
-------------------------------------------*/
if($(".post-slider".length)) {
$(".post-slider").owlCarousel({
mouseDrag: false,
smartSpeed: 500,
margin: 30,
loop:true,
nav: true,
navText: ['<i class="ti-angle-left"></i>','<i class="ti-angle-right"></i>'],
dots: false,
items: 1
});
}
/*------------------------------------------
= Header search toggle
-------------------------------------------*/
if($(".site-header .search-quote").length) {
var searchToggleBtn = $(".search-quote .search");
var searchContent = $(".search-quote .search > div");
var body = $("body");
searchToggleBtn.on("click", function(e) {
searchContent.toggleClass("search-open");
e.stopPropagation();
});
body.on("click", function() {
searchContent.removeClass("search-open");
}).find(searchContent).on("click", function(e) {
e.stopPropagation();
});
}
/*===================================
Particleground
=====================================*/
if ($(".particleground").length) {
$('.particleground').particleground({
dotColor: '#999999',
lineColor: '#999999',
particleRadius:5,
lineWidth:2,
curvedLines:true,
proximity:20,
parallaxMultiplier:10,
});
}
/*===================================
WHEN DOCUMENT LOADING
=====================================*/
$(window).on('load', function() {
pageLoader();
toggleMobileNavigation();
smallNavFunctionality();
smoothScrolling($("#navbar > ul > li > a[href^='#']"), $(".site-header .navigation").innerHeight());
smoothScrolling($(".go-rsvp-area"), $(".site-header .navigation").innerHeight());
smoothScrolling($(".welcome-content .btn a"), $("#rsvp").innerHeight());
});
/*------------------------------------------
= POPUP YOUTUBE, VIMEO, GMAPS
-------------------------------------------*/
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
/*==========================================================================
WHEN WINDOW SCROLL
==========================================================================*/
$(window).on("scroll", function() {
if ($(".site-header .sticky-menu-on").length) {
stickIt($(".sticky-header"), "sticky-on", $(".site-header .navigation.sticky-menu-on").offset().top);
}
toggleBackToTopBtn();
});
/*==========================================================================
WHEN WINDOW RESIZE
==========================================================================*/
$(window).on("resize", function() {
toggleClassForSmallNav();
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function() {
smallNavFunctionality();
}, 200));
});
$('.wp-block-search .wp-block-search__button').text('');
$('.wp-block-search .wp-block-search__button').append('<i class="ti-search"></i>');
$('.blog-sidebar .wp-block-search .wp-block-search__label').text('');
$('.blog-sidebar .wp-block-search .wp-block-search__label').append('<h2>Search</h2>');
})(window.jQuery);