Additions to js debug code
This commit is contained in:
parent
489786aadc
commit
003a115923
12 changed files with 400 additions and 370 deletions
|
|
@ -1,149 +1,149 @@
|
|||
// This is called everytime
|
||||
function setup () {
|
||||
'use strict';
|
||||
function setup() {
|
||||
'use strict';
|
||||
|
||||
console.group('Document information');
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||
console.groupEnd();
|
||||
if (debugOn) {
|
||||
console.group('Debug information');
|
||||
console.dir(hippie);
|
||||
console.groupEnd();
|
||||
}
|
||||
console.group('Document information');
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||
console.groupEnd();
|
||||
if (debugOn) {
|
||||
console.group('Debug information');
|
||||
console.dir(hippie);
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
// WANNABE MODULE Mouse over effect
|
||||
// With CSS only
|
||||
if ($('#js_mob').length && viewHover) {
|
||||
$('#js_mob').addClass('mouse_over');
|
||||
}
|
||||
// if (viewHover) {
|
||||
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
||||
// }
|
||||
// With JS
|
||||
// WANNABE MODULE Mouse over effect
|
||||
// With CSS only
|
||||
if ($('#js_mob').length && viewHover) {
|
||||
$('#js_mob').addClass('mouse_over');
|
||||
}
|
||||
// if (viewHover) {
|
||||
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
||||
// }
|
||||
// With JS
|
||||
}
|
||||
|
||||
// MODULE Scroll navigation
|
||||
// Using constructor function
|
||||
function HippieScroll ($tp, $dn) {
|
||||
'use strict';
|
||||
function HippieScroll($tp, $dn) {
|
||||
'use strict';
|
||||
|
||||
// this.$tp = $tp;
|
||||
// Define initial situation
|
||||
let initLeft = false;
|
||||
const initY = hippie.screen.vh;
|
||||
// this.$tp = $tp;
|
||||
// Define initial situation
|
||||
let initLeft = false;
|
||||
const initY = hippie.screen.vh;
|
||||
|
||||
$tp.addClass('hide');
|
||||
$tp.addClass('hide');
|
||||
|
||||
// Check scroll position and toggle element
|
||||
this.check = function () {
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$tp.removeClass('hide');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$tp.addClass('hide');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
};
|
||||
// Check scroll position and toggle element
|
||||
this.check = function () {
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$tp.removeClass('hide');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$tp.addClass('hide');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Add events to navigation elements
|
||||
$tp.click(function (event) {
|
||||
event.preventDefault();
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$dn.click(function (event) {
|
||||
event.preventDefault();
|
||||
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||
$('html').scrollTop(pos);
|
||||
// document.documentElement.scrollTop = pos;
|
||||
console.info('Scrolled down to', pos);
|
||||
});
|
||||
// Add events to navigation elements
|
||||
$tp.click(function (event) {
|
||||
event.preventDefault();
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$dn.click(function (event) {
|
||||
event.preventDefault();
|
||||
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||
$('html').scrollTop(pos);
|
||||
// document.documentElement.scrollTop = pos;
|
||||
console.info('Scrolled down to', pos);
|
||||
});
|
||||
}
|
||||
|
||||
// MODULE Meta elements
|
||||
function HippieMeta ($ma, $pp) {
|
||||
'use strict';
|
||||
function HippieMeta($ma, $pp) {
|
||||
'use strict';
|
||||
|
||||
let metaOn = false;
|
||||
let metaOn = false;
|
||||
|
||||
$ma.click(function () {
|
||||
var $wrap, $pop;
|
||||
$ma.click(function () {
|
||||
var $wrap, $pop;
|
||||
|
||||
// if (metaOn !== true) {
|
||||
if (!metaOn) {
|
||||
metaOn = true;
|
||||
// if (metaOn !== true) {
|
||||
if (!metaOn) {
|
||||
metaOn = true;
|
||||
|
||||
$pp.each(function () {
|
||||
// if ($(this).css('position') === 'static') {
|
||||
// $(this).addClass('js_changed_pos');
|
||||
// $(this).css('position', 'relative');
|
||||
// }
|
||||
// $pop = $(this).next('.exp_pop').detach();
|
||||
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||
// $wrap.after($pop);
|
||||
$pp.each(function () {
|
||||
// if ($(this).css('position') === 'static') {
|
||||
// $(this).addClass('js_changed_pos');
|
||||
// $(this).css('position', 'relative');
|
||||
// }
|
||||
// $pop = $(this).next('.exp_pop').detach();
|
||||
// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||
// $wrap.after($pop);
|
||||
|
||||
$('<div></div>').addClass('exp_overlay').css({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
left: 0
|
||||
}).appendTo($(this).addClass('exp_wrap'));
|
||||
$('<div></div>').addClass('exp_overlay').css({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
left: 0
|
||||
}).appendTo($(this).addClass('exp_wrap'));
|
||||
|
||||
// Displays explanation popup following the mouse
|
||||
$(this).on({
|
||||
mouseenter: function () {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
},
|
||||
mouseleave: function () {
|
||||
$(this).next('.exp_pop').hide();
|
||||
},
|
||||
mousemove: function (event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
// 'left': event.pageX - $(this).offset().left + 8
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// Displays explanation popup following the mouse
|
||||
$(this).on({
|
||||
mouseenter: function () {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
},
|
||||
mouseleave: function () {
|
||||
$(this).next('.exp_pop').hide();
|
||||
},
|
||||
mousemove: function (event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
// 'left': event.pageX - $(this).offset().left + 8
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
$pp.each(function () {
|
||||
$(this).off('mouseenter mouseleave mousemove');
|
||||
} else {
|
||||
$pp.each(function () {
|
||||
$(this).off('mouseenter mouseleave mousemove');
|
||||
|
||||
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||
// $wrap = $(this).parent('.exp_wrap');
|
||||
// $pop = $wrap.next('.exp_pop').detach();
|
||||
// $wrap.find('.exp_marker_pop').remove();
|
||||
// $(this).unwrap('.exp_wrap');
|
||||
// $(this).after($pop);
|
||||
// if ($(this).hasClass('js_changed_pos')) {
|
||||
// $(this).css('position', '');
|
||||
// if ($(this).attr('style') === '') {
|
||||
// $(this).removeAttr('style');
|
||||
// }
|
||||
// $(this).removeClass('js_changed_pos');
|
||||
// }
|
||||
});
|
||||
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||
// $wrap = $(this).parent('.exp_wrap');
|
||||
// $pop = $wrap.next('.exp_pop').detach();
|
||||
// $wrap.find('.exp_marker_pop').remove();
|
||||
// $(this).unwrap('.exp_wrap');
|
||||
// $(this).after($pop);
|
||||
// if ($(this).hasClass('js_changed_pos')) {
|
||||
// $(this).css('position', '');
|
||||
// if ($(this).attr('style') === '') {
|
||||
// $(this).removeAttr('style');
|
||||
// }
|
||||
// $(this).removeClass('js_changed_pos');
|
||||
// }
|
||||
});
|
||||
|
||||
metaOn = false;
|
||||
}
|
||||
console.log('Explanation mode', metaOn);
|
||||
});
|
||||
metaOn = false;
|
||||
}
|
||||
console.log('Explanation mode', metaOn);
|
||||
});
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
// Setup
|
||||
// -----------------------------------------------------------------------------
|
||||
setup();
|
||||
|
||||
// DOM ready
|
||||
// -----------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
var hippie = {
|
||||
brand: "|-| | |^ |^ | [- ",
|
||||
screen: {
|
||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||
// hippie.screen.y: document.documentElement.scrollTop
|
||||
},
|
||||
body: {
|
||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||
}
|
||||
brand: "|-| | |^ |^ | [- ",
|
||||
screen: {
|
||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||
// hippie.screen.y: document.documentElement.scrollTop
|
||||
},
|
||||
body: {
|
||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||
}
|
||||
};
|
||||
|
||||
var viewHover = true;
|
||||
|
|
|
|||
|
|
@ -7,51 +7,68 @@
|
|||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<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>
|
||||
<div class="pos_rel">
|
||||
<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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<h3>Demo Pages</h3>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in data.demolinks %}
|
||||
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<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>
|
||||
<div class="pos_rel">
|
||||
<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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<h3>Demo Pages</h3>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in data.demolinks %}
|
||||
<li>
|
||||
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</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 %}
|
||||
|
|
@ -1,46 +1,52 @@
|
|||
<!-- default.template -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
||||
{% block head %}
|
||||
<title>
|
||||
{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{# <base href="/"> #}
|
||||
{% block meta %}{% endblock %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{# <base href="/"> #}
|
||||
{% block meta %}{% endblock %}
|
||||
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
<script>
|
||||
debugOn = true;
|
||||
logPerf('Debugging performance', debugOn);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
||||
});
|
||||
logPerf('On HEAD, starting...');
|
||||
</script>
|
||||
{% 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 "demo/partials/_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="{{ hippie.pageBase | subdir(2) }}css/demo.css"/> #}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
{% include "demo/partials/_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="{{ 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>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block body %}{% endblock %}
|
||||
<body class="{{ bodyClass }}">
|
||||
<script>
|
||||
logPerf('BODY start');
|
||||
</script>
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
logPerf('Inline JS at bottom of BODY. Loading assets...');
|
||||
</script>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
{% 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>
|
||||
|
|
@ -1,64 +1,67 @@
|
|||
<!-- extended.template -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
||||
{% block head %}
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
- HIPPIE</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
<script>
|
||||
debugOn = true;
|
||||
logPerf('Debugging performance', debugOn);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
||||
});
|
||||
logPerf('On HEAD, starting...');
|
||||
</script>
|
||||
{% 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 "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]-->
|
||||
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||
<!--Only use one of the above!-->
|
||||
{% 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]-->
|
||||
<!--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 %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<!-- <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 }}">
|
||||
{% include "hippie/partials/_body_hover.njk" %}
|
||||
<div id="root">
|
||||
{% include "hippie/partials/_header.njk" %}
|
||||
<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>
|
||||
<main class="main_site">
|
||||
{% block main %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
</div>
|
||||
{% include "hippie/partials/_footer.njk" %}
|
||||
</div>
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
logPerf('Inline JS at bottom of BODY. Loading 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 %}
|
||||
</body>
|
||||
{% 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>
|
||||
|
|
@ -1,28 +1,30 @@
|
|||
<!-- maintenance.template -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
||||
{% block head %}
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
- HIPPIE</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
|
||||
{% block links %}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block main %}
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block main %}
|
||||
|
||||
{% import "hippie/macros/footer-status.njk" as status %}
|
||||
{{ status.footer() }}
|
||||
{% endblock %}
|
||||
</body>
|
||||
{% import "hippie/macros/footer-status.njk" as status %}
|
||||
{{ status.footer() }}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,27 +1,27 @@
|
|||
<!-- body_nav.partial -->
|
||||
<div class="pos_rel">
|
||||
<nav class="nav_page_meta js_">
|
||||
<ul>
|
||||
<li class="js_scrolltop hide">
|
||||
<a href="#begin" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_up"></div>
|
||||
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{# <button class="">Show Meta Information</button> #}
|
||||
<a href="#meta" class="js_showmeta a_button_meta">
|
||||
<div class="sprite_img demo__sprite_meta"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="js_scrolldown">
|
||||
<a href="#end" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_down"></div>
|
||||
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav_page_meta js_">
|
||||
<ul>
|
||||
<li class="js_scrolltop hide">
|
||||
<a href="#begin" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_up"></div>
|
||||
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{# <button class="">Show Meta Information</button> #}
|
||||
<a href="#meta" class="js_showmeta a_button_meta">
|
||||
<div class="sprite_img demo__sprite_meta"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="js_scrolldown">
|
||||
<a href="#end" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_down"></div>
|
||||
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{# <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,65 @@
|
|||
<!-- 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 () {
|
||||
return new Date().getTime() - performance.timing.navigationStart;
|
||||
}
|
||||
// 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) {
|
||||
if (debugOn) {
|
||||
if (debugOnScreen && assetsLoaded) {
|
||||
if (!$('#jsLogPerf').length) {
|
||||
$('<div><div></div></div>')
|
||||
.css('position', 'relative')
|
||||
.find('div')
|
||||
.attr('id', 'jsLogPerf')
|
||||
.css({
|
||||
position: 'fixed',
|
||||
bottom: '16px',
|
||||
right: '40px',
|
||||
zIndex: '1000',
|
||||
padding: '0 8px',
|
||||
background: 'rgba(255,255,255,.8)',
|
||||
color: 'rgb(128)',
|
||||
fontSize: '1rem'
|
||||
})
|
||||
.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><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
||||
// 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 : ''));
|
||||
// NOTE Non standard feature. Not available on IE
|
||||
if (console.timeStamp) {
|
||||
console.timeStamp(msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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) {
|
||||
$('<div><div></div></div>')
|
||||
.css('position', 'relative')
|
||||
.find('div')
|
||||
.attr('id', 'jsLogPerf')
|
||||
.css({
|
||||
position: 'fixed',
|
||||
bottom: '16px',
|
||||
right: '40px',
|
||||
zIndex: '1000',
|
||||
padding: '0 8px',
|
||||
background: 'rgba(255,255,255,.6)',
|
||||
color: 'rgb(128)',
|
||||
fontSize: '1rem'
|
||||
})
|
||||
.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
|
||||
// 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
|
||||
if (console.timeStamp) {
|
||||
console.timeStamp(msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
<!-- header.partial -->
|
||||
<header class="header_site">
|
||||
</header>
|
||||
<header class="header_site"></header>
|
||||
Loading…
Add table
Add a link
Reference in a new issue