funktionen in die haupt-JS-datei verschoben, neue helperfunktion für minuten, rendern IMMER auf #renderarea

This commit is contained in:
Manuel Friedli 2013-11-25 10:57:30 +01:00
parent d9c07aaa2c
commit 6c08386c82
3 changed files with 35 additions and 29 deletions

View file

@ -3,8 +3,8 @@
<head>
<title>Die Zeit als Wort - in HTML, CSS und JS</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript" src="uhr.js"></script>
<script type="text/javascript" src="uhr-de_CH.js"></script>
<link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
@ -36,7 +36,7 @@
<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
<script type="text/javascript">
$(document).ready(function() {
render(layout, '#renderarea');
render(layout);
$('input[name=theme]').on('click', function() {
switchTheme(this);
});

View file

@ -1,32 +1,11 @@
/*
*/
function Letter(value, style = '') {
this.value = value;
this.style = style;
this.getStyle = function() {
return "item letter " + style;
}
this.getValue = function() {
return value;
}
}
Letter.prototype.toString = function letterToString() {
return "<span class=\"" + this.getStyle() + "\">" + this.getValue() + "</span>";
}
function l(letter, style) {
return new Letter(letter, style);
}
function h(letter, hour) {
return l(letter, 'hour' + hour);
}
var layout = {
language: "Bärndütsch",
locale: "de_CH",
values: [
[l('E', 'es'), l('S', 'es'),l('K'),l('I', 'isch'),l('S', 'isch'),l('C', 'isch'),l('H', 'isch'),l('A'),l('F', 'minute5 minute25 minute35 minute55'),l('Ü', 'minute5 minute25 minute35 minute55'),l('F', 'minute5 minute25 minute35 minute55')],
[l('V', 'minute15 minute45'), l('I', 'minute15 minute45'),l('E', 'minute15 minute45'),l('R', 'minute15 minute45'),l('T', 'minute15 minute45'),l('U', 'minute15 minute45'),l('B'),l('F'),l('Z', 'minute10 minute50'),l('Ä', 'minute10 minute50'),l('Ä', 'minute10 minute50')],
[l('Z', 'minute20 minute40'), l('W', 'minute20 minute40'),l('Ä', 'minute20 minute40'),l('N', 'minute20 minute40'),l('Z', 'minute20 minute40'),l('G', 'minute20 minute40'),l('S'),l('I'),l('V', 'minute25 minute40 minute45 minute50 minute55'),l('O', 'minute25 minute40 minute45 minute50 minute55'),l('R', 'minute25 minute40 minute45 minute50 minute55')],
[l('A', 'minute5 minute10 minute15 minute20 minute35'), l('B', 'minute5 minute10 minute15 minute20 minute35'),l('O'),l('H', 'minute25 minute30 minute35'),l('A', 'minute25 minute30 minute35'),l('U', 'minute25 minute30 minute35'),l('B', 'minute25 minute30 minute35'),l('I', 'minute25 minute30 minute35'),l('E'),l('G'),l('E')],
[l('E', 'es'), l('S', 'es'),l('K'),l('I', 'isch'),l('S', 'isch'),l('C', 'isch'),l('H', 'isch'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
[m('V', 15, 45), m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('U', 15, 45),l('B'),l('F'),m('Z', 10, 50),m('Ä', 10, 50),m('Ä', 10, 50)],
[m('Z', 20, 40), m('W', 20, 40),m('Ä', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('G', 20, 40),l('S'),l('I'),m('V', 25, 40, 45, 50, 55),m('O', 25, 40, 45, 50, 55),m('R', 25, 40, 45, 50, 55)],
[m('A', 5, 10, 15, 20, 35), m('B', 5, 10, 15, 20, 35),l('O'),m('H', 25, 30, 35),m('A', 25, 30, 35),m('U', 25, 30, 35),m('B', 25, 30, 35),m('I', 25, 30, 35),l('E'),l('G'),l('E')],
[h('E', 1), h('I', 1),h('S', 1),h('Z', 2),h('W', 2),h('Ö', 2),h('I', 2),l('S'),h('D', 3),h('R', 3),h('Ü', 3)],
[h('V', 4), h('I', 4),h('E', 4),h('R', 4),h('I', 4),h('F', 5),h('Ü', 5),h('F', 5),h('I', 5),l('Q'),l('T')],
[h('S', 6), h('Ä', 6),h('C', 6),h('H', 6),h('S', 6),h('I', 6),h('S', 7),h('I', 7),h('B', 7),h('N', 7),h('I', 7)],

31
uhr.js
View file

@ -73,8 +73,8 @@ function switchTheme(element) {
$('#theme').attr('href', 'uhr-' + theme + '.css');
}
function render(layout, containerelement) {
var container = $(containerelement);
function render(layout) {
var container = $('#renderarea');
for (var y = 0; y < layout.values.length; y++) {
for (var x = 0; x < layout.values[y].length; x++) {
var letter = layout.values[y][x];
@ -86,3 +86,30 @@ function render(layout, containerelement) {
}
}
function Letter(value, style = '') {
this.value = value;
this.style = style;
this.getStyle = function() {
return "item letter " + style;
}
this.getValue = function() {
return value;
}
}
Letter.prototype.toString = function letterToString() {
return "<span class=\"" + this.getStyle() + "\">" + this.getValue() + "</span>";
}
function l(letter, style) {
return new Letter(letter, style);
}
function h(letter, hour) {
return l(letter, 'hour' + hour);
}
function m(letter) {
var style = '';
for (var i = 1; i < arguments.length; i++) {
style += ' minute' + arguments[i];
}
return l(letter, style);
}