104 lines
2.2 KiB
JavaScript
104 lines
2.2 KiB
JavaScript
/**
|
|
* Calcula u obtiene el tamaño de pantalla del dispositivo actual
|
|
*/
|
|
class TailwindScreen {
|
|
constructor(){}
|
|
|
|
isXs = () => (screen.width < 640) ? true : false;
|
|
|
|
isSm = () => (screen.width >= 640 && screen.width < 768) ? true : false;
|
|
|
|
isMd = () => (screen.width >= 768 && screen.width < 1024) ? true : false;
|
|
|
|
isLg = () => (screen.width >= 1024 && screen.width < 1280) ? true : false;
|
|
|
|
isXl = () => (screen.width >= 1280 && screen.width < 1536) ? true : false;
|
|
|
|
is2Xl = () => (screen.width >= 1536) ? true : false;
|
|
|
|
/**
|
|
* Obtiene el tamaño de pantalla que usa tailwind
|
|
*/
|
|
getScreen = () => {
|
|
if(this.isXs()) {
|
|
return 'xs';
|
|
}
|
|
|
|
if(this.isSm()) {
|
|
return 'sm';
|
|
}
|
|
|
|
if(this.isMd()) {
|
|
return 'md';
|
|
}
|
|
|
|
if(this.isLg()) {
|
|
return 'lg';
|
|
}
|
|
|
|
if(this.isXl()) {
|
|
return 'xl';
|
|
}
|
|
|
|
if(this.is2Xl()) {
|
|
return '2xl';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Pregunta si es un tipo de dispositivo
|
|
*
|
|
* @param {*} device Tipo de dispositivo
|
|
*/
|
|
isDevice(device) {
|
|
switch (device) {
|
|
case 'phone':
|
|
if(this.isXs() || this.isSm()) {
|
|
return true;
|
|
}
|
|
break;
|
|
case 'tablet':
|
|
if(this.isMd()) {
|
|
return true;
|
|
}
|
|
break;
|
|
case 'pc':
|
|
if(this.isLg() || this.isXl() || this.is2Xl()) {
|
|
return true;
|
|
}
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Obtiene el tipo de dispositivo y la variante
|
|
*/
|
|
getDevice() {
|
|
if(this.isXs() || this.isSm()) {
|
|
return 'phone';
|
|
}
|
|
|
|
if(this.isMd()) {
|
|
return 'tablet';
|
|
}
|
|
|
|
if(this.isLg()) {
|
|
return 'pc-sm';
|
|
}
|
|
|
|
if(this.isXl()) {
|
|
return 'pc-md';
|
|
}
|
|
|
|
if(this.is2Xl()) {
|
|
return 'pc-lg';
|
|
}
|
|
}
|
|
}
|
|
|
|
export { TailwindScreen } |