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
|
// This is called everytime
|
||||||
function setup () {
|
function setup() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
console.group('Document information');
|
console.group('Document information');
|
||||||
console.info('\n', hippie.brand, '\n\n');
|
console.info('\n', hippie.brand, '\n\n');
|
||||||
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
if (debugOn) {
|
if (debugOn) {
|
||||||
console.group('Debug information');
|
console.group('Debug information');
|
||||||
console.dir(hippie);
|
console.dir(hippie);
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
}
|
}
|
||||||
|
|
||||||
// WANNABE MODULE Mouse over effect
|
// WANNABE MODULE Mouse over effect
|
||||||
// With CSS only
|
// With CSS only
|
||||||
if ($('#js_mob').length && viewHover) {
|
if ($('#js_mob').length && viewHover) {
|
||||||
$('#js_mob').addClass('mouse_over');
|
$('#js_mob').addClass('mouse_over');
|
||||||
}
|
}
|
||||||
// if (viewHover) {
|
// if (viewHover) {
|
||||||
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
||||||
// }
|
// }
|
||||||
// With JS
|
// With JS
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODULE Scroll navigation
|
// MODULE Scroll navigation
|
||||||
// Using constructor function
|
// Using constructor function
|
||||||
function HippieScroll ($tp, $dn) {
|
function HippieScroll($tp, $dn) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// this.$tp = $tp;
|
// this.$tp = $tp;
|
||||||
// Define initial situation
|
// Define initial situation
|
||||||
let initLeft = false;
|
let initLeft = false;
|
||||||
const initY = hippie.screen.vh;
|
const initY = hippie.screen.vh;
|
||||||
|
|
||||||
$tp.addClass('hide');
|
$tp.addClass('hide');
|
||||||
|
|
||||||
// Check scroll position and toggle element
|
// Check scroll position and toggle element
|
||||||
this.check = function () {
|
this.check = function () {
|
||||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||||
if (hippie.screen.y > initY) {
|
if (hippie.screen.y > initY) {
|
||||||
if (!initLeft) {
|
if (!initLeft) {
|
||||||
$tp.removeClass('hide');
|
$tp.removeClass('hide');
|
||||||
console.info('Initial viewport left');
|
console.info('Initial viewport left');
|
||||||
}
|
}
|
||||||
initLeft = true;
|
initLeft = true;
|
||||||
} else {
|
} else {
|
||||||
if (initLeft) {
|
if (initLeft) {
|
||||||
$tp.addClass('hide');
|
$tp.addClass('hide');
|
||||||
console.info('Initial viewport entered');
|
console.info('Initial viewport entered');
|
||||||
}
|
}
|
||||||
initLeft = false;
|
initLeft = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add events to navigation elements
|
// Add events to navigation elements
|
||||||
$tp.click(function (event) {
|
$tp.click(function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$('html, body').stop().animate({
|
$('html, body').stop().animate({
|
||||||
scrollTop: 0
|
scrollTop: 0
|
||||||
}, basicEase);
|
}, basicEase);
|
||||||
// console.log('Scrolled to top');
|
// console.log('Scrolled to top');
|
||||||
});
|
});
|
||||||
$dn.click(function (event) {
|
$dn.click(function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||||
$('html').scrollTop(pos);
|
$('html').scrollTop(pos);
|
||||||
// document.documentElement.scrollTop = pos;
|
// document.documentElement.scrollTop = pos;
|
||||||
console.info('Scrolled down to', pos);
|
console.info('Scrolled down to', pos);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// MODULE Meta elements
|
// MODULE Meta elements
|
||||||
function HippieMeta ($ma, $pp) {
|
function HippieMeta($ma, $pp) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
let metaOn = false;
|
let metaOn = false;
|
||||||
|
|
||||||
$ma.click(function () {
|
$ma.click(function () {
|
||||||
var $wrap, $pop;
|
var $wrap, $pop;
|
||||||
|
|
||||||
// if (metaOn !== true) {
|
// if (metaOn !== true) {
|
||||||
if (!metaOn) {
|
if (!metaOn) {
|
||||||
metaOn = true;
|
metaOn = true;
|
||||||
|
|
||||||
$pp.each(function () {
|
$pp.each(function () {
|
||||||
// if ($(this).css('position') === 'static') {
|
// if ($(this).css('position') === 'static') {
|
||||||
// $(this).addClass('js_changed_pos');
|
// $(this).addClass('js_changed_pos');
|
||||||
// $(this).css('position', 'relative');
|
// $(this).css('position', 'relative');
|
||||||
// }
|
// }
|
||||||
// $pop = $(this).next('.exp_pop').detach();
|
// $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 = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||||
// $wrap.after($pop);
|
// $wrap.after($pop);
|
||||||
|
|
||||||
$('<div></div>').addClass('exp_overlay').css({
|
$('<div></div>').addClass('exp_overlay').css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0
|
left: 0
|
||||||
}).appendTo($(this).addClass('exp_wrap'));
|
}).appendTo($(this).addClass('exp_wrap'));
|
||||||
|
|
||||||
// Displays explanation popup following the mouse
|
// Displays explanation popup following the mouse
|
||||||
$(this).on({
|
$(this).on({
|
||||||
mouseenter: function () {
|
mouseenter: function () {
|
||||||
// if ($(this).attr('emmet')) {
|
// if ($(this).attr('emmet')) {
|
||||||
//
|
//
|
||||||
// }
|
// }
|
||||||
$(this).next('.exp_pop').show();
|
$(this).next('.exp_pop').show();
|
||||||
},
|
},
|
||||||
mouseleave: function () {
|
mouseleave: function () {
|
||||||
$(this).next('.exp_pop').hide();
|
$(this).next('.exp_pop').hide();
|
||||||
},
|
},
|
||||||
mousemove: function (event) {
|
mousemove: function (event) {
|
||||||
$(this).next('.exp_pop').css({
|
$(this).next('.exp_pop').css({
|
||||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||||
'left': event.pageX + 8
|
'left': event.pageX + 8
|
||||||
// 'left': event.pageX - $(this).offset().left + 8
|
// 'left': event.pageX - $(this).offset().left + 8
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$pp.each(function () {
|
$pp.each(function () {
|
||||||
$(this).off('mouseenter mouseleave mousemove');
|
$(this).off('mouseenter mouseleave mousemove');
|
||||||
|
|
||||||
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||||
// $wrap = $(this).parent('.exp_wrap');
|
// $wrap = $(this).parent('.exp_wrap');
|
||||||
// $pop = $wrap.next('.exp_pop').detach();
|
// $pop = $wrap.next('.exp_pop').detach();
|
||||||
// $wrap.find('.exp_marker_pop').remove();
|
// $wrap.find('.exp_marker_pop').remove();
|
||||||
// $(this).unwrap('.exp_wrap');
|
// $(this).unwrap('.exp_wrap');
|
||||||
// $(this).after($pop);
|
// $(this).after($pop);
|
||||||
// if ($(this).hasClass('js_changed_pos')) {
|
// if ($(this).hasClass('js_changed_pos')) {
|
||||||
// $(this).css('position', '');
|
// $(this).css('position', '');
|
||||||
// if ($(this).attr('style') === '') {
|
// if ($(this).attr('style') === '') {
|
||||||
// $(this).removeAttr('style');
|
// $(this).removeAttr('style');
|
||||||
// }
|
// }
|
||||||
// $(this).removeClass('js_changed_pos');
|
// $(this).removeClass('js_changed_pos');
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
metaOn = false;
|
metaOn = false;
|
||||||
}
|
}
|
||||||
console.log('Explanation mode', metaOn);
|
console.log('Explanation mode', metaOn);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// get document coordinates of the element
|
// get document coordinates of the element
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,3 @@
|
||||||
// Setup
|
// Setup
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
setup();
|
setup();
|
||||||
|
|
||||||
// DOM ready
|
|
||||||
// -----------------------------------------------------------------------------
|
|
||||||
$(document).ready(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// logPerf('DOM ready.');
|
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
var hippie = {
|
var hippie = {
|
||||||
brand: "|-| | |^ |^ | [- ",
|
brand: "|-| | |^ |^ | [- ",
|
||||||
screen: {
|
screen: {
|
||||||
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0),
|
||||||
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0),
|
||||||
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0),
|
||||||
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
y: Math.min($(document).scrollTop(), document.documentElement.scrollTop)
|
||||||
// hippie.screen.y: document.documentElement.scrollTop
|
// hippie.screen.y: document.documentElement.scrollTop
|
||||||
},
|
},
|
||||||
body: {
|
body: {
|
||||||
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0),
|
||||||
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0),
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var viewHover = true;
|
var viewHover = true;
|
||||||
|
|
|
||||||
|
|
@ -7,51 +7,68 @@
|
||||||
|
|
||||||
{% block title %}Index{% endblock %}
|
{% block title %}Index{% endblock %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="hello">
|
<div class="hello">
|
||||||
<h2>This is {{ hippie.brand | upper }}</h2>
|
<h2>This is
|
||||||
<p>You can start using it by replacing this file with your own index page.</p>
|
{{ hippie.brand | upper }}</h2>
|
||||||
<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>You can start using it by replacing this file with your own index page.</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>To do this you need to create a file
|
||||||
<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>
|
<code>/index.njk</code>
|
||||||
<div class="pos_rel">
|
inside the
|
||||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
|
<i>source/screens</i>
|
||||||
<h3>Overview</h3>
|
folder. You can also create a
|
||||||
</div>
|
<code>data.json</code>
|
||||||
<nav>
|
file inside the
|
||||||
<ul class="list_link">
|
<i>source/templates</i>
|
||||||
<!-- Loops through "demoadditionallinks" array -->
|
folder as a data source for your nunjucks files.</p>
|
||||||
{% for link in data.demoadditionallinks %}
|
<p>For a very basic start you can make a copy of the demo page
|
||||||
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
|
<code>blank.njk</code>. You can find it at
|
||||||
{% endfor %}
|
<i>/source/screens/demo</i>.</p>
|
||||||
</ul>
|
<p>The
|
||||||
</nav>
|
<i>source/demo</i>
|
||||||
<h3>Demo Pages</h3>
|
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>
|
||||||
<ul class="list_link">
|
<div class="pos_rel">
|
||||||
<!-- Loops through "demo-links" array -->
|
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||||
{% for link in data.demolinks %}
|
<h3>Overview</h3>
|
||||||
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
|
</div>
|
||||||
{% endfor %}
|
<nav>
|
||||||
</ul>
|
<ul class="list_link">
|
||||||
</div>
|
<!-- Loops through "demoadditionallinks" array -->
|
||||||
</div>
|
{% 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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
|
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Page specific
|
// Page specific
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
assetsLoaded = true;
|
assetsLoaded = true;
|
||||||
logPerf('Assets loaded.', assetsLoaded);
|
logPerf('BODY :: Assets loaded, running page specific script...');
|
||||||
$( document ).ready(function () {
|
$(document).ready(function () {
|
||||||
logPerf('JQ document \'ready\' event fired.');
|
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||||
});
|
logPerf('Application ready.');
|
||||||
logPerf('Application ready.');
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -1,46 +1,52 @@
|
||||||
<!-- default.template -->
|
<!-- default.template -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
<title>
|
||||||
|
{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
||||||
|
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
{# <base href="/"> #}
|
{# <base href="/"> #}
|
||||||
{% block meta %}{% endblock %}
|
{% block meta %}{% endblock %}
|
||||||
|
|
||||||
{% include "hippie/partials/_head_script.njk" %}
|
{% include "hippie/partials/_head_script.njk" %}
|
||||||
<script>
|
<script>
|
||||||
debugOn = true;
|
debugOn = true;
|
||||||
logPerf('Debugging performance', debugOn);
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
logPerf('EVENT :: Document \'DOMContentLoaded\' event fired.');
|
||||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
});
|
||||||
});
|
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||||
logPerf('On HEAD, starting...');
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
{% include "demo/partials/_links.njk" %}
|
{% include "demo/partials/_links.njk" %}
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
|
{# <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="{{ hippie.pageBase | subdir(2) }}css/demo.css"/> #}
|
||||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endblock %}
|
<script>
|
||||||
</head>
|
logPerf('HEAD end :: Links loaded.');
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{% block body %}{% endblock %}
|
<script>
|
||||||
|
logPerf('BODY start');
|
||||||
|
</script>
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
<script>
|
||||||
logPerf('Inline JS at bottom of BODY. Loading assets...');
|
logPerf('BODY :: Loading script assets...');
|
||||||
</script>
|
</script>
|
||||||
<script
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
{% endblock %}
|
||||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
<script>
|
||||||
crossorigin="anonymous"></script>
|
logPerf('BODY end :: Page script might still be loading.');
|
||||||
{% endblock %}
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,64 +1,67 @@
|
||||||
<!-- extended.template -->
|
<!-- extended.template -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
<title>
|
||||||
|
{% block title %}{% endblock %}
|
||||||
|
- HIPPIE</title>
|
||||||
|
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
{% block meta %}{% endblock %}
|
{% block meta %}{% endblock %}
|
||||||
|
|
||||||
{% include "hippie/partials/_head_script.njk" %}
|
{% include "hippie/partials/_head_script.njk" %}
|
||||||
<script>
|
<script>
|
||||||
debugOn = true;
|
debugOn = true;
|
||||||
logPerf('Debugging performance', debugOn);
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
logPerf('EVENT :: Document \'DOMContentLoaded\' event fired.');
|
||||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
});
|
||||||
});
|
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||||
logPerf('On HEAD, starting...');
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
{% include "demo/partials/_links.njk" %}
|
{% include "demo/partials/_links.njk" %}
|
||||||
{% block links %}
|
{% block links %}
|
||||||
<!--[if lte IE 9]>
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||||
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
|
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||||
<![endif]-->
|
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||||
<!--[if lte IE 9]>
|
<!--Only use one of the above!-->
|
||||||
<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 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="all" href="{{ pageBase }}css/demo.css"/>
|
||||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endblock %}
|
<script>
|
||||||
</head>
|
logPerf('HEAD end :: Links loaded.');
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{% include "hippie/partials/_body_hover.njk" %}
|
<script>
|
||||||
<div id="root">
|
logPerf('BODY start');
|
||||||
{% include "hippie/partials/_header.njk" %}
|
</script>
|
||||||
|
{% include "hippie/partials/_body_hover.njk" %}
|
||||||
|
<div id="root">
|
||||||
|
{% include "hippie/partials/_header.njk" %}
|
||||||
|
|
||||||
<main class="main_site">
|
<main class="main_site">
|
||||||
{% block main %}{% endblock %}
|
{% block main %}{% endblock %}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include "hippie/partials/_footer.njk" %}
|
{% include "hippie/partials/_footer.njk" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
<script>
|
||||||
logPerf('Inline JS at bottom of BODY. Loading assets...');
|
logPerf('BODY :: Loading script assets...');
|
||||||
</script>
|
</script>
|
||||||
<script
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
|
||||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
{% endblock %}
|
||||||
crossorigin="anonymous"></script>
|
<script>
|
||||||
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
|
logPerf('BODY end :: Page script loaded.');
|
||||||
{% endblock %}
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,28 +1,30 @@
|
||||||
<!-- maintenance.template -->
|
<!-- maintenance.template -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
<title>
|
||||||
|
{% block title %}{% endblock %}
|
||||||
|
- HIPPIE</title>
|
||||||
|
|
||||||
{% include "demo/partials/_meta.njk" %}
|
{% include "demo/partials/_meta.njk" %}
|
||||||
{% block meta %}{% endblock %}
|
{% block meta %}{% endblock %}
|
||||||
|
|
||||||
{% block links %}
|
{% 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="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"/>
|
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="{{ bodyClass }}">
|
<body class="{{ bodyClass }}">
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
|
||||||
{% import "hippie/macros/footer-status.njk" as status %}
|
{% import "hippie/macros/footer-status.njk" as status %}
|
||||||
{{ status.footer() }}
|
{{ status.footer() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
<!-- body_hover.partial -->
|
<!-- body_hover.partial -->
|
||||||
<div id="js_mob"></div>
|
<div id="js_mob"></div>
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
<!-- body_nav.partial -->
|
<!-- body_nav.partial -->
|
||||||
<div class="pos_rel">
|
<div class="pos_rel">
|
||||||
<nav class="nav_page_meta js_">
|
<nav class="nav_page_meta js_">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="js_scrolltop hide">
|
<li class="js_scrolltop hide">
|
||||||
<a href="#begin" class="a_button_meta">
|
<a href="#begin" class="a_button_meta">
|
||||||
<div class="sprite_img demo__sprite_up"></div>
|
<div class="sprite_img demo__sprite_up"></div>
|
||||||
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
{# <button class="">Show Meta Information</button> #}
|
{# <button class="">Show Meta Information</button> #}
|
||||||
<a href="#meta" class="js_showmeta a_button_meta">
|
<a href="#meta" class="js_showmeta a_button_meta">
|
||||||
<div class="sprite_img demo__sprite_meta"></div>
|
<div class="sprite_img demo__sprite_meta"></div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="js_scrolldown">
|
<li class="js_scrolldown">
|
||||||
<a href="#end" class="a_button_meta">
|
<a href="#end" class="a_button_meta">
|
||||||
<div class="sprite_img demo__sprite_down"></div>
|
<div class="sprite_img demo__sprite_down"></div>
|
||||||
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
|
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
{# <div class="exp_overlay_btn exp_help_btn">
|
{# <div class="exp_overlay_btn exp_help_btn">
|
||||||
<span class="span_solo">?</span>
|
<span class="span_solo">?</span>
|
||||||
</div> #}
|
</div> #}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- footer.partial -->
|
<!-- footer.partial -->
|
||||||
<footer class="footer_site">
|
<footer class="footer_site">
|
||||||
<div id="end"></div>
|
<div id="end"></div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
@ -1,54 +1,65 @@
|
||||||
<!-- head.script.partial -->
|
<!-- head.script.partial -->
|
||||||
<script>
|
<script>
|
||||||
//Entry script at page init
|
//Entry script at page init
|
||||||
var debugOn = false;
|
var debugOn = false;
|
||||||
var debugOnScreen = true;
|
var debugOnScreen = true;
|
||||||
var assetsLoaded = false;
|
var 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
|
||||||
function getTimeDiff () {
|
function getTimeDiff() {
|
||||||
return new Date().getTime() - performance.timing.navigationStart;
|
return new Date().getTime() - performance.timing.navigationStart;
|
||||||
}
|
}
|
||||||
|
|
||||||
// log message to console and add
|
function pad(n, width, z) {
|
||||||
// performance measuring information
|
z = z || '0';
|
||||||
function logPerf (msg, arg) {
|
n = n + '';
|
||||||
if (debugOn) {
|
return n.length >= width
|
||||||
if (debugOnScreen && assetsLoaded) {
|
? n
|
||||||
if (!$('#jsLogPerf').length) {
|
: new Array(width - n.length + 1).join(z) + n;
|
||||||
$('<div><div></div></div>')
|
}
|
||||||
.css('position', 'relative')
|
|
||||||
.find('div')
|
// log message to console and add
|
||||||
.attr('id', 'jsLogPerf')
|
// performance measuring information
|
||||||
.css({
|
function logPerf(msg, arg) {
|
||||||
position: 'fixed',
|
if (debugOn) {
|
||||||
bottom: '16px',
|
if (debugOnScreen && assetsLoaded) {
|
||||||
right: '40px',
|
if (!$('#jsLogPerf').length) {
|
||||||
zIndex: '1000',
|
$('<div><div></div></div>')
|
||||||
padding: '0 8px',
|
.css('position', 'relative')
|
||||||
background: 'rgba(255,255,255,.8)',
|
.find('div')
|
||||||
color: 'rgb(128)',
|
.attr('id', 'jsLogPerf')
|
||||||
fontSize: '1rem'
|
.css({
|
||||||
})
|
position: 'fixed',
|
||||||
.end()
|
bottom: '16px',
|
||||||
.prependTo('body');
|
right: '40px',
|
||||||
// $('body').prepend('<div style="position:relative;"></div>');
|
zIndex: '1000',
|
||||||
// $('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>');
|
padding: '0 8px',
|
||||||
}
|
background: 'rgba(255,255,255,.6)',
|
||||||
$('#jsLogPerf').append('<p><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
color: 'rgb(128)',
|
||||||
// Alternative short-circuit evaluation
|
fontSize: '1rem'
|
||||||
// needs element in document but prevents error if not
|
})
|
||||||
// $log = $log || $('#jslogPerf');
|
.end()
|
||||||
// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
.prependTo('body');
|
||||||
}
|
// $('body').prepend('<div style="position:relative;"></div>');
|
||||||
if (window.console) {
|
// $('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>');
|
||||||
console.debug(getTimeDiff() + 'ms :: ' + msg, (arg ? arg : ''));
|
}
|
||||||
// NOTE Non standard feature. Not available on IE
|
$('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
|
||||||
if (console.timeStamp) {
|
// Alternative short-circuit evaluation
|
||||||
console.timeStamp(msg);
|
// 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) {
|
||||||
</script>
|
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.partial -->
|
||||||
<header class="header_site">
|
<header class="header_site"></header>
|
||||||
</header>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue