Verbesserung der Benutzererfahrung mit Hammer JS & Gesten

Die Touch-Funktion ist zu einem integralen Bestandteil unserer Interaktion mit Geräten geworden. Sie ist die primäre und intuitivste Art der Interaktion mit Smartphones, Tablets, Chromebooks, Hybrid-Laptops und anderen Touchscreen-Geräten. Geben Sie einem Fünfjährigen ein solches Gerät in die Hand, und es wird schnell herausfinden, wie es zu bedienen ist.

Webbrowser wurden jedoch ursprünglich für große Bildschirme mit Zeigegeräten entwickelt. Auch heute noch werden von ihnen standardmäßig nur grundlegende Touch-Ereignisse erkannt – touchstart, touchend, touchcancel und touchmove.

Um erweiterte Touch-Gesten wie Mehrfach-Taps, Schwenken, Wischen, Zusammenziehen und Drehen zu implementieren, müssen wir benutzerdefinierte Logik mit den Low-Level-Touch-APIs von JavaScript schreiben. Dies würde typischerweise das Messen der von den Touch-Punkten zurückgelegten Strecke, das Aufzeichnen ihrer Zeitstempel, das Bestimmen von Drehungen und dann das Identifizieren der Art des Ereignisses unter Verwendung all dieser Informationen beinhalten.

Eine bessere Option ist die Verwendung einer Bibliothek, um uns die Arbeit zu erleichtern. Hammer.js ist eine solche beliebte Bibliothek, die wir in diesem Artikel untersuchen werden. Später werden wir sehen, wie wir diese Bibliothek in Drupal verwenden können, um die Benutzerfreundlichkeit zu verbessern.

Was ist Hammer.js?

„Hammer ist eine Open-Source-Bibliothek, die Gesten erkennen kann, die durch Touch-, Maus- und Zeigerereignisse ausgeführt werden.“ – hammerjs.github.io

Es handelt sich um eine beliebte JavaScript-Bibliothek, mit der Webanwendungen erstellt werden können, die Aktionen wie Schwenken, Wischen, Drehen und Zoomen durch Touch-Gesten ausführen müssen. Wir können diese Bibliothek verwenden, um erweiterte Touch-Event-Listener hinzuzufügen und ein Verhalten wie bei einer nativen Anwendung in ihren Web-Pendants zu erzielen. Als weit verbreitete Open-Source-Bibliothek bietet sie Unterstützung für die meisten Webbrowser und Plattformen.

Vorteile der Verwendung von Hammer.js

Wenn Sie der Verwendung dieser Bibliothek skeptisch gegenüberstehen, finden Sie hier einige der wichtigsten Vorteile, die Sie berücksichtigen sollten, bevor Sie Ihre eigene benutzerdefinierte Lösung erstellen.

• Open Source
• Cross-Browser- und Plattformkompatibilität
• Einfach zu bedienen
• Unterstützung für Multi-Touch-Gesten
• Benutzerdefinierte Erkennungsfunktionen
• Keine Abhängigkeiten
• Integration mit jQuery und Angular

Von Hammer.js erkannte Touch-Gesten

Im Folgenden sind die von Hammer.js erkannten Touch-Gesten aufgeführt. Jede dieser Touch-Gesten deklariert eine Reihe von Ereignissen und konfigurierbaren Optionen. Wir können sie manipulieren und auch unsere eigenen Gesten erstellen. Weitere Informationen finden Sie in der offiziellen Dokumentation.

1. Schwenken
   Schwenken ist eine Obermenge von Wischen, da es eine translatorische Bewegung in jede Richtung beinhalten kann. Es kann verwendet werden, um sich in einer vergrößerten oder großen Ansicht zu bewegen. Das Bewegen auf der Karte in Google Maps ist ein perfektes Beispiel für die Verwendung der Schwenk-Touch-Geste.
   
   Sie können die erkannte Richtung ändern, die standardmäßig auf DIRECTION_ALL eingestellt ist, und die Empfindlichkeit durch Ändern des Schwellenwerts steuern.
    
2. Zusammenziehen
   Ein Zusammenziehen ist eine Multi-Touch-Geste, bei der sich mindestens zwei Touch-Punkte aufeinander zu oder voneinander weg bewegen. Auch hier ist Google Maps ein perfektes Beispiel. Wenn wir mit unseren Fingern hinein- oder herauszoomen, wird die Pinch-Geste verwendet.
   
   Sie können die Anzahl der Touch-Punkte und deren Empfindlichkeit ändern, indem Sie die Optionen für Zeiger und Schwellenwert ändern.
    
3. Drücken
   Drücken wird erkannt, wenn wir unseren Finger oder Zeiger für eine bestimmte Zeit gedrückt halten. Dies wird normalerweise verwendet, um ein Kontextmenü oder weitere Optionen für ein Element aufzurufen. Wenn Sie beispielsweise die gespeicherten Artikel in einer App wie Pocket oder einen Chat in WhatsApp drücken, werden weitere Optionen für den gespeicherten Artikel oder den Chat angezeigt. Sie können etwas Ähnliches in Ihrer Webanwendung implementieren.
   
   Auch hier können Sie den Schwellenwert und die Zeit in Millisekunden konfigurieren, die das Ereignis erkennt.
    
4. Drehen
   Drehen wird erkannt, wenn sich mehrere Touch-Punkte in einer kreisförmigen Bewegung umeinander drehen. Bildergalerie und Google Maps sind die besten Beispiele hierfür. 
   
   Diese Geste ist in Hammer standardmäßig deaktiviert. Sie können die Anzahl der Touch-Punkte und den Schwellenwert konfigurieren.
    
5. Wischen
   Wischen identifiziert translatorische Bewegungen in horizontaler und vertikaler Richtung. Dies kann verwendet werden, um zwischen verschiedenen Ansichten zu wechseln, z. B. um zwischen Registerkarten zu wechseln, Karten in Google Now zu verwerfen oder in Tinder nach rechts oder links zu wischen.
   
   Standardmäßig werden von Hammer nur horizontale Wischbewegungen erkannt. Sie können die Richtung, den Schwellenwert und die Geschwindigkeit der Wischbewegungen konfigurieren.
    
6. Tippen
   Taps ähneln Klickereignissen, der größte Unterschied besteht jedoch darin, dass ein Tap-Ereignis früher als Standard-Klickereignisse aufgerufen wird. Durch die Verwendung von Hammer können Sie die berühmte 300-ms-Verzögerung auf Mobilgeräten beseitigen. 
   
   Sie können auch mehrere Taps implementieren, indem Sie einfach die Option taps konfigurieren und die Intervalle zwischen ihnen angeben. Doppeltes Tippen, um ein Bild auf Instagram zu liken, ist vielleicht das beste Beispiel hierfür.

Erste Schritte mit Hammer.js

Die Verwendung von Hammer.js ist so einfach wie das Erstellen eines Objekts, das Angeben des Elements und das Konfigurieren der Optionen gemäß den Anforderungen. Auf der Github-Seite der Bibliothek finden Sie die Dokumentation und einige nützliche Beispiele. 

var element = document.getElementById("my_element");
var ham = new Hammer(element);
ham.get('press').set({ time: 500 });
ham.on('press', function(event) {
    // do something
});

Wie verwende ich Hammer.js in Drupal?

Um die HammerJS-Bibliothek zu verwenden, müssen wir sie in der Datei .libraries.yml deklarieren und an das gerenderte Array anhängen. Lesen Sie in unserem Blog, wie Sie hier Bibliotheken von Drittanbietern in Drupal verwenden.

In Drupal 8 gibt es ein Contributed-Modul Hammer.js, mit dem die Bibliothek deklariert und ihr Status über Systemberichte verwaltet werden kann. Es bietet auch einen Drush-Befehl zum Herunterladen und Platzieren der Bibliothek im Bibliotheksverzeichnis der Drupal-Site.

Dieses Modul ist jedoch nicht obligatorisch, Sie können es weglassen und die Hammer.js-Bibliothek wie jede andere Bibliothek von Drittanbietern verwenden. Eine bessere Alternative ist die Verwendung eines Dependency Managers wie bower oder npm.

$ bower install hammerjs --save

oder

$ npm install hammerjs --save

Sie können sich auch auf die Implementierung des Moduls Responsive and off-canvas menu beziehen, um Ihr Verständnis zu verbessern.

Fazit

Durch die Verwendung von Hammer.js können wir das native Erlebnis in Webanwendungen bringen, um die Benutzerfreundlichkeit zu verbessern. Es bietet Cross-Browser-Unterstützung und nimmt viel Komplexität bei der Implementierung von Touch- und Zeigergesten weg. Die Nutzung in Drupal ist aufgrund der Library API von Drupal 8 einfacher denn je.