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

Merge branch 'feature/uhrmodul' of /var/lib/git/repositories/manuel/uhr into develop

This commit is contained in:
Manuel Friedli 2013-11-28 10:23:49 +01:00
parent 3cfbbecb2a 32305d43a1
commit 75ea732fc7
12 changed files with 150 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@ -20,78 +20,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="uhr.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.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" /> <link rel="stylesheet" type="text/css" href="uhr-black.css" />
<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
<link rel="stylesheet" type="text/css" href="uhr-green.css" />
<link rel="stylesheet" type="text/css" href="uhr-red.css" />
<link rel="stylesheet" type="text/css" href="uhr-white.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head> </head>
<body> <body>
<div id="uhr"> <div id="uhr" class="uhr"></div>
<span class="item dot dot1" id="dot1"></span>
<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>
<!-- glossy reflection -->
<span id="reflection"></span>
</div>
<select id="themeswitcher">
<option value="black">Schwarz</option>
<option value="red">Rot</option>
<option value="blue">Blau</option>
<option value="green">Grün</option>
<option value="white">Weiss</option>
</select>
<select id="layoutswitcher">
<option value="de_CH">Bärndütsch</option>
<option value="de">Hochdeutsch</option>
<option value="en">English</option>
</select>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="uhr.toggle()" />
<label class="onoffswitch-label" for="onoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<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">
var uhr = new Uhr($('#renderarea'), $('#theme'));
$(document).ready(function() {
$('#themeswitcher').on('change', function() {
uhr.setTheme(this.value);
});
$('#layoutswitcher').on('change', function() {
uhr.setLayout(this.value);
});
$.cookie.defaults.expires = 365;
$.cookie.defaults.path = '/';
var theme = $.cookie('theme');
var layout = $.cookie('layout');
var status = $.cookie('status');
if (theme == undefined) {
theme = 'black';
}
if(layout == undefined) {
layout = 'de_CH';
}
if (status == undefined) {
status = 'on';
}
$('#themeswitcher').val(theme);
uhr.setTheme(theme);
$('#layoutswitcher').val(layout);
uhr.setLayout(layout);
if (status == 'on') {
uhr.start();
$('#onoffswitch').prop('checked', true);
} else {
uhr.stop();
$('#onoffswitch').prop('checked', false);
}
});
</script>
<script type="text/javascript" src="uhr-de_CH.js"></script> <script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript" src="uhr-de.js"></script> <script type="text/javascript" src="uhr-de.js"></script>
<script type="text/javascript" src="uhr-en.js"></script> <script type="text/javascript" src="uhr-en.js"></script>
<script type="text/javascript">
var uhr = new Uhr($('#uhr'));
</script>
</body> </body>
</html> </html>

2
manifest.appcache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 2.3.1 # 3.0
COPYING COPYING
index.html index.html

4
uhr-black.css
View File

@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
#uhr { .uhr.black{
background-color: #111; background-color: #111;
} }
.onoffswitch-inner:before { .black .onoffswitch-inner:before {
background-color: #111; background-color: #111;
} }

4
uhr-blue.css
View File

@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
#uhr { .uhr.blue {
background-color: #00a; background-color: #00a;
} }
.onoffswitch-inner:before { .blue .onoffswitch-inner:before {
background-color: #00a; background-color: #00a;
} }

2
uhr-de.js
View File

@ -27,4 +27,4 @@ var layout = {
[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')] [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')]
] ]
}; };
uhr.register('de', layout); Uhr.register('de', layout);

2
uhr-de_CH.js
View File

@ -27,4 +27,4 @@ var layout = {
[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')] [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')]
] ]
}; };
uhr.register('de_CH', layout); Uhr.register('de_CH', layout);

2
uhr-en.js
View File

@ -34,4 +34,4 @@ var layout = {
return hour; return hour;
} }
}; };
uhr.register('en', layout); Uhr.register('en', layout);

4
uhr-green.css
View File

@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-dark.css"); @import url("uhr-idle-dark.css");
#uhr { .uhr.green {
background-color: #0c0; background-color: #0c0;
} }
.onoffswitch-inner:before { .green .onoffswitch-inner:before {
background-color: #0c0; background-color: #0c0;
} }

4
uhr-red.css
View File

@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
#uhr { .uhr.red {
background-color: #700; background-color: #700;
} }
.onoffswitch-inner:before { .red .onoffswitch-inner:before {
background-color: #700; background-color: #700;
} }

8
uhr-white.css
View File

@ -13,17 +13,17 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-dark.css"); @import url("uhr-idle-dark.css");
#uhr { .uhr.white {
background-color: #ccc; background-color: #ccc;
} }
.dot.active{ .uhr.white .dot.active{
border-color: #fff !important; border-color: #fff !important;
box-shadow: 0 0 0.1em #fff !important; box-shadow: 0 0 0.1em #fff !important;
} }
.letter.active{ .uhr.white .letter.active{
color: #fff !important; color: #fff !important;
text-shadow: 0 0 0.1em #fff !important; text-shadow: 0 0 0.1em #fff !important;
} }
.onoffswitch-inner:before { .white .onoffswitch-inner:before {
background-color: #ccc; background-color: #ccc;
} }

14
uhr.css
View File

@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
body { body {
font-family: 'Uhrenfont', sans-serif; font-family: 'Uhrenfont', sans-serif;
} }
#uhr { .uhr {
padding: 3em; padding: 3em;
position: relative; position: relative;
margin: 0; margin: 0;
@ -27,7 +27,7 @@ body {
height: 40em; height: 40em;
transition: background-color 0.5s; transition: background-color 0.5s;
} }
#reflection { .uhr .reflection {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -39,7 +39,7 @@ body {
} }
#themeswitcher { #themeswitcher {
} }
#renderarea { .uhr .letterarea {
display: block; display: block;
position: absolute; position: absolute;
top: 5em; top: 5em;
@ -63,19 +63,19 @@ body {
border-color: #eee; border-color: #eee;
box-shadow: 0 0 0.2em #eee; box-shadow: 0 0 0.2em #eee;
} }
#dot1 { .dot1 {
top: 1.5em; top: 1.5em;
left: 1.5em; left: 1.5em;
} }
#dot2 { .dot2 {
top: 1.5em; top: 1.5em;
right: 1.5em; right: 1.5em;
} }
#dot3 { .dot3 {
bottom: 1.5em; bottom: 1.5em;
right: 1.5em; right: 1.5em;
} }
#dot4 { .dot4 {
bottom: 1.5em; bottom: 1.5em;
left: 1.5em; left: 1.5em;
} }

141
uhr.js
View File

@ -14,23 +14,22 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
/** /**
* Die Uhr. * Die Uhr.
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll. * @param clockarea Das jQuery-gewrappte HTML-Element, auf dem die Uhr angezeigt werden soll.
* @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
*/ */
function Uhr(renderarea, themeElement) { function Uhr(clockarea) {
this.renderarea = renderarea; this.id = Uhr.id++;
this.themeElement = themeElement;
this.timer = null; this.timer = null;
this.currentTheme = null; this.currentTheme = null;
this.currentLayout = null; this.currentLayout = Uhr.layouts['undefined'];
this.layouts = new Array();
this.currentMinute = -1; this.currentMinute = -1;
this.register('undefined', { this.initHTMLElements(clockarea);
language: 'Undefined', }
values: [] Uhr.id = 0;
}); Uhr.layouts = new Array();
Uhr.register = function (locale, layout) {
Uhr.layouts[locale] = layout;
} }
Uhr.prototype.toggle = function() { Uhr.prototype.toggle = function() {
if (this.isOn()) { if (this.isOn()) {
this.stop(); this.stop();
@ -43,7 +42,7 @@ Uhr.prototype.start = function() {
var uhr = this; var uhr = this;
this.timer = window.setInterval(function() {uhr.update();}, 1000); this.timer = window.setInterval(function() {uhr.update();}, 1000);
this.update(); this.update();
$.cookie('status', 'on'); $.cookie('status' + this.id, 'on', {expires: 365, path: '/'});
} }
} }
Uhr.prototype.stop = function() { Uhr.prototype.stop = function() {
@ -51,29 +50,29 @@ Uhr.prototype.stop = function() {
window.clearInterval(this.timer); window.clearInterval(this.timer);
this.timer = null; this.timer = null;
this.update(); this.update();
$.cookie('status', 'off'); $.cookie('status' + this.id, 'off', {expires: 365, path: '/'});
} }
} }
Uhr.prototype.isOn = function() { Uhr.prototype.isOn = function() {
return this.timer != null; return this.timer != null;
} }
Uhr.prototype.register = function(key, layout) {
this.layouts[key] = layout;
}
Uhr.prototype.setLayout = function(locale) { Uhr.prototype.setLayout = function(locale) {
var newLayout = this.layouts[locale]; var newLayout = Uhr.layouts[locale];
if (newLayout !== undefined && newLayout != this.currentLayout) { if (newLayout !== undefined && newLayout != this.currentLayout) {
this.currentLayout = newLayout; this.currentLayout = newLayout;
var renderer = new UhrRenderer(this.currentLayout, this.renderarea); var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
renderer.render(this); renderer.render(this);
$.cookie('layout', locale); $.cookie('layout' + this.id, locale, {expires: 365, path: '/'});
} }
} }
Uhr.prototype.setTheme = function(theme) { Uhr.prototype.setTheme = function(theme) {
if (theme != this.currentTheme) { if (theme != this.currentTheme) {
this.clockarea.removeClass(this.currentTheme);
this.toggleSwitch.removeClass(this.currentTheme);
this.clockarea.addClass(theme);
this.toggleSwitch.addClass(theme);
this.currentTheme = theme; this.currentTheme = theme;
this.themeElement.attr('href', 'uhr-' + theme + '.css'); $.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
$.cookie('theme', theme);
} }
} }
Uhr.prototype.update = function() { Uhr.prototype.update = function() {
@ -103,10 +102,10 @@ Uhr.prototype.update = function() {
} }
} }
Uhr.prototype.clear = function() { Uhr.prototype.clear = function() {
this.renderarea.parent().find('.item').removeClass('active'); this.clockarea.find('.item').removeClass('active');
} }
Uhr.prototype.highlight = function(itemClass) { Uhr.prototype.highlight = function(itemClass) {
this.renderarea.parent().find('.item.' + itemClass).addClass('active'); this.clockarea.find('.item.' + itemClass).addClass('active');
} }
Uhr.prototype.getHour = function(date) { Uhr.prototype.getHour = function(date) {
if (typeof this.currentLayout.getHour === 'function') { if (typeof this.currentLayout.getHour === 'function') {
@ -141,6 +140,102 @@ Uhr.prototype.normalizeHour = function(hour) {
} }
return hour; return hour;
} }
Uhr.prototype.initHTMLElements = function(clockarea) {
this.createHTMLElements(clockarea);
this.initToggleSwitch();
this.initLayoutSwitch();
this.initThemeSwitch();
}
Uhr.prototype.createHTMLElements = function(clockarea) {
this.createClockarea(clockarea)
this.letterarea = this.clockarea.find('.letterarea');
this.createToggleSwitch();
this.createLayoutSwitch();
this.createThemeSwitch();
}
Uhr.prototype.createClockarea = function(clockarea) {
clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>');
clockarea.append('<span class="item dot dot2"></span>');
clockarea.append('<span class="item dot dot3"></span>');
clockarea.append('<span class="item dot dot4"></span>');
clockarea.append('<div class="letterarea"></div>');
clockarea.append('<div class="reflection"></div>');
this.clockarea = clockarea
}
Uhr.prototype.createToggleSwitch = function() {
this.toggleSwitch = $('<div class="onoffswitch"></div>');
var input = $('<input type="checkbox" name="onoffswitch' + this.id + '" class="onoffswitch-checkbox" id="onoffswitch' + this.id + '" checked="checked" />');
this.toggleSwitch.append(input);
this.toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch' + this.id + '">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
this.clockarea.after(this.toggleSwitch);
}
Uhr.prototype.createLayoutSwitch = function () {
this.layoutSwitch = $('<select></select>')
for (var code in Uhr.layouts) {
if (Uhr.layouts.hasOwnProperty(code)) {
var layout = Uhr.layouts[code];
var option = $('<option value="' + code + '">' + layout.language + '</option>')
this.layoutSwitch.append(option);
}
}
this.clockarea.after(this.layoutSwitch);
}
Uhr.prototype.createThemeSwitch = function () {
this.themeSwitch = $('<select></select>');
this.themeSwitch.append('<option value="black">Schwarz</option>');
this.themeSwitch.append('<option value="red">Rot</option>');
this.themeSwitch.append('<option value="blue">Blau</option>');
this.themeSwitch.append('<option value="green">Grün</option>');
this.themeSwitch.append('<option value="white">Weiss</option>');
this.clockarea.after(this.themeSwitch);
}
Uhr.prototype.initToggleSwitch = function() {
var input = $('#onoffswitch' + this.id);
var uhr = this;
input.on('click', function() {
uhr.toggle();
});
var status = $.cookie('status' + this.id);
if (status == 'on') {
this.start();
input.prop('checked', true);
} else {
this.stop();
input.prop('checked', false);
}
}
Uhr.prototype.initLayoutSwitch = function() {
var uhr = this;
this.layoutSwitch.on('change', function() {
uhr.setLayout(this.value);
});
var selectedLayout = $.cookie('layout' + this.id);
if (selectedLayout != undefined && selectedLayout != 'undefinded') {
this.layoutSwitch.val(selectedLayout);
this.setLayout(selectedLayout);
}
}
Uhr.prototype.initThemeSwitch = function() {
var uhr = this;
this.themeSwitch.on('change', function() {
uhr.setTheme(this.value);
});
var selectedTheme = $.cookie('theme' + this.id);
if (selectedTheme == undefined || selectedTheme == 'undefined') {
selectedTheme = 'black';
}
this.themeSwitch.val(selectedTheme);
this.setTheme(selectedTheme);
}
Uhr.register('undefined', {
language: 'Please choose your language',
values: []
});
/** /**
* Hilfsklasse zum Rendern der Uhr. * Hilfsklasse zum Rendern der Uhr.