tessl/npm-zepto

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API

Overview

Eval results

Files

Mobile Touch Events

Name: tessl/npm-zepto
Author: tessl

Touch gesture recognition optimized for mobile devices, including swipe, tap, and pinch gestures. Provides intuitive touch interactions for mobile web applications.

Capabilities

Touch Events

Core touch gesture methods for mobile interaction.

/**
 * Bind tap gesture event
 * @param callback - Function to call on tap
 * @returns Original collection
 */
$.fn.tap(callback);

/**
 * Bind single tap event (excludes double taps)
 * @param callback - Function to call on single tap
 * @returns Original collection
 */
$.fn.singleTap(callback);

/**
 * Bind double tap gesture event
 * @param callback - Function to call on double tap
 * @returns Original collection
 */
$.fn.doubleTap(callback);

/**
 * Bind long tap/press gesture event
 * @param callback - Function to call on long tap
 * @returns Original collection
 */
$.fn.longTap(callback);

Usage Examples:

// Basic tap handling
$('.button').tap(function() {
  console.log('Button tapped');
});

// Single vs double tap
$('.item').singleTap(function() {
  $(this).addClass('selected');
}).doubleTap(function() {
  $(this).addClass('editing');
});

// Long press for context menu
$('.item').longTap(function() {
  showContextMenu(this);
});

Swipe Gestures

Directional swipe detection for navigation and interaction.

/**
 * Bind swipe gesture event (any direction)
 * @param callback - Function to call on swipe
 * @returns Original collection
 */
$.fn.swipe(callback);

/**
 * Bind swipe left gesture event
 * @param callback - Function to call on swipe left
 * @returns Original collection
 */
$.fn.swipeLeft(callback);

/**
 * Bind swipe right gesture event
 * @param callback - Function to call on swipe right
 * @returns Original collection
 */
$.fn.swipeRight(callback);

/**
 * Bind swipe up gesture event
 * @param callback - Function to call on swipe up
 * @returns Original collection
 */
$.fn.swipeUp(callback);

/**
 * Bind swipe down gesture event
 * @param callback - Function to call on swipe down
 * @returns Original collection
 */
$.fn.swipeDown(callback);

Usage Examples:

// Navigation with swipes
$('.carousel').swipeLeft(function() {
  showNextSlide();
}).swipeRight(function() {
  showPrevSlide();
});

// Dismiss with swipe
$('.notification').swipeUp(function() {
  $(this).fadeOut();
});

// General swipe handling
$('.swipeable').swipe(function(e) {
  console.log('Swiped in direction:', e.direction);
});

Pinch Gestures (iOS)

Pinch gesture recognition for iOS devices.

/**
 * Bind pinch gesture event (iOS only)
 * @param callback - Function to call on pinch
 * @returns Original collection
 */
$.fn.pinch(callback);

/**
 * Bind pinch-in gesture event (iOS only)
 * @param callback - Function to call on pinch in
 * @returns Original collection
 */
$.fn.pinchIn(callback);

/**
 * Bind pinch-out gesture event (iOS only)
 * @param callback - Function to call on pinch out
 * @returns Original collection
 */
$.fn.pinchOut(callback);

Usage Examples:

// Image zoom with pinch
$('.zoomable-image').pinchOut(function() {
  $(this).addClass('zoomed-in');
}).pinchIn(function() {
  $(this).removeClass('zoomed-in');
});

// General pinch handling
$('.pinchable').pinch(function(e) {
  console.log('Pinch scale:', e.scale);
});

Event Properties

Touch event objects contain additional properties for gesture details.

// Touch event properties:
// - direction: 'left', 'right', 'up', 'down'
// - distance: Distance of swipe in pixels
// - deltaX: Horizontal distance
// - deltaY: Vertical distance
// - scale: Pinch scale factor (pinch events only)
// - timeStamp: Event timestamp

Usage Examples:

$('.item').swipe(function(e) {
  console.log('Direction:', e.direction);
  console.log('Distance:', e.distance);
  
  if (e.distance > 100) {
    // Long swipe
    $(this).addClass('long-swipe');
  }
});

$('.scalable').pinch(function(e) {
  const scale = e.scale;
  $(this).css('transform', `scale(${scale})`);
});

Touch Configuration

Customizing touch gesture detection parameters.

// Touch gestures work with both 'touch' events (iOS, Android) 
// and 'pointer' events (Windows Phone)

// Gesture thresholds (internal settings):
// - Tap: < 30px movement, < 750ms duration
// - Long tap: > 750ms duration
// - Swipe: > 30px movement, < 1000ms duration
// - Double tap: < 300ms between taps

Best Practices

Optimizing touch interactions for mobile devices.

// Prevent default touch behaviors when needed
$('.custom-touch').on('touchstart', function(e) {
  e.preventDefault(); // Prevent scrolling, zooming, etc.
});

// Combine with CSS for better UX
.touchable {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

// Use touch events for immediate feedback
$('.button')
  .on('touchstart', function() {
    $(this).addClass('pressed');
  })
  .on('touchend', function() {
    $(this).removeClass('pressed');
  })
  .tap(function() {
    // Handle the actual action
    performAction();
  });

// Debounce rapid taps
let tapTimeout;
$('.item').tap(function() {
  clearTimeout(tapTimeout);
  tapTimeout = setTimeout(() => {
    handleTap(this);
  }, 100);
});

Install with Tessl CLI