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
This commit is contained in:
parent
c55c1c9b66
commit
be425e8be5
20 changed files with 206 additions and 155 deletions
41
source/templates/hippie/_default.njk
Normal file
41
source/templates/hippie/_default.njk
Normal file
|
|
@ -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>
|
||||
50
source/templates/hippie/_main.njk
Normal file
50
source/templates/hippie/_main.njk
Normal file
|
|
@ -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>
|
||||
24
source/templates/hippie/macros/_log.njk
Normal file
24
source/templates/hippie/macros/_log.njk
Normal file
|
|
@ -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 %}
|
||||
|
|
@ -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=">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- meta.partial -->
|
||||
<!-- head.meta.partial -->
|
||||
<meta name="author" content="">
|
||||
<meta name="generator" content="">
|
||||
<meta name="description" content="">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- head.script.partial -->
|
||||
<script>
|
||||
// Entry script at page init
|
||||
let debugOn = false;
|
||||
let debugOnScreen = true;
|
||||
let debugOn = {{ hippie.debugMode }};
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue