hippie/source/code/hippie/global.js

"use strict";

// DOM ready
// ------------------------------------------------------------------------------
$( document ).ready(function() {

	// Setup
	// ------------------------------------------------------------------------------

	setup();



	// Modules
	// ------------------------------------------------------------------------------

	// Explanation module scripts
	var exp_mode = false;

	// Displays explanation popup
	$(".js_pop").hover(
		function() {
			var $this = $(this);

			// if($(this).attr("emmet")){
			//
			// }

			$(this).next(".exp_pop").show();
		}, function() {
			$(this).next(".exp_pop").hide();
		}
	).mousemove(
		function(ev) {
			$(this).next(".exp_pop").css({
				"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
				"left": ev.pageX + 8
				// "left": ev.pageX - $(this).offset().left + 8
			});
			// TODO - needs more love
			// console.log(ev.pageX);
		}
	);

	// WIP Activates layer with explanation elements
	// Besser ::after oder ::before benutzen
	$(".js_showmeta").click(function(e){
		var $wrap, $pop;

		if(exp_mode !== true){
			exp_mode = true;

			$(".js_pop").each(function(i, e){
				if($(this).css("position") === "static") {
					$(this).addClass("js_changed_pos");
					$(this).css("position", "relative");
				}

				$pop = $(this).next(".exp_pop").detach();
				$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
				$wrap.after($pop);
			});

		} else {
			$(".js_pop").each(function(i, e){
				$wrap = $(this).parent(".exp_wrap");
				$pop = $wrap.next(".exp_pop").detach();
				$wrap.find(".exp_marker_pop").remove();
				$(this).unwrap(".exp_wrap");
				$(this).after($pop);
				if($(this).hasClass("js_changed_pos")){
					$(this).css("position", "");
					if($(this).attr("style") === "") {
						$(this).removeAttr("style");
					}
					$(this).removeClass("js_changed_pos");
				}
			});

			exp_mode = false;

		}
		console.log("Explanation mode", exp_mode);
	});

	//	WIP Scroll to top
	$('.js_scrolltop').click(function(event) {
		event.preventDefault();
		console.log('scroll to the top');

		document.documentElement.scrollTop = document.body.scrollTop = 0;

		// var body = document.querySelector('body');
		// // get scroll position in px
		// console.log(body.scrollTop);
		// // set scroll position in px
		// body.scrollTop = 0;

		// $('body')[0].scrollTop = 0;
		// $('body').animate({scrollTop: 0}, basic_ease, function() {
		// 	 console.log('arrived at top');
		// });
	});
	$('.js_scrolldown').click(function(event) {
		event.preventDefault();
		var pos = Math.max(html_height, body_height) - view_height;
		console.log('scroll down to', pos);
		document.documentElement.scrollTop = pos;
	});



	$( "#gameIcon" ).click(function(event) {
		event.preventDefault();
		$( this ).clone().appendTo( "#gameDetail" );
		$( this ).siblings().clone().appendTo( "#gameDetail" );
		$( "#gameDetail" ).removeClass( "magic" );
	});

	var i = 0;
	$( ".pass-def dd" ).each(function() {
		$( this ).find( "li" ).each(function( index ) {
			if ( 0 === $( this ).children( "ul" ).length ) {
				//console.log(index, ":", $( this ).text());
				var tempContent = $( this ).html();
				//$( this ).html( "<span class=\"list-count\"></span>" );
				$( this ).html(tempContent + "<span class=\"list-count\">" + i + "</span>");
				i++;
			}
		});
	});



});



// Scroll
// ------------------------------------------------------------------------------
$( document ).scroll(function() {

	// Toggle navigation elements
	doc_pos_y = $( document ).scrollTop();
	// console.log(doc_pos_y);
	// var demo_margin = $('.header__fix');
	if (doc_pos_y > scroll_y_margin) {
		$('.js_scrolltop').parent().removeClass('magic');
	} else {
		$('.js_scrolltop').parent().addClass('magic');
	}



});