| 1 | var DEFAULT_HEIGHT = '50%';
|
| 2 | var DEFAULT_WIDTH = 20;
|
| 3 | /**
|
| 4 | * - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.
|
| 5 | * - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,
|
| 6 | * selected, focus).
|
| 7 | * - Requires the target to have position set to relative and overflow set to hidden.
|
| 8 | *
|
| 9 | * @example
|
| 10 | * ```tsx
|
| 11 | * // Assuming the following DOM structure and the different background colors coming from
|
| 12 | * // the parent holding the content.
|
| 13 | * <div className={classNames.parent}>
|
| 14 | * <span className={classNames.content}>Overflown Content</span>
|
| 15 | * </div>
|
| 16 | * ```
|
| 17 | * ```ts
|
| 18 | * // This is how the style set would look in Component.styles.ts
|
| 19 | * const { bodyBackground } = theme.semanticColors;
|
| 20 | * const { neutralLighter } = theme.palette;
|
| 21 | *
|
| 22 | * // The second argument of getFadedOverflowStyle function is a string representing a key of
|
| 23 | * // ISemanticColors or IPalette.
|
| 24 | *
|
| 25 | * const styles = {
|
| 26 | * parent: [
|
| 27 | * backgroundColor: bodyBackground,
|
| 28 | * selectors: {
|
| 29 | * '&:hover: {
|
| 30 | * backgroundColor: neutralLighter
|
| 31 | * },
|
| 32 | * '$content:after': {
|
| 33 | * ...getFadedOverflowStyle(theme, 'bodyBackground')
|
| 34 | * },
|
| 35 | * '&:hover $content:after': {
|
| 36 | * ...getFadedOverflowStyle(theme, 'neutralLighter')
|
| 37 | * }
|
| 38 | * }
|
| 39 | * ],
|
| 40 | * content: [
|
| 41 | * width: '100%',
|
| 42 | * display: 'inline-block',
|
| 43 | * position: 'relative',
|
| 44 | * overflow: 'hidden'
|
| 45 | * ]
|
| 46 | * }
|
| 47 | * ```
|
| 48 | * @param theme - The theme object to use.
|
| 49 | * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.
|
| 50 | * Defaults to 'bodyBackground'.
|
| 51 | * @param direction - The direction of the overflow. Defaults to horizontal.
|
| 52 | * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.
|
| 53 | * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.
|
| 54 | * @returns The style object.
|
| 55 | */
|
| 56 | export function getFadedOverflowStyle(theme, color, direction, width, height) {
|
| 57 | if (color === void 0) { color = 'bodyBackground'; }
|
| 58 | if (direction === void 0) { direction = 'horizontal'; }
|
| 59 | if (width === void 0) { width = getDefaultValue('width', direction); }
|
| 60 | if (height === void 0) { height = getDefaultValue('height', direction); }
|
| 61 | // Get the color value string from the theme semanticColors or palette.
|
| 62 | var colorValue = theme.semanticColors[color] || theme.palette[color];
|
| 63 | // Get the red, green, blue values of the colorValue.
|
| 64 | var rgbColor = color2rgb(colorValue);
|
| 65 | // Apply opacity 0 to serve as a start color of the gradient.
|
| 66 | var rgba = "rgba(" + rgbColor.r + ", " + rgbColor.g + ", " + rgbColor.b + ", 0)";
|
| 67 | // Get the direction of the gradient. (mergeStyles takes care of RTL direction)
|
| 68 | var gradientDirection = direction === 'vertical' ? 'to bottom' : 'to right';
|
| 69 | return {
|
| 70 | content: '""',
|
| 71 | position: 'absolute',
|
| 72 | right: 0,
|
| 73 | bottom: 0,
|
| 74 | width: width,
|
| 75 | height: height,
|
| 76 | pointerEvents: 'none',
|
| 77 | backgroundImage: "linear-gradient(" + gradientDirection + ", " + rgba + " 0%, " + colorValue + " 100%)",
|
| 78 | };
|
| 79 | }
|
| 80 | // TODO consider moving this to a separate module along with some more color functions from OUFR/utilities.
|
| 81 | /**
|
| 82 | * Helper function to convert a string hex color to an RGB object.
|
| 83 | *
|
| 84 | * @param colorValue - Color to be converted from hex to rgba.
|
| 85 | */
|
| 86 | function color2rgb(colorValue) {
|
| 87 | if (colorValue[0] === '#') {
|
| 88 | // If it's a hex code
|
| 89 | return {
|
| 90 | r: parseInt(colorValue.slice(1, 3), 16),
|
| 91 | g: parseInt(colorValue.slice(3, 5), 16),
|
| 92 | b: parseInt(colorValue.slice(5, 7), 16),
|
| 93 | };
|
| 94 | }
|
| 95 | else if (colorValue.indexOf('rgba(') === 0) {
|
| 96 | // If it's an rgba color string
|
| 97 | colorValue = colorValue.match(/rgba\(([^)]+)\)/)[1];
|
| 98 | var parts = colorValue.split(/ *, */).map(Number);
|
| 99 | return {
|
| 100 | r: parts[0],
|
| 101 | g: parts[1],
|
| 102 | b: parts[2],
|
| 103 | };
|
| 104 | }
|
| 105 | // The only remaining possibility is transparent.
|
| 106 | return {
|
| 107 | r: 255,
|
| 108 | g: 255,
|
| 109 | b: 255,
|
| 110 | };
|
| 111 | }
|
| 112 | /**
|
| 113 | * Helper function to get the default values for parameters of main function.
|
| 114 | *
|
| 115 | * @param style - Which style to get the default value for.
|
| 116 | * @param direction - What direction to take into consideration.
|
| 117 | */
|
| 118 | function getDefaultValue(style, direction) {
|
| 119 | if (style === 'width') {
|
| 120 | return direction === 'horizontal' ? DEFAULT_WIDTH : '100%';
|
| 121 | }
|
| 122 | else {
|
| 123 | return direction === 'vertical' ? DEFAULT_HEIGHT : '100%';
|
| 124 | }
|
| 125 | }
|
| 126 | //# sourceMappingURL=getFadedOverflowStyle.js.map |
| \ | No newline at end of file |