File size: 2,605 Bytes
25f22bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
// Simple layout validation test
export const validateLayout = () => {
const issues = [];
// Check sidebar width consistency
const sidebar = document.querySelector('.sidebar');
const mainContainer = document.querySelector('.main-container');
if (sidebar && mainContainer) {
const sidebarWidth = sidebar.offsetWidth;
const mainContainerMargin = window.getComputedStyle(mainContainer).marginLeft;
// Check if sidebar width matches main container margin
if (sidebarWidth > 0 && mainContainerMargin) {
const marginValue = parseInt(mainContainerMargin);
if (Math.abs(sidebarWidth - marginValue) > 10) {
issues.push({
type: 'layout',
message: `Sidebar width (${sidebarWidth}px) doesn't match main container margin (${marginValue}px)`,
severity: 'warning'
});
}
}
}
// Check mobile responsiveness
const isMobile = window.innerWidth < 1024;
if (isMobile) {
const sidebar = document.querySelector('.sidebar');
if (sidebar && sidebar.style.position === 'fixed') {
// Mobile sidebar should be fixed
} else {
issues.push({
type: 'responsive',
message: 'Mobile sidebar should use fixed positioning',
severity: 'warning'
});
}
}
// Check z-index conflicts
const sidebarZIndex = sidebar ? parseInt(window.getComputedStyle(sidebar).zIndex) : 0;
const overlayZIndex = document.querySelector('.sidebar-overlay') ?
parseInt(window.getComputedStyle(document.querySelector('.sidebar-overlay')).zIndex) : 0;
if (sidebarZIndex >= overlayZIndex && overlayZIndex > 0) {
issues.push({
type: 'z-index',
message: 'Sidebar z-index should be higher than overlay',
severity: 'error'
});
}
return {
isValid: issues.length === 0,
issues,
timestamp: new Date().toISOString()
};
};
// Run layout validation on resize
export const setupLayoutValidation = () => {
let validationTimeout;
const validate = () => {
clearTimeout(validationTimeout);
validationTimeout = setTimeout(() => {
const result = validateLayout();
console.log('Layout validation result:', result);
// Dispatch custom event for other components to listen to
window.dispatchEvent(new CustomEvent('layoutValidation', { detail: result }));
}, 300);
};
// Initial validation
validate();
// Validate on resize
window.addEventListener('resize', validate);
// Validate on sidebar toggle
document.addEventListener('sidebarToggle', validate);
return validate;
}; |