now-in-github-bcb-website/static/js/home.js

var hamburger_menu = document.getElementById('mobile-hamburger-menu');
var mobile_menu = document.getElementById('mobile-nav-menu');

hamburger_menu.addEventListener('click', show_menu);

function show_menu() {
	'use strict';
	hamburger_menu.classList.toggle('active');
	document.body.classList.toggle('non-scrollable');
	mobile_menu.classList.toggle('show');
}

var desktop_navigation_menu_links = document.querySelectorAll('#desktop-navigation-menu ul li');

for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
	desktop_navigation_menu_links[i].addEventListener('click', changeActiveClass);
}

function changeActiveClass(e) {
	for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
		desktop_navigation_menu_links[i].classList.remove('active');
	}

	e.currentTarget.classList.add('active');
}

var page_header = document.getElementById('page-header');
var about_description_animate = document.querySelector('#about .description');
var about_image_animate = document.querySelector('#about figure');

window.addEventListener('scroll', page_scroll);
document.addEventListener('DOMContentLoaded', page_loaded);

function page_scroll() {
	'use strict';
	var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
	
	if (-120 + winScroll >= about_description_animate.offsetTop) {
		about_description_animate.classList.add('show');
		about_image_animate.classList.add('show');
	}
}

var home_image = document.querySelector('#home figure');
var home_description = document.querySelector('#home .description');
var temp_contact_info = document.querySelectorAll('.temp-contact-info ul li');

function page_loaded() {
	home_image.classList.remove('hide');
	home_description.classList.remove('hide');

	if ($(window).width() < 960) {
		$(document).on('click', 'a[href^="#"]', function (event) {
			event.preventDefault();
			
			$('html, body').animate({
				scrollTop: $($.attr(this, 'href')).offset().top - 780
			}, 500);
		});

		for (var i = 0; i < temp_contact_info.length; i++) {
			temp_contact_info[i].addEventListener('click', toggle_contact_info);
		}
	}
}

function toggle_contact_info(e) {
	
	for (var i = 0; i < temp_contact_info.length; i++) {
		temp_contact_info[i].classList.remove('active');
	}

	e.currentTarget.classList.add('active');
}

var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li');

for (var i = 0; i < mobile_nav_lists.length; i++) {
	mobile_nav_lists[i].addEventListener('click', hide_mobile_nav);
}


function hide_mobile_nav() {
	mobile_menu.classList.remove('show');
	hamburger_menu.classList.remove('active');
	document.body.classList.remove('non-scrollable');
}

// Native method of doing smooth scrolling
// document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
// 	anchor.addEventListener('click', function (e) {
// 	    e.preventDefault();
  
// 	    document.querySelector(this.getAttribute('href')).scrollIntoView({
// 		  behavior: 'smooth'
// 	    });
// 	});
// });

// Support for old Browsers.
$(document).on('click', 'a[href^="#"]', function (event) {
	event.preventDefault();
  
	$('html, body').animate({
	    scrollTop: $($.attr(this, 'href')).offset().top - 100
	}, 500);
});

var owl = $('.owl-service');
owl.owlCarousel({
	loop: true,
	margin: 0,
	autoplay: true,
	autoplayTimeout: 3000,
	autoplayHoverPause: true,
	responsiveClass: true,
	responsive: {
		0: {
			items: 1,
			stagePadding: 100,
		},
		600: {
			items: 1,
			stagePadding: 100,
		},
		1000: {
			items: 4
		}
	}
});

var service_carousel_Btn = $('.owl-service');
owl.owlCarousel();
$('#service-carousel-left-btn').click(function () {
    "use strict";
    service_carousel_Btn.trigger('next.owl.carousel', [300]);
});

$('#service-carousel-right-btn').click(function () {
    "use strict";
    service_carousel_Btn.trigger('prev.owl.carousel', [300]);
});

var owl = $('.owl-branches');
owl.owlCarousel({
	loop: true,
	margin: 0,
	autoplay: true,
	autoplayTimeout: 3000,
	autoplayHoverPause: true,
	responsiveClass: true,
	responsive: {
		0: {
			items: 1
		},
		600: {
			items: 1
		},
		1000: {
			items: 2,
			stagePadding: -10
		}
	}
});

var branches_carousel_Btn = $('.owl-branches');
owl.owlCarousel();
$('#branches-carousel-left-btn').click(function () {
    "use strict";
    branches_carousel_Btn.trigger('next.owl.carousel', [300]);
});

$('#branches-carousel-right-btn').click(function () {
    "use strict";
    branches_carousel_Btn.trigger('prev.owl.carousel', [300]);
});