Expanded UI

js/ui-enhancements.js

@@ -0,0 +1,195 @@
+/**
+ * UI Enhancements for the Swiper App
+ * Adds improved visual feedback and animations
+ */
+
+// Add swipe decision indicators
+function addSwipeDecisionIndicators() {
+  const swipeContainer = document.querySelector('.swipe-container');
+  
+  // Create decision indicators for each direction
+  const directions = ['left', 'right', 'up', 'down'];
+  const icons = ['fa-trash', 'fa-folder-plus', 'fa-star', 'fa-clock'];
+  
+  directions.forEach((direction, index) => {
+    const indicator = document.createElement('div');
+    indicator.className = `swipe-decision decision-${direction}`;
+    indicator.innerHTML = `<i class="fa-solid ${icons[index]} fa-bounce"></i>`;
+    swipeContainer.appendChild(indicator);
+  });
+}
+
+// Enhance loading indicator
+function enhanceLoadingIndicator() {
+  const loadingIndicator = document.querySelector('.loading-indicator');
+  if (loadingIndicator) {
+    loadingIndicator.innerHTML = `
+      <div class="loading-spinner"></div>
+      <div>Loading next image...</div>
+    `;
+  }
+}
+
+// Add hover effects to direction arrows
+function enhanceDirectionArrows() {
+  const arrows = document.querySelectorAll('.direction-arrow');
+  
+  arrows.forEach(arrow => {
+    arrow.addEventListener('mouseenter', function() {
+      this.style.transform = this.classList.contains('arrow-left') || this.classList.contains('arrow-right')
+        ? `translateY(-50%) scale(1.2)`
+        : `translateX(-50%) scale(1.2)`;
+      this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)';
+    });
+    
+    arrow.addEventListener('mouseleave', function() {
+      this.style.transform = this.classList.contains('arrow-left') || this.classList.contains('arrow-right')
+        ? `translateY(-50%) scale(1)`
+        : `translateX(-50%) scale(1)`;
+      this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)';
+    });
+  });
+}
+
+// Show swipe decision indicator
+function showSwipeDecision(direction) {
+  const indicator = document.querySelector(`.decision-${direction}`);
+  if (indicator) {
+    indicator.classList.add('visible');
+    
+    setTimeout(() => {
+      indicator.classList.remove('visible');
+    }, 800);
+  }
+}
+
+// Enhance the performSwipe function
+function enhancePerformSwipe() {
+  // Store the original performSwipe function
+  const originalPerformSwipe = window.performSwipe;
+  
+  if (typeof originalPerformSwipe === 'function') {
+    // Override with enhanced version
+    window.performSwipe = function(direction) {
+      // Show the decision indicator
+      showSwipeDecision(direction);
+      
+      // Call the original function
+      return originalPerformSwipe(direction);
+    };
+  }
+}
+
+// Add card tilt effect based on mouse position
+function addCardTiltEffect() {
+  const card = document.getElementById('current-card');
+  const container = document.querySelector('.swipe-container');
+  
+  if (!card || !container) return;
+  
+  container.addEventListener('mousemove', e => {
+    if (window.innerWidth < 992) return; // Skip on mobile
+    
+    // Only apply when not dragging
+    if (window.state && window.state.isDragging) return;
+    
+    const rect = container.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    
+    // Calculate rotation based on mouse position
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    
+    const rotateY = ((x - centerX) / centerX) * 5; // Max 5 degrees
+    const rotateX = ((centerY - y) / centerY) * 5; // Max 5 degrees
+    
+    // Apply the transform
+    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+  });
+  
+  container.addEventListener('mouseleave', () => {
+    // Reset transform when mouse leaves
+    card.style.transform = '';
+  });
+}
+
+// Add pulse effect to action buttons
+function addButtonPulseEffect() {
+  const buttons = document.querySelectorAll('.action-btn');
+  
+  buttons.forEach(button => {
+    button.addEventListener('mouseenter', function() {
+      this.classList.add('pulse');
+    });
+    
+    button.addEventListener('mouseleave', function() {
+      this.classList.remove('pulse');
+    });
+  });
+  
+  // Add the pulse animation to CSS
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.05); }
+      100% { transform: scale(1); }
+    }
+    
+    .action-btn.pulse {
+      animation: pulse 1s infinite;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// Enhance the history page items
+function enhanceHistoryItems() {
+  if (!window.location.pathname.includes('history')) return;
+  
+  // Add hover effect to selection items
+  const items = document.querySelectorAll('.selection-item');
+  
+  items.forEach(item => {
+    // Add image zoom effect on hover
+    const img = item.querySelector('img');
+    if (img) {
+      img.style.transition = 'transform 0.3s ease';
+      
+      item.addEventListener('mouseenter', () => {
+        img.style.transform = 'scale(1.1)';
+      });
+      
+      item.addEventListener('mouseleave', () => {
+        img.style.transform = '';
+      });
+    }
+  });
+}
+
+// Initialize all UI enhancements
+function initUIEnhancements() {
+  // Add a small delay to ensure DOM is fully loaded
+  setTimeout(() => {
+    addSwipeDecisionIndicators();
+    enhanceLoadingIndicator();
+    enhanceDirectionArrows();
+    enhancePerformSwipe();
+    addCardTiltEffect();
+    addButtonPulseEffect();
+    enhanceHistoryItems();
+    
+    console.log('UI enhancements initialized');
+  }, 500);
+}
+
+// Run when DOM is loaded
+document.addEventListener('DOMContentLoaded', initUIEnhancements);
+
+// Export functions for potential use in other modules
+export {
+  showSwipeDecision,
+  addSwipeDecisionIndicators,
+  enhanceLoadingIndicator
+};