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

added new toggle switch for choosing between normal time mode and seconds mode

Browse source
This commit is contained in:
Manuel Friedli 2014-10-18 16:44:36 +02:00
parent 80df0d24cb
commit 35eef98722
2 changed files with 279 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
css/uhr.css
View file

@ -126,7 +126,7 @@ body {
border-radius: 50px;
}
.onoffswitch-inner {
.onoffswitch-inner, .modeswitch-inner {
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
@ -135,7 +135,7 @@ body {
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
float: left;
width: 50%;
height: 24px;
@ -180,7 +180,8 @@ body {
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
margin-left: 0;
}
@ -188,6 +189,21 @@ body {
right: 0;
}
.modeswitch-inner:before {
content: "MIN";
padding-left: 12px;
background-color: #fff;
color: #000;
}
.modeswitch-inner:after {
content: "SEC";
padding-right: 12px;
background-color: #fff;
color: #000;
text-align: right;
}
a.uhr-configlink {
cursor: pointer;
background: url("../resources/settings.png") no-repeat;

270
js/uhr.js
View file

@ -109,6 +109,12 @@
}
update.bind(this)();
};
var setMode = function(mode) {
this.options.mode = mode;
this.currentMinute = -1;
update.bind(this)();
setCookie.bind(this)('uhr-mode', mode);
};
var setWidth = function setWidth(width) {
var e = this.element;
e.css('width', width);
@ -168,6 +174,14 @@
'<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' + '</label>');
content.append(toggleSwitch);
// time mode switch
var modeSwitch = $('<div class="onoffswitch" id="uhr-modeswitch' + this.id + '"></div>');
modeSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-modeswitch-checkbox' + this.id +
'" checked="checked" />');
modeSwitch.append('<label class="onoffswitch-label" for="uhr-modeswitch-checkbox' + this.id + '">' +
'<div class="modeswitch-inner"></div>' + '<div class="onoffswitch-switch"></div>' +
'</label>');
content.append(modeSwitch);
// language chooser
if (uhrGlobals.languages.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + this.id + '"></select>');
@ -211,6 +225,27 @@
this.stop();
}
// time mode switch
var modeSwitch = $('#uhr-modeswitch-checkbox' + this.id);
modeSwitch.on('click', function() {
if (this.options.mode === 'seconds') {
setMode.bind(this)('normal');
} else {
setMode.bind(this)('seconds');
}
}.bind(this));
var mode = $.cookie('uhr-mode' + this.id);
if (mode === undefined || this.options.force) {
status = this.options.mode;
}
modeSwitch.prop('checked', mode !== 'seconds');
if (mode === 'seconds') {
setMode.bind(this)('seconds');
} else {
setMode.bind(this)('normal');
}
// language chooser
var languageChooser = $('#uhr-languagechooser' + this.id);
languageChooser.on('change', function() {
@ -290,7 +325,7 @@
var update = function update() {
if (isOn.bind(this)()) {
var time = this.options.time;
if (!language.bind(this)().hasOwnProperty('seconds')) {
if (!language.bind(this)().hasOwnProperty('seconds') && this.options.mode !== 'seconds') {
if (time.getMinutes() === this.currentMinute) {
return;
}
@ -308,13 +343,16 @@
var hour = getHour.bind(this)(time);
var coarseMinute = getCoarseMinute.bind(this)(time);
clear.bind(this)();
highlight.bind(this)('on');
for (var i = 1; i <= dotMinute; i++) {
highlight.bind(this)('dot' + i);
if (this.options.mode === 'seconds') {
highlight.bind(this)('second' + second);
} else {
highlight.bind(this)('on');
for (var i = 1; i <= dotMinute; i++) {
highlight.bind(this)('dot' + i);
}
highlight.bind(this)('minute' + coarseMinute);
highlight.bind(this)('hour' + hour);
}
highlight.bind(this)('second' + second);
highlight.bind(this)('minute' + coarseMinute);
highlight.bind(this)('hour' + hour);
};
var highlight = function highlight(itemClass) {
this.element.find('.item.' + itemClass).addClass('active');
@ -351,7 +389,6 @@
}
return hour;
};
var language = function language() {
var matchingLanguages = uhrGlobals.languages.filter(function(element) {
return (element.code === this.options.language);
@ -372,7 +409,8 @@
force: false,
controls: true,
cookiePath: undefined,
autoresize: true
autoresize: true,
mode: 'normal'
},
"start": start,
"stop": stop,
@ -380,6 +418,7 @@
"language": setLanguage,
"theme": setTheme,
"time": setTime,
"mode": setMode,
"width": setWidth,
// constructor method
"_create": create
@ -424,6 +463,213 @@
}
function UhrRendererV2Delegate(layout) {
var vorne0 = {
3: [2, 3, 4],
4: [1, 5],
5: [1, 4, 5],
6: [1, 3, 5],
7: [1, 2, 5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten0 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 10, 11],
6: [7, 9, 11],
7: [7, 8, 11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne1 = {
3: [3],
4: [2, 3],
5: [3],
6: [3],
7: [3],
8: [3],
9: [2, 3, 4]
};
var hinten1 = {
3: [9],
4: [8, 9],
5: [9],
6: [9],
7: [9],
8: [9],
9: [8, 9, 10]
};
var vorne2 = {
3: [2, 3, 4],
4: [1, 5],
5: [5],
6: [4],
7: [3],
8: [2],
9: [1, 2, 3, 4, 5]
};
var hinten2 = {
3: [8, 9, 10],
4: [7, 11],
5: [11],
6: [10],
7: [9],
8: [8],
9: [7, 8, 9, 10, 11]
};
var vorne3 = {
3: [1, 2, 3, 4, 5],
4: [4],
5: [3],
6: [4],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten3 = {
3: [7, 8, 9, 10, 11],
4: [10],
5: [9],
6: [10],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var vorne4 = {
3: [4],
4: [3, 4],
5: [2, 4],
6: [1, 4],
7: [1, 2, 3, 4, 5],
8: [4],
9: [4]
};
var hinten4 = {
3: [10],
4: [9, 10],
5: [8, 10],
6: [7, 10],
7: [7, 8, 9, 10, 11],
8: [10],
9: [10]
};
var vorne5 = {
3: [1, 2, 3, 4, 5],
4: [1],
5: [1, 2, 3, 4],
6: [5],
7: [5],
8: [1, 5],
9: [2, 3, 4]
};
var hinten5 = {
3: [7, 8, 9, 10, 11],
4: [7],
5: [7, 8, 9, 10],
6: [11],
7: [11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten6 = {
3: [9, 10],
4: [8],
5: [7],
6: [7, 8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten7 = {
3: [7, 8, 9, 10, 11],
4: [11],
5: [10],
6: [9],
7: [8],
8: [8],
9: [8]
};
var hinten8 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10],
7: [7, 11],
8: [7, 11],
9: [8, 9, 10]
};
var hinten9 = {
3: [8, 9, 10],
4: [7, 11],
5: [7, 11],
6: [8, 9, 10, 11],
7: [11],
8: [10],
9: [8, 9]
};
var seconds= {
"0": [vorne0, hinten0],
"1": [vorne0, hinten1],
"2": [vorne0, hinten2],
"3": [vorne0, hinten3],
"4": [vorne0, hinten4],
"5": [vorne0, hinten5],
"6": [vorne0, hinten6],
"7": [vorne0, hinten7],
"8": [vorne0, hinten8],
"9": [vorne0, hinten9],
"10": [vorne1, hinten0],
"11": [vorne1, hinten1],
"12": [vorne1, hinten2],
"13": [vorne1, hinten3],
"14": [vorne1, hinten4],
"15": [vorne1, hinten5],
"16": [vorne1, hinten6],
"17": [vorne1, hinten7],
"18": [vorne1, hinten8],
"19": [vorne1, hinten9],
"20": [vorne2, hinten0],
"21": [vorne2, hinten1],
"22": [vorne2, hinten2],
"23": [vorne2, hinten3],
"24": [vorne2, hinten4],
"25": [vorne2, hinten5],
"26": [vorne2, hinten6],
"27": [vorne2, hinten7],
"28": [vorne2, hinten8],
"29": [vorne2, hinten9],
"30": [vorne3, hinten0],
"31": [vorne3, hinten1],
"32": [vorne3, hinten2],
"33": [vorne3, hinten3],
"34": [vorne3, hinten4],
"35": [vorne3, hinten5],
"36": [vorne3, hinten6],
"37": [vorne3, hinten7],
"38": [vorne3, hinten8],
"39": [vorne3, hinten9],
"40": [vorne4, hinten0],
"41": [vorne4, hinten1],
"42": [vorne4, hinten2],
"43": [vorne4, hinten3],
"44": [vorne4, hinten4],
"45": [vorne4, hinten5],
"46": [vorne4, hinten6],
"47": [vorne4, hinten7],
"48": [vorne4, hinten8],
"49": [vorne4, hinten9],
"50": [vorne5, hinten0],
"51": [vorne5, hinten1],
"52": [vorne5, hinten2],
"53": [vorne5, hinten3],
"54": [vorne5, hinten4],
"55": [vorne5, hinten5],
"56": [vorne5, hinten6],
"57": [vorne5, hinten7],
"58": [vorne5, hinten8],
"59": [vorne5, hinten9]
};
function parseArrayOrObject(letters, styleClass, input) {
if (typeof input !== 'undefined' && input !== null) {
if (Array.isArray(input)) {
@ -470,7 +716,11 @@
letters.push(line);
});
parseArrayOrObject(letters, 'on', layout.permanent);
parseTimeDefinition(letters, 'second', layout.seconds);
if (typeof layout.seconds !== 'undefined' && layout.seconds !== null) {
parseTimeDefinition(letters, 'second', layout.seconds);
} else {
parseTimeDefinition(letters, 'second', seconds)
}
parseTimeDefinition(letters, 'minute', layout.minutes);
parseTimeDefinition(letters, 'hour', layout.hours);
return letters;