Additions to js debug code

source/code/hippie/functions.js

@@ -1,5 +1,5 @@
 // This is called everytime
-function setup () {
+function setup() {
   'use strict';
 
   console.group('Document information');
@@ -25,7 +25,7 @@ function setup () {
 
 // MODULE Scroll navigation
 // Using constructor function
-function HippieScroll ($tp, $dn) {
+function HippieScroll($tp, $dn) {
   'use strict';
 
   // this.$tp = $tp;
@@ -71,7 +71,7 @@ function HippieScroll ($tp, $dn) {
 }
 
 // MODULE Meta elements
-function HippieMeta ($ma, $pp) {
+function HippieMeta($ma, $pp) {
   'use strict';
 
   let metaOn = false;

source/code/hippie/global.js

@@ -1,11 +1,3 @@
 // Setup
 // -----------------------------------------------------------------------------
 setup();
-
-// DOM ready
-// -----------------------------------------------------------------------------
-$(document).ready(function () {
-	'use strict';
-
-	// logPerf('DOM ready.');
-});

source/screens/demo.njk

@@ -7,26 +7,41 @@
 
 {% block title %}Index{% endblock %}
 {% block head %}
-{{ super() }}
+  {{ super() }}
 {% endblock %}
 
 {% block body %}
-<div class="wrap">
+  <div class="wrap">
     <div class="hello">
-		<h2>This is {{ hippie.brand | upper }}</h2>
+      <h2>This is
+        {{ hippie.brand | upper }}</h2>
       <p>You can start using it by replacing this file with your own index page.</p>
-		<p>To do this you need to create a file <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> folder as a data source for your nunjucks files.</p>
+      <p>To do this you need to create a file
-		<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <i>/source/screens/demo</i>.</p>
+        <code>/index.njk</code>
-		<p>The <i>source/demo</i> folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
+        inside the
+        <i>source/screens</i>
+        folder. You can also create a
+        <code>data.json</code>
+        file inside the
+        <i>source/templates</i>
+        folder as a data source for your nunjucks files.</p>
+      <p>For a very basic start you can make a copy of the demo page
+        <code>blank.njk</code>. You can find it at
+        <i>/source/screens/demo</i>.</p>
+      <p>The
+        <i>source/demo</i>
+        folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
       <div class="pos_rel">
-			<pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>C(")(")</pre>
+        <pre class="txt_tiny txt_white pos_abs pin_down pin_right">  ()()<br>  (..)<br>c(")(")</pre>
         <h3>Overview</h3>
       </div>
       <nav>
         <ul class="list_link">
           <!-- Loops through "demoadditionallinks" array -->
           {% for link in data.demoadditionallinks %}
-				<li><a href="{{ link.href }}">{{ link.text }}</a></li>
+            <li>
+              <a href="{{ link.href }}">{{ link.text }}</a>
+            </li>
           {% endfor %}
         </ul>
       </nav>
@@ -34,24 +49,26 @@
       <ul class="list_link">
         <!-- Loops through "demo-links" array -->
         {% for link in data.demolinks %}
-			<li><a href="{{ link.href }}">{{ link.text }}</a></li>
+          <li>
+            <a href="{{ link.href }}">{{ link.text }}</a>
+          </li>
         {% endfor %}
       </ul>
     </div>
-</div>
+  </div>
 {% endblock %}
 
 {% block script %}
-{{ super() }}
+  {{ super() }}
-<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
+  <script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
-<script>
+  <script>
-// Page specific
+    // Page specific
-// ------------------------------------------------------------------------------
+    // ------------------------------------------------------------------------------
-assetsLoaded = true;
+    assetsLoaded = true;
-logPerf('Assets loaded.', assetsLoaded);
+    logPerf('BODY        :: Assets loaded, running page specific script...');
-$( document ).ready(function () {
+    $(document).ready(function () {
-	logPerf('JQ document \'ready\' event fired.');
+      logPerf('EVENT       :: jQuery \'ready\' event fired.');
-});
+      logPerf('Application ready.');
-logPerf('Application ready.');
+    });
-</script>
+  </script>
 {% endblock %}

source/templates/demo/_default.njk

@@ -1,11 +1,12 @@
 <!-- default.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-<head>
+  <head>
     <meta charset="utf-8">
 
     {% block head %}
-	<title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
+      <title>
+        {% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
 
       {% include "demo/partials/_meta.njk" %}
       {# <base href="/"> #}
@@ -14,11 +15,10 @@
       {% include "hippie/partials/_head_script.njk" %}
       <script>
         debugOn = true;
-	logPerf('Debugging performance', debugOn);
         document.addEventListener('DOMContentLoaded', function () {
-		logPerf('Document \'DOMContentLoaded\' event fired.');
+          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
         });
-	logPerf('On HEAD, starting...');
+        logPerf('HEAD start  :: Debugging performance...', debugOn);
       </script>
 
       {% include "demo/partials/_links.njk" %}
@@ -27,20 +27,26 @@
         {# <link rel="stylesheet" type="text/css" media="all" href="{{ hippie.pageBase | subdir(2) }}css/demo.css"/> #}
         <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
       {% endblock %}
+      <script>
+        logPerf('HEAD end    :: Links loaded.');
+      </script>
     {% endblock %}
-</head>
+  </head>
 
-<body class="{{ bodyClass }}">
+  <body class="{{ bodyClass }}">
+    <script>
+      logPerf('BODY start');
+    </script>
     {% block body %}{% endblock %}
 
     {% block script %}
       <script>
-	logPerf('Inline JS at bottom of BODY. Loading assets...');
+        logPerf('BODY        :: Loading script assets...');
       </script>
-	<script
+      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-	src="https://code.jquery.com/jquery-3.3.1.min.js"
-	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-	crossorigin="anonymous"></script>
     {% endblock %}
-</body>
+    <script>
+      logPerf('BODY end    :: Page script might still be loading.');
+    </script>
+  </body>
 </html>

source/templates/demo/_extended.njk

@@ -1,11 +1,13 @@
 <!-- extended.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-<head>
+  <head>
     <meta charset="utf-8">
 
     {% block head %}
-	<title>{% block title %}{% endblock %} - HIPPIE</title>
+      <title>
+        {% block title %}{% endblock %}
+        - HIPPIE</title>
 
       {% include "demo/partials/_meta.njk" %}
       {% block meta %}{% endblock %}
@@ -13,21 +15,16 @@
       {% include "hippie/partials/_head_script.njk" %}
       <script>
         debugOn = true;
-	logPerf('Debugging performance', debugOn);
+        document.addEventListener('DOMContentLoaded', function () {
-document.addEventListener('DOMContentLoaded', function () {
+          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
-		logPerf('Document \'DOMContentLoaded\' event fired.');
         });
-	logPerf('On HEAD, starting...');
+        logPerf('HEAD start  :: Debugging performance...', debugOn);
       </script>
 
       {% include "demo/partials/_links.njk" %}
       {% block links %}
-	<!--[if lte IE 9]>
+        <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
-	<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
+        <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
-	<![endif]-->
-	<!--[if lte IE 9]>
-	<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
-	<![endif]-->
         <!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
         <!--Only use one of the above!-->
 
@@ -35,10 +32,16 @@ document.addEventListener('DOMContentLoaded', function () {
         <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
         <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
       {% endblock %}
+      <script>
+        logPerf('HEAD end    :: Links loaded.');
+      </script>
     {% endblock %}
-</head>
+  </head>
 
-<body class="{{ bodyClass }}">
+  <body class="{{ bodyClass }}">
+    <script>
+      logPerf('BODY start');
+    </script>
     {% include "hippie/partials/_body_hover.njk" %}
     <div id="root">
       {% include "hippie/partials/_header.njk" %}
@@ -52,13 +55,13 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% block script %}
       <script>
-	logPerf('Inline JS at bottom of BODY. Loading assets...');
+        logPerf('BODY        :: Loading script assets...');
       </script>
-	<script
+      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-	src="https://code.jquery.com/jquery-3.3.1.min.js"
-	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-	crossorigin="anonymous"></script>
       {# <script src="bower_components/jquery/dist/jquery.js"></script> #}
     {% endblock %}
-</body>
+    <script>
+      logPerf('BODY end    :: Page script loaded.');
+    </script>
+  </body>
 </html>

source/templates/demo/_maintenance.njk

@@ -1,11 +1,13 @@
 <!-- maintenance.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-<head>
+  <head>
     <meta charset="utf-8">
 
     {% block head %}
-	<title>{% block title %}{% endblock %} - HIPPIE</title>
+      <title>
+        {% block title %}{% endblock %}
+        - HIPPIE</title>
 
       {% include "demo/partials/_meta.njk" %}
       {% block meta %}{% endblock %}
@@ -16,13 +18,13 @@
         <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
       {% endblock %}
     {% endblock %}
-</head>
+  </head>
 
-<body class="{{ bodyClass }}">
+  <body class="{{ bodyClass }}">
     {% block main %}
 
       {% import "hippie/macros/footer-status.njk" as status %}
       {{ status.footer() }}
     {% endblock %}
-</body>
+  </body>
 </html>

source/templates/hippie/partials/_head_script.njk

@@ -1,19 +1,27 @@
 <!-- head.script.partial -->
 <script>
-//Entry script at page init
+  //Entry script at page init
-var debugOn = false;
+  var debugOn = false;
-var debugOnScreen = true;
+  var debugOnScreen = true;
-var assetsLoaded = false;
+  var assetsLoaded = false;
 
-// Get the current time difference between page
+  // Get the current time difference between page
-// load and when this func was invoked
+  // load and when this func was invoked
-function getTimeDiff () {
+  function getTimeDiff() {
     return new Date().getTime() - performance.timing.navigationStart;
-}
+  }
 
-// log message to console and add
+  function pad(n, width, z) {
-// performance measuring information
+    z = z || '0';
-function logPerf (msg, arg) {
+    n = n + '';
+    return n.length >= width
+      ? n
+      : new Array(width - n.length + 1).join(z) + n;
+  }
+
+  // log message to console and add
+  // performance measuring information
+  function logPerf(msg, arg) {
     if (debugOn) {
       if (debugOnScreen && assetsLoaded) {
         if (!$('#jsLogPerf').length) {
@@ -27,7 +35,7 @@ function logPerf (msg, arg) {
               right: '40px',
               zIndex: '1000',
               padding: '0 8px',
-					background: 'rgba(255,255,255,.8)',
+              background: 'rgba(255,255,255,.6)',
               color: 'rgb(128)',
               fontSize: '1rem'
             })
@@ -36,19 +44,22 @@ function logPerf (msg, arg) {
           // $('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>');
         }
-			$('#jsLogPerf').append('<p><b>' + getTimeDiff() + '</b>ms :: ' + msg);
+        $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
         // 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.debug(getTimeDiff() + 'ms :: ' + msg, (arg ? arg : ''));
+        console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
+          arg
+          ? arg
+          : ''));
         // NOTE Non standard feature. Not available on IE
         if (console.timeStamp) {
           console.timeStamp(msg);
         }
       }
     }
-}
+  }
 </script>

source/templates/hippie/partials/_header.njk

@@ -1,3 +1,2 @@
 <!-- header.partial -->
-<header class="header_site">
+<header class="header_site"></header>
-</header>