BaseCSSCompiler.js
2 years ago
BorderCSSCompiler.js
2 years ago
BorderRadiusCSSCompiler.js
2 years ago
BorderCSSCompiler.js
117 lines
| 1 | import BaseCSSCompiler from './BaseCSSCompiler'; |
| 2 | |
| 3 | const { get } = window._; |
| 4 | |
| 5 | const { |
| 6 | isEmpty, |
| 7 | } = JetFBActions; |
| 8 | |
| 9 | const SIDES = [ 'top', 'right', 'bottom', 'left' ]; |
| 10 | |
| 11 | function BorderCSSCompiler() { |
| 12 | BaseCSSCompiler.call( this ); |
| 13 | |
| 14 | this.isSupported = function ( path ) { |
| 15 | return 'border' === path.at( -1 ); |
| 16 | }; |
| 17 | |
| 18 | this.compileDeclarations = function ( |
| 19 | styleRoot, |
| 20 | declarations, |
| 21 | classNames, |
| 22 | ) { |
| 23 | const baseBorder = get( styleRoot, this.path ); |
| 24 | |
| 25 | if ( isEmpty( baseBorder ) ) { |
| 26 | return; |
| 27 | } |
| 28 | |
| 29 | const isHover = this.hasHoverPath(); |
| 30 | |
| 31 | [ 'style', 'width', 'color' ].forEach( type => { |
| 32 | const topValue = this.getSideValue( baseBorder, 'top', type ); |
| 33 | |
| 34 | if ( topValue ) { |
| 35 | declarations[ this.getTopVar( type ) ] = topValue; |
| 36 | } |
| 37 | |
| 38 | const rightValue = this.getSideValue( baseBorder, 'right', type ); |
| 39 | |
| 40 | if ( rightValue ) { |
| 41 | declarations[ this.getRightVar( type ) ] = rightValue; |
| 42 | } |
| 43 | |
| 44 | const bottomValue = this.getSideValue( baseBorder, 'bottom', type ); |
| 45 | |
| 46 | if ( bottomValue ) { |
| 47 | declarations[ this.getBottomVar( type ) ] = bottomValue; |
| 48 | } |
| 49 | |
| 50 | const leftValue = this.getSideValue( baseBorder, 'left', type ); |
| 51 | |
| 52 | if ( leftValue ) { |
| 53 | declarations[ this.getLeftVar( type ) ] = leftValue; |
| 54 | } |
| 55 | |
| 56 | if ( !isHover ) { |
| 57 | return; |
| 58 | } |
| 59 | |
| 60 | // Get non-empty values |
| 61 | const values = [ |
| 62 | topValue, |
| 63 | rightValue, |
| 64 | bottomValue, |
| 65 | leftValue, |
| 66 | ].filter( Boolean ); |
| 67 | |
| 68 | if ( values.length ) { |
| 69 | classNames.push( `has-hover-border-${ type }` ); |
| 70 | } |
| 71 | } ); |
| 72 | }; |
| 73 | |
| 74 | this.compileClassNames = () => {}; |
| 75 | } |
| 76 | |
| 77 | BorderCSSCompiler.prototype = Object.create( |
| 78 | BaseCSSCompiler.prototype, |
| 79 | ); |
| 80 | |
| 81 | BorderCSSCompiler.prototype.getTopVar = function ( type ) { |
| 82 | return `${ this.cssVar }-top-${ type }`; |
| 83 | }; |
| 84 | BorderCSSCompiler.prototype.getRightVar = function ( type ) { |
| 85 | return `${ this.cssVar }-right-${ type }`; |
| 86 | }; |
| 87 | BorderCSSCompiler.prototype.getBottomVar = function ( type ) { |
| 88 | return `${ this.cssVar }-bottom-${ type }`; |
| 89 | }; |
| 90 | BorderCSSCompiler.prototype.getLeftVar = function ( type ) { |
| 91 | return `${ this.cssVar }-left-${ type }`; |
| 92 | }; |
| 93 | |
| 94 | BorderCSSCompiler.prototype.isLinked = function ( value ) { |
| 95 | const [ firstKey ] = Object.keys( value ); |
| 96 | |
| 97 | return SIDES.includes( firstKey ); |
| 98 | }; |
| 99 | |
| 100 | BorderCSSCompiler.prototype.getSideValue = function ( value, side, property ) { |
| 101 | if ( !SIDES.includes( side ) ) { |
| 102 | return ''; |
| 103 | } |
| 104 | |
| 105 | let response = ''; |
| 106 | |
| 107 | if ( this.isLinked( value ) ) { |
| 108 | response = value[ side ]?.[ property ] ?? ''; |
| 109 | } |
| 110 | else { |
| 111 | response = value[ property ] ?? ''; |
| 112 | } |
| 113 | |
| 114 | return response.trim(); |
| 115 | }; |
| 116 | |
| 117 | export default BorderCSSCompiler; |