He implementado una función que "responsifica" las dimensiones (dimensiones sensibles).
Este es mi método actual:
export default (originalDimensions, finalWidth = WINDOW_WIDTH) => { const responsiveWidth = finalWidth; const responsiveHeight = ruleOfThree( originalDimensions.height, originalDimensions.width, responsiveWidth ); return { width: responsiveWidth, height: responsiveHeight, }; }; /* Helper */ function ruleOfThree (originalX, originalY, finalY, direct = true) => { if (direct) { return (originalX * finalY) / originalY; } return (originalY * finalY) / originalX; };Como puede ver, solo devuelve un objeto con dimensiones sensibles. El principal problema que estoy experimentando es que solo adapta las dimensiones dadas a un "ancho final" dado. Pero, ¿y si, en lugar de un ancho final, recibo una altura final (para que el método adapte el ancho original a esa altura final)?
¿Cómo puedo agregar flexibilidad al método para poder resolver ese escenario sin tener que crear otro método diferente?
¿Algún patrón o idea de diseño?
Si paso la altura final (en lugar de un ancho final) de la siguiente manera: responsifyDimensions(photo.dimensions, /*finalHeight = 100*/)
entonces, el método tendrá que hacer:
export default (originalDimensions, finalHeight = WINDOW_HEIGHT) => { const responsiveHeight = finalHeight; <---- const responsiveWidth = ruleOfThree( originalDimensions.width, originalDimensions.height, <----- responsiveHeight <----- ); return { width: responsiveWidth, height: responsiveHeight, }; }Los códigos se ven muy similares... así que supongo que podría haber una forma sencilla de hacer que el método original sea más "flexible".
Iría por la deconstrucción de objetos en el último parámetro, y luego, dependiendo del valor establecido, cambiaría ancho/alto, así:
export default (originalDimensions, { finalWidth, finalHeight } = {}) => { if (finalHeight) { return { width: ruleOfThree( originalDimensions.height, originalDimensions.width, finalHeight ), height: finalHeight, }; } const width = finalWidth ?? WINDOW_WIDTH; return { width, height: ruleOfThree( originalDimensions.width, originalDimensions.height, width ), }; }; /* Helper */ function ruleOfThree (originalX, originalY, finalY, direct = true) => { if (direct) { return (originalX * finalY) / originalY; } return (originalY * finalY) / originalX; }; /* usage */ // Fit width const dimsWidth = responsifyDimensions(photo.dimensions, { finalWidth: 100 }); // Fit height const dimsHeight = responsifyDimensions(photo.dimensions, { finalHeight: 100 }); // Fit default (WINDOW_WIDTH as width) const dimsDefault = responsifyDimensions(photo.dimensions);