8 مستودعات
Logic for determining state transitions based on drag distance thresholds.
Distinct from Coordinate-Based Positioning: Focuses on snapping logic based on distance thresholds rather than general coordinate-based placement.
Explore 8 awesome GitHub repositories matching user interface & experience · Gesture Thresholding. Refine with filters or upvote what's useful.
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.
Uses coordinate-based distance tracking to determine whether to snap the menu open or closed.
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
Uses configurable pixel thresholds to decide whether a drag should snap the menu open or closed.
هذه مكتبة تراكب واجهة مستخدم للجوال لـ React Native توفر مكوناً مشروطاً (modal) متحركاً. تعمل كعنصر واجهة مستجيب للإيماءات يُستخدم لتقديم محتوى إضافي عبر نوافذ تراكب تدعم انتقالات مخصصة وتعديلات تخطيط ديناميكية. تتميز المكتبة بمراقب تخطيط ديناميكي يقوم تلقائياً بتغيير حجم المكونات وإعادة تموضعها أثناء تدوير الشاشة أو عند ظهور لوحة المفاتيح على الشاشة. وتطبق تنقلاً يعتمد على الإيماءات، مما يسمح للمستخدمين بإغلاق التراكبات من خلال إيماءات السحب المكونة وتفاعلات الخلفية. يغطي المشروع تنسيق الرسوم المتحركة والانتقالات، بما في ذلك خطافات دورة الحياة التي تنفذ ردود الاتصال قبل وبعد رسوم النوافذ المتحركة. كما يتضمن أدوات لتخصيص الخلفية وإدارة المحتوى القابل للتمرير لمنع تعارضات التفاعل أثناء إجراءات السحب للإغلاق.
Triggers modal dismissal based on touch coordinates and velocity thresholds during swipe gestures.
Koloda هي مكتبة تفاعل إيماءات iOS ومكون عرض SwiftUI يُستخدم لإنشاء واجهات بطاقات قابلة للسحب. يوفر مكون عرض قائماً على المكدس يدير طرق العرض المتداخلة، مما يضمن بقاء العنصر العلوي فقط تفاعلياً بشكل نشط. تسمح المكتبة بتخصيص مظهر البطاقة، بما في ذلك تكوين التراكبات والرسوم المتحركة التي تملي كيفية تحرك البطاقات الخلفية أثناء السحب. تدير سلوك السحب واتجاهات السحب، مما يؤدي إلى تشغيل منطق محدد عند سحب البطاقات، أو النقر عليها، أو استنفادها بالكامل. يغطي المكون تنفيذ تحويلات العرض القائمة على الإيماءات وعرض مكدسات البطاقات التي يتخلص منها المستخدمون من خلال نمط تفاعل اختيار شائع.
Determines successful swipe actions by calculating the distance between touch points and a center threshold.
Zag هي مكتبة آلة حالة واجهة مستخدم بدون رأس توفر منطق مكون غير مصمم لضمان سلوك متسق عبر محركات عرض مختلفة. تعمل كمجموعة أدوات لنمذجة تفاعلات واجهة المستخدم المعقدة باستخدام مخططات الحالة، وفصل المنطق الأساسي وسمات إمكانية الوصول عن التصميم المرئي. المكتبة لا تعتمد على إطار عمل، وتستخدم محولات متخصصة لربط منطق آلة الحالة الخاص بها بمكتبات JavaScript متنوعة مثل React و Solid و Vue و Svelte. يسمح هذا النهج للمطورين بالحفاظ على نموذج تفاعل واحد مع تطبيق أي حل CSS أو تصميم من خلال سمات البيانات القائمة على الحالة. تغطي Zag مجموعة واسعة من المجالات الوظيفية، بما في ذلك إدارة إمكانية الوصول الشاملة للتنقل بلوحة المفاتيح وسمات ARIA، بالإضافة إلى مجموعة واسعة من العناصر التفاعلية. تشمل هذه عناصر التحكم في الإدخال، وعناصر التنقل مثل القوائم وعلامات التبويب، ومكونات التراكب مثل مربعات الحوار والنوافذ المنبثقة، ومعالجة الوسائط المعقدة لاقتصاص الصور والتقاط التوقيعات. كما توفر أدوات لإدارة البيانات الهرمية، ومعالجة القوائم غير المتزامنة، ونظاماً لبناء جولات المنتج الموجهة.
Implements dismissal logic based on touch velocity and distance thresholds for UI panels.
SVPullToRefresh is a library for adding pull-to-refresh and infinite scrolling behaviors to UIKit scroll views on the iOS platform. It provides specialized user interface components that enable manual content refreshing and pagination within scrollable views. The library implements mechanisms to trigger data loading actions when a user pulls a scroll view from the top or reaches the bottom of a scrollable area. These triggers allow for syncing the latest information or appending more content to create continuous feeds.
Implements logic to trigger refresh actions based on specific scroll distance thresholds.
Phoenix هو مكون واجهة مستخدم للسحب للتحديث (pull-to-refresh) ومكتبة إيماءات JavaScript مصممة لعروض الجوال والويب. يوفر نمط تفاعل قابلاً لإعادة الاستخدام يؤدي إلى تحديثات البيانات عندما يسحب المستخدم الشاشة للأسفل. يتميز المشروع بمؤشرات مرئية قابلة للتخصيص ورسوم متحركة ذات طابع خاص تتفاعل مع حالة عملية السحب. يتضمن آليات لتنسيق الحالة يدوياً، مما يسمح لوحدات التحكم الخارجية بتشغيل أو إلغاء تسلسلات التحديث برمجياً بشكل مستقل عن إدخال المستخدم. لضمان تجربة مستخدم سلسة، تتكامل المكتبة مع طرق العرض المخصصة للجوال من خلال اعتراض أحداث التمرير لمنع سلوكيات المتصفح الأصلية المتضاربة.
Implements logic to determine if a drag distance has reached the threshold required to trigger a refresh action.
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
Validates intentional gestures by comparing movement distance and duration against configurable thresholds.