added functionality to hide controls

This commit is contained in:
Manuel Friedli 2014-01-20 15:47:13 +01:00
parent 18c629f1e2
commit 0412ea17fc
3 changed files with 32 additions and 26 deletions

View file

@ -41,6 +41,7 @@ Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
* Farbe ist Schwarz
* Sprache ist Bärndütsch
* Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt.
@ -61,6 +62,8 @@ Der uhr()-Methode kann ein Options-Objekt mitgegeben werden:
width: '100%', // eine CSS-Grössenangabe (default: 100%)
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
// true: immer die angegebene Konfiguration verwenden
controls: true // true (default): Die Bedienelemente (Ein-/Ausschalter, Theme- und Sprachwähler) werden angezeigt
// false: Die Bedienelemente werden nicht angezeigt
});
5. Sonderfunktionen

View file

@ -1,5 +1,5 @@
CACHE MANIFEST
# 4.0.1
# 4.1
COPYING
favicon.png

53
uhr.js
View file

@ -29,7 +29,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
status: 'on',
language: 'de_CH',
theme: 'black',
force: false
force: false,
controls: true
},
start: function() {
if (!this._isOn()) {
@ -199,33 +200,35 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
// on/off switch
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('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
e.after(toggleSwitch);
if (this.options.controls) {
// on/off switch
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('<label class="onoffswitch-label" for="uhr-onoffswitch-checkbox' + this._id + '">'
+ '<div class="onoffswitch-inner"></div>'
+ '<div class="onoffswitch-switch"></div>'
+ '</label>');
e.after(toggleSwitch);
// language chooser
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>')
for (var code in window._uhr.languages) {
if (window._uhr.languages.hasOwnProperty(code)) {
var language = window._uhr.languages[code];
languageChooser.append('<option value="' + code + '">' + language.language + '</option>');
// language chooser
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>')
for (var code in window._uhr.languages) {
if (window._uhr.languages.hasOwnProperty(code)) {
var language = window._uhr.languages[code];
languageChooser.append('<option value="' + code + '">' + language.language + '</option>');
}
}
}
e.after(languageChooser);
e.after(languageChooser);
// theme chooser
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
themeChooser.append('<option value="black">Schwarz</option>');
themeChooser.append('<option value="red">Rot</option>');
themeChooser.append('<option value="blue">Blau</option>');
themeChooser.append('<option value="green">Grün</option>');
themeChooser.append('<option value="white">Weiss</option>');
e.after(themeChooser);
// theme chooser
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
themeChooser.append('<option value="black">Schwarz</option>');
themeChooser.append('<option value="red">Rot</option>');
themeChooser.append('<option value="blue">Blau</option>');
themeChooser.append('<option value="green">Grün</option>');
themeChooser.append('<option value="white">Weiss</option>');
e.after(themeChooser);
}
},
_wireFunctionality: function() {
var e = this.element;