Javascript again

* Added babel to get to use ES6
 * restructure for head srcipt
 * general work on javascript files

source/code/hippie/functions.js

@@ -1,6 +1,6 @@
-'use strict';
-
+// This is called everytime
 function setup() {
+	'use strict';
 	console.info('\n', hippie.brand, '\n\n');
 	if (debugOn) {
 		console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
@@ -14,6 +14,9 @@ function setup() {
 // MODULE Scroll navigation
 function HippieScroll($el) {
 	'use strict';
+	// this.$el = $el;
+	// console.log('Elements:', $el, this.$el);
+	
 	// Toggle display on scroll position
 	// console.log('Scroll object added');
 	this.check = function() {
@@ -32,7 +35,7 @@ function HippieScroll($el) {
 			}
 			initLeft = false;
 		}
-	}
+	};
 	// Add events to navigation elements
 	$('.js_scrolltop').click(function(event) {
 		event.preventDefault();
@@ -61,29 +64,30 @@ function HippieScroll($el) {
 // }
 
 // 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();
+// 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() {
+	'use strict';
 	$('.nav a').click(function() {
 		//Toggle Class
 		$(".active").removeClass("active");

source/screens/demo.njk

@@ -42,7 +42,7 @@
 
 {% block script %}
 {{ super() }}
-<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
+<script src="./js/{{hippie.jsFile}}.min.js"></script>
 <script>
 // Page specific
 // ------------------------------------------------------------------------------

source/screens/demo/intro.njk

@@ -589,6 +589,7 @@
 // ------------------------------------------------------------------------------
 assetsLoaded = true;
 logPerf('Assets loaded.');
+// Create instance of object made by contructor function
 var scrollUi = new HippieScroll($('.js_scrolltop'));
 
 $(document).ready(function() {

source/screens/demo/tests.njk

@@ -21,15 +21,27 @@
 {% endblock %}
 
 {% block body %}
+<h2>Caps Lock</h2>
+<div id="capsCheck">
+	<input type="password" name="txtPassword" onkeypress="capLock(event)" />
+	<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
+	<form action="">
+		<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
+	</form>
+</div>
 
-<input type="password" name="txtPassword" onkeypress="capLock(event)" />
-<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
-<form action="">
-	<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
-</form>
-
-<p>Navigation</p>
+<h2>Navigation</h2>
 {{ nav.main(data.demoadditionallinks, 'Tests') }}
+
+<div id="divGame">
+	<h2>Number Game</h2>
+	<p class="guesses"></p>
+	<p class="lastResult"></p>
+	<p class="lowOrHi"></p>
+	<label for="guessField">Guess</label>
+	<input type="text" id="guessField" class="guessField">
+	<input type="submit" value="Submit guess" class="guessSubmit">
+</div>
 {% endblock %}
 
 {% block script %}
@@ -38,10 +50,42 @@
 <script>
 // Page specific
 // ------------------------------------------------------------------------------
+assetsLoaded = true;
+logPerf('Assets loaded.');
+
 $( document ).ready(function() {
-	console.log('HIPPIE Tests');
+	logPerf('JQ document ready event fired.');
+
+	let ranNum = Math.floor(Math.random() * 100) + 1;
+
+	const guesses = $('.guesses');
+	const lastResult = $('.lastResult');
+	const lowOrHi = $('.lowOrHi');
+
+	const guessField = $('.guessField');
+	const guessSubmit = $('.guessSubmit');
+
+	let guessCount = 1;
+	let resetButton;
+
+	function checkGuess() {
+		console.log('Random:', ranNum);
+		let userGuess = Number(guessField.value);
+		if (guessCount === 1) {
+			// guesses.get(0).textContent = 'Previous guesses: ';
+			guesses.html('Previous guesses: ');
+		}
+		// guesses[0].textContent += userGuess + ', ';
+		guesses.get(0).textContent += userGuess + ', ';
+		// var g = guesses.html();
+		// guesses.html(g += userGuess + ', ');
+
+	}
+
+	// checkGuess();
 
 });
+
 function capLock(e) {
 	kc = e.keyCode?e.keyCode:e.which;
 	sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
@@ -89,6 +133,7 @@ function capsDetect() {
 		}
 	});
 }
+
 capsDetect();
 </script>
 {% endblock %}

source/templates/demo/_default.njk

@@ -11,6 +11,13 @@
 	{% block meta %}{% endblock %}
 
 	{% include "hippie/partials/_head_script.njk" %}
+	<script>
+	debugOn = true;
+	document.addEventListener('DOMContentLoaded', function() {
+		logPerf('Document \'DOMContentLoaded\' event fired.');
+	});
+	logPerf('On HEAD, starting...');
+	</script>
 
 	{% include "demo/partials/_links.njk" %}
 	{% block links %}

source/templates/demo/_extended.njk

@@ -11,6 +11,13 @@
 	{% block meta %}{% endblock %}
 
 	{% include "hippie/partials/_head_script.njk" %}
+	<script>
+	debugOn = true;
+	document.addEventListener('DOMContentLoaded', function() {
+		logPerf('Document \'DOMContentLoaded\' event fired.');
+	});
+	logPerf('On HEAD, starting...');
+	</script>
 
 	{% include "demo/partials/_links.njk" %}
 	{% block links %}

source/templates/hippie/partials/_head_script.njk

@@ -1,7 +1,7 @@
 <!-- head.script.partial -->
 <script>
 //Entry script at page init
-var debugOn = true;
+var debugOn = false;
 var debugOnScreen = true;
 var assetsLoaded = false;
 
@@ -51,8 +51,4 @@ function logPerf(msg) {
 		}
 	}
 }
-document.addEventListener('DOMContentLoaded', function() {
-	logPerf('Document \'DOMContentLoaded\' event fired.');
-});
-logPerf('On HEAD, starting...');
 </script>