Javascript work
This commit is contained in:
Stephan
parent
4cb89ec7af
commit
9ce65091f4
11 changed files with 995 additions and 934 deletions
|
|
@ -1,52 +1,56 @@
|
|||
<!-- index.page -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ 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>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- index.screen -->
|
||||
{% set pageId = "index" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
|
||||
{% block title %}Index{% endblock %}
|
||||
{% block head %}
|
||||
{{ 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>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="./js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<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,94 +1,94 @@
|
|||
<!-- tests.page -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
{% import "demo/macros/_nav.njk" as nav %}
|
||||
|
||||
{% block title %}Tests{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<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>
|
||||
</form>
|
||||
|
||||
<p>Navigation</p>
|
||||
{{ nav.main(data.demoadditionallinks, 'Tests') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
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 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';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
<!-- tests.screen -->
|
||||
{% set pageId = "tests" %}
|
||||
{% set pageClass = "h_full_view" %}
|
||||
|
||||
{% extends "demo/_default.njk" %}
|
||||
{% import "demo/macros/_nav.njk" as nav %}
|
||||
|
||||
{% block title %}Tests{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<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>
|
||||
</form>
|
||||
|
||||
<p>Navigation</p>
|
||||
{{ nav.main(data.demoadditionallinks, 'Tests') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
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 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';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue