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 * Farbe ist Schwarz
* Sprache ist Bärndütsch * Sprache ist Bärndütsch
* Die Uhr ist eingeschaltet * Die Uhr ist eingeschaltet
* Die Bedienelemente werden angezeigt
Wie du diese Optionen ändern kannst, verrät der nächte Abschnitt. 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%) width: '100%', // eine CSS-Grössenangabe (default: 100%)
force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen; force: false, // false (default): Falls ein Cookie im Browser besteht, werden dessen Konfigurationswerte übernommen;
// true: immer die angegebene Konfiguration verwenden // 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 5. Sonderfunktionen

View file

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