94 lines
2.0 KiB
TypeScript
94 lines
2.0 KiB
TypeScript
/**
|
|
* Responsive utility functions
|
|
* Centralized helpers for responsive behavior
|
|
*/
|
|
|
|
/**
|
|
* Get responsive class names based on condition
|
|
*/
|
|
export function responsiveClass(
|
|
base: string,
|
|
mobile?: string,
|
|
tablet?: string,
|
|
desktop?: string
|
|
): string {
|
|
const classes = [base];
|
|
|
|
if (mobile) classes.push(`max-md:${mobile}`);
|
|
if (tablet) classes.push(`md:${tablet} max-lg:${tablet}`);
|
|
if (desktop) classes.push(`lg:${desktop}`);
|
|
|
|
return classes.join(' ');
|
|
}
|
|
|
|
/**
|
|
* Get responsive value based on screen width
|
|
*/
|
|
export function getResponsiveValue<T>(
|
|
mobile: T,
|
|
tablet: T,
|
|
desktop: T,
|
|
width: number
|
|
): T {
|
|
if (width < 768) return mobile;
|
|
if (width < 1024) return tablet;
|
|
return desktop;
|
|
}
|
|
|
|
/**
|
|
* Debounce function for resize events
|
|
*/
|
|
export function debounce<T extends (...args: any[]) => any>(
|
|
func: T,
|
|
wait: number
|
|
): (...args: Parameters<T>) => void {
|
|
let timeout: NodeJS.Timeout;
|
|
|
|
return (...args: Parameters<T>) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => func(...args), wait);
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Check if device supports touch
|
|
*/
|
|
export function isTouchDevice(): boolean {
|
|
return (
|
|
'ontouchstart' in window ||
|
|
navigator.maxTouchPoints > 0 ||
|
|
(navigator as any).msMaxTouchPoints > 0
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get optimal column count for grid based on width
|
|
*/
|
|
export function getGridColumns(width: number, itemMinWidth: number = 300): number {
|
|
return Math.max(1, Math.floor(width / itemMinWidth));
|
|
}
|
|
|
|
/**
|
|
* Format text for mobile (truncate if needed)
|
|
*/
|
|
export function formatTextForMobile(
|
|
text: string,
|
|
maxLength: number = 100,
|
|
isMobile: boolean
|
|
): string {
|
|
if (!isMobile || text.length <= maxLength) return text;
|
|
return text.substring(0, maxLength) + '...';
|
|
}
|
|
|
|
/**
|
|
* Get responsive font size
|
|
*/
|
|
export function getResponsiveFontSize(
|
|
baseSize: number,
|
|
width: number
|
|
): number {
|
|
if (width < 768) return baseSize * 0.875; // 87.5% for mobile
|
|
if (width < 1024) return baseSize * 0.9375; // 93.75% for tablet
|
|
return baseSize;
|
|
}
|