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

Additions to js debug code

Browse source
This commit is contained in:
Stephan Hagedorn 2021-03-08 15:58:07 +01:00
parent 489786aadc
commit 003a115923
12 changed files with 400 additions and 370 deletions
Download patch file Download diff file Expand all files Collapse all files

6
source/code/hippie/functions.js
View file

@ -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;

8
source/code/hippie/global.js
View file

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

61
source/screens/demo.njk
View file

@ -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>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>
<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>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() }}
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded);
$( document ).ready(function () {
logPerf('JQ document \'ready\' event fired.');
});
logPerf('Application ready.');
</script>
{{ super() }}
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('BODY :: Assets loaded, running page specific script...');
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
logPerf('Application ready.');
});
</script>
{% endblock %}

32
source/templates/demo/_default.njk
View file

@ -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
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<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>

43
source/templates/demo/_extended.njk
View file

@ -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 () {
logPerf('Document \'DOMContentLoaded\' event fired.');
document.addEventListener('DOMContentLoaded', function () {
logPerf('EVENT :: 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]>
<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]-->
<!--[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!-->
@ -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
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></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 %}
</body>
<script>
logPerf('BODY end :: Page script loaded.');
</script>
</body>
</html>

12
source/templates/demo/_maintenance.njk
View file

@ -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>

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

@ -1,19 +1,27 @@
<!-- head.script.partial -->
<script>
//Entry script at page init
var debugOn = false;
var debugOnScreen = true;
var assetsLoaded = false;
//Entry script at page init
var debugOn = false;
var debugOnScreen = true;
var assetsLoaded = false;
// Get the current time difference between page
// load and when this func was invoked
function getTimeDiff () {
// Get the current time difference between page
// load and when this func was invoked
function getTimeDiff() {
return new Date().getTime() - performance.timing.navigationStart;
}
}
// log message to console and add
// performance measuring information
function logPerf (msg, arg) {
function pad(n, width, z) {
z = z || '0';
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>

3
source/templates/hippie/partials/_header.njk
View file

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