demo.2

- restructured input files
- sorted gulpfile and separated old stuff
- next up are node module updates

source/code/hippie/functions.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function setup() {
+	if($('#js_tph').length && full_view_hover) {
+		// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
+		$('#js_tph').addClass("hover_full_view_change");
+	}
+}
+
+// get document coordinates of the element
+function getCoords(elem) {
+  let box = elem.getBoundingClientRect();
+
+  return {
+    top: box.top + pageYOffset,
+    left: box.left + pageXOffset
+  };
+}
+
+// https://stackoverflow.com/a/488073/1444149
+function Utils() {
+
+}
+
+Utils.prototype = {
+    constructor: Utils,
+    isElementInView: function (element, fullyInView) {
+        var pageTop = $(window).scrollTop();
+        var pageBottom = pageTop + $(window).height();
+        var elementTop = $(element).offset().top;
+        var elementBottom = elementTop + $(element).height();
+
+        if (fullyInView === true) {
+            return ((pageTop < elementTop) && (pageBottom > elementBottom));
+        } else {
+            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+        }
+    }
+};
+
+var Utils = new Utils();
+
+// TEST
+
+function scrollNav() {
+	$('.nav a').click(function(){
+		//Toggle Class
+		$(".active").removeClass("active");
+		$(this).closest('li').addClass("active");
+		var theClass = $(this).attr("class");
+		$('.'+theClass).parent('li').addClass('active');
+		//Animate
+		$('html, body').stop().animate({
+				scrollTop: $( $(this).attr('href') ).offset().top - 160
+		}, 400);
+		return false;
+	});
+	$('.scrollTop a').scrollTop();
+}

source/code/hippie/global.js

@@ -0,0 +1,148 @@
+"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
+	$(".exp_help_btn").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) {
+		console.log('scroll to the top');
+		event.preventDefault();
+		// $('body').scrollTop();
+		$('body').animate({scrollTop: 0}, basic_ease, function() {
+			 console.log('arrived at top');
+		});
+	});
+	$('#js_scrolldown').click(function(event) {
+		console.log('scroll down');
+		event.preventDefault();
+		$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
+			 console.log('arrived at bottom');
+		});
+	});
+
+
+
+	$( "#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 h = scroll_y_margin;
+	// var demo_margin = $('.header__fix');
+	if (doc_pos_y > h) {
+		$('#js_scrolltop').parent().removeClass('magic');
+	} else {
+		$('#js_scrolltop').parent().addClass('magic');
+	}
+
+
+
+});

source/code/hippie/variables.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+var full_view_hover = true;
+
+var doc_pos_y = 0;
+var basic_ease = 600;
+var scroll_y_margin = h;
+
+
+// TEST
+// var fixed_containers = [];