From cf3fde601eae944582d4da70bfc76943675143b8 Mon Sep 17 00:00:00 2001
From: Stephan Hagedorn <klarsichtweise@gmail.com>
Date: Sun, 9 Oct 2022 22:57:30 +0200
Subject: [PATCH] logPerf without JQuery

---
 .../hippie/partials/_head_script.njk          | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/source/templates/hippie/partials/_head_script.njk b/source/templates/hippie/partials/_head_script.njk
index 76743d9..e00bacc 100644
--- a/source/templates/hippie/partials/_head_script.njk
+++ b/source/templates/hippie/partials/_head_script.njk
@@ -1,9 +1,9 @@
 <!-- head.script.partial -->
 <script>
-  //Entry script at page init
-  var debugOn = false;
-  var debugOnScreen = true;
-  var assetsLoaded = false;
+  // Entry script at page init
+  let debugOn = false;
+  let debugOnScreen = true;
+  let assetsLoaded = false;
 
   // Get the current time difference between page
   // load and when this func was invoked
@@ -19,12 +19,30 @@
       : new Array(width - n.length + 1).join(z) + n;
   }
 
-  // log message to console and add
+  // Log message to console and add
   // performance measuring information
   function logPerf(msg, arg) {
     if (debugOn) {
       if (debugOnScreen && assetsLoaded) {
-        if (!$('#jsLogPerf').length) {
+        if (!document.getElementById('jsLogPerf')) {
+          let wrap = document.createElement('div');
+          let box = document.createElement('div');
+
+          wrap.style.position = 'relative';
+          box.style.cssText = `position: fixed;
+            bottom: 16px;
+            right: 40px;
+            zIndex: 1000;
+            padding: 0 8px;
+            background: rgba(255,255,255,.6);
+            color: rgb(128);
+            fontSize: 1rem;`;
+          box.id = 'jsLogPerf';
+
+          wrap.prepend(box);
+          document.body.prepend(wrap);
+
+          /*
           $('<div><div></div></div>')
             .css('position', 'relative')
             .find('div')
@@ -41,21 +59,39 @@
             })
             .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>');
         }
-        $('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
-        // Alternative short-circuit evaluation
+
+        let code = document.createElement('code');
+
+        code.style.cssText = `display: block;
+          margin: 8px 0;
+          padding: 1px 4px;
+          background-color: transparent;
+          color: black;
+          font-size: 12px;
+          line-height: 1.1;`;
+        code.innerHTML = '<b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '';
+
+        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');
         // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
       }
+
       if (window.console) {
         console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
           arg
           ? arg
           : ''));
-        // NOTE Non standard feature. Not available on IE
+
+        // NOTE: Non standard feature. Not available on IE
         if (console.timeStamp) {
           console.timeStamp(msg);
         }