splitted up stylesheet and added lots of scaffolding to it. Style needs working.

[theme-danix.xyz.git] / static / js / main.js

/*\r
	Forty by HTML5 UP\r
	html5up.net | @ajlkn\r
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
*/\r
\r
(function($) {\r
\r
	var	$window = $(window),\r
		$body = $('body'),\r
		$wrapper = $('#wrapper'),\r
		$header = $('#header'),\r
		$banner = $('#banner');\r
\r
	// Breakpoints.\r
		breakpoints({\r
			xlarge:    ['1281px',   '1680px'   ],\r
			large:     ['981px',    '1280px'   ],\r
			medium:    ['737px',    '980px'    ],\r
			small:     ['481px',    '736px'    ],\r
			xsmall:    ['361px',    '480px'    ],\r
			xxsmall:   [null,       '360px'    ]\r
		});\r
\r
	/**\r
	 * Applies parallax scrolling to an element's background image.\r
	 * @return {jQuery} jQuery object.\r
	 */\r
	$.fn._parallax = (browser.name == 'ie' || browser.name == 'edge' || browser.mobile) ? function() { return $(this) } : function(intensity) {\r
\r
		var	$window = $(window),\r
			$this = $(this);\r
\r
		if (this.length == 0 || intensity === 0)\r
			return $this;\r
\r
		if (this.length > 1) {\r
\r
			for (var i=0; i < this.length; i++)\r
				$(this[i])._parallax(intensity);\r
\r
			return $this;\r
\r
		}\r
\r
		if (!intensity)\r
			intensity = 0.25;\r
\r
		$this.each(function() {\r
\r
			var $t = $(this),\r
				on, off;\r
\r
			on = function() {\r
\r
				$t.css('background-position', 'center 100%, center 100%, center 0px');\r
\r
				$window\r
					.on('scroll._parallax', function() {\r
\r
						var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);\r
\r
						$t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');\r
\r
					});\r
\r
			};\r
\r
			off = function() {\r
\r
				$t\r
					.css('background-position', '');\r
\r
				$window\r
					.off('scroll._parallax');\r
\r
			};\r
\r
			breakpoints.on('<=medium', off);\r
			breakpoints.on('>medium', on);\r
\r
		});\r
\r
		$window\r
			.off('load._parallax resize._parallax')\r
			.on('load._parallax resize._parallax', function() {\r
				$window.trigger('scroll');\r
			});\r
\r
		return $(this);\r
\r
	};\r
\r
	// Play initial animations on page load.\r
		$window.on('load', function() {\r
			window.setTimeout(function() {\r
				$body.removeClass('is-preload');\r
			}, 100);\r
		});\r
\r
	// Clear transitioning state on unload/hide.\r
		$window.on('unload pagehide', function() {\r
			window.setTimeout(function() {\r
				$('.is-transitioning').removeClass('is-transitioning');\r
			}, 250);\r
		});\r
\r
	// Fix: Enable IE-only tweaks.\r
		if (browser.name == 'ie' || browser.name == 'edge')\r
			$body.addClass('is-ie');\r
\r
	// Scrolly.\r
		$('.scrolly').scrolly({\r
			offset: function() {\r
				return $header.height() - 2;\r
			}\r
		});\r
\r
	// Tiles.\r
		var $tiles = $('.tiles > article');\r
\r
		$tiles.each(function() {\r
\r
			var $this = $(this),\r
				$image = $this.find('.image'), $img = $image.find('img'),\r
				$link = $this.find('.link'),\r
				x;\r
\r
			// Image.\r
\r
				// Set image.\r
					$this.css('background-image', 'url(' + $img.attr('src') + ')');\r
\r
				// Set position.\r
					if (x = $img.data('position'))\r
						$image.css('background-position', x);\r
\r
				// Hide original.\r
					$image.hide();\r
\r
			// Link.\r
				if ($link.length > 0) {\r
\r
					$x = $link.clone()\r
						.text('')\r
						.addClass('primary')\r
						.appendTo($this);\r
\r
					$link = $link.add($x);\r
\r
					$link.on('click', function(event) {\r
\r
						var href = $link.attr('href');\r
\r
						// Prevent default.\r
							event.stopPropagation();\r
							event.preventDefault();\r
\r
						// Target blank?\r
							if ($link.attr('target') == '_blank') {\r
\r
								// Open in new tab.\r
									window.open(href);\r
\r
							}\r
\r
						// Otherwise ...\r
							else {\r
\r
								// Start transitioning.\r
									$this.addClass('is-transitioning');\r
									$wrapper.addClass('is-transitioning');\r
\r
								// Redirect.\r
									window.setTimeout(function() {\r
										location.href = href;\r
									}, 500);\r
\r
							}\r
\r
					});\r
\r
				}\r
\r
		});\r
\r
	// Header.\r
		if ($banner.length > 0\r
		&&	$header.hasClass('alt')) {\r
\r
			$window.on('resize', function() {\r
				$window.trigger('scroll');\r
			});\r
\r
			$window.on('load', function() {\r
\r
				$banner.scrollex({\r
					bottom:		$header.height() + 10,\r
					terminate:	function() { $header.removeClass('alt'); },\r
					enter:		function() { $header.addClass('alt'); },\r
					leave:		function() { $header.removeClass('alt'); $header.addClass('reveal'); }\r
				});\r
\r
				window.setTimeout(function() {\r
					$window.triggerHandler('scroll');\r
				}, 100);\r
\r
			});\r
\r
		}\r
\r
	// Banner.\r
		$banner.each(function() {\r
\r
			var $this = $(this),\r
				$image = $this.find('.image'), $img = $image.find('img');\r
\r
			// Parallax.\r
				$this._parallax(0.275);\r
\r
			// Image.\r
				if ($image.length > 0) {\r
\r
					// Set image.\r
						$this.css('background-image', 'url(' + $img.attr('src') + ')');\r
\r
					// Hide original.\r
						$image.hide();\r
\r
				}\r
\r
		});\r
\r
	// Menu.\r
		var $menu = $('#menu'),\r
			$menuInner;\r
\r
		$menu.wrapInner('<div class="inner"></div>');\r
		$menuInner = $menu.children('.inner');\r
		$menu._locked = false;\r
\r
		$menu._lock = function() {\r
\r
			if ($menu._locked)\r
				return false;\r
\r
			$menu._locked = true;\r
\r
			window.setTimeout(function() {\r
				$menu._locked = false;\r
			}, 350);\r
\r
			return true;\r
\r
		};\r
\r
		$menu._show = function() {\r
\r
			if ($menu._lock())\r
				$body.addClass('is-menu-visible');\r
\r
		};\r
\r
		$menu._hide = function() {\r
\r
			if ($menu._lock())\r
				$body.removeClass('is-menu-visible');\r
\r
		};\r
\r
		$menu._toggle = function() {\r
\r
			if ($menu._lock())\r
				$body.toggleClass('is-menu-visible');\r
\r
		};\r
\r
		$menuInner\r
			.on('click', function(event) {\r
				event.stopPropagation();\r
			})\r
			.on('click', 'a', function(event) {\r
\r
				var href = $(this).attr('href');\r
\r
				event.preventDefault();\r
				event.stopPropagation();\r
\r
				// Hide.\r
					$menu._hide();\r
\r
				// Redirect.\r
					window.setTimeout(function() {\r
						window.location.href = href;\r
					}, 250);\r
\r
			});\r
\r
		$menu\r
			.appendTo($body)\r
			.on('click', function(event) {\r
\r
				event.stopPropagation();\r
				event.preventDefault();\r
\r
				$body.removeClass('is-menu-visible');\r
\r
			})\r
			.append('<a class="close" href="#menu">Close</a>');\r
\r
		$body\r
			.on('click', 'a[href="#menu"]', function(event) {\r
\r
				event.stopPropagation();\r
				event.preventDefault();\r
\r
				// Toggle.\r
					$menu._toggle();\r
\r
			})\r
			.on('click', function(event) {\r
\r
				// Hide.\r
					$menu._hide();\r
\r
			})\r
			.on('keydown', function(event) {\r
\r
				// Hide on escape.\r
					if (event.keyCode == 27)\r
						$menu._hide();\r
\r
			});\r
\r
})(jQuery);