| 1 |
|
| 2 |
const generateBorderCSS = ( attributes, prefix, deviceType = 'desktop' ) => { |
| 3 |
const borderCSS = {} |
| 4 |
const borderStyle = attributes[prefix + 'BorderStyle']; |
| 5 |
const borderColor = attributes[prefix + 'BorderColor']; |
| 6 |
|
| 7 |
const borderTopWidth = ! isNaN( attributes[prefix + 'BorderTopWidth'] ) ? attributes[prefix + 'BorderTopWidth']+'px' : '' ; |
| 8 |
const borderRightWidth = ! isNaN( attributes[prefix + 'BorderRightWidth'] ) ? attributes[prefix + 'BorderRightWidth']+'px' : '' ; |
| 9 |
const borderBottomWidth = ! isNaN( attributes[prefix + 'BorderBottomWidth'] ) ? attributes[prefix + 'BorderBottomWidth']+'px' : '' ; |
| 10 |
const borderLeftWidth = ! isNaN( attributes[prefix + 'BorderLeftWidth'] ) ? attributes[prefix + 'BorderLeftWidth']+'px' : '' ; |
| 11 |
|
| 12 |
const borderTopWidthMobile = ! isNaN( attributes[prefix + 'BorderTopWidthMobile'] ) ? attributes[prefix + 'BorderTopWidthMobile']+'px' : '' ; |
| 13 |
const borderRightWidthMobile = ! isNaN( attributes[prefix + 'BorderRightWidthMobile'] ) ? attributes[prefix + 'BorderRightWidthMobile']+'px' : '' ; |
| 14 |
const borderBottomWidthMobile = ! isNaN( attributes[prefix + 'BorderBottomWidthMobile'] ) ? attributes[prefix + 'BorderBottomWidthMobile']+'px' : '' ; |
| 15 |
const borderLeftWidthMobile = ! isNaN( attributes[prefix + 'BorderLeftWidthMobile'] ) ? attributes[prefix + 'BorderLeftWidthMobile']+'px' : '' ; |
| 16 |
|
| 17 |
const borderTopWidthTablet = ! isNaN( attributes[prefix + 'BorderTopWidthTablet'] ) ? attributes[prefix + 'BorderTopWidthTablet']+'px' : '' ; |
| 18 |
const borderRightWidthTablet = ! isNaN( attributes[prefix + 'BorderRightWidthTablet'] ) ? attributes[prefix + 'BorderRightWidthTablet']+'px' : '' ; |
| 19 |
const borderBottomWidthTablet = ! isNaN( attributes[prefix + 'BorderBottomWidthTablet'] ) ? attributes[prefix + 'BorderBottomWidthTablet']+'px' : '' ; |
| 20 |
const borderLeftWidthTablet = ! isNaN( attributes[prefix + 'BorderLeftWidthTablet'] ) ? attributes[prefix + 'BorderLeftWidthTablet']+'px' : '' ; |
| 21 |
|
| 22 |
const borderRadiusUnit = ( attributes[prefix + 'BorderRadiusUnit'] ) ? attributes[prefix + 'BorderRadiusUnit'] : 'px'; |
| 23 |
const borderRadiusUnitTablet = ( attributes[prefix + 'BorderRadiusUnitTablet'] ) ? attributes[prefix + 'BorderRadiusUnitTablet'] : 'px'; |
| 24 |
const borderRadiusUnitMobile = ( attributes[prefix + 'BorderRadiusUnitMobile'] ) ? attributes[prefix + 'BorderRadiusUnitMobile'] : 'px'; |
| 25 |
|
| 26 |
const borderTopLeftRadius = ! isNaN( attributes[prefix + 'BorderTopLeftRadius'] ) ? attributes[prefix + 'BorderTopLeftRadius']+borderRadiusUnit : '' ; |
| 27 |
const borderTopRightRadius = ! isNaN( attributes[prefix + 'BorderTopRightRadius'] ) ? attributes[prefix + 'BorderTopRightRadius']+borderRadiusUnit : '' ; |
| 28 |
const borderBottomRightRadius = ! isNaN( attributes[prefix + 'BorderBottomRightRadius'] ) ? attributes[prefix + 'BorderBottomRightRadius']+borderRadiusUnit : '' ; |
| 29 |
const borderBottomLeftRadius = ! isNaN( attributes[prefix + 'BorderBottomLeftRadius'] ) ? attributes[prefix + 'BorderBottomLeftRadius']+borderRadiusUnit : '' ; |
| 30 |
|
| 31 |
const borderTopLeftRadiusMobile = ! isNaN( attributes[prefix + 'BorderTopLeftRadiusMobile'] ) ? attributes[prefix + 'BorderTopLeftRadiusMobile']+borderRadiusUnitMobile : '' ; |
| 32 |
const borderTopRightRadiusMobile = ! isNaN( attributes[prefix + 'BorderTopRightRadiusMobile'] ) ? attributes[prefix + 'BorderTopRightRadiusMobile']+borderRadiusUnitMobile : '' ; |
| 33 |
const borderBottomRightRadiusMobile = ! isNaN( attributes[prefix + 'BorderBottomRightRadiusMobile'] ) ? attributes[prefix + 'BorderBottomRightRadiusMobile']+borderRadiusUnitMobile : '' ; |
| 34 |
const borderBottomLeftRadiusMobile = ! isNaN( attributes[prefix + 'BorderBottomLeftRadiusMobile'] ) ? attributes[prefix + 'BorderBottomLeftRadiusMobile']+borderRadiusUnitMobile : '' ; |
| 35 |
|
| 36 |
const borderTopLeftRadiusTablet = ! isNaN( attributes[prefix + 'BorderTopLeftRadiusTablet'] ) ? attributes[prefix + 'BorderTopLeftRadiusTablet']+borderRadiusUnitTablet : '' ; |
| 37 |
const borderTopRightRadiusTablet = ! isNaN( attributes[prefix + 'BorderTopRightRadiusTablet'] ) ? attributes[prefix + 'BorderTopRightRadiusTablet']+borderRadiusUnitTablet : '' ; |
| 38 |
const borderBottomRightRadiusTablet = ! isNaN( attributes[prefix + 'BorderBottomRightRadiusTablet'] ) ? attributes[prefix + 'BorderBottomRightRadiusTablet']+borderRadiusUnitTablet : '' ; |
| 39 |
const borderBottomLeftRadiusTablet = ! isNaN( attributes[prefix + 'BorderBottomLeftRadiusTablet'] ) ? attributes[prefix + 'BorderBottomLeftRadiusTablet']+borderRadiusUnitTablet : '' ; |
| 40 |
|
| 41 |
if( 'tablet' === deviceType ) { |
| 42 |
if( 'none' !== attributes[prefix + 'BorderStyle'] && '' !== attributes[prefix + 'BorderStyle'] ){ |
| 43 |
borderCSS['border-top-width'] = borderTopWidthTablet ? borderTopWidthTablet : borderTopWidth; |
| 44 |
borderCSS['border-right-width'] = borderRightWidthTablet ? borderRightWidthTablet : borderRightWidth; |
| 45 |
borderCSS['border-bottom-width'] = borderBottomWidthTablet ? borderBottomWidthTablet : borderBottomWidth; |
| 46 |
borderCSS['border-left-width'] = borderLeftWidthTablet ? borderLeftWidthTablet : borderLeftWidth; |
| 47 |
} |
| 48 |
borderCSS['border-top-left-radius'] = borderTopLeftRadiusTablet ? borderTopLeftRadiusTablet : borderTopLeftRadius; |
| 49 |
borderCSS['border-top-right-radius'] = borderTopRightRadiusTablet ? borderTopRightRadiusTablet : borderTopRightRadius; |
| 50 |
borderCSS['border-bottom-right-radius'] = borderBottomRightRadiusTablet ? borderBottomRightRadiusTablet : borderBottomRightRadius; |
| 51 |
borderCSS['border-bottom-left-radius'] = borderBottomLeftRadiusTablet ? borderBottomLeftRadiusTablet : borderBottomLeftRadius; |
| 52 |
|
| 53 |
} else if( 'mobile' === deviceType ) { |
| 54 |
if( 'none' !== attributes[prefix + 'BorderStyle'] && '' !== attributes[prefix + 'BorderStyle'] ){ |
| 55 |
borderCSS['border-top-width'] = borderTopWidthMobile ? borderTopWidthMobile : borderTopWidthTablet; |
| 56 |
borderCSS['border-right-width'] = borderRightWidthMobile ? borderRightWidthMobile : borderRightWidthTablet; |
| 57 |
borderCSS['border-bottom-width'] = borderBottomWidthMobile ? borderBottomWidthMobile : borderBottomWidthTablet; |
| 58 |
borderCSS['border-left-width'] = borderLeftWidthMobile ? borderLeftWidthMobile : borderLeftWidthTablet; |
| 59 |
} |
| 60 |
borderCSS['border-top-left-radius'] = borderTopLeftRadiusMobile ? borderTopLeftRadiusMobile : borderTopLeftRadiusTablet; |
| 61 |
borderCSS['border-top-right-radius'] = borderTopRightRadiusMobile ? borderTopRightRadiusMobile : borderTopRightRadiusTablet; |
| 62 |
borderCSS['border-bottom-right-radius'] = borderBottomRightRadiusMobile ? borderBottomRightRadiusMobile : borderBottomRightRadiusTablet; |
| 63 |
borderCSS['border-bottom-left-radius'] = borderBottomLeftRadiusMobile ? borderBottomLeftRadiusMobile : borderBottomLeftRadiusTablet; |
| 64 |
|
| 65 |
} else { |
| 66 |
if( 'none' !== attributes[prefix + 'BorderStyle'] && '' !== attributes[prefix + 'BorderStyle'] ){ |
| 67 |
borderCSS['border-top-width'] = borderTopWidth; |
| 68 |
borderCSS['border-right-width'] = borderRightWidth; |
| 69 |
borderCSS['border-bottom-width'] = borderBottomWidth; |
| 70 |
borderCSS['border-left-width'] = borderLeftWidth; |
| 71 |
borderCSS['border-color'] = borderColor; |
| 72 |
} |
| 73 |
borderCSS['border-style'] = borderStyle; |
| 74 |
borderCSS['border-top-left-radius'] = borderTopLeftRadius; |
| 75 |
borderCSS['border-top-right-radius'] = borderTopRightRadius; |
| 76 |
borderCSS['border-bottom-right-radius'] = borderBottomRightRadius; |
| 77 |
borderCSS['border-bottom-left-radius'] = borderBottomLeftRadius; |
| 78 |
} |
| 79 |
return borderCSS; |
| 80 |
}; |
| 81 |
|
| 82 |
export default generateBorderCSS; |
| 83 |
|
