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

toggler erzeugen statt hardcoded

Browse source
This commit is contained in:
Manuel Friedli 2013-11-27 18:13:37 +01:00
parent 562855e8f1
commit a28dcdf836
2 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -37,13 +37,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<option value="de">Hochdeutsch</option> <option value="de">Hochdeutsch</option>
<option value="en">English</option> <option value="en">English</option>
</select> </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"> <script type="text/javascript">
var uhr = new Uhr($('#uhr'), $('#theme')); var uhr = new Uhr($('#uhr'), $('#theme'));

35
uhr.js
View file

@ -18,14 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
* @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert. * @param themeElement Das HTML-Stylesheet-Tag, das das Theme-CSS referenziert.
*/ */
function Uhr(clockarea, themeElement) { function Uhr(clockarea, themeElement) {
this.clockarea = clockarea; this.clockarea = this.initClockarea(clockarea);
this.clockarea.empty(); this.toggleSwitch = this.initToggleSwitch();
this.clockarea.append('<span class="item dot dot1"></span>');
this.clockarea.append('<span class="item dot dot2"></span>');
this.clockarea.append('<span class="item dot dot3"></span>');
this.clockarea.append('<span class="item dot dot4"></span>');
this.clockarea.append('<div class="letterarea"></div>');
this.clockarea.append('<div class="reflection"></div>');
this.letterarea = clockarea.find('.letterarea'); this.letterarea = clockarea.find('.letterarea');
this.themeElement = themeElement; this.themeElement = themeElement;
this.timer = null; this.timer = null;
@ -144,6 +138,31 @@ Uhr.prototype.normalizeHour = function(hour) {
} }
return hour; return hour;
} }
Uhr.prototype.initClockarea = 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>');
return clockarea;
}
Uhr.prototype.initToggleSwitch = function() {
var toggleSwitch = $('<div class="onoffswitch"></div>');
var input = $('<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" />');
var uhr = this;
input.on('click', function() {
uhr.toggle();
});
toggleSwitch.append(input);
toggleSwitch.append('<label class="onoffswitch-label" for="onoffswitch">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
this.clockarea.after(toggleSwitch);
return toggleSwitch;
}
Uhr.register('undefined', { Uhr.register('undefined', {
language: 'Undefined', language: 'Undefined',