Javascript work
This commit is contained in:
Stephan
parent
4cb89ec7af
commit
9ce65091f4
11 changed files with 995 additions and 934 deletions
17
gulpfile.js
17
gulpfile.js
|
|
@ -44,7 +44,16 @@ const input = {
|
|||
templates: 'source/templates',
|
||||
data: 'source/data/**/*.json',
|
||||
style: 'source/style/**/*.s+(a|c)ss',
|
||||
code: ['source/code/hippie/variables.js', 'source/code/hippie/functions.js', 'source/code/hippie/global.js', 'source/code/variables.js', 'source/code/functions.js', 'source/code/global.js', 'source/code/**/*.js', '!source/vendor/**/*'],
|
||||
code: [
|
||||
'source/code/hippie/variables.js',
|
||||
'source/code/hippie/functions.js',
|
||||
'source/code/hippie/global.js',
|
||||
'source/code/variables.js',
|
||||
'source/code/functions.js',
|
||||
'source/code/global.js',
|
||||
'source/code/**/*.js',
|
||||
'!source/vendor/**/*'
|
||||
],
|
||||
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
|
||||
art: {
|
||||
favicons: 'source/art/favicons/**/*.+(ico|png)',
|
||||
|
|
@ -70,10 +79,10 @@ const output = {
|
|||
};
|
||||
|
||||
//Check for index file and deactivate demo content
|
||||
if (fs.existsSync('source/screens/index.njk')){
|
||||
if (fs.existsSync('source/screens/index.njk')) {
|
||||
hippie.index = 'index.html';
|
||||
}
|
||||
if (fs.existsSync('source/templates/data.json')){
|
||||
if (fs.existsSync('source/templates/data.json')) {
|
||||
hippie.data = 'data.json';
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +160,7 @@ function style() {
|
|||
// Linting
|
||||
function styleLint() {
|
||||
var dir = output.reports;
|
||||
if (!fs.existsSync(dir)){
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
var file = fs.createWriteStream(output.reports +'/sass-lint.html');
|
||||
|
|
|
|||
|
|
@ -1,15 +1,55 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
|
||||
function setup() {
|
||||
console.log('\n', hippie.brand, '\n\n');
|
||||
console.info('Debug information:\n\nHTML height is', htmlH, '\nBODY height is', bodyH, '\nVIEW height is', viewH);
|
||||
|
||||
if($('#js_tph').length && viewHover) {
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
if (debugOn) {
|
||||
console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
|
||||
}
|
||||
if ($('#js_tph').length && viewHover) {
|
||||
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
|
||||
$('#js_tph').addClass("hover_full_view_change");
|
||||
}
|
||||
}
|
||||
|
||||
// MODULE Scroll navigation
|
||||
function HippieScroll($el) {
|
||||
'use strict';
|
||||
// Toggle display on scroll position
|
||||
// console.log('Scroll object added');
|
||||
this.check = function() {
|
||||
// console.log('Scroll position checked');
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$el.parent().removeClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$el.parent().addClass('magic');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
}
|
||||
// Add events to navigation elements
|
||||
$('.js_scrolltop').click(function(event) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$('.js_scrolldown').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);
|
||||
});
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
// function getCoords(elem) {
|
||||
// let box = elem.getBoundingClientRect();
|
||||
|
|
@ -44,7 +84,7 @@ var Utils = new Utils();
|
|||
// TEST
|
||||
|
||||
function scrollNav() {
|
||||
$('.nav a').click(function(){
|
||||
$('.nav a').click(function() {
|
||||
//Toggle Class
|
||||
$(".active").removeClass("active");
|
||||
$(this).closest('li').addClass("active");
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ setup();
|
|||
|
||||
// DOM ready
|
||||
// -----------------------------------------------------------------------------
|
||||
$(document).ready(function(){
|
||||
"use strict";
|
||||
$(document).ready(function() {
|
||||
'use strict';
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
|
||||
|
|
@ -17,16 +17,16 @@ $(document).ready(function(){
|
|||
|
||||
// Displays explanation popup
|
||||
$('.js_pop').hover(
|
||||
function(){
|
||||
// if($(this).attr('emmet')){
|
||||
function() {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
}, function(){
|
||||
}, function() {
|
||||
$(this).next('.exp_pop').hide();
|
||||
}
|
||||
).mousemove(
|
||||
function(event){
|
||||
function(event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
|
|
@ -39,14 +39,14 @@ $(document).ready(function(){
|
|||
|
||||
// WIP Activates layer with explanation elements
|
||||
// Besser ::after oder ::before benutzen
|
||||
$('.js_showmeta').click(function(e){
|
||||
$('.js_showmeta').click(function(e) {
|
||||
var $wrap, $pop;
|
||||
|
||||
if(expMode !== true){
|
||||
if (expMode !== true) {
|
||||
expMode = true;
|
||||
|
||||
$('.js_pop').each(function(i, e){
|
||||
if($(this).css('position') === 'static'){
|
||||
$('.js_pop').each(function(i, e) {
|
||||
if ($(this).css('position') === 'static') {
|
||||
$(this).addClass('js_changed_pos');
|
||||
$(this).css('position', 'relative');
|
||||
}
|
||||
|
|
@ -57,15 +57,15 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
} else {
|
||||
$('.js_pop').each(function(i, e){
|
||||
$('.js_pop').each(function(i, e) {
|
||||
$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')){
|
||||
if ($(this).hasClass('js_changed_pos')) {
|
||||
$(this).css('position', '');
|
||||
if($(this).attr('style') === ''){
|
||||
if ($(this).attr('style') === '') {
|
||||
$(this).removeAttr('style');
|
||||
}
|
||||
$(this).removeClass('js_changed_pos');
|
||||
|
|
@ -78,49 +78,10 @@ $(document).ready(function(){
|
|||
console.log('Explanation mode', expMode);
|
||||
});
|
||||
|
||||
// WIP Scroll to top
|
||||
$('.js_scrolltop').click(function(event){
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
});
|
||||
$('.js_scrolldown').click(function(event){
|
||||
event.preventDefault();
|
||||
var pos = Math.max(htmlH, bodyH) - viewH;
|
||||
document.documentElement.scrollTop = pos;
|
||||
console.info('scrolled down to', pos);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#gameIcon').click(function(event){
|
||||
$('#gameIcon').click(function(event) {
|
||||
event.preventDefault();
|
||||
$(this).clone().appendTo('#gameDetail');
|
||||
$(this).siblings().clone().appendTo('#gameDetail');
|
||||
$('#gameDetail').removeClass('magic');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Scroll
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).scroll(function(){
|
||||
"use strict";
|
||||
|
||||
// Toggle navigation elements
|
||||
docPosY = $( document ).scrollTop();
|
||||
if(docPosY > docInitY){
|
||||
if(!docInitleft){
|
||||
$('.js_scrolltop').parent().removeClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
docInitleft = true;
|
||||
} else {
|
||||
if(docInitleft){
|
||||
$('.js_scrolltop').parent().addClass('magic');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
docInitleft = false;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
var hippie = {
|
||||
brand: "|-| | |^ |^ | [- "
|
||||
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 viewW = Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0);
|
||||
var viewH = Math.max(document.documentElement.clientHeight, window.innerHeight, 0);
|
||||
var htmlH = Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0);
|
||||
var bodyW = Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0);
|
||||
var bodyH = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
|
||||
|
||||
var docPosY = 0;
|
||||
var docInitleft = false;
|
||||
var docInitY = viewH;
|
||||
var initLeft = false;
|
||||
var initY = hippie.screen.vh;
|
||||
|
||||
var viewHover = true;
|
||||
var basicEase = 600;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- index.page -->
|
||||
<!-- index.screen -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
|
|
@ -11,42 +11,46 @@
|
|||
|
||||
{% 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 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="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
assetsLoaded = true;
|
||||
logPerf('SCRIPT assets loaded.');
|
||||
$( document ).ready(function() {
|
||||
logPerf('JQ document \'ready\' event fired.');
|
||||
});
|
||||
logPerf('Application ready.');
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
<!-- tests.page -->
|
||||
<!-- tests.screen -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
|
||||
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<form action="">
|
||||
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
|
||||
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
|
||||
</form>
|
||||
|
||||
<p>Navigation</p>
|
||||
|
|
@ -35,59 +35,59 @@
|
|||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE Tests');
|
||||
console.log('HIPPIE Tests');
|
||||
|
||||
});
|
||||
function capLock(e){
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
function capLock(e) {
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if (((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,31 +2,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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" %}
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
{% block links %}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
{% block links %}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="/css/demo.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block body %}{% endblock %}
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
{% 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,52 +2,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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" %}
|
||||
{% include "hippie/partials/_head_script.njk" %}
|
||||
|
||||
{% 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="/css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
<!-- <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="/css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/> -->
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% include "hippie/partials/_body_hover.njk" %}
|
||||
<div id="root">
|
||||
{% include "hippie/partials/_header.njk" %}
|
||||
{% 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
|
||||
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 %}
|
||||
{% 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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,27 +2,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="/css/demo_basic.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="/css/demo_basic.css"/>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
{% block main %}
|
||||
{% block main %}
|
||||
|
||||
{% import "hippie/macros/footer-status.njk" as status %}
|
||||
{{ status.footer() }}
|
||||
{% endblock %}
|
||||
{% import "hippie/macros/footer-status.njk" as status %}
|
||||
{{ status.footer() }}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,58 @@
|
|||
<!-- head.script.partial -->
|
||||
<script>
|
||||
//Entry script at page init
|
||||
var debugOn = true;
|
||||
var debugOnScreen = true;
|
||||
var assetsLoaded = false;
|
||||
|
||||
// get the current time difference between page
|
||||
// Get the current time difference between page
|
||||
// load and when this func was invoked
|
||||
function getTimeDiff() {
|
||||
return new Date().getTime() - performance.timing.navigationStart;
|
||||
}
|
||||
|
||||
var debugOn = true;
|
||||
var $log, assetsLoaded = false;
|
||||
|
||||
// log message to console and add
|
||||
// performance measuring information
|
||||
function logPerf(msg) {
|
||||
if (debugOn) {
|
||||
if (assetsLoaded) {
|
||||
if (!$('#jslogPerf').length) {
|
||||
$('body').prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>')
|
||||
if (debugOnScreen && assetsLoaded) {
|
||||
if (!$('#jsLogPerf').length) {
|
||||
$('<div><div></div></div>')
|
||||
.css('position', 'relative')
|
||||
.find('div')
|
||||
.attr('id', 'jsLogPerf')
|
||||
.css({
|
||||
position: 'fixed',
|
||||
bottom: '4px',
|
||||
right: '40px',
|
||||
zIndex: '1000',
|
||||
padding: '0 8px',
|
||||
background: 'rgba(255,255,255,.8)',
|
||||
color: 'rgb(128)',
|
||||
fontSize: '12px'
|
||||
})
|
||||
.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>');
|
||||
}
|
||||
$log = $log || $('#jslogPerf');
|
||||
$log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
||||
$('#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.log(getTimeDiff() + 'ms :: ' + msg);
|
||||
if (console.timeStamp){
|
||||
// NOTE Non standard feature. Not available on IE
|
||||
if (console.timeStamp) {
|
||||
console.timeStamp(msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
||||
});
|
||||
logPerf('On HEAD, starting...');
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue