| 1 |
function generateBackgroundCSS ( backgroundAttributes ) { |
| 2 |
|
| 3 |
const { |
| 4 |
backgroundType, |
| 5 |
backgroundImage, |
| 6 |
backgroundColor, |
| 7 |
gradientValue, |
| 8 |
backgroundRepeat, |
| 9 |
backgroundPosition, |
| 10 |
backgroundSize, |
| 11 |
backgroundAttachment, |
| 12 |
backgroundCustomSize, |
| 13 |
backgroundCustomSizeType, |
| 14 |
backgroundImageColor, |
| 15 |
overlayType, |
| 16 |
backgroundVideoColor, |
| 17 |
backgroundVideo, |
| 18 |
customPosition, |
| 19 |
xPosition, |
| 20 |
xPositionType, |
| 21 |
yPosition, |
| 22 |
yPositionType, |
| 23 |
} = backgroundAttributes; |
| 24 |
|
| 25 |
const bgCSS = {}; |
| 26 |
|
| 27 |
if( undefined !== backgroundType && '' !== backgroundType ) { |
| 28 |
|
| 29 |
if ( 'color' === backgroundType ) { |
| 30 |
|
| 31 |
if ( backgroundImage && '' !== backgroundImage && '' !== backgroundColor && undefined !== backgroundColor && 'unset' !== backgroundColor && backgroundImage?.url ) { |
| 32 |
bgCSS['background-image'] = 'linear-gradient(to right, ' + backgroundColor + ', ' + backgroundColor + '), url(' + backgroundImage?.url + ');'; |
| 33 |
} else if ( undefined === backgroundImage || '' === backgroundImage || 'unset' === backgroundImage ) { |
| 34 |
bgCSS['background-color'] = backgroundColor; |
| 35 |
} |
| 36 |
} else if ( 'image' === backgroundType ) { |
| 37 |
|
| 38 |
if ( 'color' === overlayType && '' !== backgroundImage && '' !== backgroundImageColor && undefined !== backgroundImageColor && 'unset' !== backgroundImageColor && backgroundImage?.url ) { |
| 39 |
|
| 40 |
bgCSS['background-image'] = 'linear-gradient(to right, ' + backgroundImageColor + ', ' + backgroundImageColor + '), url(' + backgroundImage?.url + ');'; |
| 41 |
} |
| 42 |
if ( 'gradient' === overlayType && '' !== backgroundImage && backgroundImage && gradientValue && backgroundImage?.url ) { |
| 43 |
bgCSS['background-image'] = gradientValue + ', url(' + backgroundImage?.url + ');'; |
| 44 |
} |
| 45 |
if ( '' !== backgroundImage && backgroundImage && 'none' === overlayType && backgroundImage?.url ) { |
| 46 |
bgCSS['background-image'] = 'url(' + backgroundImage?.url + ');'; |
| 47 |
} |
| 48 |
} else if ( 'gradient' === backgroundType ) { |
| 49 |
if ( '' !== gradientValue && 'unset' !== gradientValue ) { |
| 50 |
bgCSS.background = gradientValue; |
| 51 |
} |
| 52 |
} else if ( 'video' === backgroundType ) { |
| 53 |
if ( 'color' === overlayType && '' !== backgroundVideo && '' !== backgroundVideoColor && undefined !== backgroundVideoColor && 'unset' !== backgroundVideoColor ) { |
| 54 |
|
| 55 |
bgCSS.background = backgroundVideoColor; |
| 56 |
} |
| 57 |
if ( 'gradient' === overlayType && '' !== backgroundVideo && backgroundVideo && gradientValue ) { |
| 58 |
bgCSS['background-image'] = gradientValue + ';'; |
| 59 |
} |
| 60 |
} |
| 61 |
|
| 62 |
let backgroundSizeValue = backgroundSize; |
| 63 |
|
| 64 |
if ( 'custom' === backgroundSize ) { |
| 65 |
backgroundSizeValue = backgroundCustomSize + backgroundCustomSizeType; |
| 66 |
} |
| 67 |
|
| 68 |
if ( '' !== backgroundImage ) { |
| 69 |
|
| 70 |
bgCSS['background-repeat'] = backgroundRepeat; |
| 71 |
|
| 72 |
if( 'custom' !== customPosition && backgroundPosition?.x && backgroundPosition?.y ) { |
| 73 |
|
| 74 |
bgCSS['background-position'] = `${ backgroundPosition?.x * 100 }% ${ backgroundPosition?.y * 100 }%`; |
| 75 |
|
| 76 |
} else if ( 'custom' === customPosition && xPosition && yPosition ) { |
| 77 |
|
| 78 |
bgCSS['background-position'] = `${ xPosition }${ xPositionType } ${ yPosition }${ yPositionType }`; |
| 79 |
} |
| 80 |
|
| 81 |
bgCSS['background-size'] = backgroundSizeValue; |
| 82 |
bgCSS['background-attachment'] = backgroundAttachment; |
| 83 |
} |
| 84 |
} |
| 85 |
|
| 86 |
return bgCSS; |
| 87 |
} |
| 88 |
|
| 89 |
export default generateBackgroundCSS; |
| 90 |
|
