Awesome GitHub RepositoriesGesture Thresholding

Slideout is a touch-gesture UI component and navigation menu designed for mobile web applications. It provides a side panel that slides across the screen to reveal navigation options, utilizing CSS transitions to animate the movement of the viewport. The component manages the expanded or collapsed state of the navigation menu and includes logic to restrict gestures for specific interface elements to prevent interaction conflicts. It employs a system for executing custom logic triggered by menu state transitions and user drag gestures.

Snap.js is a JavaScript library for building draggable side navigation panels on touch devices. It enables slide-in menus from the left or right screen edge, driven by a gesture-based state machine that interprets drag and flick gestures to open and close the panel. The library distinguishes horizontal menu drags from vertical scrolling by analyzing the initial touch movement angle, and locks menu movement to a single axis to prevent interference. It uses hardware-accelerated CSS transforms for smooth animations and provides configurable snap thresholds that determine whether a drag should op

Il s'agit d'une bibliothèque d'overlay UI mobile pour React Native qui fournit un composant modal animé. Elle fonctionne comme un élément d'interface réactif aux gestes, utilisé pour présenter du contenu supplémentaire via des fenêtres d'overlay qui prennent en charge des transitions personnalisées et des ajustements de mise en page dynamiques. La bibliothèque dispose d'un observateur de mise en page dynamique qui redimensionne et repositionne automatiquement les composants lors des rotations d'écran ou de l'apparition du clavier virtuel. Elle implémente une navigation basée sur les gestes, permettant aux utilisateurs de fermer les overlays via des gestes de balayage configurés et des interactions avec l'arrière-plan. Le projet couvre la coordination des animations et des transitions, incluant des hooks de cycle de vie qui exécutent des rappels avant et après les animations de fenêtre. Il inclut également des utilitaires pour la personnalisation de l'arrière-plan et la gestion du contenu défilable afin d'éviter les conflits d'interaction lors des actions de balayage pour fermer.

Koloda est une bibliothèque d'interaction gestuelle iOS et un composant de vue SwiftUI utilisé pour créer des interfaces de cartes balayables (swipeable). Il fournit un composant de vue basé sur une pile qui gère les vues superposées, garantissant que seul l'élément le plus haut reste activement interactif. La bibliothèque permet la personnalisation de l'apparence des cartes, incluant la configuration des superpositions et des animations qui dictent comment les cartes d'arrière-plan se déplacent pendant un balayage. Elle gère le comportement de glisser et les directions de balayage, déclenchant une logique spécifique lorsque les cartes sont balayées, tapées ou totalement épuisées. Le composant couvre l'implémentation de transformations de vue pilotées par les gestes et le rendu de piles de cartes que les utilisateurs rejettent via un modèle d'interaction de sélection courant.

Zag est une bibliothèque de machine à états UI headless qui fournit une logique de composant non stylisée pour assurer un comportement cohérent à travers différents moteurs de rendu. Elle fonctionne comme une boîte à outils pour modéliser des interactions d'interface utilisateur complexes en utilisant des statecharts, découplant la logique sous-jacente et les attributs d'accessibilité du stylage visuel. La bibliothèque est agnostique au framework, utilisant des adaptateurs spécialisés pour faire le pont entre sa logique de machine à états et diverses bibliothèques JavaScript telles que React, Solid, Vue et Svelte. Cette approche permet aux développeurs de maintenir un modèle d'interaction unique tout en appliquant n'importe quelle solution CSS ou de stylage via des attributs de données pilotés par l'état. Zag couvre un large éventail de domaines fonctionnels, incluant une gestion complète de l'accessibilité pour la navigation au clavier et les attributs ARIA, ainsi qu'une vaste collection de primitives interactives. Celles-ci incluent des contrôles de saisie, des éléments de navigation comme les menus et onglets, des composants de superposition tels que les dialogues et popovers, et une gestion média complexe pour le recadrage d'image et la capture de signature. Elle fournit également des utilitaires pour la gestion de données hiérarchiques, la gestion de listes asynchrones et un système pour construire des visites guidées de produits.

SVPullToRefresh est une bibliothèque permettant d'ajouter des comportements de « pull-to-refresh » (tirer pour rafraîchir) et de défilement infini aux vues de défilement UIKit sur la plateforme iOS. Elle fournit des composants d'interface utilisateur spécialisés qui permettent le rafraîchissement manuel du contenu et la pagination au sein des vues défilantes. La bibliothèque implémente des mécanismes pour déclencher des actions de chargement de données lorsqu'un utilisateur tire une vue de défilement depuis le haut ou atteint le bas d'une zone défilante. Ces déclencheurs permettent de synchroniser les dernières informations ou d'ajouter du contenu pour créer des flux continus.

Phoenix est un composant UI de type pull-to-refresh et une bibliothèque de gestes JavaScript conçue pour les vues mobiles et web. Il fournit un modèle d'interaction réutilisable qui déclenche des mises à jour de données lorsqu'un utilisateur fait glisser l'écran vers le bas. Le projet propose des indicateurs visuels personnalisables et des animations thématiques qui réagissent à l'état de l'opération de rafraîchissement. Il inclut des mécanismes pour la coordination manuelle de l'état, permettant aux contrôleurs externes de déclencher ou d'annuler par programmation les séquences de rafraîchissement indépendamment de l'entrée utilisateur. Pour assurer une expérience utilisateur fluide, la bibliothèque s'intègre aux vues mobile-first en interceptant les événements de défilement pour éviter les comportements conflictuels du navigateur natif.

This project is a jQuery plugin designed to detect and handle touch gestures on touch-enabled devices. It serves as a touch input handler and mobile gesture interface for identifying interactions such as swipes and pinches within a jQuery environment. The library distinguishes intentional gestures from accidental movements through configurable distance and time thresholds. It includes mechanisms to manage input interference, allowing for the exclusion of specific interactive child elements and the locking of default browser behaviors like scrolling or zooming during an active gesture. The sy