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

mehr classes statt ids

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

2
uhr.css
View file

@ -39,7 +39,7 @@ body {
} }
#themeswitcher { #themeswitcher {
} }
.uhr .renderarea { .uhr .letterarea {
display: block; display: block;
position: absolute; position: absolute;
top: 5em; 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. * 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, themeElement) {
this.renderarea = renderarea; this.clockarea = clockarea;
this.letterarea = clockarea.find('.letterarea');
this.themeElement = themeElement; this.themeElement = themeElement;
this.timer = null; this.timer = null;
this.currentTheme = null; this.currentTheme = null;
@ -64,7 +65,7 @@ Uhr.prototype.setLayout = function(locale) {
var newLayout = this.layouts[locale]; var newLayout = this.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', locale);
} }
@ -103,10 +104,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') {