Merge branch 'feature/refactor-layout-definition' into 'develop'
Feature/Refactor Layout Definition
This commit is contained in:
commit
56f20907d9
9 changed files with 540 additions and 151 deletions
|
|
@ -32,7 +32,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
</head>
|
||||
<body style="padding:0;margin:0;">
|
||||
<div id="uhr"></div>
|
||||
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a></p>
|
||||
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a> - <a href="showcase">View full showcase!</a></p>
|
||||
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
CACHE MANIFEST
|
||||
# 5.1
|
||||
# 6.0
|
||||
|
||||
COPYING
|
||||
README.md
|
||||
|
|
@ -13,13 +13,16 @@ uhr-black.css
|
|||
uhr-blue.css
|
||||
uhr-de.js
|
||||
uhr-de_CH.js
|
||||
uhr-de_CH_genau.js
|
||||
uhr-en.js
|
||||
uhr-green.css
|
||||
uhr-pink.css
|
||||
uhr-red.css
|
||||
uhr-white.css
|
||||
uhr-yellow.css
|
||||
uhr.css
|
||||
uhr.js
|
||||
uhr.woff
|
||||
info/index.html
|
||||
info/info.css
|
||||
showcase/index.html
|
||||
|
|
|
|||
61
showcase/index.html
Normal file
61
showcase/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<html manifest="../manifest.appcache">
|
||||
<head>
|
||||
<title>Bärneruhr - Die Zeit im Wort: Showcase</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
|
||||
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-black.css" data-class="black" data-name="Schwarz" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-white.css" data-class="white" data-name="Weiss" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-red.css" data-class="red" data-name="Rot" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-green.css" data-class="green" data-name="Grün" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-yellow.css" data-class="yellow" data-name="Gelb" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-blue.css" data-class="blue" data-name="Blau" />
|
||||
<link rel="stylesheet" type="text/css" href="../uhr-pink.css" data-class="pink" data-name="Pink" />
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.png" />
|
||||
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
|
||||
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../jquery-cookie-1.4.0.js"></script>
|
||||
<script type="text/javascript" src="../uhr.js"></script>
|
||||
</head>
|
||||
<body style="padding:0;margin:0;">
|
||||
<div id="uhr"></div>
|
||||
<p ><a href="..">Go back to the main page</a></p>
|
||||
<script type="text/javascript" src="../uhr-de_CH.js"></script>
|
||||
<script type="text/javascript" src="../uhr-de_CH_genau.js"></script>
|
||||
<script type="text/javascript" src="../uhr-de.js"></script>
|
||||
<script type="text/javascript" src="../uhr-en.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function($) {
|
||||
var width = $(window).width();
|
||||
var height = $(window).height() - 150;
|
||||
var size = width < height ? width : height;
|
||||
if (size < 200) {
|
||||
size = 200;
|
||||
}
|
||||
$('#uhr').uhr({
|
||||
width: size + 'px',
|
||||
language: 'de_CH'
|
||||
});
|
||||
})(jQuery);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
uhr-de.js
70
uhr-de.js
|
|
@ -12,19 +12,59 @@ GNU General Public License for more details.
|
|||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
var layout = {
|
||||
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')]
|
||||
]
|
||||
var h = {
|
||||
"_es_ist": {1:[1,2,4,5,6]},
|
||||
"_nach": {4:[8,9,10,11]},
|
||||
"_vor": {4:[1,2,3]},
|
||||
"_halb": {5:[1,2,3,4]},
|
||||
"_5": {1:[8,9,10,11]},
|
||||
"_10": {2:[1,2,3,4]},
|
||||
"_15": {3:[5,6,7,8,9,10,11]},
|
||||
"_20": {2:[5,6,7,8,9,10,11]},
|
||||
"_45": {3:[1,2,3,4,5,6,7,8,9,10,11]}
|
||||
};
|
||||
window._uhr.languages['de'] = layout;
|
||||
var layout = {
|
||||
"version": 2,
|
||||
"language": 'Deutsch',
|
||||
"letters": [
|
||||
'ESKISTAFÜNF',
|
||||
'ZEHNZWANZIG',
|
||||
'DREIVIERTEL',
|
||||
'VORFUNKNACH',
|
||||
'HALBAELFÜNF',
|
||||
'EINSXAMZWEI',
|
||||
'DREIPMJVIER',
|
||||
'SECHSNLACHT',
|
||||
'SIEBENZWÖLF',
|
||||
'ZEHNEUNKUHR'
|
||||
],
|
||||
"permanent": h._es_ist,
|
||||
"minutes": {
|
||||
"5,6,7,8,9": [h._5, h._nach],
|
||||
"10,11,12,13,14": [h._10, h._nach],
|
||||
"15,16,17,18,19": [h._15, h._nach],
|
||||
"20,21,22,23,24": [h._20, h._nach],
|
||||
"25,26,27,28,29": [h._5, h._vor, h._halb],
|
||||
"30,31,32,33,34": h._halb,
|
||||
"35,36,37,38,39": [h._5, h._nach, h._halb],
|
||||
"40,41,42,43,44": [h._20, h._vor],
|
||||
"45,46,47,48,49": h._45,
|
||||
"50,51,52,53,54": [h._10, h._vor],
|
||||
"55,56,57,58,59": [h._5, h._vor]
|
||||
},
|
||||
"hours": {
|
||||
"1": {6:[1,2,3,4]},
|
||||
"2": {6:[8,9,10,11]},
|
||||
"3": {7:[1,2,3,4]},
|
||||
"4": {7:[8,9,10,11]},
|
||||
"5": {5:[8,9,10,11]},
|
||||
"6": {8:[1,2,3,4,5]},
|
||||
"7": {9:[1,2,3,4,5,6]},
|
||||
"8": {8:[8,9,10,11]},
|
||||
"9": {10:[4,5,6,7]},
|
||||
"10": {10:[1,2,3,4]},
|
||||
"11": {5:[6,7,8]},
|
||||
"12": {9:[7,8,9,10,11]}
|
||||
}
|
||||
};
|
||||
window,_uhr.register('de', layout);
|
||||
|
|
|
|||
96
uhr-de_CH.js
96
uhr-de_CH.js
|
|
@ -12,19 +12,85 @@ GNU General Public License for more details.
|
|||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
var layout = {
|
||||
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')]
|
||||
]
|
||||
// hilfsvariablen
|
||||
var h = {
|
||||
"_es_isch": {1:[1,2,4,5,6,7]},
|
||||
"_ab": {4:[1,2]},
|
||||
"_vor": {3:[9,10,11]},
|
||||
"_haubi": {4:[4,5,6,7,8]},
|
||||
"_5": {1:[9,10,11]},
|
||||
"_10": {2:[9,10,11]},
|
||||
"_15": {2:[1,2,3,4,5,6]},
|
||||
"_20": {3:[1,2,3,4,5,6]}
|
||||
};
|
||||
window._uhr.languages['de_CH'] = layout;
|
||||
var layout = {
|
||||
// version: zur Zeit immer 2 (Pflichtattribut)
|
||||
"version": 2,
|
||||
// Sprechender Name der Sprache
|
||||
"language": 'Bärndütsch',
|
||||
// Buchstabenfeld als Array von Strings.
|
||||
"letters": [
|
||||
'ESKISCHAFÜF',
|
||||
'VIERTUBFZÄÄ',
|
||||
'ZWÄNZGSIVOR',
|
||||
'ABOHAUBIEGE',
|
||||
'EISZWÖISDRÜ',
|
||||
'VIERIFÜFIQT',
|
||||
'SÄCHSISIBNI',
|
||||
'ACHTINÜNIEL',
|
||||
'ZÄNIERBEUFI',
|
||||
'ZWÖUFINAUHR'
|
||||
],
|
||||
// Permanent aktive Buchstaben. <array-or-object>, vgl. ausführliche Beschreibung bei "minutes".
|
||||
"permanent": h._es_isch,
|
||||
/*
|
||||
* Minuten: Objekt im folgenden Format:
|
||||
* {
|
||||
* <minuten>: <array-or-object>,
|
||||
* ...
|
||||
* }
|
||||
* <minuten>: String von Komma-separierten Minutenwerten, zu welchem die in <array-or-object> angegebenen Buchstaben aktiv sein sollen
|
||||
* <array-or-object> : [ <object>, ...] | <object>
|
||||
* <object>: { <zeile> : [ <spalte>, ... ] }
|
||||
* <zeile>: Die Zeile, in welcher die Buchstaben liegen; von oben gezählt, oben ist 1.
|
||||
* <spalte>: Die Spalte, in der ein einzelner Buchstabe liegt; von links gezählt, links ist 1.
|
||||
* Beispiel:
|
||||
* "minutes": {
|
||||
* "0,1": {1: [6, 7, 9]},
|
||||
* "5": [ {3: [1, 2]}, {4: [10, 11]} ]
|
||||
* }
|
||||
* Erklärung:
|
||||
* Bei Minuten 0 und 1 sind die Buchstaben 6, 7 und 9 der ersten Zeile aktiv.
|
||||
* Bei Minute 5 sind die Buchstaben 1 und 2 der Zeile 3 sowie die Buchstaben 10 und 11 der Zeile 4 aktiv.
|
||||
*/
|
||||
"minutes": {
|
||||
"5,6,7,8,9": [h._5, h._ab],
|
||||
"10,11,12,13,14": [h._10, h._ab],
|
||||
"15,16,17,18,19": [h._15, h._ab],
|
||||
"20,21,22,23,24": [h._20, h._ab],
|
||||
"25,26,27,28,29": [h._5, h._vor, h._haubi],
|
||||
"30,31,32,33,34": h._haubi,
|
||||
"35,36,37,38,39": [h._5, h._ab, h._haubi],
|
||||
"40,41,42,43,44": [h._20, h._vor],
|
||||
"45,46,47,48,49": [h._15, h._vor],
|
||||
"50,51,52,53,54": [h._10, h._vor],
|
||||
"55,56,57,58,59": [h._5, h._vor]
|
||||
},
|
||||
// Die Stunden; gleiches Format wie bei den Minuten
|
||||
"hours": {
|
||||
"1": {5:[1,2,3]},
|
||||
"2": {5:[4,5,6,7]},
|
||||
"3": {5:[9,10,11]},
|
||||
"4": {6:[1,2,3,4,5]},
|
||||
"5": {6:[6,7,8,9]},
|
||||
"6": {7:[1,2,3,4,5,6]},
|
||||
"7": {7:[7,8,9,10,11]},
|
||||
"8": {8:[1,2,3,4,5]},
|
||||
"9": {8:[6,7,8,9]},
|
||||
"10": {9:[1,2,3,4]},
|
||||
"11": {9:[8,9,10,11]},
|
||||
"12": {10:[1,2,3,4,5,6]}
|
||||
}
|
||||
};
|
||||
// Das Layout bei der Uhr unter dem Code "de_CH" registrieren.
|
||||
window,_uhr.register('de_CH', layout);
|
||||
|
|
|
|||
71
uhr-de_CH_genau.js
Normal file
71
uhr-de_CH_genau.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
var h = {
|
||||
"_es_isch": {1:[1,2,4,5,6,7]},
|
||||
"_genau": {3:[7,8,9,10,11]},
|
||||
"_ab": {4:[4,5]},
|
||||
"_vor": {4:[1,2,3]},
|
||||
"_haubi": {4:[7,8,9,10,11]},
|
||||
"_5": {1:[9,10,11]},
|
||||
"_10": {2:[9,10,11]},
|
||||
"_15": {2:[1,2,3,4,5,6]},
|
||||
"_20": {3:[1,2,3,4,5,6]}
|
||||
};
|
||||
var layout = {
|
||||
"version": 2,
|
||||
"language": 'Bärndütsch (genau)',
|
||||
"letters": [
|
||||
'ESKISCHAFÜF',
|
||||
'VIERTUBFZÄÄ',
|
||||
'ZWÄNZGGENAU',
|
||||
'VORABOHAUBI',
|
||||
'EISZWÖISDRÜ',
|
||||
'VIERIFÜFIQT',
|
||||
'SÄCHSISIBNI',
|
||||
'ACHTINÜNIEL',
|
||||
'ZÄNIERBEUFI',
|
||||
'ZWÖUFINAUHR'
|
||||
],
|
||||
"permanent": h._es_isch,
|
||||
"minutes": {
|
||||
"0": h._genau,
|
||||
"5,6,7,8,9": [h._5, h._ab],
|
||||
"10,11,12,13,14": [h._10, h._ab],
|
||||
"15,16,17,18,19": [h._15, h._ab],
|
||||
"20,21,22,23,24": [h._20, h._ab],
|
||||
"25,26,27,28,29": [h._5, h._vor, h._haubi],
|
||||
"30,31,32,33,34": h._haubi,
|
||||
"35,36,37,38,39": [h._5, h._ab, h._haubi],
|
||||
"40,41,42,43,44": [h._20, h._vor],
|
||||
"45,46,47,48,49": [h._15, h._vor],
|
||||
"50,51,52,53,54": [h._10, h._vor],
|
||||
"55,56,57,58,59": [h._5, h._vor]
|
||||
},
|
||||
"hours": {
|
||||
"1": {5:[1,2,3]},
|
||||
"2": {5:[4,5,6,7]},
|
||||
"3": {5:[9,10,11]},
|
||||
"4": {6:[1,2,3,4,5]},
|
||||
"5": {6:[6,7,8,9]},
|
||||
"6": {7:[1,2,3,4,5,6]},
|
||||
"7": {7:[7,8,9,10,11]},
|
||||
"8": {8:[1,2,3,4,5]},
|
||||
"9": {8:[6,7,8,9]},
|
||||
"10": {9:[1,2,3,4]},
|
||||
"11": {9:[8,9,10,11]},
|
||||
"12": {10:[1,2,3,4,5,6]}
|
||||
}
|
||||
};
|
||||
window,_uhr.register('de_CH_genau', layout);
|
||||
64
uhr-en.js
64
uhr-en.js
|
|
@ -12,9 +12,22 @@ GNU General Public License for more details.
|
|||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
var h = {
|
||||
"_it_is": {1:[1,2,4,5]},
|
||||
"_half": {4:[1,2,3,4]},
|
||||
"_to": {4:[10,11]},
|
||||
"_past": {5:[1,2,3,4]},
|
||||
"_o_clock": {10:[6,7,8,9,10,11]},
|
||||
"_5": {3:[7,8,9,10]},
|
||||
"_10": {4:[6,7,8]},
|
||||
"_15": {2:[1,3,4,5,6,7,8,9]},
|
||||
"_20": {3:[1,2,3,4,5,6]},
|
||||
"_25": {3:[1,2,3,4,5,6,7,8,9,10]}
|
||||
};
|
||||
var layout = {
|
||||
language: 'English',
|
||||
values: [
|
||||
"version": 2,
|
||||
"language": 'English',
|
||||
/*
|
||||
[l('I', 'on'), l('T', 'on'),l('L'),l('I', 'on'),l('S', 'on'),l('B'),l('F'),l('A'),l('M'),l('P'),l('M')],
|
||||
[m('A', 15, 45), l('C'),m('Q', 15, 45),m('U', 15, 45),m('A', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('R', 15, 45),l('D'),l('C')],
|
||||
[m('T', 20, 25, 35, 40), m('W', 20, 25, 35, 40),m('E', 20, 25, 35, 40),m('N', 20, 25, 35, 40),m('T', 20, 25, 35, 40),m('Y', 20, 25, 35, 40),m('F', 5, 25, 35, 55),m('I', 5, 25, 35, 55),m('V', 5, 25, 35, 55),m('E', 5, 25, 35, 55),l('X')],
|
||||
|
|
@ -25,8 +38,49 @@ var layout = {
|
|||
[h('E', 8), h('I', 8),h('G', 8),h('H', 8),h('T', 8),h('E', 11),h('L', 11),h('E', 11),h('V', 11),h('E', 11),h('N', 11)],
|
||||
[h('S', 7), h('E', 7),h('V', 7),h('E', 7),h('N', 7),h('T', 12),h('W', 12),h('E', 12),h('L', 12),h('V', 12),h('E', 12)],
|
||||
[h('T', 10), h('E', 10),h('N', 10),l('S'),l('E'),l('O', 'sharphour'),l('C', 'sharphour'),l('L', 'sharphour'),l('O', 'sharphour'),l('C', 'sharphour'),l('K', 'sharphour')]
|
||||
],
|
||||
getHour: function(date) {
|
||||
*/
|
||||
"letters": [
|
||||
'ITLISBFAMPM',
|
||||
'ACQUARTERDC',
|
||||
'TWENTYFIVEX',
|
||||
'HALFBTENFTO',
|
||||
'PASTERUNINE',
|
||||
'ONESIXTHREE',
|
||||
'FOURFIVETWO',
|
||||
'EIGHTELEVEN',
|
||||
'SEVENTWELVE',
|
||||
'TENSEOCLOCK'
|
||||
],
|
||||
"permanent": h._it_is,
|
||||
"minutes": {
|
||||
"0,1,2,3,4": h._o_clock,
|
||||
"5,6,7,8,9": [h._5, h._past],
|
||||
"10,11,12,13,14": [h._10, h._past],
|
||||
"15,16,17,18,19": [h._15, h._past],
|
||||
"20,21,22,23,24": [h._20, h._past],
|
||||
"25,26,27,28,29": [h._25, h._past],
|
||||
"30,31,32,33,34": [h._half, h._past],
|
||||
"35,36,37,38,39": [h._25, h._to],
|
||||
"40,41,42,43,44": [h._20, h._to],
|
||||
"45,46,47,48,49": [h._15, h._to],
|
||||
"50,51,52,53,54": [h._10, h._to],
|
||||
"55,56,57,58,59": [h._5, h._to]
|
||||
},
|
||||
"hours": {
|
||||
"1": {6:[1,2,3]},
|
||||
"2": {7:[9,10,11]},
|
||||
"3": {6:[7,8,9,10,11]},
|
||||
"4": {7:[1,2,3,4]},
|
||||
"5": {7:[5,6,7,8]},
|
||||
"6": {6:[4,5,6]},
|
||||
"7": {9:[1,2,3,4,5]},
|
||||
"8": {8:[1,2,3,4,5]},
|
||||
"9": {5:[8,9,10,11]},
|
||||
"10": {10:[1,2,3]},
|
||||
"11": {8:[6,7,8,9,10,11]},
|
||||
"12": {9:[6,7,8,9,10,11]}
|
||||
},
|
||||
"getHour": function(date) {
|
||||
var hour = date.getHours();
|
||||
if (date.getMinutes() >= 35) {
|
||||
return hour + 1;
|
||||
|
|
@ -34,4 +88,4 @@ var layout = {
|
|||
return hour;
|
||||
}
|
||||
};
|
||||
window._uhr.languages['en'] = layout;
|
||||
window,_uhr.register('en', layout);
|
||||
|
|
|
|||
36
uhr-yellow.css
Normal file
36
uhr-yellow.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
.uhr.yellow {
|
||||
background-color: #fd0;
|
||||
}
|
||||
.uhr.yellow .dot.active{
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 0.1em #fff;
|
||||
}
|
||||
.uhr.yellow .letter.active{
|
||||
color: #fff;
|
||||
text-shadow: 0 0 0.1em #fff;
|
||||
}
|
||||
.yellow .onoffswitch-inner:before {
|
||||
background-color: #fd0;
|
||||
}
|
||||
.uhr.yellow .dot:not(.active) {
|
||||
border-color: rgba(0,0,0,0.05);
|
||||
box-shadow: 0 0 0.1em rgba(0,0,0,0.05);
|
||||
}
|
||||
.uhr.yellow .letter:not(.active) {
|
||||
color: rgba(0,0,0,0.05);
|
||||
text-shadow: 0 0 0.1em rgba(0,0,0,0.05);
|
||||
}
|
||||
286
uhr.js
286
uhr.js
|
|
@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
(function($) {
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
if (window._uhr !== undefined) {
|
||||
return;
|
||||
|
|
@ -22,7 +22,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
window._uhr = {
|
||||
id: 0,
|
||||
languages: [],
|
||||
themes: []
|
||||
themes: [],
|
||||
register: function(code, language) {
|
||||
for (var i = 0; i < this.languages.length; i++) {
|
||||
if (code == this.languages[i].code) {
|
||||
console.error('Error: Language code ' + code + ' cannot be registered for language "' + language.language + '" because it is already registered for language "' + this.languages[i].language + '"!');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
language.code = code;
|
||||
this.languages.push(language);
|
||||
}
|
||||
};
|
||||
// auto-detect themes
|
||||
var styleSheets = $('head link[rel=stylesheet]');
|
||||
|
|
@ -34,7 +44,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
if (name === undefined) {
|
||||
name = styleClass;
|
||||
}
|
||||
window._uhr.themes.push({'class': styleClass, 'name': name});
|
||||
window._uhr.themes.push({'styleClass': styleClass, 'name': name});
|
||||
}
|
||||
}
|
||||
// fall-back if no theme was included
|
||||
|
|
@ -46,7 +56,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
width: '100%',
|
||||
status: 'on',
|
||||
language: 'de_CH',
|
||||
theme: window._uhr.themes[0].class,
|
||||
theme: window._uhr.themes[0].styleClass,
|
||||
force: false,
|
||||
controls: true
|
||||
},
|
||||
|
|
@ -54,6 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
if (!this._isOn()) {
|
||||
var uhr = this;
|
||||
this._timer = window.setInterval(function() {
|
||||
uhr.options.time = new Date();
|
||||
uhr._update();
|
||||
}, 1000);
|
||||
this._update();
|
||||
|
|
@ -98,21 +109,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
}
|
||||
},
|
||||
time: function(time) {
|
||||
this.options.time = time;
|
||||
this._currentMinute = -1;
|
||||
if (time == null) {
|
||||
this._currentMinute = -1;
|
||||
this._update();
|
||||
this.options.time = new Date();
|
||||
} else {
|
||||
if (this._timer != null) {
|
||||
window.clearInterval(this._timer);
|
||||
}
|
||||
var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea'));
|
||||
var uhr = this;
|
||||
renderer.render(this, function() {
|
||||
uhr._show(time);
|
||||
});
|
||||
|
||||
this.options.time = time;
|
||||
}
|
||||
this._update();
|
||||
},
|
||||
// private variables
|
||||
_id: -1,
|
||||
|
|
@ -124,7 +130,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
},
|
||||
_update: function() {
|
||||
if (this._isOn()) {
|
||||
var time = new Date();
|
||||
var time = this.options.time;
|
||||
if (time.getMinutes() == this._currentMinute) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -152,7 +158,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
}
|
||||
},
|
||||
_language: function() {
|
||||
return window._uhr.languages[this.options.language];
|
||||
for (var i = 0; i < window._uhr.languages.length; i++) {
|
||||
var language = window._uhr.languages[i];
|
||||
if (language.code == this.options.language) {
|
||||
return language;
|
||||
}
|
||||
}
|
||||
// fallback: return empty object
|
||||
return {};
|
||||
},
|
||||
_highlight: function(itemClass) {
|
||||
this.element.find('.item.' + itemClass).addClass('active');
|
||||
|
|
@ -174,8 +187,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
if (typeof this._language().getCoarseMinute === 'function') {
|
||||
return this._language().getCoarseMinute(date);
|
||||
}
|
||||
var minutes = date.getMinutes();
|
||||
return minutes - this._getDotMinute(date);
|
||||
return date.getMinutes();
|
||||
},
|
||||
_getDotMinute: function(date) {
|
||||
if (typeof this._language().getDotMinute === 'function') {
|
||||
|
|
@ -195,10 +207,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
},
|
||||
_create: function() {
|
||||
this._id = window._uhr.id++;
|
||||
var userTime = this.options.time;
|
||||
if (this.options.time === undefined) {
|
||||
this.options.time = new Date();
|
||||
}
|
||||
this._setupHTML();
|
||||
this._wireFunctionality();
|
||||
if (this.options.time !== undefined) {
|
||||
this.time(this.options.time);
|
||||
if (userTime !== undefined) {
|
||||
this.time(userTime);
|
||||
}
|
||||
},
|
||||
_setupHTML: function() {
|
||||
|
|
@ -229,17 +245,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
e.after(toggleSwitch);
|
||||
|
||||
// language chooser
|
||||
var options = [];
|
||||
for (var code in window._uhr.languages) {
|
||||
if (window._uhr.languages.hasOwnProperty(code)) {
|
||||
var language = window._uhr.languages[code];
|
||||
options.push('<option value="' + code + '">' + language.language + '</option>');
|
||||
}
|
||||
}
|
||||
if (options.length > 1) {
|
||||
if (window._uhr.languages.length > 1) {
|
||||
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
languageChooser.append(options[i]);
|
||||
for (var i = 0; i < window._uhr.languages.length; i++) {
|
||||
var language = window._uhr.languages[i];
|
||||
languageChooser.append('<option value="' + language.code + '">' + language.language + '</option>');
|
||||
}
|
||||
e.after(languageChooser);
|
||||
}
|
||||
|
|
@ -249,7 +259,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
|
||||
for (var i = 0; i < window._uhr.themes.length; i++) {
|
||||
var theme = window._uhr.themes[i];
|
||||
themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>');
|
||||
themeChooser.append('<option value="' + theme.styleClass + '">' + theme.name + '</option>');
|
||||
}
|
||||
e.after(themeChooser);
|
||||
}
|
||||
|
|
@ -283,6 +293,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
if (selectedLanguage == undefined || this.options.force) {
|
||||
selectedLanguage = this.options.language;
|
||||
}
|
||||
var found = false;
|
||||
for (var i = 0; i < window._uhr.languages.length; i++) {
|
||||
var code = window._uhr.languages[i].code;
|
||||
if (selectedLanguage == code) {
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
var fallback;
|
||||
if (window._uhr.languages.length > 0) {
|
||||
fallback = window._uhr.languages[0].code;
|
||||
} else {
|
||||
fallback = '';
|
||||
}
|
||||
console.warn("Language " + selectedLanguage + " not found! Using fallback: " + fallback);
|
||||
selectedLanguage = fallback;
|
||||
}
|
||||
languageChooser.val(selectedLanguage);
|
||||
this.options.language = "";
|
||||
this.language(selectedLanguage);
|
||||
|
|
@ -296,16 +324,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
if (selectedTheme == undefined || this.options.force) {
|
||||
selectedTheme = this.options.theme;
|
||||
}
|
||||
var found = false;
|
||||
found = false;
|
||||
for (var i = 0; i < window._uhr.themes.length; i++) {
|
||||
var styleClass = window._uhr.themes[i].class;
|
||||
var styleClass = window._uhr.themes[i].styleClass;
|
||||
if (selectedTheme == styleClass) {
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
var fallback = window._uhr.themes[0].class;
|
||||
var fallback = window._uhr.themes[0].styleClass;
|
||||
console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback);
|
||||
selectedTheme = fallback;
|
||||
}
|
||||
|
|
@ -314,89 +342,119 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
this.theme(selectedTheme);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
/**
|
||||
* Hilfsklasse zum Rendern der Uhr.
|
||||
* @param layout Layout-Objekt, das gerendert werden soll.
|
||||
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
|
||||
*/
|
||||
function UhrRenderer(layout, renderarea) {
|
||||
this.layout = layout;
|
||||
this.renderarea = renderarea;
|
||||
}
|
||||
UhrRenderer.prototype.render = function(uhr, beforeshow) {
|
||||
var renderer = this;
|
||||
this.renderarea.fadeOut('fast', function() {
|
||||
renderer.renderarea.empty();
|
||||
for (var y = 0; y < renderer.layout.values.length; y++) {
|
||||
for (var x = 0; x < renderer.layout.values[y].length; x++) {
|
||||
var letter = renderer.layout.values[y][x];
|
||||
renderer.renderarea.append(letter.toString());
|
||||
}
|
||||
if (y < renderer.layout.values.length - 1) {
|
||||
renderer.renderarea.append('<br/>');
|
||||
/**
|
||||
* Hilfsklasse zum Rendern der Uhr.
|
||||
* @param layout Layout-Objekt, das gerendert werden soll.
|
||||
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
|
||||
*/
|
||||
function UhrRenderer(layout, renderarea) {
|
||||
this.layout = layout;
|
||||
this.renderarea = renderarea;
|
||||
}
|
||||
UhrRenderer.prototype.render = function(uhr, beforeshow) {
|
||||
var renderer = this;
|
||||
if (this.layout._parsed === undefined) {
|
||||
switch (this.layout.version) {
|
||||
case 2:
|
||||
var delegate = new _UhrRendererV2Delegate(this.layout);
|
||||
this.layout._parsed = delegate.parse();
|
||||
break;
|
||||
default:
|
||||
console.warn("Unknown layout version: '" + this.layout.version + "'");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (typeof beforeshow === 'function') {
|
||||
beforeshow();
|
||||
}
|
||||
renderer.renderarea.fadeIn('fast');
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
|
||||
* @param value Der Buchstabe, der Dargestellt werden soll.
|
||||
* @param style Die CSS-Styleklassen des Buchstabens.
|
||||
*/
|
||||
function Letter(value, style) {
|
||||
this.value = value;
|
||||
this.style = style || '';
|
||||
this.getStyle = function() {
|
||||
return 'item letter ' + style;
|
||||
var letters = this.layout._parsed;
|
||||
this.renderarea.fadeOut('fast', function() {
|
||||
renderer.renderarea.empty();
|
||||
for (var y = 0; y < letters.length; y++) {
|
||||
for (var x = 0; x < letters[y].length; x++) {
|
||||
var letter = letters[y][x];
|
||||
renderer.renderarea.append(letter.toString());
|
||||
}
|
||||
if (y < letters.length - 1) {
|
||||
renderer.renderarea.append('<br/>');
|
||||
}
|
||||
}
|
||||
if (typeof beforeshow === 'function') {
|
||||
beforeshow();
|
||||
}
|
||||
renderer.renderarea.fadeIn('fast');
|
||||
});
|
||||
};
|
||||
this.getValue = function() {
|
||||
return value;
|
||||
function _UhrRendererV2Delegate(layout) {
|
||||
this.layout = layout;
|
||||
this._parseArrayOrObject = function(letters, styleClass, input) {
|
||||
if (Array.isArray(input)) {
|
||||
for (var i = 0; i < input.length; i++) {
|
||||
this._parseObject(letters, styleClass, input[i]);
|
||||
}
|
||||
} else {
|
||||
this._parseObject(letters, styleClass, input);
|
||||
}
|
||||
}
|
||||
this._parseObject = function(letters, styleClass, object) {
|
||||
for (var line in object) {
|
||||
if (object.hasOwnProperty(line)) {
|
||||
var highlightLetters = object[line];
|
||||
for (var i = 0; i < highlightLetters.length; i++) {
|
||||
var x = highlightLetters[i] - 1;
|
||||
letters[line - 1][x].addStyle(styleClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this._parseTimeDefinition = function(letters, styleClass, definition) {
|
||||
for (var listString in definition) {
|
||||
if (definition.hasOwnProperty(listString)) {
|
||||
var array = listString.split(',');
|
||||
var highlightLetters = definition[listString];
|
||||
for (var index = 0; index < array.length; index++) {
|
||||
this._parseArrayOrObject(letters, styleClass + array[index], highlightLetters);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
* @param style string: CSS-Klasse(n) als String
|
||||
* @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];
|
||||
_UhrRendererV2Delegate.prototype.parse = function() {
|
||||
var letters = [];
|
||||
for (var i = 0; i < this.layout.letters.length; i++) {
|
||||
var line = [];
|
||||
var string = this.layout.letters[i];
|
||||
for (var c = 0; c < string.length; c++) {
|
||||
var character = new Letter(string[c]);
|
||||
line.push(character);
|
||||
}
|
||||
letters.push(line);
|
||||
}
|
||||
this._parseArrayOrObject(letters, 'on', this.layout.permanent);
|
||||
this._parseTimeDefinition(letters, 'minute', this.layout.minutes);
|
||||
this._parseTimeDefinition(letters, 'hour', this.layout.hours);
|
||||
return letters;
|
||||
};
|
||||
/**
|
||||
* Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
|
||||
* @param value Der Buchstabe, der Dargestellt werden soll.
|
||||
* @param style Die CSS-Styleklassen des Buchstabens.
|
||||
*/
|
||||
function Letter(value, style) {
|
||||
this.value = value;
|
||||
this.style = style || '';
|
||||
this.getStyle = function() {
|
||||
return 'item letter ' + this.style;
|
||||
};
|
||||
this.getValue = function() {
|
||||
return value;
|
||||
}
|
||||
this.addStyle = function(style) {
|
||||
if (this.style == '') {
|
||||
this.style = style;
|
||||
} else {
|
||||
this.style += ' ' + style;
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
Letter.prototype.toString = function letterToString() {
|
||||
return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>';
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Reference in a new issue