Browse Source

fix highlight drawer on mobile

imwald
Silberengel 4 months ago
parent
commit
9c2821aa76
  1. 61
      src/components/RssFeedItem/index.tsx

61
src/components/RssFeedItem/index.tsx

@ -193,6 +193,9 @@ export default function RssFeedItem({ item, className, compact = false }: { item
if (isSmallScreen) { if (isSmallScreen) {
isSelectingRef.current = true isSelectingRef.current = true
// Clear any pending drawer show // Clear any pending drawer show
if (selectionStableTimeoutRef.current) {
clearTimeout(selectionStableTimeoutRef.current)
}
setShowHighlightDrawer(false) setShowHighlightDrawer(false)
} }
} }
@ -201,23 +204,36 @@ export default function RssFeedItem({ item, className, compact = false }: { item
if (isSmallScreen) { if (isSmallScreen) {
isSelectingRef.current = true isSelectingRef.current = true
// Clear any pending drawer show while actively selecting // Clear any pending drawer show while actively selecting
if (touchEndTimeoutRef.current) { if (selectionStableTimeoutRef.current) {
clearTimeout(touchEndTimeoutRef.current) clearTimeout(selectionStableTimeoutRef.current)
} }
setShowHighlightDrawer(false)
} }
} }
const handleTouchEnd = () => { const handleTouchEnd = () => {
if (isSmallScreen) { if (isSmallScreen) {
// Wait a bit longer on mobile to allow native selection UI to appear first // Mark that touch selection has ended
// Wait a bit for native selection UI to appear
if (touchEndTimeoutRef.current) { if (touchEndTimeoutRef.current) {
clearTimeout(touchEndTimeoutRef.current) clearTimeout(touchEndTimeoutRef.current)
} }
touchEndTimeoutRef.current = setTimeout(() => { touchEndTimeoutRef.current = setTimeout(() => {
isSelectingRef.current = false isSelectingRef.current = false
// Don't immediately show drawer - let selection stability check handle it // Now check if there's a selection and show drawer after stability period
// This allows user to continue dragging selection handles if needed lastSelectionChangeRef.current = Date.now()
}, 200) // Shorter delay since we're using stability check // Wait for selection to be stable (no changes for 1600ms)
if (selectionStableTimeoutRef.current) {
clearTimeout(selectionStableTimeoutRef.current)
}
selectionStableTimeoutRef.current = setTimeout(() => {
const timeSinceLastChange = Date.now() - lastSelectionChangeRef.current
// Only show if selection hasn't changed in the last 1600ms and we're not actively selecting
if (timeSinceLastChange >= 1600 && !isSelectingRef.current) {
handleSelection(true)
}
}, 1600)
}, 600) // Wait 600ms for native selection UI
} }
} }
@ -227,25 +243,37 @@ export default function RssFeedItem({ item, className, compact = false }: { item
// On mobile, track when selection last changed // On mobile, track when selection last changed
lastSelectionChangeRef.current = Date.now() lastSelectionChangeRef.current = Date.now()
// Clear any pending drawer shows
if (selectionStableTimeoutRef.current) {
clearTimeout(selectionStableTimeoutRef.current)
}
setShowHighlightDrawer(false)
// If we're actively selecting (touch events), don't process yet // If we're actively selecting (touch events), don't process yet
if (isSelectingRef.current) { if (isSelectingRef.current) {
return return
} }
// Wait for selection to be stable (no changes for 1500ms) before showing drawer // Check if there's actually a selection
const selection = window.getSelection()
const hasSelection = selection && !selection.isCollapsed && selection.rangeCount > 0 && selection.toString().trim().length > 0
// If no selection, clear drawer immediately
if (!hasSelection) {
if (selectionStableTimeoutRef.current) {
clearTimeout(selectionStableTimeoutRef.current)
}
setShowHighlightDrawer(false)
return
}
// Clear any pending drawer shows and reset the timeout
if (selectionStableTimeoutRef.current) {
clearTimeout(selectionStableTimeoutRef.current)
}
// Wait for selection to be stable (no changes for 1600ms) before showing drawer
selectionStableTimeoutRef.current = setTimeout(() => { selectionStableTimeoutRef.current = setTimeout(() => {
const timeSinceLastChange = Date.now() - lastSelectionChangeRef.current const timeSinceLastChange = Date.now() - lastSelectionChangeRef.current
// Only show if selection hasn't changed in the last 1500ms (3x original delay) // Only show if selection hasn't changed in the last 1600ms and we're not actively selecting
if (timeSinceLastChange >= 2000 && !isSelectingRef.current) { if (timeSinceLastChange >= 1600 && !isSelectingRef.current) {
handleSelection(true) handleSelection(true)
} }
}, 1500) }, 1600)
} else { } else {
// Desktop: shorter delay // Desktop: shorter delay
if (selectionTimeoutRef.current) { if (selectionTimeoutRef.current) {
@ -743,3 +771,4 @@ export default function RssFeedItem({ item, className, compact = false }: { item
} }

Loading…
Cancel
Save