@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
239 lines (211 loc) • 9.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Calendar Resize Fix Test</title>
<link rel="stylesheet" href="css/advanced-floating-calendar.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.test-controls {
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.test-button {
background: #007acc;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
font-size: 14px;
}
.test-button:hover {
background: #005a9e;
}
.status {
margin-top: 15px;
padding: 10px;
background: #f0f8ff;
border-left: 4px solid #007acc;
border-radius: 4px;
}
.instructions {
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="instructions">
<h3>🧪 Floating Calendar Resize Fix Test</h3>
<p><strong>Test Instructions:</strong></p>
<ol>
<li>The floating calendar should appear in the top-right corner</li>
<li>Try maximizing/restoring the browser window - the calendar should stay visible and properly positioned</li>
<li>Use the test buttons below to simulate different scenarios</li>
<li>Drag the calendar to different positions and then resize the window</li>
</ol>
</div>
<div class="test-controls">
<h3>🔧 Test Controls</h3>
<button class="test-button" onclick="simulateResize()">Simulate Window Resize</button>
<button class="test-button" onclick="moveToCorner('top-left')">Move to Top-Left</button>
<button class="test-button" onclick="moveToCorner('top-right')">Move to Top-Right</button>
<button class="test-button" onclick="moveToCorner('bottom-left')">Move to Bottom-Left</button>
<button class="test-button" onclick="moveToCorner('bottom-right')">Move to Bottom-Right</button>
<button class="test-button" onclick="moveOffScreen()">Move Off-Screen (Test Fix)</button>
<button class="test-button" onclick="resetPosition()">Reset Position</button>
<button class="test-button" onclick="toggleMaximize()">Toggle Window Size</button>
<div class="status" id="status">
Ready for testing. Try resizing the window or using the test buttons above.
</div>
</div>
<!-- Floating Calendar Widget -->
<div id="floating-calendar-widget" class="floating-calendar-widget">
<div class="calendar-header">
<div class="calendar-controls">
<button class="minimize-btn">−</button>
<button class="close-btn">×</button>
</div>
<h3>Calendar Widget</h3>
<div class="quick-actions">
<button class="quick-action" data-action="today">Today</button>
<button class="quick-action" data-action="tomorrow">Tomorrow</button>
<button class="quick-action" data-action="next-week">Next Week</button>
</div>
</div>
<div class="calendar-content">
<div class="calendar-navigation">
<button class="nav-btn prev-btn">‹</button>
<span class="current-month">December 2024</span>
<button class="nav-btn next-btn">›</button>
</div>
<div class="calendar-grid">
<!-- Calendar will be generated here -->
</div>
</div>
</div>
<!-- Include the advanced floating calendar script -->
<script src="js/calendar-controller.js"></script>
<script src="js/advanced-floating-calendar.js"></script>
<script>
let isMaximized = false;
let originalSize = null;
function updateStatus(message) {
document.getElementById('status').innerHTML = `
<strong>Status:</strong> ${message}<br>
<small>Viewport: ${window.innerWidth}x${window.innerHeight}</small><br>
<small>Widget Position: ${getWidgetPosition()}</small>
`;
}
function getWidgetPosition() {
const widget = document.getElementById('floating-calendar-widget');
if (!widget) return 'Not found';
const rect = widget.getBoundingClientRect();
return `x:${Math.round(rect.left)}, y:${Math.round(rect.top)}, w:${Math.round(rect.width)}, h:${Math.round(rect.height)}`;
}
function simulateResize() {
updateStatus('Simulating resize event...');
// Trigger resize event
window.dispatchEvent(new Event('resize'));
setTimeout(() => {
updateStatus('Resize event dispatched - check widget position');
}, 200);
}
function moveToCorner(corner) {
if (!window.advancedCalendar) {
updateStatus('Calendar not initialized yet');
return;
}
const positions = {
'top-left': { top: 20, left: 20, right: 'auto', bottom: 'auto' },
'top-right': { top: 20, right: 20, left: 'auto', bottom: 'auto' },
'bottom-left': { bottom: 20, left: 20, right: 'auto', top: 'auto' },
'bottom-right': { bottom: 20, right: 20, left: 'auto', top: 'auto' }
};
window.advancedCalendar.setPosition(positions[corner]);
updateStatus(`Moved to ${corner} corner`);
}
function moveOffScreen() {
if (!window.advancedCalendar) {
updateStatus('Calendar not initialized yet');
return;
}
// Move widget off-screen to test the fix
window.advancedCalendar.setPosition({
top: -100,
left: window.innerWidth + 50,
right: 'auto',
bottom: 'auto'
});
updateStatus('Moved off-screen - now trigger resize to test fix');
}
function resetPosition() {
if (!window.advancedCalendar) {
updateStatus('Calendar not initialized yet');
return;
}
window.advancedCalendar.setPosition({ top: 20, right: 20, left: 'auto', bottom: 'auto' });
updateStatus('Position reset to default (top-right)');
}
function toggleMaximize() {
if (!originalSize) {
originalSize = {
width: window.outerWidth,
height: window.outerHeight
};
}
if (!isMaximized) {
// Simulate maximizing
window.resizeTo(screen.width, screen.height);
updateStatus('Window maximized (simulated)');
isMaximized = true;
} else {
// Restore
window.resizeTo(originalSize.width, originalSize.height);
updateStatus('Window restored to original size');
isMaximized = false;
}
}
// Listen for resize events to update status
window.addEventListener('resize', () => {
setTimeout(() => {
updateStatus('Window resized - calendar should auto-reposition');
}, 200);
});
// Initialize status when page loads
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
updateStatus('Test page loaded - floating calendar should be visible');
}, 500);
});
// Listen for calendar events
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
if (window.advancedCalendar) {
window.advancedCalendar.on('resize', (data) => {
updateStatus(`Calendar handled resize event - new viewport: ${data.viewport.width}x${data.viewport.height}`);
});
window.advancedCalendar.on('positionChanged', (data) => {
updateStatus(`Calendar position changed: ${JSON.stringify(data)}`);
});
}
}, 1000);
});
</script>
</body>
</html>