402 lines
13 KiB
HTML
402 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Zoom Control Debug Test</title>
|
||
|
|
|
||
|
|
<!-- Hyperscript - MUST load BEFORE component -->
|
||
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||
|
|
|
||
|
|
<!-- Iconify for icons -->
|
||
|
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 20px;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background: #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-area {
|
||
|
|
margin: 20px;
|
||
|
|
padding: 20px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Zoom Control Styles */
|
||
|
|
.zoom-control {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 100px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
z-index: 900;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
padding: 0.65rem 1.25rem;
|
||
|
|
background: rgba(128, 128, 128, 0.7);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
-webkit-backdrop-filter: blur(10px);
|
||
|
|
border-radius: 50px;
|
||
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
opacity: 0.7;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||
|
|
cursor: move;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-control:hover {
|
||
|
|
opacity: 1;
|
||
|
|
background: rgba(128, 128, 128, 0.85);
|
||
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-close-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: -8px;
|
||
|
|
right: -8px;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background: rgba(128, 128, 128, 0.6);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
border-radius: 50%;
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
z-index: 1;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-close-btn:hover {
|
||
|
|
background: rgba(220, 53, 69, 0.9);
|
||
|
|
color: white;
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1.1);
|
||
|
|
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-value {
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
font-size: 0.8rem;
|
||
|
|
font-weight: 400;
|
||
|
|
min-width: 30px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-slider {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 180px;
|
||
|
|
height: 5px;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: rgba(200, 200, 200, 0.5);
|
||
|
|
outline: none;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-slider::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: white;
|
||
|
|
border: 2px solid rgba(180, 180, 180, 0.8);
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-reset-btn {
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
|
|
border-radius: 50px;
|
||
|
|
color: rgba(255, 255, 255, 0.9);
|
||
|
|
padding: 0.25rem 0.6rem;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 600;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
min-width: 45px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-reset-btn:hover {
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
border-color: rgba(255, 255, 255, 0.6);
|
||
|
|
transform: scale(1.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
#show-zoom-menu-btn {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: rgba(128, 128, 128, 0.7);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 899;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-area {
|
||
|
|
position: fixed;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
width: 300px;
|
||
|
|
max-height: 400px;
|
||
|
|
overflow-y: auto;
|
||
|
|
background: #1e1e1e;
|
||
|
|
color: #00ff00;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 11px;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry {
|
||
|
|
margin-bottom: 4px;
|
||
|
|
padding: 2px;
|
||
|
|
border-left: 2px solid #00ff00;
|
||
|
|
padding-left: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry.error {
|
||
|
|
border-left-color: #ff0000;
|
||
|
|
color: #ff6666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.log-entry.success {
|
||
|
|
border-left-color: #00ff00;
|
||
|
|
color: #66ff66;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="test-area">
|
||
|
|
<h1>Zoom Control Debug Test</h1>
|
||
|
|
<p>Testing the zoom control component to identify issues with:</p>
|
||
|
|
<ol>
|
||
|
|
<li><strong>X button not working</strong> - Click the X button (top-right corner of zoom control)</li>
|
||
|
|
<li><strong>Drag not working</strong> - Try to drag the zoom control by clicking and holding</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Instructions:</h2>
|
||
|
|
<ul>
|
||
|
|
<li>The zoom control should appear at the bottom center of the screen</li>
|
||
|
|
<li>Click the X button to hide it - a "Show Zoom" button should appear</li>
|
||
|
|
<li>Try dragging the zoom control around the screen</li>
|
||
|
|
<li>Check the console log (right side) for debugging info</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div style="margin-top: 40px; padding: 20px; background: #e0f7ff; border-radius: 8px;">
|
||
|
|
<h3>Expected Behavior:</h3>
|
||
|
|
<ul>
|
||
|
|
<li>✅ X button should hide the zoom control and show "Show Zoom" button</li>
|
||
|
|
<li>✅ Dragging should move the zoom control around the screen</li>
|
||
|
|
<li>✅ Position should be saved to localStorage</li>
|
||
|
|
<li>✅ Dragging should NOT trigger when clicking slider or buttons</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Debug Console -->
|
||
|
|
<div class="log-area" id="debugLog">
|
||
|
|
<div class="log-entry success">Debug console initialized</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Show Zoom Button (hidden by default) -->
|
||
|
|
<button id="show-zoom-menu-btn"
|
||
|
|
_="on click
|
||
|
|
log 'Show zoom button clicked'
|
||
|
|
remove { display: 'none' } from #zoom-control
|
||
|
|
add { display: 'none' } to me
|
||
|
|
set localStorage['cv-zoom-visible'] to 'true'">
|
||
|
|
Show Zoom Control
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Zoom Control Component -->
|
||
|
|
<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="Zoom control"
|
||
|
|
_="on load
|
||
|
|
log 'Zoom control loaded'
|
||
|
|
if window.innerWidth <= 768
|
||
|
|
log 'Mobile device detected - exiting'
|
||
|
|
exit
|
||
|
|
end
|
||
|
|
set savedZoom to localStorage.getItem('cv-zoom')
|
||
|
|
if savedZoom
|
||
|
|
log 'Restoring zoom: ' + savedZoom
|
||
|
|
set my value to savedZoom
|
||
|
|
send input to #zoom-slider
|
||
|
|
end
|
||
|
|
set isVisible to localStorage.getItem('cv-zoom-visible')
|
||
|
|
if isVisible is 'false'
|
||
|
|
log 'Zoom control was hidden - showing button'
|
||
|
|
add { display: 'none' } to me
|
||
|
|
remove { display: 'none' } from #show-zoom-menu-btn
|
||
|
|
end
|
||
|
|
set savedPos to localStorage.getItem('cv-zoom-position')
|
||
|
|
if savedPos
|
||
|
|
log 'Restoring position: ' + savedPos
|
||
|
|
set pos to JSON.parse(savedPos)
|
||
|
|
set my *bottom to pos.bottom
|
||
|
|
set my *left to pos.left
|
||
|
|
set my *transform to 'none'
|
||
|
|
end
|
||
|
|
|
||
|
|
on mousedown(clientX, clientY)
|
||
|
|
log 'Mousedown on zoom-control at: ' + clientX + ', ' + clientY
|
||
|
|
log 'Event target: ' + event.target.className
|
||
|
|
if event.target.closest('.zoom-slider, .zoom-close-btn, .zoom-reset-btn')
|
||
|
|
log 'Click on interactive element - exiting drag handler'
|
||
|
|
exit
|
||
|
|
end
|
||
|
|
|
||
|
|
log 'Starting drag'
|
||
|
|
set isDragging to true
|
||
|
|
set my *transition to 'none'
|
||
|
|
|
||
|
|
set rect to my getBoundingClientRect()
|
||
|
|
set initialX to clientX - rect.left
|
||
|
|
set initialY to clientY - rect.top
|
||
|
|
log 'Initial offsets: ' + initialX + ', ' + initialY
|
||
|
|
|
||
|
|
halt the event
|
||
|
|
|
||
|
|
on mousemove(clientX, clientY) from document
|
||
|
|
if isDragging is not true exit end
|
||
|
|
log 'Dragging to: ' + clientX + ', ' + clientY
|
||
|
|
|
||
|
|
halt the event
|
||
|
|
|
||
|
|
set currentX to clientX - initialX
|
||
|
|
set currentY to clientY - initialY
|
||
|
|
|
||
|
|
set maxX to window.innerWidth - my offsetWidth
|
||
|
|
set maxY to window.innerHeight - my offsetHeight
|
||
|
|
|
||
|
|
set currentX to Math.max(0, Math.min(currentX, maxX))
|
||
|
|
set currentY to Math.max(0, Math.min(currentY, maxY))
|
||
|
|
|
||
|
|
set my *left to `${currentX}px`
|
||
|
|
set my *bottom to `${window.innerHeight - currentY - my offsetHeight}px`
|
||
|
|
set my *transform to 'none'
|
||
|
|
|
||
|
|
on mouseup from document
|
||
|
|
if isDragging is not true exit end
|
||
|
|
log 'Drag ended - saving position'
|
||
|
|
|
||
|
|
set isDragging to false
|
||
|
|
set my *transition to 'all 0.3s ease'
|
||
|
|
|
||
|
|
set position to { bottom: my *bottom, left: my *left }
|
||
|
|
log 'Saving position: ' + JSON.stringify(position)
|
||
|
|
set localStorage['cv-zoom-position'] to JSON.stringify(position)">
|
||
|
|
|
||
|
|
<button
|
||
|
|
id="zoom-close"
|
||
|
|
class="zoom-close-btn"
|
||
|
|
aria-label="Close zoom control"
|
||
|
|
title="Close"
|
||
|
|
_="on click
|
||
|
|
log 'Close button clicked!'
|
||
|
|
add { display: 'none' } to #zoom-control
|
||
|
|
remove { display: 'none' } from #show-zoom-menu-btn
|
||
|
|
set localStorage['cv-zoom-visible'] to 'false'
|
||
|
|
log 'Zoom control hidden, show button displayed'">
|
||
|
|
<iconify-icon icon="mdi:close" width="16" height="16"></iconify-icon>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="zoom-value zoom-value-min" aria-hidden="true">25</span>
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="range"
|
||
|
|
id="zoom-slider"
|
||
|
|
class="zoom-slider"
|
||
|
|
min="25"
|
||
|
|
max="175"
|
||
|
|
step="1"
|
||
|
|
value="100"
|
||
|
|
aria-label="Adjust zoom level"
|
||
|
|
_="on input
|
||
|
|
set zoomValue to my value as a Number
|
||
|
|
log 'Zoom changed to: ' + zoomValue
|
||
|
|
set localStorage['cv-zoom'] to zoomValue">
|
||
|
|
|
||
|
|
<span class="zoom-value zoom-value-max" aria-hidden="true">175</span>
|
||
|
|
|
||
|
|
<button
|
||
|
|
id="zoom-reset"
|
||
|
|
class="zoom-reset-btn"
|
||
|
|
aria-label="Reset zoom to 100%"
|
||
|
|
title="Reset"
|
||
|
|
_="on click
|
||
|
|
log 'Reset button clicked'
|
||
|
|
set #zoom-slider's value to 100
|
||
|
|
send input to #zoom-slider
|
||
|
|
send focus to #zoom-slider">
|
||
|
|
<span id="zoom-value-current">100</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Enhanced logging function
|
||
|
|
function log(message, type = 'info') {
|
||
|
|
const logArea = document.getElementById('debugLog');
|
||
|
|
const entry = document.createElement('div');
|
||
|
|
entry.className = 'log-entry ' + type;
|
||
|
|
const timestamp = new Date().toLocaleTimeString();
|
||
|
|
entry.textContent = `[${timestamp}] ${message}`;
|
||
|
|
logArea.appendChild(entry);
|
||
|
|
logArea.scrollTop = logArea.scrollHeight;
|
||
|
|
|
||
|
|
// Also log to browser console
|
||
|
|
console.log(`[${timestamp}] ${message}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Override hyperscript log to use our custom logger
|
||
|
|
window.log = log;
|
||
|
|
|
||
|
|
// Add click listener to close button for debugging
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const closeBtn = document.getElementById('zoom-close');
|
||
|
|
if (closeBtn) {
|
||
|
|
log('Close button found in DOM', 'success');
|
||
|
|
|
||
|
|
// Add native click listener for debugging
|
||
|
|
closeBtn.addEventListener('click', function(e) {
|
||
|
|
log('Native click listener triggered on close button', 'success');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
log('Close button NOT found in DOM!', 'error');
|
||
|
|
}
|
||
|
|
|
||
|
|
const zoomControl = document.getElementById('zoom-control');
|
||
|
|
if (zoomControl) {
|
||
|
|
log('Zoom control found in DOM', 'success');
|
||
|
|
|
||
|
|
// Add mousedown listener for debugging
|
||
|
|
zoomControl.addEventListener('mousedown', function(e) {
|
||
|
|
log(`Native mousedown on: ${e.target.className}`, 'info');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
log('Zoom control NOT found in DOM!', 'error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|