juanatsap
177 lines
6.7 KiB
HTML
177 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>HTMX Indicator Test</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
|
<link rel="stylesheet" href="http://localhost:1999/static/css/main.css">
|
|
<style>
|
|
body {
|
|
padding: 40px;
|
|
background: #2c3e50;
|
|
color: white;
|
|
font-family: system-ui;
|
|
}
|
|
.test-section {
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
background: #34495e;
|
|
border-radius: 8px;
|
|
}
|
|
.test-btn {
|
|
padding: 10px 20px;
|
|
background: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 10px;
|
|
}
|
|
.test-btn:hover {
|
|
background: #2980b9;
|
|
}
|
|
.htmx-request {
|
|
background: #27ae60 !important;
|
|
}
|
|
.status {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #1a252f;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>HTMX Loading Indicators Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 1: Button with Child Indicator (Default Pattern)</h2>
|
|
<p>Click button - spinner should appear INSIDE button during request</p>
|
|
<button class="test-btn"
|
|
hx-get="http://localhost:1999/switch-language?lang=en"
|
|
hx-target="#result1"
|
|
hx-swap="innerHTML">
|
|
Switch Language
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"></iconify-icon>
|
|
</button>
|
|
<div id="result1" class="status">Result will appear here</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 2: Language Selector (Actual Component)</h2>
|
|
<p>This mirrors the actual language selector from the CV</p>
|
|
<div class="language-selector">
|
|
<button class="selector-btn"
|
|
hx-get="http://localhost:1999/switch-language?lang=en"
|
|
hx-target="#result2"
|
|
hx-swap="innerHTML">
|
|
<span>English</span>
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"
|
|
aria-label="Loading"></iconify-icon>
|
|
</button>
|
|
<button class="selector-btn"
|
|
hx-get="http://localhost:1999/switch-language?lang=es"
|
|
hx-target="#result2"
|
|
hx-swap="innerHTML">
|
|
<span>Español</span>
|
|
<iconify-icon icon="mdi:loading"
|
|
class="htmx-indicator spinning small light"
|
|
width="14"
|
|
height="14"
|
|
aria-label="Loading"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<div id="result2" class="status">Result will appear here</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test 3: CSS Verification</h2>
|
|
<p>Manually verify CSS rules are applied:</p>
|
|
<div class="status">
|
|
<div>1. Open DevTools</div>
|
|
<div>2. Click a button above</div>
|
|
<div>3. Watch Network tab for request</div>
|
|
<div>4. Check Elements tab - button should have class "htmx-request"</div>
|
|
<div>5. Check Computed styles - iconify-icon.htmx-indicator should have opacity: 1</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Debug: CSS Rules Status</h2>
|
|
<div class="status" id="css-debug"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Debug: Check if CSS rules are loaded
|
|
setTimeout(() => {
|
|
const indicator = document.querySelector('.htmx-indicator');
|
|
if (indicator) {
|
|
const styles = window.getComputedStyle(indicator);
|
|
const debug = document.getElementById('css-debug');
|
|
debug.innerHTML = `
|
|
<strong>CSS Computed Values for .htmx-indicator:</strong><br>
|
|
opacity: ${styles.opacity}<br>
|
|
display: ${styles.display}<br>
|
|
transition: ${styles.transition}<br>
|
|
pointer-events: ${styles.pointerEvents}<br>
|
|
<br>
|
|
<strong>Expected:</strong><br>
|
|
opacity: 0 (hidden by default)<br>
|
|
display: inline-flex<br>
|
|
transition: opacity 200ms ease-in-out<br>
|
|
pointer-events: none
|
|
`;
|
|
}
|
|
}, 1000);
|
|
|
|
// Monitor HTMX events
|
|
document.body.addEventListener('htmx:beforeRequest', (e) => {
|
|
console.log('🚀 HTMX Request Starting:', e.detail);
|
|
console.log(' Target element:', e.detail.elt);
|
|
console.log(' Has htmx-request class:', e.detail.elt.classList.contains('htmx-request'));
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterRequest', (e) => {
|
|
console.log('✅ HTMX Request Complete:', e.detail);
|
|
console.log(' Target element:', e.detail.elt);
|
|
console.log(' Has htmx-request class:', e.detail.elt.classList.contains('htmx-request'));
|
|
});
|
|
|
|
// Monitor class changes
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
|
const target = mutation.target;
|
|
const hasRequest = target.classList.contains('htmx-request');
|
|
console.log(`📝 Class change on ${target.tagName}:`, {
|
|
hasHtmxRequest: hasRequest,
|
|
allClasses: Array.from(target.classList)
|
|
});
|
|
|
|
if (hasRequest) {
|
|
const indicator = target.querySelector('.htmx-indicator');
|
|
if (indicator) {
|
|
const opacity = window.getComputedStyle(indicator).opacity;
|
|
console.log(` → Indicator opacity: ${opacity} (should be 1)`);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Observe all buttons
|
|
document.querySelectorAll('button[hx-get]').forEach(btn => {
|
|
observer.observe(btn, { attributes: true });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|