mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
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.
This commit is contained in:
pacnpal
@@ -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,73 +439,89 @@
|
||||
}));
|
||||
});
|
||||
|
||||
// Store references to both modal instances
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 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);
|
||||
});
|
||||
// Auth Modal Test Suite Component
|
||||
Alpine.data('authModalTestSuite', () => ({
|
||||
init() {
|
||||
// Wait for Alpine.js to initialize and modal instances to be created
|
||||
setTimeout(() => {
|
||||
console.log('Auth Modal References:', {
|
||||
original: window.authModalOriginal,
|
||||
cotton: window.authModalCotton,
|
||||
custom: window.authModalCustom
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// Test functions
|
||||
function openOriginalModalInMode(mode) {
|
||||
if (window.authModalOriginal) {
|
||||
window.authModalOriginal.mode = mode;
|
||||
window.authModalOriginal.open = true;
|
||||
}
|
||||
}
|
||||
openOriginalModal() {
|
||||
if (window.authModalOriginal) {
|
||||
window.authModalOriginal.open = true;
|
||||
}
|
||||
},
|
||||
|
||||
function openCottonModalInMode(mode) {
|
||||
if (window.authModalCotton) {
|
||||
window.authModalCotton.mode = mode;
|
||||
window.authModalCotton.open = true;
|
||||
}
|
||||
}
|
||||
openCottonModal() {
|
||||
if (window.authModalCotton) {
|
||||
window.authModalCotton.open = true;
|
||||
}
|
||||
},
|
||||
|
||||
function testOriginalInteractivity() {
|
||||
if (window.authModalOriginal) {
|
||||
window.authModalOriginal.open = true;
|
||||
window.authModalOriginal.mode = 'login';
|
||||
setTimeout(() => {
|
||||
window.authModalOriginal.loginError = 'Test error message';
|
||||
window.authModalOriginal.showPassword = true;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
openOriginalModalInMode(mode) {
|
||||
if (window.authModalOriginal) {
|
||||
window.authModalOriginal.mode = mode;
|
||||
window.authModalOriginal.open = true;
|
||||
}
|
||||
},
|
||||
|
||||
function testCottonInteractivity() {
|
||||
if (window.authModalCotton) {
|
||||
window.authModalCotton.open = true;
|
||||
window.authModalCotton.mode = 'login';
|
||||
setTimeout(() => {
|
||||
window.authModalCotton.loginError = 'Test error message';
|
||||
window.authModalCotton.showPassword = true;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
openCottonModalInMode(mode) {
|
||||
if (window.authModalCotton) {
|
||||
window.authModalCotton.mode = mode;
|
||||
window.authModalCotton.open = true;
|
||||
}
|
||||
},
|
||||
|
||||
function compareModalStyling() {
|
||||
if (window.authModalOriginal && window.authModalCotton) {
|
||||
window.authModalOriginal.open = true;
|
||||
setTimeout(() => {
|
||||
window.authModalCotton.open = true;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
testOriginalInteractivity() {
|
||||
if (window.authModalOriginal) {
|
||||
window.authModalOriginal.open = true;
|
||||
window.authModalOriginal.mode = 'login';
|
||||
setTimeout(() => {
|
||||
window.authModalOriginal.loginError = 'Test error message';
|
||||
window.authModalOriginal.showPassword = true;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
function testCustomConfiguration() {
|
||||
// Show the custom cotton modal
|
||||
const customModal = document.getElementById('custom-cotton-modal');
|
||||
customModal.style.display = 'block';
|
||||
|
||||
// You would implement custom Alpine.js instance here
|
||||
alert('Custom configuration test - check the modal titles and text changes');
|
||||
}
|
||||
testCottonInteractivity() {
|
||||
if (window.authModalCotton) {
|
||||
window.authModalCotton.open = true;
|
||||
window.authModalCotton.mode = 'login';
|
||||
setTimeout(() => {
|
||||
window.authModalCotton.loginError = 'Test error message';
|
||||
window.authModalCotton.showPassword = true;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
compareModalStyling() {
|
||||
if (window.authModalOriginal && window.authModalCotton) {
|
||||
window.authModalOriginal.open = true;
|
||||
setTimeout(() => {
|
||||
window.authModalCotton.open = true;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
|
||||
testCustomConfiguration() {
|
||||
// Show the custom cotton modal
|
||||
const customModal = this.$el.querySelector('#custom-cotton-modal');
|
||||
if (customModal) {
|
||||
customModal.style.display = 'block';
|
||||
}
|
||||
|
||||
// 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>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user