krautworld-website_elizabethgymnasium/assets/js/main.js

/*
 kabi.tk
*/

(function($) {

	var	$window = $(window),
		$document = $(document),
		$body = $('body'),
		$wrapper = $('#wrapper'),
		$footer = $('#footer'),
		$panels = $wrapper.children('.panel'),
		$animatedLinks = $('.actions.animated a'),
		$animatedLink = null;

	// Breakpoints.
		breakpoints({
			xlarge:   [ '1281px',  '1680px' ],
			large:    [ '981px',   '1280px' ],
			medium:   [ '737px',   '980px'  ],
			small:    [ '481px',   '736px'  ],
			xsmall:   [ '361px',   '480px'  ],
			xxsmall:  [ null,      '360px'  ]
		});

	// Play initial animations on page load.
		$window.on('load', function() {
			window.setTimeout(function() {
				$body.removeClass('is-preload-0');

				window.setTimeout(function() {
					$body.removeClass('is-preload-1');
				}, 1500);
			}, 100);
		});

	// Animated links.
		$animatedLinks
			.on('click', function(event) {

				var href = $(this).attr('href');

				// Not a panel link? Bail.
					if (href.charAt(0) != '#'
					||	(href.length > 1 && $panels.filter(href).length == 0))
						return;

				// Prevent default.
					event.preventDefault();
					event.stopPropagation();

				// Change panels.
					window.location.hash = '';
					window.location.hash = href;

				// Set animated link.
					$animatedLink = $(this);

			});

	// Panels.
		var locked = true;

		// Fix images.
			$panels.each(function() {

				var	$this = $(this),
					$image = $this.children('.image'),
					$img = $image.find('img'),
					position = $img.data('position');

				// Set background.
					$image.css('background-image', 'url(' + $img.attr('src') + ')');

				// Set position (if set).
					if (position)
						$image.css('background-position', position);

				// Hide original.
					$img.hide();

			});

		// Unlock after a delay.
			window.setTimeout(function() {
				locked = false;
			}, 1250);

		// Hashchange event.
			$window.on('hashchange', function(event) {

				var $ul,
					delay = 0,
					$panel;

				// Get panel.
					if (window.location.hash && window.location.hash != '#')
						$panel = $(window.location.hash);
					else
						$panel = $panels.first();

				// Prevent default.
					event.preventDefault();
					event.stopPropagation();

				// Locked? Bail.
					if (locked)
						return;

				// Lock.
					locked = true;

				// Animated link?
 					if ($animatedLink) {

 						$ul = $animatedLink.parents('ul');

						// Activate.
							$animatedLink.addClass('active');

						// Set delay.
							delay = 250;

					}

				// Delay.
					window.setTimeout(function() {

						// Deactivate all panels.
							$panels.addClass('inactive');

						// Deactivate footer.
							$footer.addClass('inactive');

						// Delay.
							window.setTimeout(function() {

								// Hide all panels.
									$panels.hide();

								// Show target panel.
									$panel.show();

								// Reset scroll.
									$document.scrollTop(0);

								// Delay.
									window.setTimeout(function() {

										// Activate target panel.
											$panel.removeClass('inactive');

										// Animated link?
											if ($animatedLink) {

												// Deactivate.
													$animatedLink.removeClass('active');

												// Clear.
													$animatedLink = null;

											}

										// Unlock.
											locked = false;

										// IE: Refresh.
											$window.triggerHandler('--refresh');

										window.setTimeout(function() {

											// Activate footer.
												$footer.removeClass('inactive');

										}, 250);

									}, 100);

							}, 350);

					}, delay);

			});

		// Initialize.
			(function() {

				var $panel;

				// Get panel.
					if (window.location.hash && window.location.hash != '#')
						$panel = $(window.location.hash);
					else
						$panel = $panels.first();

				// Deactivate + hide all but initial panel.
					$panels.not($panel)
						.addClass('inactive')
						.hide();

			})();

	// IE: Fixes.
		if (browser.name == 'ie') {

			// Layout fixes.
				$window.on('--refresh', function() {

					// Fix min-height/flexbox.
						$wrapper.css('height', 'auto');

						window.setTimeout(function() {

							var h = $wrapper.height(),
								wh = $window.height();

							if (h < wh)
								$wrapper.css('height', '100vh');

						}, 0);

				});

				$window.on('load', function() {
					$window.triggerHandler('--refresh');
				});

			// Disable animated links.
				$('.actions.animated').removeClass('animated');

		}

})(jQuery);