pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 03:51:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor moderation dashboard and advanced search components to utilize Alpine.js for improved state management. Enhanced event handling and user experience by replacing legacy JavaScript functions with Alpine.js reactive methods. Updated auth modal comparison and button comparison tests to leverage Alpine.js for better interactivity and functionality.

Browse Source
This commit is contained in:
pacnpal
2025-09-26 14:48:13 -04:00
parent e53414d795
commit f7b1296263
4 changed files with 469 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
templates/moderation/dashboard.html
View File

@@ -169,7 +169,7 @@
There was a problem loading the content. Please try again.
</p>
<button class="px-4 py-2 font-medium text-white transition-all duration-200 bg-red-600 rounded-lg hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600"
onclick="window.location.reload()">
@click="$dispatch('retry-load')">
<i class="mr-2 fas fa-sync-alt"></i>
Retry
</button>
@@ -180,79 +180,91 @@
{% endblock %}
{% block extra_js %}
<!-- AlpineJS Moderation Dashboard Component (HTMX + AlpineJS Only) -->
<div x-data="{
<script>
document.addEventListener('alpine:init', () => {
// Moderation Dashboard Component
Alpine.data('moderationDashboard', () => ({
showLoading: false,
errorMessage: null,
showError(message) {
this.errorMessage = message;
}
}"
@htmx:before-request="showLoading = true"
@htmx:after-request="showLoading = false"
@htmx:response-error="showError('Failed to load content')"
style="display: none;">
<!-- Dashboard functionality handled by AlpineJS + HTMX -->
</div>
<script>
// HTMX Configuration
document.body.addEventListener('htmx:configRequest', function(evt) {
init() {
// HTMX Configuration
this.setupHTMXConfig();
this.setupEventListeners();
this.setupSearchDebouncing();
this.setupInfiniteScroll();
this.setupKeyboardNavigation();
},
setupHTMXConfig() {
document.body.addEventListener('htmx:configRequest', (evt) => {
evt.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
});
// Loading and Error State Management
const dashboard = {
content: document.getElementById('dashboard-content'),
skeleton: document.getElementById('loading-skeleton'),
errorState: document.getElementById('error-state'),
errorMessage: document.getElementById('error-message'),
showLoading() {
this.content.setAttribute('aria-busy', 'true');
this.content.style.opacity = '0';
this.errorState.classList.add('hidden');
});
},
hideLoading() {
this.content.setAttribute('aria-busy', 'false');
this.content.style.opacity = '1';
setupEventListeners() {
// Enhanced HTMX Event Handlers
document.body.addEventListener('htmx:beforeRequest', (evt) => {
if (evt.detail.target.id === 'dashboard-content') {
this.showLoadingState();
}
});
document.body.addEventListener('htmx:afterOnLoad', (evt) => {
if (evt.detail.target.id === 'dashboard-content') {
this.hideLoadingState();
this.resetFocus(evt.detail.target);
}
});
document.body.addEventListener('htmx:responseError', (evt) => {
if (evt.detail.target.id === 'dashboard-content') {
this.showErrorState(evt.detail.error);
}
});
},
showError(message) {
this.errorState.classList.remove('hidden');
this.errorMessage.textContent = message || 'There was a problem loading the content. Please try again.';
// Announce error to screen readers
this.errorMessage.setAttribute('role', 'alert');
showLoadingState() {
const content = this.$el.querySelector('#dashboard-content');
if (content) {
content.setAttribute('aria-busy', 'true');
content.style.opacity = '0';
}
};
// Enhanced HTMX Event Handlers
document.body.addEventListener('htmx:beforeRequest', function(evt) {
if (evt.detail.target.id === 'dashboard-content') {
dashboard.showLoading();
const errorState = this.$el.querySelector('#error-state');
if (errorState) {
errorState.classList.add('hidden');
}
});
},
document.body.addEventListener('htmx:afterOnLoad', function(evt) {
if (evt.detail.target.id === 'dashboard-content') {
dashboard.hideLoading();
// Reset focus for accessibility
const firstFocusable = evt.detail.target.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
hideLoadingState() {
const content = this.$el.querySelector('#dashboard-content');
if (content) {
content.setAttribute('aria-busy', 'false');
content.style.opacity = '1';
}
},
showErrorState(message) {
const errorState = this.$el.querySelector('#error-state');
const errorMessage = this.$el.querySelector('#error-message');
if (errorState) {
errorState.classList.remove('hidden');
}
if (errorMessage) {
errorMessage.textContent = message || 'There was a problem loading the content. Please try again.';
errorMessage.setAttribute('role', 'alert');
}
},
resetFocus(target) {
const firstFocusable = target.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
if (firstFocusable) {
firstFocusable.focus();
}
}
});
},
document.body.addEventListener('htmx:responseError', function(evt) {
if (evt.detail.target.id === 'dashboard-content') {
dashboard.showError(evt.detail.error);
}
});
// Search Input Debouncing
function debounce(func, wait) {
debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
@@ -262,51 +274,62 @@ function debounce(func, wait) {
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
},
// Apply debouncing to search inputs
document.querySelectorAll('[data-search]').forEach(input => {
setupSearchDebouncing() {
const searchInputs = this.$el.querySelectorAll('[data-search]');
searchInputs.forEach(input => {
const originalSearch = () => {
htmx.trigger(input, 'input');
};
const debouncedSearch = debounce(originalSearch, 300);
const debouncedSearch = this.debounce(originalSearch, 300);
input.addEventListener('input', (e) => {
e.preventDefault();
debouncedSearch();
});
});
});
},
// Virtual Scrolling for Large Lists
const observerOptions = {
setupInfiniteScroll() {
const observerOptions = {
root: null,
rootMargin: '100px',
threshold: 0.1
};
};
const loadMoreContent = (entries, observer) => {
const loadMoreContent = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.classList.contains('loading')) {
entry.target.classList.add('loading');
htmx.trigger(entry.target, 'intersect');
}
});
};
};
const observer = new IntersectionObserver(loadMoreContent, observerOptions);
document.querySelectorAll('[data-infinite-scroll]').forEach(el => observer.observe(el));
const observer = new IntersectionObserver(loadMoreContent, observerOptions);
const infiniteScrollElements = this.$el.querySelectorAll('[data-infinite-scroll]');
infiniteScrollElements.forEach(el => observer.observe(el));
},
// Keyboard Navigation Enhancement
document.addEventListener('keydown', function(e) {
setupKeyboardNavigation() {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const openModals = document.querySelectorAll('[x-show="showNotes"]');
const openModals = this.$el.querySelectorAll('[x-show="showNotes"]');
openModals.forEach(modal => {
const alpineData = modal.__x.$data;
if (alpineData.showNotes) {
const alpineData = modal.__x?.$data;
if (alpineData && alpineData.showNotes) {
alpineData.showNotes = false;
}
});
}
});
},
retryLoad() {
window.location.reload();
}
}));
});
</script>
{% endblock %}

147
templates/search/advanced_search.html
View File

@@ -7,7 +7,7 @@
{% block content %}
<!-- Advanced Search Page -->
<div class="min-h-screen bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/30 dark:from-gray-950 dark:via-indigo-950/30 dark:to-purple-950/30">
<div class="min-h-screen bg-gradient-to-br from-white via-blue-50/30 to-indigo-50/30 dark:from-gray-950 dark:via-indigo-950/30 dark:to-purple-950/30" x-data="advancedSearch()">
<!-- Search Header -->
<section class="py-16 bg-gradient-to-r from-thrill-primary/10 via-purple-500/10 to-pink-500/10 backdrop-blur-sm">
@@ -238,7 +238,8 @@
<!-- Clear Filters -->
<button type="button"
id="clear-filters"
class="btn-ghost w-full">
class="btn-ghost w-full"
@click="clearFilters()">
<i class="fas fa-times mr-2"></i>
Clear All Filters
</button>
@@ -259,10 +260,10 @@
<!-- View Toggle -->
<div class="flex items-center space-x-2 bg-white dark:bg-neutral-800 rounded-lg p-1 border border-neutral-200 dark:border-neutral-700">
<button class="p-2 rounded-md bg-thrill-primary text-white" id="grid-view">
<button class="p-2 rounded-md bg-thrill-primary text-white" id="grid-view" @click="setViewMode('grid')">
<i class="fas fa-th-large"></i>
</button>
<button class="p-2 rounded-md text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700" id="list-view">
<button class="p-2 rounded-md text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700" id="list-view" @click="setViewMode('list')">
<i class="fas fa-list"></i>
</button>
</div>
@@ -299,22 +300,150 @@
</div>
<!-- AlpineJS Advanced Search Component (HTMX + AlpineJS Only) -->
<div x-data="{
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('advancedSearch', () => ({
searchType: 'parks',
viewMode: 'grid',
init() {
// Initialize range sliders
this.updateRangeValues();
this.setupRadioButtons();
this.setupCheckboxes();
},
toggleSearchType(type) {
this.searchType = type;
const parkFilters = this.$el.querySelector('#park-filters');
const rideFilters = this.$el.querySelector('#ride-filters');
if (type === 'parks') {
parkFilters?.classList.remove('hidden');
rideFilters?.classList.add('hidden');
} else {
parkFilters?.classList.add('hidden');
rideFilters?.classList.remove('hidden');
}
},
clearFilters() {
document.getElementById('advanced-search-form').reset();
const form = this.$el.querySelector('#advanced-search-form');
if (form) {
form.reset();
this.searchType = 'parks';
this.toggleSearchType('parks');
this.updateRangeValues();
this.setupRadioButtons();
this.setupCheckboxes();
}
},
setViewMode(mode) {
this.viewMode = mode;
const gridBtn = this.$el.querySelector('#grid-view');
const listBtn = this.$el.querySelector('#list-view');
const resultsContainer = this.$el.querySelector('#search-results');
if (mode === 'grid') {
gridBtn?.classList.add('bg-thrill-primary', 'text-white');
gridBtn?.classList.remove('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
listBtn?.classList.remove('bg-thrill-primary', 'text-white');
listBtn?.classList.add('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
resultsContainer?.classList.remove('list-view');
resultsContainer?.classList.add('grid-view');
} else {
listBtn?.classList.add('bg-thrill-primary', 'text-white');
listBtn?.classList.remove('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
gridBtn?.classList.remove('bg-thrill-primary', 'text-white');
gridBtn?.classList.add('text-neutral-600', 'dark:text-neutral-400', 'hover:bg-neutral-100', 'dark:hover:bg-neutral-700');
resultsContainer?.classList.remove('grid-view');
resultsContainer?.classList.add('list-view');
}
}" style="display: none;">
<!-- Advanced search functionality handled by AlpineJS + HTMX -->
</div>
},
updateRangeValues() {
const minRidesSlider = this.$el.querySelector('input[name="min_rides"]');
const minRidesValue = this.$el.querySelector('#min-rides-value');
const minHeightSlider = this.$el.querySelector('input[name="min_height"]');
const minHeightValue = this.$el.querySelector('#min-height-value');
const minSpeedSlider = this.$el.querySelector('input[name="min_speed"]');
const minSpeedValue = this.$el.querySelector('#min-speed-value');
if (minRidesSlider && minRidesValue) {
minRidesValue.textContent = minRidesSlider.value;
minRidesSlider.addEventListener('input', (e) => {
minRidesValue.textContent = e.target.value;
});
}
if (minHeightSlider && minHeightValue) {
minHeightValue.textContent = minHeightSlider.value + 'ft';
minHeightSlider.addEventListener('input', (e) => {
minHeightValue.textContent = e.target.value + 'ft';
});
}
if (minSpeedSlider && minSpeedValue) {
minSpeedValue.textContent = minSpeedSlider.value + 'mph';
minSpeedSlider.addEventListener('input', (e) => {
minSpeedValue.textContent = e.target.value + 'mph';
});
}
},
setupRadioButtons() {
const radioButtons = this.$el.querySelectorAll('input[type="radio"]');
radioButtons.forEach(radio => {
const indicator = radio.parentElement.querySelector('div');
const dot = indicator?.querySelector('div');
if (radio.checked && dot) {
dot.style.opacity = '1';
}
radio.addEventListener('change', () => {
// Reset all radio buttons in the same group
const groupName = radio.name;
const groupRadios = this.$el.querySelectorAll(`input[name="${groupName}"]`);
groupRadios.forEach(groupRadio => {
const groupIndicator = groupRadio.parentElement.querySelector('div');
const groupDot = groupIndicator?.querySelector('div');
if (groupDot) {
groupDot.style.opacity = groupRadio.checked ? '1' : '0';
}
});
if (radio.name === 'search_type') {
this.toggleSearchType(radio.value);
}
});
});
},
setupCheckboxes() {
const checkboxes = this.$el.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
const customCheckbox = checkbox.parentElement.querySelector('.checkbox-custom');
if (checkbox.checked && customCheckbox) {
customCheckbox.classList.add('checked');
}
checkbox.addEventListener('change', () => {
if (customCheckbox) {
if (checkbox.checked) {
customCheckbox.classList.add('checked');
} else {
customCheckbox.classList.remove('checked');
}
}
});
});
}
}));
});
</script>
<!-- Custom CSS for checkboxes and enhanced styling -->
<style>

78
templates/test_auth_modal_comparison.html
View File

@@ -93,7 +93,7 @@
.status-pending { background: #f59e0b; }
</style>
</head>
<body class="bg-gray-50 p-8">
<body class="bg-gray-50 p-8" x-data="authModalTestSuite()">
<div class="max-w-7xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Auth Modal Component Comparison Test</h1>
<p class="text-center text-gray-600 mb-8">Comparing original include method vs new cotton component for Auth Modal with full Alpine.js functionality</p>
@@ -119,7 +119,7 @@
<div class="modal-test-container">
<div class="modal-test-group" data-label="Original Include Version">
<button class="test-button" onclick="if(window.authModalOriginal) window.authModalOriginal.open = true">
<button class="test-button" @click="openOriginalModal()">
Open Original Auth Modal
</button>
<div class="feature-list">
@@ -136,7 +136,7 @@
</div>
<div class="modal-test-group" data-label="Cotton Component Version">
<button class="test-button" onclick="if(window.authModalCotton) window.authModalCotton.open = true">
<button class="test-button" @click="openCottonModal()">
Open Cotton Auth Modal
</button>
<div class="feature-list">
@@ -161,10 +161,10 @@
<div class="modal-test-container">
<div class="modal-test-group" data-label="Original Include Version">
<button class="test-button" onclick="openOriginalModalInMode('login')">
<button class="test-button" @click="openOriginalModalInMode('login')">
Open in Login Mode
</button>
<button class="test-button secondary" onclick="openOriginalModalInMode('register')">
<button class="test-button secondary" @click="openOriginalModalInMode('register')">
Open in Register Mode
</button>
<div class="feature-list">
@@ -181,10 +181,10 @@
</div>
<div class="modal-test-group" data-label="Cotton Component Version">
<button class="test-button" onclick="openCottonModalInMode('login')">
<button class="test-button" @click="openCottonModalInMode('login')">
Open in Login Mode
</button>
<button class="test-button secondary" onclick="openCottonModalInMode('register')">
<button class="test-button secondary" @click="openCottonModalInMode('register')">
Open in Register Mode
</button>
<div class="feature-list">
@@ -209,7 +209,7 @@
<div class="modal-test-container">
<div class="modal-test-group" data-label="Original Include Version">
<button class="test-button" onclick="testOriginalInteractivity()">
<button class="test-button" @click="testOriginalInteractivity()">
Test Original Interactions
</button>
<div class="feature-list">
@@ -226,7 +226,7 @@
</div>
<div class="modal-test-group" data-label="Cotton Component Version">
<button class="test-button" onclick="testCottonInteractivity()">
<button class="test-button" @click="testCottonInteractivity()">
Test Cotton Interactions
</button>
<div class="feature-list">
@@ -251,7 +251,7 @@
<div class="modal-test-container">
<div class="modal-test-group" data-label="Styling Verification">
<button class="test-button" onclick="compareModalStyling()">
<button class="test-button" @click="compareModalStyling()">
Compare Both Modals Side by Side
</button>
<div class="feature-list">
@@ -278,7 +278,7 @@
<div class="modal-test-container">
<div class="modal-test-group" data-label="Custom Configuration Test">
<button class="test-button" onclick="testCustomConfiguration()">
<button class="test-button" @click="testCustomConfiguration()">
Test Custom Cotton Config
</button>
<div class="feature-list">
@@ -439,35 +439,46 @@
}));
});
// Store references to both modal instances
document.addEventListener('DOMContentLoaded', function() {
// Auth Modal Test Suite Component
Alpine.data('authModalTestSuite', () => ({
init() {
// Wait for Alpine.js to initialize and modal instances to be created
setTimeout(() => {
// Both modals should now be available with their respective window keys
console.log('Auth Modal References:', {
original: window.authModalOriginal,
cotton: window.authModalCotton,
custom: window.authModalCustom
});
}, 500);
});
},
// Test functions
function openOriginalModalInMode(mode) {
openOriginalModal() {
if (window.authModalOriginal) {
window.authModalOriginal.open = true;
}
},
openCottonModal() {
if (window.authModalCotton) {
window.authModalCotton.open = true;
}
},
openOriginalModalInMode(mode) {
if (window.authModalOriginal) {
window.authModalOriginal.mode = mode;
window.authModalOriginal.open = true;
}
}
},
function openCottonModalInMode(mode) {
openCottonModalInMode(mode) {
if (window.authModalCotton) {
window.authModalCotton.mode = mode;
window.authModalCotton.open = true;
}
}
},
function testOriginalInteractivity() {
testOriginalInteractivity() {
if (window.authModalOriginal) {
window.authModalOriginal.open = true;
window.authModalOriginal.mode = 'login';
@@ -476,9 +487,9 @@
window.authModalOriginal.showPassword = true;
}, 500);
}
}
},
function testCottonInteractivity() {
testCottonInteractivity() {
if (window.authModalCotton) {
window.authModalCotton.open = true;
window.authModalCotton.mode = 'login';
@@ -487,25 +498,30 @@
window.authModalCotton.showPassword = true;
}, 500);
}
}
},
function compareModalStyling() {
compareModalStyling() {
if (window.authModalOriginal && window.authModalCotton) {
window.authModalOriginal.open = true;
setTimeout(() => {
window.authModalCotton.open = true;
}, 200);
}
}
},
function testCustomConfiguration() {
testCustomConfiguration() {
// Show the custom cotton modal
const customModal = document.getElementById('custom-cotton-modal');
const customModal = this.$el.querySelector('#custom-cotton-modal');
if (customModal) {
customModal.style.display = 'block';
// You would implement custom Alpine.js instance here
alert('Custom configuration test - check the modal titles and text changes');
}
// Dispatch custom event for configuration test
this.$dispatch('custom-config-test', {
message: 'Custom configuration test - check the modal titles and text changes'
});
}
}));
</script>
</body>
</html>

64
templates/test_button_comparison.html
View File

@@ -54,7 +54,7 @@
}
</style>
</head>
<body class="bg-gray-50 p-8">
<body class="bg-gray-50 p-8" x-data="componentTestSuite()">
<div class="max-w-6xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">UI Component Comparison Test</h1>
<p class="text-center text-gray-600 mb-8">Comparing old include method vs new cotton component method for Button, Input, and Card components</p>
@@ -582,18 +582,32 @@
</div>
</div>
<!-- Alpine.js -->
<script src="{% static 'js/alpine.min.js' %}" defer></script>
<script>
document.addEventListener('alpine:init', () => {
// Component Test Suite Component
Alpine.data('componentTestSuite', () => ({
init() {
// Extract HTML after Alpine.js initializes
this.$nextTick(() => {
setTimeout(() => this.extractComponentHTML(), 100);
this.addCompareButton();
});
},
// Function to normalize HTML for comparison
function normalizeHTML(html) {
normalizeHTML(html) {
return html
.replace(/\s+/g, ' ')
.replace(/> </g, '><')
.trim();
}
},
// Function to extract HTML from all component containers
function extractComponentHTML() {
const containers = document.querySelectorAll('.button-container');
extractComponentHTML() {
const containers = this.$el.querySelectorAll('.button-container');
const includeHTMLs = [];
const cottonHTMLs = [];
let componentIndex = 1;
@@ -607,7 +621,7 @@
if (element && label) {
const html = element.outerHTML;
const normalized = normalizeHTML(html);
const normalized = this.normalizeHTML(html);
if (label === 'Include Version') {
includeHTMLs.push(`<!-- Component ${componentIndex} -->\n${normalized}\n`);
@@ -618,36 +632,44 @@
}
});
document.getElementById('include-html').textContent = includeHTMLs.join('\n');
document.getElementById('cotton-html').textContent = cottonHTMLs.join('\n');
}
const includeElement = this.$el.querySelector('#include-html');
const cottonElement = this.$el.querySelector('#cotton-html');
// Extract HTML after page loads
document.addEventListener('DOMContentLoaded', function() {
setTimeout(extractComponentHTML, 100);
});
if (includeElement) includeElement.textContent = includeHTMLs.join('\n');
if (cottonElement) cottonElement.textContent = cottonHTMLs.join('\n');
},
// Function to compare HTML outputs
function compareHTML() {
const includeHTML = document.getElementById('include-html').textContent;
const cottonHTML = document.getElementById('cotton-html').textContent;
compareHTML() {
const includeHTML = this.$el.querySelector('#include-html')?.textContent || '';
const cottonHTML = this.$el.querySelector('#cotton-html')?.textContent || '';
if (includeHTML === cottonHTML) {
alert('✅ HTML outputs are identical!');
this.$dispatch('comparison-result', {
success: true,
message: '✅ HTML outputs are identical!'
});
} else {
alert('❌ HTML outputs differ. Check the HTML Output section for details.');
this.$dispatch('comparison-result', {
success: false,
message: '❌ HTML outputs differ. Check the HTML Output section for details.',
includeHTML,
cottonHTML
});
console.log('Include HTML:', includeHTML);
console.log('Cotton HTML:', cottonHTML);
}
}
},
// Add compare button
document.addEventListener('DOMContentLoaded', function() {
addCompareButton() {
const compareBtn = document.createElement('button');
compareBtn.textContent = 'Compare HTML Outputs';
compareBtn.className = 'fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded shadow-lg hover:bg-blue-600';
compareBtn.onclick = compareHTML;
compareBtn.addEventListener('click', () => this.compareHTML());
document.body.appendChild(compareBtn);
}
}));
});
</script>
</body>