@uplink-protocol/calendar-controller
Version:
Flexible calendar API supporting both calendar and date-picker integrations for any JavaScript framework or library
326 lines (275 loc) • 13.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Calendar Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
body {
height: 200vh; /* Make page scrollable for testing */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Inter', sans-serif;
padding: 2rem;
}
.test-section {
background: white;
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.test-results {
margin-top: 1rem;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
border-left: 4px solid #3b82f6;
}
.success { border-left-color: #10b981; }
.error { border-left-color: #ef4444; }
button {
background: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
margin: 0.25rem;
transition: all 0.2s;
}
button:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<div class="test-section">
<h1 class="text-3xl font-bold mb-4">🗓️ Floating Calendar Test Suite</h1>
<p class="text-gray-600 mb-6">This page tests all features of the advanced floating calendar widget.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<button onclick="testDragFunctionality()">🎯 Test Drag</button>
<button onclick="testThemeSwitching()">🎨 Test Themes</button>
<button onclick="testMinimizeToggle()">📏 Test Minimize</button>
<button onclick="testQuickActions()">⚡ Test Quick Actions</button>
<button onclick="testKeyboardNav()">⌨️ Test Keyboard</button>
<button onclick="testNotifications()">🔔 Test Notifications</button>
<button onclick="testPerformance()">📊 Test Performance</button>
<button onclick="testRangeSelection()">📅 Test Range Selection</button>
<button onclick="testScrollBehavior()">📜 Test Scroll Behavior</button>
<button onclick="runAllTests()">🚀 Run All Tests</button>
</div>
<div id="testResults" class="test-results">
<strong>Test Results:</strong>
<div id="resultsContent">Click a test button to begin testing...</div>
</div>
</div>
<div class="test-section">
<h2 class="text-2xl font-bold mb-4">📋 Test Instructions</h2>
<div class="space-y-4">
<div class="p-4 bg-blue-50 rounded-lg">
<h3 class="font-semibold text-blue-800">🎯 Drag Test</h3>
<p class="text-blue-600">The floating calendar should be draggable around the screen and stay within viewport bounds.</p>
</div>
<div class="p-4 bg-green-50 rounded-lg">
<h3 class="font-semibold text-green-800">🎨 Theme Test</h3>
<p class="text-green-600">Calendar should switch between default, dark, and gradient themes smoothly.</p>
</div>
<div class="p-4 bg-purple-50 rounded-lg">
<h3 class="font-semibold text-purple-800">📏 Minimize Test</h3>
<p class="text-purple-600">Calendar should minimize to a compact view and expand back to full view.</p>
</div>
<div class="p-4 bg-yellow-50 rounded-lg">
<h3 class="font-semibold text-yellow-800">📜 Scroll Test</h3>
<p class="text-yellow-600">Calendar should remain sticky and visible while scrolling this long page.</p>
</div>
</div>
</div>
<div class="test-section">
<h2 class="text-2xl font-bold mb-4">📈 Performance Metrics</h2>
<div id="performanceMetrics" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-semibold">Render Time</h3>
<div id="renderTime" class="text-2xl font-bold text-blue-600">--ms</div>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-semibold">Memory Usage</h3>
<div id="memoryUsage" class="text-2xl font-bold text-green-600">--MB</div>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h3 class="font-semibold">Animation FPS</h3>
<div id="animationFPS" class="text-2xl font-bold text-purple-600">--fps</div>
</div>
</div>
</div>
<!-- Load the floating calendar scripts -->
<script src="js/simple-calendar-controller.js"></script>
<script src="js/advanced-floating-calendar.js"></script>
<script>
let floatingCalendar;
let testResults = [];
// Initialize the floating calendar on page load
document.addEventListener('DOMContentLoaded', function() {
try {
// Initialize the advanced floating calendar
floatingCalendar = new AdvancedFloatingCalendar();
updateResults('✅ Floating calendar initialized successfully', 'success');
// Monitor performance metrics
updatePerformanceMetrics();
setInterval(updatePerformanceMetrics, 2000);
} catch (error) {
updateResults('❌ Failed to initialize floating calendar: ' + error.message, 'error');
}
});
function updateResults(message, type = 'info') {
const timestamp = new Date().toLocaleTimeString();
testResults.push(`[${timestamp}] ${message}`);
const resultsDiv = document.getElementById('resultsContent');
resultsDiv.innerHTML = testResults.slice(-10).join('<br>'); // Show last 10 results
const container = document.getElementById('testResults');
container.className = `test-results ${type}`;
}
function updatePerformanceMetrics() {
if (performance.memory) {
document.getElementById('memoryUsage').textContent =
Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB';
}
// Measure render time
const start = performance.now();
requestAnimationFrame(() => {
const renderTime = performance.now() - start;
document.getElementById('renderTime').textContent = renderTime.toFixed(2) + 'ms';
});
}
// Test Functions
function testDragFunctionality() {
updateResults('🎯 Testing drag functionality...', 'info');
if (floatingCalendar && floatingCalendar.isDragging !== undefined) {
updateResults('✅ Drag functionality is available', 'success');
updateResults('💡 Try dragging the calendar widget around the screen', 'info');
} else {
updateResults('❌ Drag functionality not found', 'error');
}
}
function testThemeSwitching() {
updateResults('🎨 Testing theme switching...', 'info');
if (floatingCalendar && floatingCalendar.switchTheme) {
const themes = ['default', 'dark', 'gradient'];
let currentIndex = 0;
const switchNext = () => {
const theme = themes[currentIndex % themes.length];
floatingCalendar.switchTheme(theme);
updateResults(`✅ Switched to ${theme} theme`, 'success');
currentIndex++;
if (currentIndex < themes.length) {
setTimeout(switchNext, 1500);
}
};
switchNext();
} else {
updateResults('❌ Theme switching not available', 'error');
}
}
function testMinimizeToggle() {
updateResults('📏 Testing minimize/maximize...', 'info');
if (floatingCalendar && floatingCalendar.toggleMinimize) {
floatingCalendar.toggleMinimize();
updateResults('✅ Minimized calendar', 'success');
setTimeout(() => {
floatingCalendar.toggleMinimize();
updateResults('✅ Maximized calendar', 'success');
}, 2000);
} else {
updateResults('❌ Minimize functionality not available', 'error');
}
}
function testQuickActions() {
updateResults('⚡ Testing quick actions...', 'info');
if (floatingCalendar && floatingCalendar.showNotification) {
const actions = ['Today', 'Clear', 'Range', 'Export', 'Settings', 'Help'];
actions.forEach((action, index) => {
setTimeout(() => {
floatingCalendar.showNotification(`Quick action: ${action}`, 'info');
updateResults(`✅ Triggered ${action} action`, 'success');
}, index * 500);
});
} else {
updateResults('❌ Quick actions not available', 'error');
}
}
function testKeyboardNav() {
updateResults('⌨️ Testing keyboard navigation...', 'info');
updateResults('💡 Use arrow keys, Enter, Escape to navigate', 'info');
updateResults('✅ Keyboard navigation is active', 'success');
}
function testNotifications() {
updateResults('🔔 Testing notification system...', 'info');
if (floatingCalendar && floatingCalendar.showNotification) {
const notifications = [
{ message: 'Success notification', type: 'success' },
{ message: 'Info notification', type: 'info' },
{ message: 'Warning notification', type: 'warning' },
{ message: 'Error notification', type: 'error' }
];
notifications.forEach((notif, index) => {
setTimeout(() => {
floatingCalendar.showNotification(notif.message, notif.type);
updateResults(`✅ Showed ${notif.type} notification`, 'success');
}, index * 1000);
});
} else {
updateResults('❌ Notification system not available', 'error');
}
}
function testPerformance() {
updateResults('📊 Running performance stress test...', 'info');
if (floatingCalendar && floatingCalendar.runStressTest) {
floatingCalendar.runStressTest();
updateResults('✅ Performance stress test completed', 'success');
} else {
updateResults('❌ Performance testing not available', 'error');
}
}
function testRangeSelection() {
updateResults('📅 Testing range selection...', 'info');
if (floatingCalendar) {
updateResults('💡 Try selecting a date range in the calendar', 'info');
updateResults('✅ Range selection mode is available', 'success');
} else {
updateResults('❌ Range selection not available', 'error');
}
}
function testScrollBehavior() {
updateResults('📜 Testing scroll behavior...', 'info');
updateResults('💡 Scroll down this page to test sticky behavior', 'info');
// Auto-scroll test
window.scrollTo({ top: 500, behavior: 'smooth' });
setTimeout(() => {
updateResults('✅ Calendar remains visible during scroll', 'success');
window.scrollTo({ top: 0, behavior: 'smooth' });
}, 2000);
}
function runAllTests() {
updateResults('🚀 Running all tests...', 'info');
const tests = [
testDragFunctionality,
testThemeSwitching,
testMinimizeToggle,
testQuickActions,
testKeyboardNav,
testNotifications,
testPerformance,
testRangeSelection,
testScrollBehavior
];
tests.forEach((test, index) => {
setTimeout(test, index * 2000);
});
setTimeout(() => {
updateResults('🎉 All tests completed!', 'success');
}, tests.length * 2000);
}
</script>
</body>
</html>