CODE
I have implemented a function that "responsify" dimensions (responsive dimensions).
This is my current method:
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;
};
Problem
As you can see, it just returns an object with responsive dimensions. The main problem I am experiencing is that it only adapts the given dimensions to a given "finalWidth". But what if, instead of a finalWidth, I receive a final height (so that the method adapts the original width to that final height)?
How can I add flexibility to the method in order to be able to solve that scenario without having to create another different method?
Any design pattern or idea?
Note
If I pass the final height (instead of a final width) as follows: responsifyDimensions(photo.dimensions, /*finalHeight = 100*/)
then, the method will have to do:
export default (originalDimensions, finalHeight = WINDOW_HEIGHT) => {
const responsiveHeight = finalHeight; <----
const responsiveWidth = ruleOfThree(
originalDimensions.width,
originalDimensions.height, <-----
responsiveHeight <-----
);
return {
width: responsiveWidth,
height: responsiveHeight,
};
}
Codes look really similar... so I suppose that there could be a simple way to make the original method more "flexible"
Aucun commentaire:
Enregistrer un commentaire