manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Merge branch 'feature/languagechange' of /var/lib/git/repositories/manuel/uhr

Browse source
This commit is contained in:
Manuel Friedli 2013-11-25 13:43:48 +01:00
commit 13009a8646
7 changed files with 181 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*~

163
index.html
View file

@ -4,8 +4,11 @@
<title>Die Zeit als Wort - in HTML, CSS und JS</title> <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="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="uhr.js"></script> <script type="text/javascript" src="uhr.js"></script>
<script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript" src="uhr-de.js"></script>
<link rel="stylesheet" type="text/css" href="uhr.css" /> <link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head> </head>
<body> <body>
<div id="uhr"> <div id="uhr">
@ -13,148 +16,21 @@
<span class="item dot dot2" id="dot2"></span> <span class="item dot dot2" id="dot2"></span>
<span class="item dot dot3" id="dot3"></span> <span class="item dot dot3" id="dot3"></span>
<span class="item dot dot4" id="dot4"></span> <span class="item dot dot4" id="dot4"></span>
<div class="textarea"> <div id="renderarea"></div>
<!-- line 1: ESkISCHaFÜF -->
<span class="item letter es">E</span>
<span class="item letter es">S</span>
<span class="item letter">K</span>
<span class="item letter isch">I</span>
<span class="item letter isch">S</span>
<span class="item letter isch">C</span>
<span class="item letter isch">H</span>
<span class="item letter">A</span>
<span class="item letter minute5 minute25 minute35 minute55">F</span>
<span class="item letter minute5 minute25 minute35 minute55">Ü</span>
<span class="item letter minute5 minute25 minute35 minute55">F</span>
<br/>
<!-- line 2: VIERTUbfZÄÄ -->
<span class="item letter minute15 minute45">V</span>
<span class="item letter minute15 minute45">I</span>
<span class="item letter minute15 minute45">E</span>
<span class="item letter minute15 minute45">R</span>
<span class="item letter minute15 minute45">T</span>
<span class="item letter minute15 minute45">U</span>
<span class="item letter">B</span>
<span class="item letter">F</span>
<span class="item letter minute10 minute50">Z</span>
<span class="item letter minute10 minute50">Ä</span>
<span class="item letter minute10 minute50">Ä</span>
<br/>
<!-- line 3: ZWÄNZGsiVOR -->
<span class="item letter minute20 minute40">Z</span>
<span class="item letter minute20 minute40">W</span>
<span class="item letter minute20 minute40">Ä</span>
<span class="item letter minute20 minute40">N</span>
<span class="item letter minute20 minute40">Z</span>
<span class="item letter minute20 minute40">G</span>
<span class="item letter">S</span>
<span class="item letter">I</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">V</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">O</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">R</span>
<br/>
<!-- line 4: ABoHAUBIege -->
<span class="item letter minute5 minute10 minute15 minute20 minute35">A</span>
<span class="item letter minute5 minute10 minute15 minute20 minute35">B</span>
<span class="item letter">O</span>
<span class="item letter minute25 minute30 minute35">H</span>
<span class="item letter minute25 minute30 minute35">A</span>
<span class="item letter minute25 minute30 minute35">U</span>
<span class="item letter minute25 minute30 minute35">B</span>
<span class="item letter minute25 minute30 minute35">I</span>
<span class="item letter">E</span>
<span class="item letter">G</span>
<span class="item letter">E</span>
<br/>
<!-- line 5: EISZWÖIsDRÜ -->
<span class="item letter hour1">E</span>
<span class="item letter hour1">I</span>
<span class="item letter hour1">S</span>
<span class="item letter hour2">Z</span>
<span class="item letter hour2">W</span>
<span class="item letter hour2">Ö</span>
<span class="item letter hour2">I</span>
<span class="item letter">S</span>
<span class="item letter hour3">D</span>
<span class="item letter hour3">R</span>
<span class="item letter hour3">Ü</span>
<br/>
<!-- line 6: VIERIFÜFIqt -->
<span class="item letter hour4">V</span>
<span class="item letter hour4">I</span>
<span class="item letter hour4">E</span>
<span class="item letter hour4">R</span>
<span class="item letter hour4">I</span>
<span class="item letter hour5">F</span>
<span class="item letter hour5">Ü</span>
<span class="item letter hour5">F</span>
<span class="item letter hour5">I</span>
<span class="item letter">Q</span>
<span class="item letter">T</span>
<br/>
<!-- line 7: SÄCHSISIBNI -->
<span class="item letter hour6">S</span>
<span class="item letter hour6">Ä</span>
<span class="item letter hour6">C</span>
<span class="item letter hour6">H</span>
<span class="item letter hour6">S</span>
<span class="item letter hour6">I</span>
<span class="item letter hour7">S</span>
<span class="item letter hour7">I</span>
<span class="item letter hour7">B</span>
<span class="item letter hour7">N</span>
<span class="item letter hour7">I</span>
<br/>
<!-- line 8: ACHTINÜNIel -->
<span class="item letter hour8">A</span>
<span class="item letter hour8">C</span>
<span class="item letter hour8">H</span>
<span class="item letter hour8">T</span>
<span class="item letter hour8">I</span>
<span class="item letter hour9">N</span>
<span class="item letter hour9">Ü</span>
<span class="item letter hour9">N</span>
<span class="item letter hour9">I</span>
<span class="item letter">E</span>
<span class="item letter">L</span>
<br/>
<!-- line 8: ZÄNIerbEUFI -->
<span class="item letter hour10">Z</span>
<span class="item letter hour10">Ä</span>
<span class="item letter hour10">N</span>
<span class="item letter hour10">I</span>
<span class="item letter">E</span>
<span class="item letter">R</span>
<span class="item letter">B</span>
<span class="item letter hour11">E</span>
<span class="item letter hour11">U</span>
<span class="item letter hour11">F</span>
<span class="item letter hour11">I</span>
<br/>
<!-- line 9: ZWÖUFInauhr -->
<span class="item letter hour12">Z</span>
<span class="item letter hour12">W</span>
<span class="item letter hour12">Ö</span>
<span class="item letter hour12">U</span>
<span class="item letter hour12">F</span>
<span class="item letter hour12">I</span>
<span class="item letter">N</span>
<span class="item letter">A</span>
<span class="item letter">U</span>
<span class="item letter">H</span>
<span class="item letter">R</span>
<br/>
</div>
<!-- glossy reflection --> <!-- glossy reflection -->
<span id="reflection"></span> <span id="reflection"></span>
</div> </div>
<div id="themeswitcher"> <select id="themeswitcher">
<input type="radio" name="theme" id="theme-black" value="black" checked="checked" /><label for="theme-black">BLACK</label> <option value="black">Schwarz</option>
<input type="radio" name="theme" id="theme-red" value="red" /><label for="theme-red">RED</label> <option value="red">Rot</option>
<input type="radio" name="theme" id="theme-blue" value="blue" /><label for="theme-blue">BLUE</label> <option value="blue">Blau</option>
<input type="radio" name="theme" id="theme-green" value="green" /><label for="theme-green">GREEN</label> <option value="green">Grün</option>
<input type="radio" name="theme" id="theme-white" value="white" /><label for="theme-white">WHITE</label> <option value="white">Weiss</option>
</div> </select>
<select id="layoutswitcher">
<option value="de_CH">Bärndütsch</option>
<option value="de">Hochdeutsch</option>
</select>
<div class="onoffswitch"> <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="updateClockState()" /> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="updateClockState()" />
<label class="onoffswitch-label" for="onoffswitch"> <label class="onoffswitch-label" for="onoffswitch">
@ -165,10 +41,13 @@
<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('input[name=theme]').on('click', function() { $('#themeswitcher').on('change', function() {
switchTheme(this); switchTheme(this.value);
}); });
startClock(); $('#layoutswitcher').on('change', function() {
switchLayout(this.value);
});
switchLayout('de_CH');
}); });
</script> </script>
</body> </body>

11
manifest.appcache
View file

@ -1,15 +1,18 @@
CACHE MANIFEST CACHE MANIFEST
# 1.5.1 # 2.0
index.html index.html
jquery-2.0.3.min.js jquery-2.0.3.min.js
uhr.css
uhr.js
uhr.woff
uhr-black.css uhr-black.css
uhr-blue.css uhr-blue.css
uhr-de.js
uhr-de_CH.js
uhr-green.css uhr-green.css
uhr-idle-dark.css uhr-idle-dark.css
uhr-idle-light.css uhr-idle-light.css
uhr-red.css uhr-red.css
uhr-white.css uhr-white.css
uhr.css
uhr.js
uhr.woff

16
uhr-de.js Normal file
View file

@ -0,0 +1,16 @@
layout['de'] = {
language: "Deutsch",
values: [
[l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('T', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('N', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
[m('Z', 10, 50), m('E', 10, 50),m('H', 10, 50),m('N', 10, 50),m('Z', 20, 40),m('W', 20, 40),m('A', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('I', 20, 40),m('G', 20, 40)],
[m('D', 45), m('R', 45),m('E', 45),m('I', 45),m('V', 15, 45),m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('L', 15, 45)],
[m('V', 25, 40, 50, 55), m('O', 25, 40, 50, 55),m('R', 25, 40, 50, 55),l('F'),l('U'),l('N'),l('K'),m('N', 5, 10, 15, 20, 35),m('A', 5, 10, 15, 20, 35),m('C', 5, 10, 15, 20, 35),m('H', 5, 10, 15, 20, 35)],
[m('H', 25, 30, 35),m('A', 25, 30, 35),m('L', 25, 30, 35),m('B', 25, 30, 35),l('A'),h('E', 11),h('L', 11),h('F', 5, 11),h('Ü', 5),h('N', 5),h('F', 5)],
[h('E', 1), h('I', 1),h('N', 1),h('S', 1),l('X'),l('A'),l('M'),h('Z', 2),h('W', 2),h('E', 2),h('I', 2)],
[h('D', 3), h('R', 3),h('E', 3),h('I', 3),l('P'),l('M'),l('J'),h('V', 4),h('I', 4),h('E', 4),h('R', 4)],
[h('S', 6), h('E', 6),h('C', 6),h('H', 6),h('S', 6),l('N'),l('L'),h('A', 8),h('C', 8),h('H', 8),h('T', 8)],
[h('S', 7), h('I', 7),h('E', 7),h('B', 7),h('E', 7),h('N', 7),h('Z', 12),h('W', 12),h('Ö', 12),h('L', 12),h('F', 12)],
[h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')]
]
};

16
uhr-de_CH.js Normal file
View file

@ -0,0 +1,16 @@
layout['de_CH'] = {
language: "Bärndütsch",
values: [
[l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('C', 'on'),l('H', 'on'),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)],
[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')]
]
};

5
uhr.css
View file

@ -6,7 +6,6 @@ body {
font-family: 'Uhrenfont', sans-serif; font-family: 'Uhrenfont', sans-serif;
} }
#uhr { #uhr {
display: inline-block;
padding: 3em; padding: 3em;
position: relative; position: relative;
margin: 0; margin: 0;
@ -26,7 +25,7 @@ body {
} }
#themeswitcher { #themeswitcher {
} }
.textarea { #renderarea {
display: block; display: block;
position: absolute; position: absolute;
top: 5em; top: 5em;
@ -70,7 +69,7 @@ body {
height: 10%; height: 10%;
width: 9.0909%; width: 9.0909%;
padding: 0; padding: 0;
margin: 0 -4px 0 0; margin: 0;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-size: 2.2em; font-size: 2.2em;

137
uhr.js
View file

@ -1,41 +1,63 @@
var clock = null; var clock = null;
var currentMinute = -1; var currentMinute = -1;
var layout = new Array();
layout['default'] = {
language: 'Undefined',
values: []
};
var currentLayout = layout['default'];
function highlightCurrentTime() { function highlightCurrentTime() {
var now = new Date(); var now = new Date();
var hour = now.getHours(); var dotMinute = getDotMinute(now);
var minute = now.getMinutes(); if (dotMinute == currentMinute) {
if (minute == currentMinute) {
return; return;
} }
currentMinute = minute; currentMinute = dotMinute;
var hour = getHour(now);
var coarseMinute = getCoarseMinute(now);
resetItems(); resetItems();
var dotMinute = minute % 5;
var coarseMinute = minute - dotMinute;
for (var i = 1; i <= dotMinute; i++) { for (var i = 1; i <= dotMinute; i++) {
highlight('dot' + i); highlight('dot' + i);
} }
highlight('minute' + coarseMinute); highlight('minute' + coarseMinute);
if (coarseMinute >= 25) {
hour++;
}
hour = normalizeHour(hour); hour = normalizeHour(hour);
highlight('hour' + hour); highlight('hour' + hour);
} }
function getHour(date) {
if (typeof currentLayout.getHour === 'function') {
return currentLayout.getHour(date);
}
var hour = date.getHours();
if (date.getMinutes() >= 25) {
return hour + 1;
}
return hour;
}
function getCoarseMinute(date) {
if (typeof currentLayout.getCoarseMinute === 'function') {
return currentLayout.getCoarseMinute(date);
}
var minutes = date.getMinutes();
return minutes - getDotMinute(date);
}
function getDotMinute(date) {
if (typeof currentLayout.getDotMinute === 'function') {
return currentLayout.getDotMinute(date);
}
var minutes = date.getMinutes();
return minutes % 5;
}
function clearDisplay() { function clearDisplay() {
$('.item').removeClass('active'); $('.item').removeClass('active');
} }
function resetItems() { function resetItems() {
clearDisplay() clearDisplay()
highlight('es'); highlight('on');
highlight('isch');
} }
function highlight(itemClass) { function highlight(itemClass) {
$('.item.' + itemClass).addClass('active'); $('.item.' + itemClass).addClass('active');
} }
function normalizeHour(hour) { function normalizeHour(hour) {
if (hour > 12) { if (hour > 12) {
hour %= 12; hour %= 12;
@ -45,13 +67,12 @@ function normalizeHour(hour) {
} }
return hour; return hour;
} }
function startClock() { function startClock() {
if (clock == null) { if (clock == null) {
highlightCurrentTime();
clock = window.setInterval(highlightCurrentTime, 1000); clock = window.setInterval(highlightCurrentTime, 1000);
} }
} }
function stopClock() { function stopClock() {
if (clock != null) { if (clock != null) {
window.clearInterval(clock); window.clearInterval(clock);
@ -60,15 +81,91 @@ function stopClock() {
clearDisplay(); clearDisplay();
} }
} }
function updateClockState() { function updateClockState() {
if ($('#onoffswitch').is(':checked')) { if (isOn()) {
startClock(); startClock();
} else { } else {
stopClock(); stopClock();
} }
} }
function switchTheme(element) { function isOn() {
var theme = $(element).val() return $('#onoffswitch').is(':checked');
}
function switchTheme(theme) {
$('#theme').attr('href', 'uhr-' + theme + '.css'); $('#theme').attr('href', 'uhr-' + theme + '.css');
} }
function switchLayout(locale) {
stopClock();
currentLayout = layout[locale];
if (currentLayout == undefined) {
currentLayout = layout['default'];
}
renderLayout();
if (isOn()) {
startClock();
}
}
function renderLayout() {
var container = $('#renderarea');
container.empty();
for (var y = 0; y < currentLayout.values.length; y++) {
for (var x = 0; x < currentLayout.values[y].length; x++) {
var letter = currentLayout.values[y][x];
container.append(letter.toString());
}
if (y < currentLayout.values.length - 1) {
container.append('<br/>');
}
}
}
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>";
}
/**
* Hilfsfunktion, um einen Buchstaben zu erzeugen.
*
* @param letter string: Der Buchstabe, der angezeigt werden soll
* @example l('I', 'is') erzeugt den Buchstaben 'I' mit der CSS-Styleklasse 'is'
*/
function l(letter, style) {
return new Letter(letter, style);
}
/**
* Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Stunden-Wort gehört.
*
* @param letter string: Der Buchstabe, der angezeigt werden soll
* @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll
* @example h('Z', 2), 11 erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird
*/
function h(letter) {
var style = '';
for (var i = 1; i < arguments.length; i++) {
style += ' hour' + arguments[i];
}
return l(letter, style);
}
/**
* Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Minuten-Wort gehört.
*
* @param letter string: Der Buchstabe, der angezeigt werden soll
* @param minutes... integer: Eine Aufzählung von Minutenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll
* @example m('A', 5, 10, 15, 20, 35) erzeugt den Buchstaben 'A' der um :05, :10, :15, :20 und :35 aktiv angezeigt wird
*/
function m(letter) {
var style = '';
for (var i = 1; i < arguments.length; i++) {
style += ' minute' + arguments[i];
}
return l(letter, style);
}