netoik-home/front/assets/js/scripts.js

/*!
* Start Bootstrap - Freelancer v7.0.5 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
// 

window.addEventListener('load', _ => {

	// Navbar shrink function
	let navbarShrink = function () {
		const headerCollapsible = document.body.querySelector('#mainHeader');
		if (!headerCollapsible) {
			return;
		}
		if (window.scrollY === 0) {
			headerCollapsible.classList.remove('shrink');
		} else {
			headerCollapsible.classList.add('shrink');
		}
	};

	// Display dynamic elements
	if (window.scrollY === 0) {
		document.body.querySelector(".triangle-left").classList.add("fallen");
		document.body.querySelector(".navbar-brand").classList.add("fallen");
		window.setTimeout(_ => document.body.querySelector(".triangle-right").classList.add("fallen"), 500);
		window.setTimeout(_ => document.body.querySelector(".navbar-toggler").classList.add("fallen"), 500);
		window.setTimeout(_ => document.body.querySelector(".navbar-collapse").classList.add("fallen"), 500);
		window.setTimeout(_ => document.body.querySelector(".masthead-avatar").classList.add("fallen"), 1000);
		window.setTimeout(_ => document.body.querySelector(".masthead-subheading").classList.add("fallen"), 1000);
		window.setTimeout(_ => document.body.querySelector(".masthead-heading").classList.add("fallen"), 1500);
	} else {
		document.body.querySelector(".triangle-left").classList.add("fallen");
		document.body.querySelector(".triangle-right").classList.add("fallen");
		document.body.querySelector(".navbar-brand").classList.add("fallen");
		document.body.querySelector(".navbar-toggler").classList.add("fallen");
		document.body.querySelector(".navbar-collapse").classList.add("fallen");
		document.body.querySelector(".masthead-avatar").classList.add("fallen");
		document.body.querySelector(".masthead-heading").classList.add("fallen");
		document.body.querySelector(".masthead-subheading").classList.add("fallen");
	}

	// Shrink the navbar
	navbarShrink();

	// Shrink the navbar when page is scrolled
	document.addEventListener('scroll', navbarShrink);

	// Activate Bootstrap scrollspy on the main nav element
	const mainNav = document.body.querySelector('#mainNav');
	if (mainNav) {
		new bootstrap.ScrollSpy(document.body, {
			target: '#mainNav',
			offset: 72,
		});
	}

	// Collapse responsive navbar when toggler is visible
	const navbarToggler = document.body.querySelector('.navbar-toggler');
	const navbarResponsive = document.querySelector("#navbarResponsive");
	const responsiveNavItems = [].slice.call(
		document.querySelectorAll('#navbarResponsive .nav-link')
	);
	responsiveNavItems.map(function (responsiveNavItem) {
		responsiveNavItem.addEventListener('click', () => {
			if (window.getComputedStyle(navbarToggler).display !== 'none') {
				navbarToggler.click();
			}
		});
	});
	window.addEventListener("click", _ => {
		if (navbarResponsive.classList.contains("show")) {
			new bootstrap.Collapse(navbarResponsive, true);
		}
	});

	// Set min-height for each grid items
	const gridItems = [].slice.call(
		document.querySelectorAll(".grid-item")
	);
	gridItems.map(function(gridItem) {
		gridItem.style.minHeight = gridItem.clientHeight + "px";
	});

	// Handle contact submit
	document.getElementById("contactForm").addEventListener("submit", event => {
		let form = document.querySelector("#contactForm");
		event.preventDefault();
		event.stopPropagation();

		// Do not submit form if already submitted
		if (!$("#submitSuccessMessage").hasClass("d-none")) {
			return;
		}

		if (form.checkValidity()) {
			$.ajax({
				accepts: {
					json: "application/json"
				},
				contentType: "application/json",
				data: JSON.stringify({
					name: $("#name").val(),
					email: $("#email").val(),
					phone: $("#phone").val(),
					company: $("#company").val(),
					message: $("#message").val(),
					captchaId: $("#captchaId").val(),
					captchaDigits: $("#captchaDigits").val()
				}),
				dataType: "json",
				method: "POST",
				url: "/api/contact/send"
			}).done(
				_ => {
					$("#captchaDigits").removeClass("is-invalid");
					$("#submitSuccessMessage").removeClass("d-none");
					$("#submitErrorMessage").addClass("d-none");
					$("#submitButton").prop("disabled", true);
				}
			).fail(
				xhr => {
					if (xhr.status === 418) {
						form.classList.remove("was-validated");
						$("#captchaDigits").addClass("is-invalid");
						generateCaptcha();
					} else if (xhr.status === 500) {
						$("#captchaDigits").removeClass("is-invalid");
						$("#submitSuccessMessage").addClass("d-none");
						$("#submitErrorMessage").removeClass("d-none");
					}
				}
			);
		}
		form.classList.add("was-validated");
	});

	let generateCaptcha = function() {
		$.ajax({
			accepts: {
				json: "application/json"
			},
			contentType: "application/json",
			dataType: "json",
			method: "POST",
			url: "/api/captcha/new"
		}).done(data => {
			$("#captchaImage").attr("src", "/assets/img/captcha/"+data.id+".png");
			$("#captchaId").val(data.id);
		}).fail(_ => {
			$("#captchaImage").attr("src", "/assets/img/captcha/unavailable.png");
			$("#captchaId").val();
		});
	}

	generateCaptcha();
	$("#captchaReload").on("click", generateCaptcha);

	$("#year").text(new Date().getFullYear());

});