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

put controls in their own div element and hide/show it with action links.

Browse source 
now to do: css styling!
This commit is contained in:
Manuel Friedli 2014-08-09 12:15:01 +02:00
parent 275234abd8
commit 27435ed9a8
2 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -23,17 +23,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" /> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/uhr.css" /> <link rel="stylesheet" type="text/css" href="css/uhr.css" />
<link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz" /> <link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz" />
<link rel="stylesheet" type="text/css" href="css/uhr-blue.css" data-class="blue" data-name="Blau" />
<link rel="shortcut icon" type="image/png" href="resources/favicon.png" /> <link rel="shortcut icon" type="image/png" href="resources/favicon.png" />
<link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="resources/apple-touch-icon-precomposed.png" />
<script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript" src="lib/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery-cookie-1.4.0.js"></script> <script type="text/javascript" src="lib/jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="js/uhr.js"></script> <script type="text/javascript" src="js/uhr.js"></script>
<script type="text/javascript" src="js/uhr-de_CH.js"></script>
<script type="text/javascript" src="js/uhr-de.js"></script>
</head> </head>
<body style="padding:0;margin:0;"> <body style="padding:0;margin:0;">
<div id="uhr"></div> <div id="uhr"></div>
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a> - <a href="showcase">View full showcase!</a></p> <p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a> - <a href="showcase">View full showcase!</a></p>
<script type="text/javascript" src="js/uhr-de_CH.js"></script>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {
var width = $(window).width(); var width = $(window).width();
@ -44,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
color: 'black', color: 'black',
language: 'de_CH', language: 'de_CH',
force: true, force: true,
controls: false controls: true
}); });
})(jQuery); })(jQuery);
</script> </script>

28
js/uhr.js
View file

@ -125,6 +125,9 @@
} }
}; };
// private helper methods (not exported) // private helper methods (not exported)
var showConfigScreen = function showConfigScreen() {
$('#uhr-controlpanel' + this.id).show();
};
// set up // set up
var setupHTML = function setupHTML() { var setupHTML = function setupHTML() {
var e = this.element; var e = this.element;
@ -144,6 +147,12 @@
e.css('font-size', (realWidth / 40) + 'px'); e.css('font-size', (realWidth / 40) + 'px');
if (this.options.controls) { if (this.options.controls) {
var configlink = $('<a id="uhr-configlink' + this.id + '">Configure</a>');
configlink.on('click', function () {
showConfigScreen.bind(this)();
}.bind(this));
e.after(configlink);
var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
// on/off switch // on/off switch
var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>'); var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id + '" checked="checked" />'); toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id + '" checked="checked" />');
@ -151,7 +160,7 @@
+ '<div class="onoffswitch-inner"></div>' + '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>' + '<div class="onoffswitch-switch"></div>'
+ '</label>'); + '</label>');
e.after(toggleSwitch); controlpanel.append(toggleSwitch);
// language chooser // language chooser
if (uhrGlobals.languages.length > 1) { if (uhrGlobals.languages.length > 1) {
@ -159,7 +168,7 @@
uhrGlobals.languages.forEach(function (item) { uhrGlobals.languages.forEach(function (item) {
languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>'); languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
}); });
e.after(languageChooser); controlpanel.append(languageChooser);
} }
// theme chooser // theme chooser
@ -168,8 +177,15 @@
uhrGlobals.themes.forEach(function (item) { uhrGlobals.themes.forEach(function (item) {
themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>'); themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
}); });
e.after(themeChooser); controlpanel.append(themeChooser);
} }
var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '">close</a>');
closebutton.on('click', function () {
$('#uhr-controlpanel' + this.id).hide();
}.bind(this));
controlpanel.append(closebutton);
e.after(controlpanel);
controlpanel.hide();
} }
}; };
var wireFunctionality = function wireFunctionality() { var wireFunctionality = function wireFunctionality() {
@ -192,7 +208,8 @@
// language chooser // language chooser
var languageChooser = $('#uhr-languagechooser' + this.id); var languageChooser = $('#uhr-languagechooser' + this.id);
languageChooser.on('change', function () { languageChooser.on('change', function () {
this.language(this.value); var languageKey = $('#uhr-languagechooser' + this.id).val();
this.language(languageKey);
}.bind(this)); }.bind(this));
var selectedLanguage = $.cookie('uhr-language' + this.id); var selectedLanguage = $.cookie('uhr-language' + this.id);
if (selectedLanguage === undefined || this.options.force) { if (selectedLanguage === undefined || this.options.force) {
@ -218,7 +235,8 @@
// theme chooser // theme chooser
var themeChooser = $('#uhr-themechooser' + this.id); var themeChooser = $('#uhr-themechooser' + this.id);
themeChooser.on('change', function () { themeChooser.on('change', function () {
this.theme(this.value); var themeKey = $('#uhr-themechooser' + this.id).val();
this.theme(themeKey);
}.bind(this)); }.bind(this));
var selectedTheme = $.cookie('uhr-theme' + this.id); var selectedTheme = $.cookie('uhr-theme' + this.id);
if (selectedTheme === undefined || this.options.force) { if (selectedTheme === undefined || this.options.force) {