erster entwurf einer sprachabhängigen inhaltsdefinition

This commit is contained in:
Manuel Friedli 2013-11-24 19:31:14 +01:00
parent d842baa667
commit 10b7de11eb
4 changed files with 56 additions and 0 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*~

View file

@ -3,6 +3,7 @@
<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>
<link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
@ -13,6 +14,7 @@
<span class="item dot dot2" id="dot2"></span>
<span class="item dot dot3" id="dot3"></span>
<span class="item dot dot4" id="dot4"></span>
<!-- <div id="renderarea"></div> -->
<div class="textarea">
<!-- line 1: ESkISCHaFÜF -->
<span class="item letter es">E</span>
@ -165,6 +167,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');
$('input[name=theme]').on('click', function() {
switchTheme(this);
});

38
uhr-de_CH.js Normal file
View file

@ -0,0 +1,38 @@
/*
*/
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')],
[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)],
[h('A', 8), h('C', 8),h('H', 8),h('T', 8),h('I', 8),h('N', 9),h('Ü', 9),h('N', 9),h('I', 9),l('E'),l('L')],
[h('Z', 10), h('Ä', 10),h('N', 10),h('I', 10),l('E'),l('R'),l('B'),h('E', 11),h('U', 11),h('F', 11),h('I', 11)],
[h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')]
]
};

14
uhr.js
View file

@ -72,3 +72,17 @@ function switchTheme(element) {
var theme = $(element).val()
$('#theme').attr('href', 'uhr-' + theme + '.css');
}
function render(layout, containerelement) {
var container = $(containerelement);
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];
container.append(letter.toString());
}
if (y < layout.values.length - 1) {
container.append('<br/>');
}
}
}