var clock = null; var currentMinute = -1; var layout = new Array(); layout['default'] = { language: 'Undefined', values: [] }; var currentLayout = layout['default']; function highlightCurrentTime() { var now = new Date(); var dotMinute = getDotMinute(now); if (dotMinute == currentMinute) { return; } currentMinute = dotMinute; var hour = getHour(now); var coarseMinute = getCoarseMinute(now); resetItems(); for (var i = 1; i <= dotMinute; i++) { highlight('dot' + i); } highlight('minute' + coarseMinute); hour = normalizeHour(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() { $('.item').removeClass('active'); } function resetItems() { clearDisplay() highlight('on'); } function highlight(itemClass) { $('.item.' + itemClass).addClass('active'); } function normalizeHour(hour) { if (hour > 12) { hour %= 12; } if (hour == 0) { return 12; } return hour; } function startClock() { if (clock == null) { highlightCurrentTime(); clock = window.setInterval(highlightCurrentTime, 1000); } } function stopClock() { if (clock != null) { window.clearInterval(clock); clock = null; currentMinute = -1; clearDisplay(); } } function updateClockState() { if (isOn()) { startClock(); } else { stopClock(); } } function isOn() { return $('#onoffswitch').is(':checked'); } function switchTheme(theme) { $('#theme').attr('href', 'uhr-' + theme + '.css'); } function switchLayout(locale) { stopClock(); currentLayout = layout[locale]; 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('
'); } } } 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 "" + this.getValue() + ""; } /** * 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); }