Javascript work

gulpfile.js

@@ -44,7 +44,16 @@ const input = {
   templates: 'source/templates',
   data: 'source/data/**/*.json',
   style: 'source/style/**/*.s+(a|c)ss',
-  code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.js', '!source/vendor/**/*'],
+  code: [
+    'source/code/hippie/variables.js',
+    'source/code/hippie/functions.js',
+    'source/code/hippie/global.js',
+    'source/code/variables.js',
+    'source/code/functions.js',
+    'source/code/global.js',
+    'source/code/**/*.js',
+    '!source/vendor/**/*'
+  ],
   fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
   art: {
     favicons: 'source/art/favicons/**/*.+(ico|png)',

source/code/hippie/functions.js

@@ -1,15 +1,55 @@
-"use strict";
+'use strict';
 
 function setup() {
-	console.log('\n', hippie.brand, '\n\n');
-	console.info('Debug information:\n\nHTML height is', htmlH, '\nBODY height is', bodyH, '\nVIEW height is', viewH);
-
+	console.info('\n', hippie.brand, '\n\n');
+	if (debugOn) {
+		console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
+	}
 	if ($('#js_tph').length && viewHover) {
 		// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
 		$('#js_tph').addClass("hover_full_view_change");
 	}
 }
 
+// MODULE Scroll navigation
+function HippieScroll($el) {
+	'use strict';
+	// Toggle display on scroll position
+	// console.log('Scroll object added');
+	this.check = function() {
+		// console.log('Scroll position checked');
+		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
+		if (hippie.screen.y > initY) {
+			if (!initLeft) {
+				$el.parent().removeClass('magic');
+				console.info('Initial viewport left');
+			}
+			initLeft = true;
+		} else {
+			if (initLeft) {
+				$el.parent().addClass('magic');
+				console.info('Initial viewport entered');
+			}
+			initLeft = false;
+		}
+	}
+	// Add events to navigation elements
+	$('.js_scrolltop').click(function(event) {
+		event.preventDefault();
+		$('html, body').animate({
+			scrollTop: 0
+		}, basicEase);
+		// console.log('Scrolled to top');
+	});
+	$('.js_scrolldown').click(function(event) {
+		event.preventDefault();
+		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		$('html').scrollTop(pos);
+		// document.documentElement.scrollTop = pos;
+		console.info('Scrolled down to', pos);
+	});
+}
+
 // get document coordinates of the element
 // function getCoords(elem) {
 // 	let box = elem.getBoundingClientRect();

source/code/hippie/global.js

@@ -5,7 +5,7 @@ setup();
 // DOM ready
 // -----------------------------------------------------------------------------
 $(document).ready(function() {
-	"use strict";
+	'use strict';
 
 	// logPerf('DOM ready.');
 
@@ -78,22 +78,6 @@ $(document).ready(function(){
 		console.log('Explanation mode', expMode);
 	});
 
-	//	WIP Scroll to top
-	$('.js_scrolltop').click(function(event){
-		event.preventDefault();
-		$('html, body').animate({
-			scrollTop: 0
-		}, basicEase);
-	});
-	$('.js_scrolldown').click(function(event){
-		event.preventDefault();
-		var pos = Math.max(htmlH, bodyH) - viewH;
-		document.documentElement.scrollTop = pos;
-		console.info('scrolled down to', pos);
-	});
-
-
-
 	$('#gameIcon').click(function(event) {
 		event.preventDefault();
 		$(this).clone().appendTo('#gameDetail');
@@ -101,26 +85,3 @@ $(document).ready(function(){
 		$('#gameDetail').removeClass('magic');
 	});
 });
-
-
-// Scroll
-// ------------------------------------------------------------------------------
-$( document ).scroll(function(){
-	"use strict";
-
-	// Toggle navigation elements
-	docPosY = $( document ).scrollTop();
-	if(docPosY > docInitY){
-		if(!docInitleft){
-			$('.js_scrolltop').parent().removeClass('magic');
-			console.info('Initial viewport left');
-		}
-		docInitleft = true;
-	} else {
-		if(docInitleft){
-			$('.js_scrolltop').parent().addClass('magic');
-			console.info('Initial viewport left');
-		}
-		docInitleft = false;
-	}
-});

source/code/hippie/variables.js

@@ -1,16 +1,20 @@
 var hippie = {
-  brand: "|-| | |^ |^ | [- "
+	brand: "|-| | |^ |^ | [- ",
+	screen: {
+		w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
+		vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
+		dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
+		y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
+		// hippie.screen.y: document.documentElement.scrollTop
+	},
+	body: {
+		w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
+		h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
+	}
 };
 
-var viewW = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
-var viewH = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
-var htmlH = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
-var bodyW = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
-var bodyH = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
-
-var docPosY = 0;
-var docInitleft = false;
-var docInitY = viewH;
+var initLeft = false;
+var initY = hippie.screen.vh;
 
 var viewHover = true;
 var basicEase = 600;

source/screens/demo.njk

@@ -1,4 +1,4 @@
-<!-- index.page -->
+<!-- index.screen -->
 {% set pageId = "index" %}
 {% set pageClass = "h_full_view" %}
 
@@ -43,10 +43,14 @@
 {% block script %}
 {{ super() }}
 <script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
-<script type="text/javascript">
+<script>
 // Page specific
 // ------------------------------------------------------------------------------
+assetsLoaded = true;
+logPerf('SCRIPT assets loaded.');
 $( document ).ready(function() {
+	logPerf('JQ document \'ready\' event fired.');
 });
+logPerf('Application ready.');
 </script>
 {% endblock %}

source/screens/demo/intro.njk

@@ -1,4 +1,4 @@
-<!-- intro.page -->
+<!-- intro.screen -->
 {% set pageId = "intro" %}
 
 {% extends "demo/_extended.njk" %}
@@ -209,7 +209,8 @@
 		<p>Neben den vielen speziellen Elementen gibt es auch ein Element, das keine vordefinierte Bedeutung hat. Es ist das <code>&lt;span&gt;</code> Element.<br>Es dient dazu ganz individuelle Auszeichnungen zu ermöglichen die eher optische Auswirkungen haben und eben keine inhaltlichen. Mit den Attributen <code>id</code> oder <code>class</code> werden dazu eigene Typen des Elements definiert. Diese Möglichkeit der Definition von individuellen Elementen ist ein Grundprinzip der Auszeichnungssprache <abbr title="Hypertext Markup Language" >HTML</abbr>.</p>
 		<p>Mit der Einführung von Absätzen wurde auch schon das <code>&lt;br&gt;</code> Element erwähnt und seitdem häufig benutzt. Es erzeugt einen Zeilenumbruch. Es wird dadurch kein neuer Absatz erstellt. Es dient auch nicht dazu optischen Abstand zu erzeugen, sondern innerhalb eines Absatzes den Text umzubrechen.</p>
 		<p>Eine besondere Form des Zeilenumbruchs kann mit <code>&lt;wbr&gt;</code> eingesetzt werden. Es stellt die Möglichkeit für einen Zeilenumbruch dar. Da das Format eines HTML-Dokumentes häufig nicht vorhersehbar ist, kann solch ein Element einen Umbruch erzeugen falls ein Wort zu lang für eine Textzeile sein sollte.</p>
-    <p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!</p>
+		<p>Und der Löwe brüllte "RRRR<wbr>rrrr<wbr>oooooooo<wbr>aaaa<wbr>AAAAAAAA<wbr>HHHH<wbr>hhhh<wbr>rrrrrrrrr"!
+		</p>
 		<p>Es kann auch innerhalb von vorformatierten Texten Zeilenumbrüche ermöglichen</p>
 		<h2>Änderungen</h2>
 		<p>Werden Texte geändert, können solche Änderungen sichtbar gemacht werden. Somit können sie besser nachvollzogen werden.<br>Zum Beispiel eine Ergänzung von Inhalt.</p>
@@ -231,8 +232,8 @@
 		<p>Die ist ein Bild. Es wird mit dem Element <code>&lt;img&gt;</code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
 		<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut <code>src</code> angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <code>&lt;source&gt;</code> und <code>&lt;picture&gt;</code> in Kombination verwendet werden.</p>
 		<picture>
-      <source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp">
-      <img src="../art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80">
+			<source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp"/>
+			<img src="../art/demo/flag_websafe_128x80.gif" alt="" width="128" height="80"/>
 		</picture>
 	</article>
 	<article>
@@ -583,10 +584,20 @@
 {% block script %}
 {{ super() }}
 <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
-<script type="text/javascript">
+<script>
 // Page specific
 // ------------------------------------------------------------------------------
+assetsLoaded = true;
+logPerf('Assets loaded.');
+var scrollUi = new HippieScroll($('.js_scrolltop'));
+
 $(document).ready(function() {
+	logPerf('JQ document ready event fired.');
 });
+
+$(document).scroll(function() {
+	scrollUi.check();
+});
+logPerf('Application ready.');
 </script>
 {% endblock %}

source/screens/demo/tests.njk

@@ -1,4 +1,4 @@
-<!-- tests.page -->
+<!-- tests.screen -->
 {% set pageId = "tests" %}
 {% set pageClass = "h_full_view" %}
 
@@ -35,7 +35,7 @@
 {% block script %}
 {{ super() }}
 <script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
-<script type="text/javascript">
+<script>
 // Page specific
 // ------------------------------------------------------------------------------
 $( document ).ready(function() {

source/templates/demo/_default.njk

@@ -23,6 +23,9 @@
 	{% block body %}{% endblock %}
 
 	{% block script %}
+	<script>
+	logPerf('Inline JS at bottom of BODY. Loading assets...');
+	</script>
 	<script
 	src="https://code.jquery.com/jquery-3.3.1.min.js"
 	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

source/templates/demo/_extended.njk

@@ -43,6 +43,9 @@
 	</div>
 
 	{% block script %}
+	<script>
+	logPerf('Inline JS at bottom of BODY. Loading assets...');
+	</script>
 	<script
 	src="https://code.jquery.com/jquery-3.3.1.min.js"
 	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

source/templates/hippie/partials/_head_script.njk

@@ -1,32 +1,58 @@
 <!-- head.script.partial -->
 <script>
 //Entry script at page init
+var debugOn = true;
+var debugOnScreen = true;
+var assetsLoaded = false;
 
-// get the current time difference between page
+// Get the current time difference between page
 // load and when this func was invoked
 function getTimeDiff() {
 	return new Date().getTime() - performance.timing.navigationStart;
 }
 
-var debugOn = true;
-var $log, assetsLoaded = false;
-
+// log message to console and add
+// performance measuring information
 function logPerf(msg) {
 	if (debugOn) {
-		if (assetsLoaded) {
-			if (!$('#jslogPerf').length) {
-				$('body').prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>')
+		if (debugOnScreen && assetsLoaded) {
+			if (!$('#jsLogPerf').length) {
+				$('<div><div></div></div>')
+				.css('position', 'relative')
+				.find('div')
+				.attr('id', 'jsLogPerf')
+				.css({
+					position: 'fixed',
+					bottom: '4px',
+					right: '40px',
+					zIndex: '1000',
+					padding: '0 8px',
+					background: 'rgba(255,255,255,.8)',
+					color: 'rgb(128)',
+					fontSize: '12px'
+				})
+				.end()
+				.prependTo('body');
+				// $('body').prepend('<div style="position:relative;"></div>');
+				// $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
 			}
-			$log = $log || $('#jslogPerf');
-			$log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+			$('#jsLogPerf').append('<p><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+			// Alternative short-circuit evaluation
+			// needs element in document but prevents error if not
+			// $log = $log || $('#jslogPerf');
+			// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
 		}
 		if (window.console) {
 			console.log(getTimeDiff() + 'ms :: ' + msg);
+			// NOTE Non standard feature. Not available on IE
 			if (console.timeStamp) {
 				console.timeStamp(msg);
 			}
 		}
 	}
 }
+document.addEventListener('DOMContentLoaded', function() {
+	logPerf('Document \'DOMContentLoaded\' event fired.');
+});
 logPerf('On HEAD, starting...');
 </script>