index.js
40 lines
| 1 | import hexToRGBA from '../hex-to-rgba'; |
| 2 | |
| 3 | export default function getBackgroundImageCSS( attributes ) { |
| 4 | let backgroundImage = false, |
| 5 | gradientColorStopOneValue = '', |
| 6 | gradientColorStopTwoValue = ''; |
| 7 | |
| 8 | const backgroundColor = hexToRGBA( attributes.backgroundColor, attributes.backgroundColorOpacity ); |
| 9 | const gradientColorOne = hexToRGBA( attributes.gradientColorOne, attributes.gradientColorOneOpacity ); |
| 10 | const gradientColorTwo = hexToRGBA( attributes.gradientColorTwo, attributes.gradientColorTwoOpacity ); |
| 11 | |
| 12 | if ( attributes.gradient ) { |
| 13 | if ( gradientColorOne && '' !== attributes.gradientColorStopOne ) { |
| 14 | gradientColorStopOneValue = ' ' + attributes.gradientColorStopOne + '%'; |
| 15 | } |
| 16 | |
| 17 | if ( gradientColorTwo && '' !== attributes.gradientColorStopTwo ) { |
| 18 | gradientColorStopTwoValue = ' ' + attributes.gradientColorStopTwo + '%'; |
| 19 | } |
| 20 | } |
| 21 | |
| 22 | if ( attributes.bgImage && 'element' === attributes.bgOptions.selector ) { |
| 23 | const url = attributes.bgImage.image.url; |
| 24 | |
| 25 | if ( ( backgroundColor || attributes.gradient ) && typeof attributes.bgOptions.overlay !== 'undefined' && attributes.bgOptions.overlay ) { |
| 26 | if ( attributes.gradient ) { |
| 27 | backgroundImage = 'linear-gradient(' + attributes.gradientDirection + 'deg, ' + gradientColorOne + gradientColorStopOneValue + ', ' + gradientColorTwo + gradientColorStopTwoValue + '), url(' + url + ')'; |
| 28 | } else if ( backgroundColor ) { |
| 29 | backgroundImage = 'linear-gradient(0deg, ' + backgroundColor + ', ' + backgroundColor + '), url(' + url + ')'; |
| 30 | } |
| 31 | } else { |
| 32 | backgroundImage = 'url(' + url + ')'; |
| 33 | } |
| 34 | } else if ( attributes.gradient ) { |
| 35 | backgroundImage = 'linear-gradient(' + attributes.gradientDirection + 'deg, ' + gradientColorOne + gradientColorStopOneValue + ', ' + gradientColorTwo + gradientColorStopTwoValue + ')'; |
| 36 | } |
| 37 | |
| 38 | return backgroundImage; |
| 39 | } |
| 40 |