bf fixes
This commit is contained in:
juanatsap
@@ -0,0 +1,176 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user