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

toggle-switch auch farbig, und vorallem pro uhr

Browse source
This commit is contained in:
Manuel Friedli 2013-11-28 09:57:50 +01:00
parent 4f796107bc
commit 77c660fcff
7 changed files with 43 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -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="jquery.cookie.js"></script>
<script type="text/javascript" src="uhr.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.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" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head> </head>
<body> <body>
<div id="uhr" class="uhr"></div> <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>. <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_CH.js"></script>
<script type="text/javascript" src="uhr-de.js"></script> <script type="text/javascript" src="uhr-de.js"></script>
<script type="text/javascript" src="uhr-en.js"></script> <script type="text/javascript" src="uhr-en.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var uhr = new Uhr($('#uhr'), $('#theme')); var uhr = new Uhr($('#uhr'));
$(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);
});
</script> </script>
</body> </body>
</html> </html>

4
uhr-black.css
View file

@ -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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
.uhr { .uhr.black{
background-color: #111; background-color: #111;
} }
.onoffswitch-inner:before { .black .onoffswitch-inner:before {
background-color: #111; background-color: #111;
} }

4
uhr-blue.css
View file

@ -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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
.uhr { .uhr.blue {
background-color: #00a; background-color: #00a;
} }
.onoffswitch-inner:before { .blue .onoffswitch-inner:before {
background-color: #00a; background-color: #00a;
} }

4
uhr-green.css
View file

@ -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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-dark.css"); @import url("uhr-idle-dark.css");
.uhr { .uhr.green {
background-color: #0c0; background-color: #0c0;
} }
.onoffswitch-inner:before { .green .onoffswitch-inner:before {
background-color: #0c0; background-color: #0c0;
} }

4
uhr-red.css
View file

@ -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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-light.css"); @import url("uhr-idle-light.css");
.uhr { .uhr.red {
background-color: #700; background-color: #700;
} }
.onoffswitch-inner:before { .red .onoffswitch-inner:before {
background-color: #700; background-color: #700;
} }

8
uhr-white.css
View file

@ -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/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
@import url("uhr-idle-dark.css"); @import url("uhr-idle-dark.css");
.uhr { .uhr.white {
background-color: #ccc; background-color: #ccc;
} }
.dot.active{ .uhr.white .dot.active{
border-color: #fff !important; border-color: #fff !important;
box-shadow: 0 0 0.1em #fff !important; box-shadow: 0 0 0.1em #fff !important;
} }
.letter.active{ .uhr.white .letter.active{
color: #fff !important; color: #fff !important;
text-shadow: 0 0 0.1em #fff !important; text-shadow: 0 0 0.1em #fff !important;
} }
.onoffswitch-inner:before { .white .onoffswitch-inner:before {
background-color: #ccc; background-color: #ccc;
} }

30
uhr.js
View file

@ -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 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(clockarea, themeElement) { function Uhr(clockarea) {
this.id = Uhr.id++; this.id = Uhr.id++;
this.themeElement = themeElement;
this.timer = null; this.timer = null;
this.currentTheme = null; this.currentTheme = null;
this.currentLayout = Uhr.layouts['undefined']; this.currentLayout = Uhr.layouts['undefined'];
this.currentMinute = -1; this.currentMinute = -1;
this.initHTMLElements(clockarea, themeElement); this.initHTMLElements(clockarea);
} }
Uhr.id = 0; Uhr.id = 0;
Uhr.layouts = new Array(); Uhr.layouts = new Array();
@ -68,8 +67,11 @@ Uhr.prototype.setLayout = function(locale) {
} }
Uhr.prototype.setTheme = function(theme) { Uhr.prototype.setTheme = function(theme) {
if (theme != this.currentTheme) { 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.currentTheme = theme;
this.themeElement.attr('href', 'uhr-' + theme + '.css');
$.cookie('theme' + this.id, theme, {expires: 365, path: '/'}); $.cookie('theme' + this.id, theme, {expires: 365, path: '/'});
} }
} }
@ -138,12 +140,16 @@ Uhr.prototype.normalizeHour = function(hour) {
} }
return hour; return hour;
} }
Uhr.prototype.initHTMLElements = function(clockarea, themeElement) { Uhr.prototype.initHTMLElements = function(clockarea) {
this.createHTMLElements();
this.clockarea = this.initClockarea(clockarea); this.clockarea = this.initClockarea(clockarea);
this.letterarea = this.clockarea.find('.letterarea'); this.letterarea = this.clockarea.find('.letterarea');
this.themeSwitch = this.initThemeSwitch();
this.layoutSwitch = this.initLayoutSwitch(); this.layoutSwitch = this.initLayoutSwitch();
this.toggleSwitch = this.initToggleSwitch(); this.toggleSwitch = this.initToggleSwitch();
} }
Uhr.prototype.createHTMLElements = function() {
}
Uhr.prototype.initClockarea = function(clockarea) { Uhr.prototype.initClockarea = function(clockarea) {
clockarea.empty(); clockarea.empty();
clockarea.append('<span class="item dot dot1"></span>'); clockarea.append('<span class="item dot dot1"></span>');
@ -202,6 +208,20 @@ Uhr.prototype.initLayoutSwitch = function() {
} }
return layoutSwitch; 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', { Uhr.register('undefined', {
language: 'Please choose your language', language: 'Please choose your language',