aodhan/swiper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance image swipe app mobile experience

Browse Source 
Major improvements:
- Added responsive mobile view with optimized touch interactions
- Implemented image caching to preload up to 2 images for faster transitions
- Made images enter consistently from left side regardless of swipe direction
- Enhanced swipe animations with reduced tilt and better fade-out effects
- Reduced swipe sensitivity on mobile for better tap/swipe distinction
- Removed headings and reduced history button height for more screen space
- Added progressive fade effect during manual swipes
- Sped up slide-in animations for snappier experience
- Fixed multiple edge cases for better overall stability
This commit is contained in:
Aodhan
2025-05-29 01:31:26 +01:00
parent ad0e64e000
commit c09461f58f
5 changed files with 1275 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
script.js
View File

@@ -5,6 +5,105 @@ document.addEventListener('DOMContentLoaded', function() {
const rightHint = document.querySelector('.right-hint');
const upHint = document.querySelector('.up-hint');
const downHint = document.querySelector('.down-hint');
const swipeContainer = document.querySelector('.swipe-container');
console.log('DOM Content Loaded - initializing app');
// Image cache for preloading
const imageCache = {
images: [], // Will store objects with {path, data, element}
maxSize: 2, // Cache up to 2 images
// Add an image to the cache
add: function(imageData) {
// Create a new Image element for preloading
const img = new Image();
img.src = imageData.path;
// Add to the cache
this.images.push({
path: imageData.path,
data: imageData,
element: img
});
console.log(`Added image to cache: ${imageData.path}`);
// Trim cache if it exceeds max size
if (this.images.length > this.maxSize) {
this.images.shift(); // Remove oldest image
}
},
// Get an image from cache if available
get: function(path) {
const cachedImage = this.images.find(img => img.path === path);
if (cachedImage) {
console.log(`Cache hit for: ${path}`);
// Remove this image from the cache since we're using it
this.images = this.images.filter(img => img.path !== path);
return cachedImage;
}
console.log(`Cache miss for: ${path}`);
return null;
}
};
// Detect if we're on a mobile device
const isMobile = window.matchMedia("(max-width: 768px)").matches;
console.log('Mobile view detection:', isMobile ? 'mobile' : 'desktop');
// Apply mobile-specific behaviors
if (isMobile) {
console.log('Applying mobile-specific behaviors');
// Show swipe hints briefly on page load to educate users
setTimeout(() => {
showAllHints();
setTimeout(hideAllHints, 3000);
}, 1000);
}
// Important: Load the first image regardless of viewport size
console.log('Triggering initial image load');
// Wait a short moment to ensure all initialization is complete
setTimeout(() => {
loadNewImage();
}, 300);
// Adjust swipe container height to fill available space
function adjustSwipeContainerHeight() {
const viewportHeight = window.innerHeight;
const containerTop = swipeContainer.getBoundingClientRect().top;
const statusAreaHeight = document.querySelector('.status-area').offsetHeight;
const actionButtonsHeight = document.querySelector('.action-buttons') ?
document.querySelector('.action-buttons').offsetHeight : 0;
const footerSpace = 20; // Extra space for padding/margin
// Calculate available height
const availableHeight = viewportHeight - containerTop - statusAreaHeight -
actionButtonsHeight - footerSpace;
// Set minimum height to ensure it's usable
const minHeight = isMobile ? '60vh' : '400px';
swipeContainer.style.minHeight = `max(${availableHeight}px, ${minHeight})`;
console.log('Adjusted container height: ', swipeContainer.style.minHeight);
}
// Run on load and on resize
adjustSwipeContainerHeight();
window.addEventListener('resize', adjustSwipeContainerHeight);
// Make sure the first image loads after layout calculations are done
window.addEventListener('load', function() {
console.log('Window fully loaded - requesting first image');
loadNewImage();
});
// Add the animation class to the initial card
setTimeout(() => {
card.classList.add('new-card');
}, 100); // Small delay to ensure DOM is ready
// Modal elements
const modal = document.getElementById('fullscreen-modal');
@@ -29,12 +128,13 @@ document.addEventListener('DOMContentLoaded', function() {
// Touch variables
let startX, startY, moveX, moveY;
let isDragging = false;
const swipeThreshold = 100; // Minimum distance for a swipe to be registered
const swipeThreshold = 150; // Increased minimum distance for a swipe to be registered
let hasMoved = false; // Track if significant movement occurred
// Touch event handlers
card.addEventListener('touchstart', handleTouchStart, false);
card.addEventListener('touchmove', handleTouchMove, false);
card.addEventListener('touchend', handleTouchEnd, false);
// Touch event handlers with passive: false for better mobile performance
card.addEventListener('touchstart', handleTouchStart, { passive: false });
card.addEventListener('touchmove', handleTouchMove, { passive: false });
card.addEventListener('touchend', handleTouchEnd, { passive: false });
// Mouse event handlers (for desktop testing)
card.addEventListener('mousedown', handleMouseDown, false);
@@ -64,26 +164,92 @@ document.addEventListener('DOMContentLoaded', function() {
});
function handleTouchStart(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
// Store the initial position and set the dragging flag
const touch = e.touches[0];
startX = touch.clientX;
startY = touch.clientY;
isDragging = true;
hasMoved = false; // Reset movement tracking
card.classList.add('swiping');
// Store touch start time to differentiate between swipe and tap
// Record touch start time to distinguish between tap and swipe
touchStartTime = new Date().getTime();
// Prevent default to avoid scrolling while swiping
e.preventDefault();
// Check if we're on mobile
const isMobile = window.matchMedia("(max-width: 768px)").matches;
// Show swipe hints on mobile
if (isMobile) {
showAllHints();
}
}
function handleTouchMove(e) {
if (!isDragging) return;
moveX = e.touches[0].clientX - startX;
moveY = e.touches[0].clientY - startY;
const touch = e.touches[0];
moveX = touch.clientX - startX;
moveY = touch.clientY - startY;
// Apply transform to the card
card.style.transform = `translate(${moveX}px, ${moveY}px) rotate(${moveX * 0.1}deg)`;
// Check if we've moved significantly
const absX = Math.abs(moveX);
const absY = Math.abs(moveY);
if (Math.max(absX, absY) > 20) {
hasMoved = true;
}
// Show appropriate hint based on direction
// Calculate a fade factor based on distance (further = more transparent)
const maxDistance = Math.max(window.innerWidth, window.innerHeight) * 0.4;
const distance = Math.sqrt(moveX * moveX + moveY * moveY);
const fadeAmount = Math.min(0.7, distance / maxDistance);
// Apply transform with reduced rotation and opacity based on swipe distance
card.style.transform = `translate(${moveX}px, ${moveY}px) rotate(${moveX * 0.02}deg)`;
card.style.opacity = `${1 - fadeAmount}`;
// Show appropriate hint based on swipe direction
updateHints(moveX, moveY);
// Add visual feedback based on swipe direction
updateVisualFeedback(moveX, moveY);
// Prevent default to avoid scrolling while swiping
e.preventDefault();
}
// Add visual feedback based on swipe direction
function updateVisualFeedback(moveX, moveY) {
// Reset all borders
card.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.2)';
const absX = Math.abs(moveX);
const absY = Math.abs(moveY);
// Only show feedback if we've moved enough
if (Math.max(absX, absY) < swipeThreshold / 2) return;
if (absX > absY) {
// Horizontal swipe
if (moveX > 0) {
// Right swipe - green glow
card.style.boxShadow = '0 0 20px 5px rgba(46, 213, 115, 0.7)';
} else {
// Left swipe - red glow
card.style.boxShadow = '0 0 20px 5px rgba(255, 71, 87, 0.7)';
}
} else {
// Vertical swipe
if (moveY > 0) {
// Down swipe - yellow glow
card.style.boxShadow = '0 0 20px 5px rgba(255, 165, 2, 0.7)';
} else {
// Up swipe - blue glow
card.style.boxShadow = '0 0 20px 5px rgba(30, 144, 255, 0.7)';
}
}
}
function handleTouchEnd(e) {
@@ -96,15 +262,16 @@ document.addEventListener('DOMContentLoaded', function() {
// Determine if this was a tap (short touch with minimal movement)
const absX = Math.abs(moveX || 0);
const absY = Math.abs(moveY || 0);
const isTap = touchDuration < 300 && Math.max(absX, absY) < 10;
// More generous tap detection - increased movement threshold to 30px
const isTap = touchDuration < 300 && Math.max(absX, absY) < 30;
isDragging = false;
if (isTap) {
// This was a tap, not a swipe
if (isTap || !hasMoved) {
// This was a tap or minimal movement, not a swipe
resetCardPosition();
handleCardClick(e);
} else if (Math.max(absX, absY) > swipeThreshold) {
} else if (Math.max(absX, absY) > swipeThreshold && touchDuration > 100) {
// This was a swipe
if (absX > absY) {
// Horizontal swipe
@@ -222,15 +389,30 @@ document.addEventListener('DOMContentLoaded', function() {
function resetCardPosition() {
card.classList.remove('swiping');
card.style.transform = '';
card.style.opacity = '1';
}
function performSwipe(direction) {
// Add the appropriate swipe class
card.classList.add(`swipe-${direction}`);
// Start fading out immediately
card.style.opacity = '0.8';
// Update the last action text
lastActionText.textContent = `Last action: Swiped ${direction}`;
// Apply a more dramatic exit animation based on direction
if (direction === 'left') {
card.style.transform = 'translateX(-350%) rotate(-15deg)';
} else if (direction === 'right') {
card.style.transform = 'translateX(350%) rotate(15deg)';
} else if (direction === 'up') {
card.style.transform = 'translateY(-350%) rotate(5deg)';
} else if (direction === 'down') {
card.style.transform = 'translateY(350%) rotate(-5deg)';
}
// Record the selection in the database if we have a current image
if (currentImageInfo) {
recordSelection(currentImageInfo, direction);
@@ -242,9 +424,13 @@ document.addEventListener('DOMContentLoaded', function() {
card.classList.remove('swiping');
card.style.transform = '';
// Position the card offscreen to the left (for consistent entry animation)
card.style.transform = 'translateX(-100%)';
card.style.opacity = '0';
// Load a new random image from our server
loadNewImage();
}, 300);
}, 200); // Reduced from 300ms to 200ms for faster transitions
}
// Function to record a selection in the database
@@ -278,47 +464,152 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// Function to prefetch images and store them in cache
function prefetchImages(count = 1) {
for (let i = 0; i < count; i++) {
// Use a small delay between requests to avoid overwhelming the server
setTimeout(() => {
console.log(`Prefetching image ${i+1} of ${count}`);
fetch('/random-image?t=' + new Date().getTime())
.then(response => {
if (!response.ok) throw new Error('Failed to fetch image for prefetching');
return response.json();
})
.then(data => {
// Add the fetched image to our cache
imageCache.add(data);
})
.catch(error => {
console.error('Error prefetching image:', error);
});
}, i * 200); // Stagger requests by 200ms
}
}
// Function to load a new image from our local server
function loadNewImage() {
console.log('loadNewImage called');
// Show loading state
const img = card.querySelector('img');
img.style.opacity = '0.5';
img.style.opacity = '0';
// Fetch a random image from our API
fetch('/random-image')
// Remove all animation classes to reset
card.classList.remove('new-card');
card.classList.remove('new-card-mobile');
// Ensure card is positioned off-screen to the left to start
// This guarantees entry from the left regardless of previous swipe direction
card.style.transform = 'translateX(-100%)';
card.style.transition = 'none'; // Disable transition when setting initial position
// Check if mobile view is active
const currentlyMobile = window.matchMedia("(max-width: 768px)").matches;
console.log('Current view:', currentlyMobile ? 'mobile' : 'desktop');
// Try to get an image from cache first
if (imageCache.images.length > 0) {
console.log('Using cached image');
const cachedImage = imageCache.images.shift();
displayImage(cachedImage.data);
// Prefetch a new image to replace the one we just used
prefetchImages(1);
return;
}
console.log('No cached images available, fetching from server...');
// Fetch a random image from our API with a cache-busting parameter
fetch('/random-image?t=' + new Date().getTime())
.then(response => {
console.log('Fetch response received:', response.status);
if (!response.ok) {
throw new Error('Failed to fetch image');
throw new Error('Failed to fetch image: ' + response.status);
}
return response.json();
})
.then(data => {
// Store current image info
currentImageInfo = data;
console.log('Image data received:', data);
displayImage(data);
// Extract filename from path
const pathParts = data.path.split('/');
const filename = pathParts[pathParts.length - 1];
currentImageInfo.filename = filename;
currentImageInfo.creation_date = data.creation_date || 'Unknown';
// Update the image source
img.onload = function() {
img.style.opacity = '1';
};
img.src = data.path;
// Update status with resolution info
const statusElement = document.querySelector('.status-area p:first-child');
statusElement.textContent = `Current resolution: ${data.resolution}`;
// After displaying the first image, prefetch more for the cache
if (imageCache.images.length < imageCache.maxSize) {
prefetchImages(imageCache.maxSize - imageCache.images.length);
}
})
.catch(error => {
console.error('Error loading image:', error);
img.style.opacity = '1';
img.src = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22200%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20alignment-baseline%3D%22middle%22%20fill%3D%22%23999%22%3EImage%20not%20found%3C%2Ftext%3E%3C%2Fsvg%3E';
console.error('Error fetching random image:', error);
// Handle the error (e.g., display an error message)
const statusElement = document.querySelector('.status-area p:first-child');
statusElement.textContent = 'Error: Failed to fetch image';
// Try again after a delay
setTimeout(() => {
console.log('Retrying image load after error...');
loadNewImage();
}, 3000);
});
}
// Function to display an image (from cache or fresh fetch)
function displayImage(data) {
// Store current image info
currentImageInfo = data;
// Extract filename from path
const pathParts = data.path.split('/');
const filename = pathParts[pathParts.length - 1];
currentImageInfo.filename = filename;
currentImageInfo.creation_date = data.creation_date || 'Unknown';
// Check if mobile view is active
const currentlyMobile = window.matchMedia("(max-width: 768px)").matches;
// Get the image element
const img = card.querySelector('img');
// Set the image source
img.src = data.path;
// Set up the onload handler
img.onload = function() {
console.log('Image loaded successfully');
// Force a reflow to ensure animation works
void card.offsetWidth;
// Re-enable transitions for the animation with faster timing
card.style.transition = 'transform 0.25s ease-out, opacity 0.25s ease-out';
// Make the image visible
img.style.opacity = '1';
// Different animation approach for mobile vs desktop
if (currentlyMobile) {
// Simple fade-in for mobile - more reliable
card.style.transform = 'translateX(0)';
card.classList.add('new-card-mobile');
} else {
// Slide-in animation for desktop
card.classList.add('new-card');
}
};
// Add error handling for image loading
img.onerror = function() {
console.error('Failed to load image:', data.path);
img.src = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Ctext%20x%3D%22200%22%20y%3D%22200%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20alignment-baseline%3D%22middle%22%20fill%3D%22%23999%22%3EError Loading Image%3C%2Ftext%3E%3C%2Fsvg%3E';
img.style.opacity = '1';
// Try loading a new image after a delay
setTimeout(loadNewImage, 2000);
};
// Update status with resolution info
const statusElement = document.querySelector('.status-area p:first-child');
statusElement.textContent = `Current resolution: ${data.resolution}`;
}
// Function to handle card click for viewing full-resolution image
function handleCardClick(e) {
// Only process click if we have image info and we're not in the middle of a swipe