toggle-switch auch farbig, und vorallem pro uhr
This commit is contained in:
parent
4f796107bc
commit
77c660fcff
7 changed files with 43 additions and 37 deletions
26
index.html
26
index.html
|
|
@ -20,35 +20,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
<script type="text/javascript" src="jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="uhr.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="uhr.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-black.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-green.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-red.css" />
|
||||
<link rel="stylesheet" type="text/css" href="uhr-white.css" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="uhr" class="uhr"></div>
|
||||
<select id="themeswitcher">
|
||||
<option value="black">Schwarz</option>
|
||||
<option value="red">Rot</option>
|
||||
<option value="blue">Blau</option>
|
||||
<option value="green">Grün</option>
|
||||
<option value="white">Weiss</option>
|
||||
</select>
|
||||
<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
|
||||
<script type="text/javascript" src="uhr-de_CH.js"></script>
|
||||
<script type="text/javascript" src="uhr-de.js"></script>
|
||||
<script type="text/javascript" src="uhr-en.js"></script>
|
||||
<script type="text/javascript">
|
||||
var uhr = new Uhr($('#uhr'), $('#theme'));
|
||||
$(document).ready(function() {
|
||||
$('#themeswitcher').on('change', function() {
|
||||
uhr.setTheme(this.value);
|
||||
});
|
||||
var theme = $.cookie('theme');
|
||||
if (theme === undefined || theme == 'undefined') {
|
||||
theme = 'black';
|
||||
}
|
||||
$('#themeswitcher').val(theme);
|
||||
uhr.setTheme(theme);
|
||||
});
|
||||
var uhr = new Uhr($('#uhr'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import url("uhr-idle-light.css");
|
||||
.uhr {
|
||||
.uhr.black{
|
||||
background-color: #111;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
.black .onoffswitch-inner:before {
|
||||
background-color: #111;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import url("uhr-idle-light.css");
|
||||
.uhr {
|
||||
.uhr.blue {
|
||||
background-color: #00a;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
.blue .onoffswitch-inner:before {
|
||||
background-color: #00a;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import url("uhr-idle-dark.css");
|
||||
.uhr {
|
||||
.uhr.green {
|
||||
background-color: #0c0;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
.green .onoffswitch-inner:before {
|
||||
background-color: #0c0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import url("uhr-idle-light.css");
|
||||
.uhr {
|
||||
.uhr.red {
|
||||
background-color: #700;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
.red .onoffswitch-inner:before {
|
||||
background-color: #700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,17 +13,17 @@ You should have received a copy of the GNU General Public License
|
|||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import url("uhr-idle-dark.css");
|
||||
.uhr {
|
||||
.uhr.white {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.dot.active{
|
||||
.uhr.white .dot.active{
|
||||
border-color: #fff !important;
|
||||
box-shadow: 0 0 0.1em #fff !important;
|
||||
}
|
||||
.letter.active{
|
||||
.uhr.white .letter.active{
|
||||
color: #fff !important;
|
||||
text-shadow: 0 0 0.1em #fff !important;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
.white .onoffswitch-inner:before {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
|
|
|||
30
uhr.js
30
uhr.js
|
|
@ -17,14 +17,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
* @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(clockarea, themeElement) {
|
||||
function Uhr(clockarea) {
|
||||
this.id = Uhr.id++;
|
||||
this.themeElement = themeElement;
|
||||
this.timer = null;
|
||||
this.currentTheme = null;
|
||||
this.currentLayout = Uhr.layouts['undefined'];
|
||||
this.currentMinute = -1;
|
||||
this.initHTMLElements(clockarea, themeElement);
|
||||
this.initHTMLElements(clockarea);
|
||||
}
|
||||
Uhr.id = 0;
|
||||
Uhr.layouts = new Array();
|
||||
|
|
@ -68,8 +67,11 @@ Uhr.prototype.setLayout = function(locale) {
|
|||
}
|
||||
Uhr.prototype.setTheme = function(theme) {
|
||||
if (theme != this.currentTheme) {
|
||||
this.clockarea.removeClass(this.currentTheme);
|
||||
this.toggleSwitch.removeClass(this.currentTheme);
|
||||
this.clockarea.addClass(theme);
|
||||
this.toggleSwitch.addClass(theme);
|
||||
this.currentTheme = theme;
|
||||
this.themeElement.attr('href', 'uhr-' + theme + '.css');
|
||||
$.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
|
||||
}
|
||||
}
|
||||
|
|
@ -138,12 +140,16 @@ Uhr.prototype.normalizeHour = function(hour) {
|
|||
}
|
||||
return hour;
|
||||
}
|
||||
Uhr.prototype.initHTMLElements = function(clockarea, themeElement) {
|
||||
Uhr.prototype.initHTMLElements = function(clockarea) {
|
||||
this.createHTMLElements();
|
||||
this.clockarea = this.initClockarea(clockarea);
|
||||
this.letterarea = this.clockarea.find('.letterarea');
|
||||
this.themeSwitch = this.initThemeSwitch();
|
||||
this.layoutSwitch = this.initLayoutSwitch();
|
||||
this.toggleSwitch = this.initToggleSwitch();
|
||||
}
|
||||
Uhr.prototype.createHTMLElements = function() {
|
||||
}
|
||||
Uhr.prototype.initClockarea = function(clockarea) {
|
||||
clockarea.empty();
|
||||
clockarea.append('<span class="item dot dot1"></span>');
|
||||
|
|
@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() {
|
|||
}
|
||||
return layoutSwitch;
|
||||
}
|
||||
Uhr.prototype.initThemeSwitch = function() {
|
||||
var themeSwitch = $('<select></select>');
|
||||
themeSwitch.append('<option value="black">Schwarz</option>');
|
||||
themeSwitch.append('<option value="red">Rot</option>');
|
||||
themeSwitch.append('<option value="blue">Blau</option>');
|
||||
themeSwitch.append('<option value="green">Grün</option>');
|
||||
themeSwitch.append('<option value="white">Weiss</option>');
|
||||
var uhr = this;
|
||||
themeSwitch.on('change', function() {
|
||||
uhr.setTheme(this.value);
|
||||
});
|
||||
this.clockarea.after(themeSwitch);
|
||||
return themeSwitch;
|
||||
}
|
||||
|
||||
Uhr.register('undefined', {
|
||||
language: 'Please choose your language',
|
||||
|
|
|
|||
Loading…
Reference in a new issue