| 1 | {"version":3,"file":"Image.styles.js","sourceRoot":"../src/","sources":["components/Image/Image.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { AnimationClassNames, getGlobalClassNames, IStyle } from '../../Styling';\nimport { IImageStyleProps, IImageStyles } from './Image.types';\nimport { getWindow } from '../../Utilities';\n\nconst GlobalClassNames = {\n root: 'ms-Image',\n rootMaximizeFrame: 'ms-Image--maximizeFrame',\n image: 'ms-Image-image',\n imageCenter: 'ms-Image-image--center',\n imageContain: 'ms-Image-image--contain',\n imageCover: 'ms-Image-image--cover',\n imageCenterContain: 'ms-Image-image--centerContain',\n imageCenterCover: 'ms-Image-image--centerCover',\n imageNone: 'ms-Image-image--none',\n imageLandscape: 'ms-Image-image--landscape',\n imagePortrait: 'ms-Image-image--portrait',\n};\n\nexport const getStyles = (props: IImageStyleProps): IImageStyles => {\n const {\n className,\n width,\n height,\n maximizeFrame,\n isLoaded,\n shouldFadeIn,\n shouldStartVisible,\n isLandscape,\n isCenter,\n isContain,\n isCover,\n isCenterContain,\n isCenterCover,\n isNone,\n isError,\n isNotImageFit,\n theme,\n } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const ImageFitStyles: IStyle = {\n position: 'absolute',\n left: '50% /* @noflip */',\n top: '50%',\n transform: 'translate(-50%,-50%)', // @todo test RTL renders transform: translate(50%,-50%);\n };\n\n // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit\n const window: Window | undefined = getWindow();\n const supportsObjectFit: boolean = window !== undefined && window.navigator.msMaxTouchPoints === undefined;\n const fallbackObjectFitStyles =\n (isContain && isLandscape) || (isCover && !isLandscape)\n ? { width: '100%', height: 'auto' }\n : { width: 'auto', height: '100%' };\n\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n overflow: 'hidden',\n },\n maximizeFrame && [\n classNames.rootMaximizeFrame,\n {\n height: '100%',\n width: '100%',\n },\n ],\n isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,\n (isCenter || isContain || isCover || isCenterContain || isCenterCover) && {\n position: 'relative',\n },\n className,\n ],\n image: [\n classNames.image,\n {\n display: 'block',\n opacity: 0,\n },\n isLoaded && [\n 'is-loaded',\n {\n opacity: 1,\n },\n ],\n isCenter && [classNames.imageCenter, ImageFitStyles],\n isContain && [\n classNames.imageContain,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n ImageFitStyles,\n ],\n isCover && [\n classNames.imageCover,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n ImageFitStyles,\n ],\n isCenterContain && [\n classNames.imageCenterContain,\n isLandscape && {\n maxWidth: '100%',\n },\n !isLandscape && {\n maxHeight: '100%',\n },\n ImageFitStyles,\n ],\n isCenterCover && [\n classNames.imageCenterCover,\n isLandscape && {\n maxHeight: '100%',\n },\n !isLandscape && {\n maxWidth: '100%',\n },\n ImageFitStyles,\n ],\n isNone && [\n classNames.imageNone,\n {\n width: 'auto',\n height: 'auto',\n },\n ],\n isNotImageFit && [\n !!width &&\n !height && {\n height: 'auto',\n width: '100%',\n },\n !width &&\n !!height && {\n height: '100%',\n width: 'auto',\n },\n !!width &&\n !!height && {\n height: '100%',\n width: '100%',\n },\n ],\n isLandscape && classNames.imageLandscape,\n !isLandscape && classNames.imagePortrait,\n !isLoaded && 'is-notLoaded',\n shouldFadeIn && 'is-fadeIn',\n isError && 'is-error',\n ],\n };\n};\n"]} |