feat: change log output and template structure

- new global variable debugMode
- demo templates are now based on hippie defaults joined with template inheritance
- add log macros
- new function logAdd()
- log uses global state

.eleventy.js

@@ -12,7 +12,8 @@ module.exports = function (eleventyConfig) {
 		pageBase: './',
 		brand: 'hippie',
 		titlePrefix: '',
-		titlePostfix: ' - HIPPIE'
+		titlePostfix: ' - HIPPIE',
+		debugMode: true
 	});
 
 	eleventyConfig.addPassthroughCopy({"source/art/images": "art"});

source/screens/basics.njk

@@ -1,8 +1,8 @@
-<!-- basics.screen -->
+<!-- basics.page -->
 {% set pageBase = "../" %}
 {% set pageId = "basics" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
@@ -959,12 +959,11 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('Assets loaded.', assetsLoaded);
+    // Page specific
+    // ------------------------------------------------------------------------------
     // Create instance of object made by contructor function
     var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
     var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
@@ -976,6 +975,6 @@
     $(document).scroll(function () {
       scrollUi.check();
     });
-    logPerf('Application ready.');
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/components.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "components" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
@@ -69,7 +69,8 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
+  {{ log.asset(true) }}
+  {{ log.log('Assets loaded.', assetsLoaded) }}
   <script>
     // Page specific
     // ------------------------------------------------------------------------------

source/screens/demo/card.njk

@@ -3,7 +3,7 @@
 {% set pageId = "card" %}
 {% set pageClass = "html_card" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Karte{% endblock %}
@@ -60,7 +60,6 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
     $(document).ready(function () {
       // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');

source/screens/demo/portal.njk

@@ -3,7 +3,7 @@
 {% set pageId = "index" %}
 {% set bodyClass = "body_portal" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
 
 {% import "demo/macros/_gates.njk" as gate %}
 

source/screens/index.njk

@@ -3,7 +3,7 @@
 {% set pageId = "index" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "demo/_default.njk" %}
+{% extends "demo/_demo.njk" %}
 
 {% block title %}Index{% endblock %}
 {% block head %}
@@ -71,16 +71,15 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('BODY        :: Assets loaded, running page specific script...');
+    // Page specific
+    // ------------------------------------------------------------------------------
     $(document).ready(function () {
       logPerf('EVENT       :: jQuery \'ready\' event fired.');
       setup();
-      logPerf('Application ready.');
     });
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/introduction.njk

@@ -1,8 +1,8 @@
-<!-- introduction.screen -->
+<!-- introduction.page -->
 {% set pageBase = "../" %}
 {% set pageId = "intro" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
@@ -23,8 +23,6 @@
       <p>&hellip;</p>
     </article>
   </section>
-
-
 {% endblock %}
 
 {% block script %}
@@ -34,12 +32,11 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
   <script>
-    // Page specific
-    // ------------------------------------------------------------------------------
     assetsLoaded = true;
     logPerf('Assets loaded.', assetsLoaded);
+    // Page specific
+    // ------------------------------------------------------------------------------
     // Create instance of object made by contructor function
     var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
     var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
@@ -51,6 +48,6 @@
     $(document).scroll(function () {
       scrollUi.check();
     });
-    logPerf('Application ready.');
+    logPerf('Application ready... not.');
   </script>
 {% endblock %}

source/screens/layouts.njk

@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "layouts" %}
 
-{% extends "demo/_extended.njk" %}
+{% extends "demo/_docs.njk" %}
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
@@ -322,7 +322,8 @@
   <script src="{{ pageBase }}js/variables.js"></script>
   <script src="{{ pageBase }}js/functions.js"></script>
   <script src="{{ pageBase }}js/global.js"></script>
-  <!-- endbuild -->
+  {{ log.asset(true) }}
+  {{ log.log('Assets loaded.', assetsLoaded) }}
   <script>
     // Page specific
     // ------------------------------------------------------------------------------

source/screens/pages/blank.njk

@@ -14,3 +14,7 @@
 {% block body %}
 
 {% endblock %}
+
+{% block script %}
+{{ super() }}
+{% endblock %}

source/templates/demo/_default.njk

@@ -1,52 +0,0 @@
-<!-- default.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>
-        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-      {% include "demo/partials/_meta.njk" %}
-      {# <base href="/"> #}
-      {% block meta %}{% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      <script>
-        debugOn = true;
-        document.addEventListener('DOMContentLoaded', function () {
-          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
-        });
-        logPerf('HEAD start  :: Debugging performance...', debugOn);
-      </script>
-
-      {% include "hippie/partials/_head_links.njk" %}
-      {% block links %}
-        {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
-        {# <link rel="stylesheet" type="text/css" media="all" href="{{ 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>
-
-  <body class="{{ bodyClass }}">
-    <script>
-      logPerf('BODY start');
-    </script>
-    {% block body %}{% endblock %}
-
-    {% block script %}
-      <script>
-        logPerf('BODY        :: Loading script assets...');
-      </script>
-      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    {% endblock %}
-    <script>
-      logPerf('BODY end    :: Page script might still be loading.');
-    </script>
-  </body>
-</html>

source/templates/demo/_demo.njk

@@ -0,0 +1,18 @@
+<!-- demo.template -->
+{% extends "hippie/_default.njk" %}
+
+{% block meta %}
+  {% include "demo/partials/_meta.njk" %}
+  {# <base href="/"> #}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
+  {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
+{% endblock %}
+
+{% block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{% endblock %}

source/templates/demo/_docs.njk

@@ -0,0 +1,23 @@
+<!-- docs.template -->
+{% extends "hippie/_main.njk" %}
+
+{% block meta %}
+  {% include "demo/partials/_meta.njk" %}
+  {# <base href="/"> #}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![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!-->
+
+  <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
+  <!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
+{% endblock %}
+
+{% block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{% endblock %}

source/templates/demo/_extended.njk

@@ -1,67 +0,0 @@
-<!-- extended.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>
-        {% block title %}{% endblock %}
-        - HIPPIE</title>
-
-      {% include "demo/partials/_meta.njk" %}
-      {% block meta %}{% endblock %}
-
-      {% include "hippie/partials/_head_script.njk" %}
-      <script>
-        debugOn = true;
-        document.addEventListener('DOMContentLoaded', function () {
-          logPerf('EVENT       :: Document \'DOMContentLoaded\' event fired.');
-        });
-        logPerf('HEAD start  :: Debugging performance...', debugOn);
-      </script>
-
-      {% include "hippie/partials/_head_links.njk" %}
-      {% block links %}
-        <!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![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!-->
-
-        <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
-        <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>
-
-  <body class="{{ bodyClass }}">
-    <script>
-      logPerf('BODY start');
-    </script>
-    {% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
-      {% include "hippie/partials/_header.njk" %}
-
-      <main class="main_site">
-        {% block main %}{% endblock %}
-      </main>
-
-      {% include "hippie/partials/_footer.njk" %}
-    </div>
-
-    {% block script %}
-      <script>
-        logPerf('BODY        :: Loading script assets...');
-      </script>
-      <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 %}
-    <script>
-      logPerf('BODY end    :: Page script loaded.');
-    </script>
-  </body>
-</html>

source/templates/demo/partials/_meta.njk

@@ -1,6 +1,6 @@
 <!-- meta.partial -->
 <meta name="author" content="Interaktionsweise">
-<meta name="generator" content="Atom, Notepad++">
+<meta name="generator" content="Visual Studio Code, Atom, Notepad++">
 <meta name="description" content="Hippie interweaves preeminent personal interface elements">
 <meta name="robots" content="noindex">
 

source/templates/hippie/_default.njk

@@ -0,0 +1,41 @@
+<!-- default.template -->
+{% import "hippie/macros/_log.njk" as log %}
+
+<!DOCTYPE html>
+<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+  <head>
+    <meta charset="utf-8">
+
+    {% block head %}
+      <title>
+        {{ hippie.titlePrefix }}
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+      {% block meta %}
+        {% include "hippie/partials/_head_meta.njk" %}
+      {% endblock %}
+
+      {% include "hippie/partials/_head_script.njk" %}
+      {# {{ log.debug(true) }} #}
+      {{ log.start() }}
+
+      {% block links %}
+        {% include "hippie/partials/_head_links.njk" %}
+        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+      {% endblock %}
+
+      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+    {% endblock %}
+  </head>
+
+  <body class="{{ bodyClass }}">
+    {{ log.log('BODY start') }}
+    {% block body %}{% endblock %}
+
+    {% block script %}
+      {{ log.log('BODY        :: Loading script assets...') }}
+    {% endblock %}
+
+    {{ log.log('BODY end    :: Page script might still be loading.') }}
+  </body>
+</html>

source/templates/hippie/_main.njk

@@ -0,0 +1,50 @@
+<!-- main.template -->
+{% import "hippie/macros/_log.njk" as log %}
+
+<!DOCTYPE html>
+<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
+  <head>
+    <meta charset="utf-8">
+
+    {% block head %}
+      <title>
+        {{ hippie.titlePrefix }}
+        {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+      {% block meta %}
+        {% include "hippie/partials/_head_meta.njk" %}
+      {% endblock %}
+
+      {% include "hippie/partials/_head_script.njk" %}
+      {{ log.debug(hippie.debugMode, true) }}
+      {{ log.start() }}
+
+      {% block links %}
+        {% include "hippie/partials/_head_links.njk" %}
+        <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
+      {% endblock %}
+
+      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+    {% endblock %}
+  </head>
+
+  <body class="{{ bodyClass }}">
+    {{ log.log('BODY start') }}
+    {% include "hippie/partials/_body_hover.njk" %}
+    <div id="root">
+      {% include "hippie/partials/_header.njk" %}
+
+      <main class="main_site">
+        {% block main %}{% endblock %}
+      </main>
+
+      {% include "hippie/partials/_footer.njk" %}
+    </div>
+
+    {% block script %}
+      {{ log.log('BODY        :: Loading script assets...') }}
+    {% endblock %}
+
+    {{ log.log('BODY end    :: Page script might still be loading.') }}
+  </body>
+</html>

source/templates/hippie/macros/_log.njk

@@ -0,0 +1,24 @@
+{% macro start() %}
+  <script>
+    logAdd('EVENT       :: Document \'%s\' event fired.', 'DOMContentLoaded');
+    logPerf('HEAD start  :: Debugging performance...', debugOn);
+  </script>
+{% endmacro %}
+{% macro log(msg, arg = '') %}
+  <script>
+    logPerf('{{ msg }}', {{ arg }});
+  </script>
+{% endmacro %}
+{% macro debug(state = false, display = false, assets = false) %}
+  {# {{ set hippie.debugMode = state }} #}
+  <script>
+    debugOn = {{ state }};
+    debugOnScreen = {{ display }};
+    assetsLoaded = {{ assets }};
+  </script>
+{% endmacro %}
+{% macro asset(state = false) %}
+  <script>
+    assetsLoaded = {{ state }};
+  </script>
+{% endmacro %}

source/templates/hippie/partials/_head_links.njk

@@ -1,4 +1,4 @@
-<!-- links.partial -->
+<!-- head.links.partial -->
 {# <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon"> #}
 <link rel="shortcut icon" type="image/x-icon" href="{{ pageBase }}favicon.ico">
 <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEAAAIBAQCbjUIABQQCAGdfKgDcxYUAiXpGABkWCgDXxnEApmxRAMGZawAIBwMArZ5PAKFydQBmIZIAoGJFAIx+QwBSSyIA1biBADlx0gBNn+0AgztQAMimcQAMCwQADAsFANS/dAB7P3EAeuH7ANb4/gBQPLwAp2pNAI6CQwCilEwAr3hdADyH5ADw/f8A////AHTU+AB6M2YA0LN4ABMRBwA/OhsAyKR2AGYvjQCf7PwA7fz/AENy2gCrclkAk4ZDAAYFAgDNtXEAjkhHAEul7QD8//8AlOn8AGk1hwDWvXsAGBYJAJaHSgCnbE4AVy6rAML0/gD7/v8AQ6vuAKx1YwCZjEQALCgTALyOZwB+NVoAZ8D0AL30/QBLULMA2sV+AB4bCwDFpm0Ak087AFArvgBv4PoAjOf7AIzm+wCN4/sAjuH7AI7h+gCP3fkAOI/sAKVvcwCfkUQAfnM6ANO2hAC3iGkAk150AI9OcACKRmkAhj9kAH84YQB9NWEAfTRgAH0zYAB6MWYAei9lAItFUADdy3wAKCQPAFtTJQB2bDIAhXk5AJKGPwCbjkQAq5xOALepWwDEtGcAzLlwAMyzcgDKrXIAx6NwALyNZgDWu4IApJZHAAcGAwANDAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB3eGhpamtsbW5vcHFycwt0dXZYWVpbXF1eX2BhYmNkZWZnAktMTU5PUFFRUlNUVVZXAABDREVGJSUlJSUlR0hJSgAAADs8PT4lJSUlP0BBQgAAAAAyMzQ1NiUlJTc4OToAAAAAACorLC0lJS4vMDEAAAAAAAAAISIjJCUmJygpAAAAAAAAABkaGxwdHh8gAAAAAAAAAAAAEhMUFRYXGAAAAAAAAAAAAAANDg8QEQAAAAAAAAAAAAAACAkKCwwAAAAAAAAAAAAAAAAFBgcAAAAAAAAAAAAAAAAAAgMEAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

source/templates/hippie/partials/_head_meta.njk

@@ -1,4 +1,4 @@
-<!-- meta.partial -->
+<!-- head.meta.partial -->
 <meta name="author" content="">
 <meta name="generator" content="">
 <meta name="description" content="">

source/templates/hippie/partials/_head_script.njk

@@ -1,8 +1,8 @@
 <!-- head.script.partial -->
 <script>
   // Entry script at page init
-  let debugOn = false;
+  let debugOn = {{ hippie.debugMode }};
-  let debugOnScreen = true;
+  let debugOnScreen = false;
   let assetsLoaded = false;
 
   // Get the current time difference between page
@@ -14,6 +14,7 @@
   function pad(n, width, z) {
     z = z || '0';
     n = n + '';
+
     return n.length >= width
       ? n
       : new Array(width - n.length + 1).join(z) + n;
@@ -40,7 +41,9 @@
           box.id = 'jsLogPerf';
 
           wrap.prepend(box);
-          document.body.prepend(wrap);
+          document
+            .body
+            .prepend(wrap);
 
           /*
           $('<div><div></div></div>')
@@ -75,10 +78,12 @@
           line-height: 1.1;`;
         code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
 
-        document.getElementById('jsLogPerf').append(code);
+        document
+          .getElementById('jsLogPerf')
+          .append(code);
         // document.getElementById('jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
         // $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        
+
         // NOTE: Alternative short-circuit evaluation
         // needs element in document but prevents error if not
         // $log = $log || $('#jslogPerf');
@@ -86,7 +91,9 @@
       }
 
       if (window.console) {
-        console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
+        const time = pad(getTimeDiff(), 5) + 'ms :: ';
+
+        console.debug(time + msg, (
           arg
           ? arg
           : ''));
@@ -98,4 +105,10 @@
       }
     }
   }
+
+  function logAdd(msg, listener) {
+    document.addEventListener(listener, function () {
+      logPerf(msg, listener);
+    });
+  }
 </script>