interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

logPerf without JQuery

Browse source
This commit is contained in:
Stephan Hagedorn 2022-10-09 22:57:30 +02:00
parent 6494df4d32
commit cf3fde601e
1 changed files with 45 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

54
source/templates/hippie/partials/_head_script.njk
View file

@ -1,9 +1,9 @@
<!-- head.script.partial --> <!-- head.script.partial -->
<script> <script>
//Entry script at page init // Entry script at page init
var debugOn = false; let debugOn = false;
var debugOnScreen = true; let debugOnScreen = true;
var assetsLoaded = false; let 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
@ -19,12 +19,30 @@
: new Array(width - n.length + 1).join(z) + n; : new Array(width - n.length + 1).join(z) + n;
} }
// log message to console and add // Log message to console and add
// performance measuring information // performance measuring information
function logPerf(msg, arg) { function logPerf(msg, arg) {
if (debugOn) { if (debugOn) {
if (debugOnScreen && assetsLoaded) { 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>') $('<div><div></div></div>')
.css('position', 'relative') .css('position', 'relative')
.find('div') .find('div')
@ -41,21 +59,39 @@
}) })
.end() .end()
.prependTo('body'); .prependTo('body');
*/
// $('body').prepend('<div style="position:relative;"></div>'); // $('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>'); // $('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 // needs element in document but prevents error if not
// $log = $log || $('#jslogPerf'); // $log = $log || $('#jslogPerf');
// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg); // $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
} }
if (window.console) { if (window.console) {
console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, ( console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
arg arg
? arg ? arg
: '')); : ''));
// NOTE Non standard feature. Not available on IE
// NOTE: Non standard feature. Not available on IE
if (console.timeStamp) { if (console.timeStamp) {
console.timeStamp(msg); console.timeStamp(msg);
} }