mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 13:31:08 -05:00
b1c369c1bb
- Implemented park card component with image, status badge, favorite button, and quick stats overlay. - Developed ride card component featuring thrill level badge, status badge, favorite button, and detailed stats. - Created advanced search page with filters for parks and rides, including location, type, status, and thrill level. - Added dynamic quick search functionality with results display. - Enhanced user experience with JavaScript for filter toggling, range slider updates, and view switching. - Included custom CSS for improved styling of checkboxes and search results layout.
207 lines
6.2 KiB
Markdown
207 lines
6.2 KiB
Markdown
# ThrillWiki Frontend JavaScript Refactoring Plan
|
|
|
|
**Date**: 2025-01-15
|
|
**Status**: In Progress
|
|
**Priority**: CRITICAL
|
|
|
|
## Overview
|
|
|
|
Refactoring ThrillWiki frontend to comply with the core rule: "🚨 **ABSOLUTELY NO Custom JS** - HTMX + AlpineJS ONLY". The audit identified 20 custom JavaScript files that need to be removed and their functionality migrated to HTMX endpoints and AlpineJS components in templates.
|
|
|
|
## Current Violations
|
|
|
|
### Custom JavaScript Files to Remove (19 files):
|
|
1. `static/js/thrillwiki-enhanced.js` (600+ lines) - ❌ REMOVE
|
|
2. `static/js/alpine-components.js` (500+ lines) - ⚠️ REFACTOR (contains valid AlpineJS components)
|
|
3. `static/js/alerts.js` - ❌ REMOVE
|
|
4. `static/js/dark-mode-maps.js` - ❌ REMOVE
|
|
5. `static/js/geolocation.js` - ❌ REMOVE
|
|
6. `static/js/htmx-maps.js` - ❌ REMOVE
|
|
7. `static/js/location-autocomplete.js` - ❌ REMOVE
|
|
8. `static/js/location-search.js` - ❌ REMOVE
|
|
9. `static/js/main.js` - ❌ REMOVE
|
|
10. `static/js/map-filters.js` - ❌ REMOVE
|
|
11. `static/js/map-integration.js` - ❌ REMOVE
|
|
12. `static/js/map-markers.js` - ❌ REMOVE
|
|
13. `static/js/maps.js` - ❌ REMOVE
|
|
14. `static/js/mobile-touch.js` - ❌ REMOVE
|
|
15. `static/js/park-map.js` - ❌ REMOVE
|
|
16. `static/js/photo-gallery.js` - ❌ REMOVE
|
|
17. `static/js/roadtrip.js` - ❌ REMOVE
|
|
18. `static/js/search.js` - ❌ REMOVE
|
|
19. `static/js/theme.js` - ❌ REMOVE
|
|
|
|
### Files to Keep:
|
|
- `static/js/alpine.min.js` - ✅ KEEP (AlpineJS library)
|
|
|
|
## Functionality Migration Strategy
|
|
|
|
### 1. AlpineJS Components (from alpine-components.js)
|
|
**Action**: Move to inline `<script>` tags in templates or create Cotton components
|
|
|
|
**Components to Migrate**:
|
|
- `themeToggle` → Move to header template
|
|
- `searchComponent` → Move to search templates
|
|
- `browseMenu` → Move to header template
|
|
- `mobileMenu` → Move to header template
|
|
- `userMenu` → Move to header template
|
|
- `modal` → Create Cotton modal component
|
|
- `dropdown` → Create Cotton dropdown component
|
|
- `tabs` → Create Cotton tabs component
|
|
- `accordion` → Create Cotton accordion component
|
|
- `form` → Move to form templates
|
|
- `pagination` → Create Cotton pagination component
|
|
- `authModal` → Move to auth modal template
|
|
- Global stores (`app`, `toast`) → Move to base template
|
|
|
|
### 2. Search Functionality (from thrillwiki-enhanced.js, search.js)
|
|
**Action**: Replace with HTMX endpoints
|
|
|
|
**Current Custom JS**:
|
|
- Quick search with debouncing
|
|
- Search result parsing
|
|
- Search suggestions
|
|
|
|
**HTMX Solution**:
|
|
- Use `hx-get` with `hx-trigger="keyup changed delay:300ms"`
|
|
- Server returns HTML fragments
|
|
- Use `hx-target` and `hx-swap` for results
|
|
|
|
### 3. Card Interactions (from thrillwiki-enhanced.js)
|
|
**Action**: Replace with CSS hover effects and AlpineJS
|
|
|
|
**Current Custom JS**:
|
|
- Card hover animations
|
|
- Favorite button toggles
|
|
- Card image scaling
|
|
|
|
**Solution**:
|
|
- CSS transitions for hover effects
|
|
- AlpineJS for favorite toggles
|
|
- HTMX for favorite API calls
|
|
|
|
### 4. Notifications (from thrillwiki-enhanced.js)
|
|
**Action**: Use AlpineJS store and Cotton components
|
|
|
|
**Current Custom JS**:
|
|
- Custom notification system
|
|
- Auto-hide functionality
|
|
- Animation handling
|
|
|
|
**Solution**:
|
|
- AlpineJS `toast` store (already exists in alpine-components.js)
|
|
- Cotton toast component
|
|
- CSS animations
|
|
|
|
### 5. Form Handling (from thrillwiki-enhanced.js)
|
|
**Action**: Use HTMX form submissions
|
|
|
|
**Current Custom JS**:
|
|
- Form validation
|
|
- Error display
|
|
- Loading states
|
|
|
|
**Solution**:
|
|
- Server-side validation
|
|
- HTMX form submissions
|
|
- AlpineJS for client-side enhancements
|
|
|
|
### 6. Scroll Effects (from thrillwiki-enhanced.js)
|
|
**Action**: Use CSS and minimal AlpineJS
|
|
|
|
**Current Custom JS**:
|
|
- Parallax effects
|
|
- Reveal animations
|
|
- Scroll to top button
|
|
|
|
**Solution**:
|
|
- CSS scroll-driven animations
|
|
- Intersection Observer in AlpineJS
|
|
- CSS-only scroll to top
|
|
|
|
### 7. Theme Handling (from theme.js)
|
|
**Action**: Move to AlpineJS component in base template
|
|
|
|
**Current Custom JS**:
|
|
- Theme switching
|
|
- System theme detection
|
|
- Local storage management
|
|
|
|
**Solution**:
|
|
- AlpineJS `themeToggle` component (already exists)
|
|
- Move to base template
|
|
|
|
## Implementation Steps
|
|
|
|
### Phase 1: Preserve Critical Functionality
|
|
1. ✅ Extract AlpineJS components from alpine-components.js
|
|
2. ✅ Move theme toggle to base template
|
|
3. ✅ Move search components to search templates
|
|
4. ✅ Move auth modal components to auth templates
|
|
5. ✅ Create Cotton components for reusable UI elements
|
|
|
|
### Phase 2: Replace Custom JavaScript
|
|
1. ✅ Remove custom JavaScript files
|
|
2. ✅ Update base.html to remove script references
|
|
3. ✅ Test functionality after removal
|
|
|
|
### Phase 3: HTMX Integration
|
|
1. ✅ Replace search functionality with HTMX endpoints
|
|
2. ✅ Replace form submissions with HTMX
|
|
3. ✅ Replace favorite toggles with HTMX
|
|
|
|
### Phase 4: CSS Enhancements
|
|
1. ✅ Replace JavaScript animations with CSS
|
|
2. ✅ Add CSS hover effects for cards
|
|
3. ✅ Implement CSS scroll effects
|
|
|
|
### Phase 5: Testing & Validation
|
|
1. ✅ Test all functionality works without custom JS
|
|
2. ✅ Verify HTMX interactions
|
|
3. ✅ Validate AlpineJS components
|
|
4. ✅ Performance testing
|
|
|
|
## Risk Mitigation
|
|
|
|
### Backup Strategy
|
|
- Keep removed JS files in a backup directory temporarily
|
|
- Test each component migration individually
|
|
- Rollback plan if critical functionality breaks
|
|
|
|
### Testing Checklist
|
|
- [ ] Search functionality works
|
|
- [ ] Authentication modal works
|
|
- [ ] Theme switching works
|
|
- [ ] Card interactions work
|
|
- [ ] Form submissions work
|
|
- [ ] Mobile menu works
|
|
- [ ] Notifications work
|
|
- [ ] Pagination works
|
|
|
|
## Expected Outcomes
|
|
|
|
### Compliance
|
|
- ✅ Zero custom JavaScript files
|
|
- ✅ HTMX + AlpineJS only architecture
|
|
- ✅ Progressive enhancement maintained
|
|
|
|
### Performance
|
|
- ⬆️ Reduced JavaScript bundle size
|
|
- ⬆️ Faster page loads
|
|
- ⬆️ Better caching
|
|
|
|
### Maintainability
|
|
- ⬆️ Simpler architecture
|
|
- ⬆️ Better separation of concerns
|
|
- ⬆️ Easier debugging
|
|
|
|
## Notes
|
|
|
|
- The `alpine-components.js` file contains valid AlpineJS components that should be preserved
|
|
- Theme switching is critical functionality that must be maintained
|
|
- Search functionality is core to the user experience
|
|
- Authentication modal is essential for user management
|
|
- All functionality must work without JavaScript (progressive enhancement)
|
|
|
|
**Last Updated**: 2025-01-15
|