Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 260

4. Anpassung des Shake-Events
Für die Anpassung des Shake-Events gilt im Prinzip dasselbe wie für die Anpassung
des Buttons. Auf den Container flickr-bild darf toggleClass bei einer Schüttelgeste
nur angewendet werden, wenn das Bild noch nicht sichtbar ist:
// Eventhandler: Shake
var onShake = function() {
if(!geschuettelt) {
// CSS-Klasse austauschen und Bild einblenden
$('.flickr-bild').toggleClass('sichtbar');
$('button').text("Neues Polaroid!").toggleClass("shakeit");
geschuettelt = true;
}
};
Listing 6.11 Die Anpassung des Shake-Events, sodass CSS-Klassen nur ausgewechselt wer-
den, wenn das Bild noch nicht sichtbar ist
Das Ausrufezeichen in der if -Abfrage gibt an, dass geschuettelt auf unwahr (also
false ) überprüft wird. Wenn dieser Zustand vorliegt, dann wird der Inhalt der if -
Abfrage ausgeführt und das flickr-bild korrekt eingeblendet. Um den Benutzer zu
unterstützen und ihm zu erklären, was als Nächstes zu tun ist, verändern Sie noch
den Text und die Farbe (über die CSS-Klasse shakeit ) des Buttons auf seinen
ursprünglichen Zustand. Den Text und die CSS-Klasse des Buttons hatten Sie zuvor ja
bereits in der Funktion neuespolaroid() verändert. Zu guter Letzt wird die Variable
geschuettelt auf wahr ( true ) gesetzt. So wird vermieden, dass eine weitere Schüttel-
geste toggleClass wieder ausführt und somit das Bild wieder verschwinden lässt. Das
wäre sicherlich nicht im Sinne des Erfinders des Polaroids gewesen.
5. Die Funktion neuespolaroid() erweitern
Sie wissen bereits, wie man Containern CSS-Klassen per jQuery hinzufügt. Die
Methode der toggleClass kommt nun auch hier wieder zum Einsatz. Setzen Sie fol-
genden Code an den Anfang der Funktion neuespolaroid() :
$('.polaroid-rahmen').toggleClass('sichtbar');
Damit weisen Sie dem Container polaroid-rahmen die CSS-Klasse sichtbar zu. Auf-
grund der Änderungen, die Sie vorher an der CSS-Datei vorgenommen hatten,
müsste das Polaroid nun erfolgreich einfliegen. Wichtig ist, dass Sie die Variable
geschuettelt beim Laden eines neuen Polaroids wieder auf unwahr ( false ) setzen.
Ansonsten würde die Schüttelgeste nichts mehr auslösen. Setzen Sie die Variable,
direkt nach der obigen Zeile Code, wie folgt auf unwahr: