mehr classes statt ids

This commit is contained in:
Manuel Friedli 2013-11-27 15:40:56 +01:00
parent 5708fd52f5
commit fe243507ec
3 changed files with 10 additions and 9 deletions

View file

@ -29,7 +29,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<span class="item dot dot2"></span>
<span class="item dot dot3"></span>
<span class="item dot dot4"></span>
<div id="renderarea" class="renderarea"></div>
<div class="letterarea"></div>
<!-- glossy reflection -->
<span class="reflection"></span>
</div>
@ -54,7 +54,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
<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'));
var uhr = new Uhr($('#uhr'), $('#theme'));
$(document).ready(function() {
$('#themeswitcher').on('change', function() {
uhr.setTheme(this.value);

View file

@ -39,7 +39,7 @@ body {
}
#themeswitcher {
}
.uhr .renderarea {
.uhr .letterarea {
display: block;
position: absolute;
top: 5em;

13
uhr.js
View file

@ -14,11 +14,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* 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.
*/
function Uhr(renderarea, themeElement) {
this.renderarea = renderarea;
function Uhr(clockarea, themeElement) {
this.clockarea = clockarea;
this.letterarea = clockarea.find('.letterarea');
this.themeElement = themeElement;
this.timer = null;
this.currentTheme = null;
@ -64,7 +65,7 @@ Uhr.prototype.setLayout = function(locale) {
var newLayout = this.layouts[locale];
if (newLayout !== undefined && newLayout != this.currentLayout) {
this.currentLayout = newLayout;
var renderer = new UhrRenderer(this.currentLayout, this.renderarea);
var renderer = new UhrRenderer(this.currentLayout, this.letterarea);
renderer.render(this);
$.cookie('layout', locale);
}
@ -103,10 +104,10 @@ Uhr.prototype.update = function() {
}
}
Uhr.prototype.clear = function() {
this.renderarea.parent().find('.item').removeClass('active');
this.clockarea.find('.item').removeClass('active');
}
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) {
if (typeof this.currentLayout.getHour === 'function') {