weddingapiPage/js/main.js

;(function () {
	
	'use strict';

	var mobileMenuOutsideClick = function() {

		$(document).click(function (e) {
	    var container = $("#fh5co-offcanvas, .js-fh5co-nav-toggle");
	    if (!container.is(e.target) && container.has(e.target).length === 0) {

	    	if ( $('body').hasClass('offcanvas') ) {

    			$('body').removeClass('offcanvas');
    			$('.js-fh5co-nav-toggle').removeClass('active');
	    	}
	    }
		});

	};


	var offcanvasMenu = function() {

		$('#page').prepend('<div id="fh5co-offcanvas" />');
		$('#page').prepend('<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle fh5co-nav-white"><i></i></a>');
		var clone1 = $('.menu-1 > ul').clone();
		$('#fh5co-offcanvas').append(clone1);
		var clone2 = $('.menu-2 > ul').clone();
		$('#fh5co-offcanvas').append(clone2);

		$('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown');
		$('#fh5co-offcanvas')
			.find('li')
			.removeClass('has-dropdown');

		// Hover dropdown menu on mobile
		$('.offcanvas-has-dropdown').mouseenter(function(){
			var $this = $(this);

			$this
				.addClass('active')
				.find('ul')
				.slideDown(500, 'easeOutExpo');				
		}).mouseleave(function(){

			var $this = $(this);
			$this
				.removeClass('active')
				.find('ul')
				.slideUp(500, 'easeOutExpo');				
		});


		$(window).resize(function(){

			if ( $('body').hasClass('offcanvas') ) {

    			$('body').removeClass('offcanvas');
    			$('.js-fh5co-nav-toggle').removeClass('active');
				
	    	}
		});
	};


	var burgerMenu = function() {

		$('body').on('click', '.js-fh5co-nav-toggle', function(event){
			var $this = $(this);


			if ( $('body').hasClass('overflow offcanvas') ) {
				$('body').removeClass('overflow offcanvas');
			} else {
				$('body').addClass('overflow offcanvas');
			}
			$this.toggleClass('active');
			event.preventDefault();

		});
	};



	var contentWayPoint = function() {
		var i = 0;
		$('.animate-box').waypoint( function( direction ) {

			if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) {
				
				i++;

				$(this.element).addClass('item-animate');
				setTimeout(function(){

					$('body .animate-box.item-animate').each(function(k){
						var el = $(this);
						setTimeout( function () {
							var effect = el.data('animate-effect');
							if ( effect === 'fadeIn') {
								el.addClass('fadeIn animated-fast');
							} else if ( effect === 'fadeInLeft') {
								el.addClass('fadeInLeft animated-fast');
							} else if ( effect === 'fadeInRight') {
								el.addClass('fadeInRight animated-fast');
							} else {
								el.addClass('fadeInUp animated-fast');
							}

							el.removeClass('item-animate');
						},  k * 200, 'easeInOutExpo' );
					});
					
				}, 100);
				
			}

		} , { offset: '85%' } );
	};


	var dropdown = function() {

		$('.has-dropdown').mouseenter(function(){

			var $this = $(this);
			$this
				.find('.dropdown')
				.css('display', 'block')
				.addClass('animated-fast fadeInUpMenu');

		}).mouseleave(function(){
			var $this = $(this);

			$this
				.find('.dropdown')
				.css('display', 'none')
				.removeClass('animated-fast fadeInUpMenu');
		});

	};


	var testimonialCarousel = function(){
		var owl = $('.owl-carousel-fullwidth');
		owl.owlCarousel({
			items: 1,
			loop: true,
			margin: 0,
			responsiveClass: true,
			nav: false,
			dots: true,
			smartSpeed: 800,
			autoHeight: true,
		});
	};


	var goToTop = function() {

		$('.js-gotop').on('click', function(event){
			
			event.preventDefault();

			$('html, body').animate({
				scrollTop: $('html').offset().top
			}, 500, 'easeInOutExpo');
			
			return false;
		});

		$(window).scroll(function(){

			var $win = $(window);
			if ($win.scrollTop() > 200) {
				$('.js-top').addClass('active');
			} else {
				$('.js-top').removeClass('active');
			}

		});
	
	};

	var addField = function() {
		$('.js-addField').on('click', function(event){
			
			event.preventDefault();

			// Container <div> where dynamic content will be placed
			var container = document.getElementById("js-attentants");
			// Clear previous contents of the container
			// while (container.hasChildNodes()) {
			// 	container.removeChild(container.lastChild);
			// }
			//container.appendChild()

			// Append a node with a random text
			//container.appendChild(document.createTextNode("Member"));
			var outerDiv = document.createElement("div");
			outerDiv.style="padding-top: 20px;";

			var firstNameDiv = document.createElement("div");
			firstNameDiv.classList.add('col-md-6');
			firstNameDiv.classList.add('col-sm-6');
			var formGroupDiv = document.createElement("div");
			formGroupDiv.classList.add('form-group');
			firstNameDiv.appendChild(formGroupDiv);

			//Label
			var labelElement = document.createElement("label");
			labelElement.setAttribute("for","firstname");
			labelElement.classList.add('sr-only');
			labelElement.innerHTML = "Vorname";
			formGroupDiv.appendChild(labelElement);
			
			//Input
			var inputElement = document.createElement("input");
			inputElement.setAttribute("type","firstname");
			inputElement.classList.add('form-control');
			inputElement.setAttribute("id","firstname");
			inputElement.setAttribute("placeholder","Vorname");
			formGroupDiv.appendChild(inputElement);

			outerDiv.appendChild(firstNameDiv);
			

			var lastNameDiv = document.createElement("div");
			lastNameDiv.classList.add('col-md-6');
			lastNameDiv.classList.add('col-sm-6');
			var lastnameFormGroupDiv = document.createElement("div");
			lastnameFormGroupDiv.classList.add('form-group');
			lastNameDiv.appendChild(lastnameFormGroupDiv);

			//Label
			var lastNamelabelElement = document.createElement("label");
			lastNamelabelElement.setAttribute("for","lastname");
			lastNamelabelElement.classList.add('sr-only');
			lastNamelabelElement.innerHTML = "Nachname";
			lastnameFormGroupDiv.appendChild(lastNamelabelElement);

			//Input
			var firstNameInputElement = document.createElement("input");
			firstNameInputElement.setAttribute("type","lastname");
			firstNameInputElement.classList.add('form-control');
			firstNameInputElement.setAttribute("id","lastname");
			firstNameInputElement.setAttribute("placeholder","Nachname");
			lastnameFormGroupDiv.appendChild(firstNameInputElement);

			outerDiv.appendChild(lastNameDiv);	

			container.appendChild(outerDiv);

			return false;
		});
	}

	// Loading page
	var loaderPage = function() {
		$(".fh5co-loader").fadeOut("slow");
	};

	var counter = function() {
		$('.js-counter').countTo({
			 formatter: function (value, options) {
	      return value.toFixed(options.decimals);
	    },
		});
	};

	var counterWayPoint = function() {
		if ($('#fh5co-counter').length > 0 ) {
			$('#fh5co-counter').waypoint( function( direction ) {
										
				if( direction === 'down' && !$(this.element).hasClass('animated') ) {
					setTimeout( counter , 400);					
					$(this.element).addClass('animated');
				}
			} , { offset: '90%' } );
		}
	};

	// Parallax
	var parallax = function() {
		$(window).stellar({ horizontalScrolling: false });
	};

	
	$(function(){
		mobileMenuOutsideClick();
		parallax();
		offcanvasMenu();
		burgerMenu();
		contentWayPoint();
		dropdown();
		testimonialCarousel();
		goToTop();
		loaderPage();
		counter();
		counterWayPoint();
		addField();
	});


}());