T11c - Pull-to-Refresh + Swipe Gestures #22

Closed
opened 2026-05-21 04:11:57 +00:00 by shawn · 0 comments
Owner

T11c - Pull-to-Refresh + Swipe Gestures

Implemented mobile touch gesture support for the asset list:

Changes

  • Pull-to-refresh: touchstart/touchmove/touchend on #assetsListView with visual pull indicator (spinner, drag progress, "Release to refresh" label). Only activates when scrolled to top.
  • Swipe-to-delete: Left-swipe on .asset-item-swipe-wrap items reveals delete background. Swipe past 60px threshold to activate, snap-back otherwise.
  • Undo toast: After delete, #undoToast appears at bottom with 5-second auto-dismiss. Undo button properly cancels the delayed deletion.
  • Desktop fallback: body.has-mouse class shows a 🔄 Refresh button in the toolbar. Mouse detection via mousemove event.
  • Gesture isolation: PTR only triggers at scroll top; swipe requires horizontal movement (rejects vertical scroll).
  • Idempotent init: _ptrInited and _swipeInited guards prevent duplicate event listeners on tab switches.

Bugs Fixed

  • Removed duplicate let ptrState declaration that caused SyntaxError
  • Consolidated two conflicting PTR implementations into one
  • Consolidated two conflicting swipe-to-delete implementations into one
  • Fixed swipeDeleteAsset undo callback to properly cancel the delayed API delete
  • Removed duplicate CSS blocks for .ptr-indicator and .swipe-item-wrap
  • Consolidated showUndoToast to use dedicated #undoToast element

Test Results

  • 88/90 frontend tests pass (2 pre-existing failures unrelated)
  • All static HTML checks pass (elements, functions, no duplicate declarations)
## T11c - Pull-to-Refresh + Swipe Gestures Implemented mobile touch gesture support for the asset list: ### Changes - **Pull-to-refresh:** touchstart/touchmove/touchend on `#assetsListView` with visual pull indicator (spinner, drag progress, "Release to refresh" label). Only activates when scrolled to top. - **Swipe-to-delete:** Left-swipe on `.asset-item-swipe-wrap` items reveals delete background. Swipe past 60px threshold to activate, snap-back otherwise. - **Undo toast:** After delete, `#undoToast` appears at bottom with 5-second auto-dismiss. Undo button properly cancels the delayed deletion. - **Desktop fallback:** `body.has-mouse` class shows a 🔄 Refresh button in the toolbar. Mouse detection via mousemove event. - **Gesture isolation:** PTR only triggers at scroll top; swipe requires horizontal movement (rejects vertical scroll). - **Idempotent init:** `_ptrInited` and `_swipeInited` guards prevent duplicate event listeners on tab switches. ### Bugs Fixed - Removed duplicate `let ptrState` declaration that caused SyntaxError - Consolidated two conflicting PTR implementations into one - Consolidated two conflicting swipe-to-delete implementations into one - Fixed `swipeDeleteAsset` undo callback to properly cancel the delayed API delete - Removed duplicate CSS blocks for `.ptr-indicator` and `.swipe-item-wrap` - Consolidated `showUndoToast` to use dedicated `#undoToast` element ### Test Results - 88/90 frontend tests pass (2 pre-existing failures unrelated) - All static HTML checks pass (elements, functions, no duplicate declarations)
shawn closed this issue 2026-05-21 04:11:57 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: shawn/canteen-asset-tracker#22