jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
css-engine
/
fields
/
base-field.js
jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
css-engine
/
fields
Last commit date
base-field.js
3 months ago
border.js
3 months ago
choose.js
3 months ago
color.js
3 months ago
dimensions.js
3 months ago
index.js
3 months ago
range.js
3 months ago
toggle.js
3 months ago
typography.js
3 months ago
base-field.js
128 lines
| 1 | export default class BaseField { |
| 2 | |
| 3 | static getType() { |
| 4 | return 'base-field'; |
| 5 | } |
| 6 | |
| 7 | constructor( uniqueClassName, rawValue ) { |
| 8 | this.uniqueClassName = uniqueClassName; |
| 9 | this.rawValue = rawValue; |
| 10 | } |
| 11 | |
| 12 | getSelectorMacros() { |
| 13 | return { |
| 14 | wrapper: 'body .is-root-container .' + this.uniqueClassName, |
| 15 | id: this.uniqueClassName |
| 16 | }; |
| 17 | } |
| 18 | |
| 19 | parseSelector( selector, props ) { |
| 20 | |
| 21 | const macros = this.getSelectorMacros(); |
| 22 | |
| 23 | selector = this.replaceData( selector, macros ); |
| 24 | props = this.getParsedProps( props ); |
| 25 | |
| 26 | let css = ` ${ selector } { ${ props } }`; |
| 27 | |
| 28 | return css; |
| 29 | } |
| 30 | |
| 31 | getParsedProps( props ) { |
| 32 | const values = this.getParsedValue(); |
| 33 | return this.replaceData( props, values ); |
| 34 | } |
| 35 | |
| 36 | /** |
| 37 | * Replace in the give string macros with an actual values from the data. |
| 38 | * |
| 39 | * Expected formats: |
| 40 | * - string: {{ WRAPPER }} .my-class |
| 41 | * - data: { 'wrapper': '.csm-block-unique-class' } |
| 42 | */ |
| 43 | replaceData( string, data ) { |
| 44 | |
| 45 | return string.replace( /{{\s*([\w-]+)\s*}}/g, ( match, p1 ) => { |
| 46 | p1 = p1.toLowerCase(); |
| 47 | if ( undefined !== data[ p1 ] ) { |
| 48 | return data[ p1 ]; |
| 49 | } else { |
| 50 | return match; |
| 51 | } |
| 52 | } ); |
| 53 | } |
| 54 | |
| 55 | getParsedValue() { |
| 56 | return { |
| 57 | 'value': this.rawValue, |
| 58 | }; |
| 59 | } |
| 60 | |
| 61 | cssVarValueFormat() { |
| 62 | return '{{VALUE}}'; |
| 63 | } |
| 64 | |
| 65 | isValidValueForVar( value, key ) { |
| 66 | |
| 67 | if ( 'inherit' === value || 'initial' === value || 'unset' === value ) { |
| 68 | return false; |
| 69 | } |
| 70 | |
| 71 | if ( 'undefined' === typeof value || null === value ) { |
| 72 | return false; |
| 73 | } |
| 74 | |
| 75 | if ( 'object' === typeof value && ! Object.keys( value ).length ) { |
| 76 | return false; |
| 77 | } |
| 78 | |
| 79 | if ( 'string' === typeof value && ! value.trim() ) { |
| 80 | return false; |
| 81 | } |
| 82 | |
| 83 | if ( 'number' === typeof value && isNaN( value ) ) { |
| 84 | return false; |
| 85 | } |
| 86 | |
| 87 | if ( 'function' === typeof value ) { |
| 88 | return false; |
| 89 | } |
| 90 | |
| 91 | return true; |
| 92 | } |
| 93 | |
| 94 | parseVariable( variable ) { |
| 95 | |
| 96 | const prefix = variable.prefix || ''; |
| 97 | const name = variable.name || false; |
| 98 | |
| 99 | let fullName = variable.full_name || prefix + '-' + name; |
| 100 | |
| 101 | if ( ! fullName ) { |
| 102 | return ''; |
| 103 | } |
| 104 | |
| 105 | if ( variable.suffix ) { |
| 106 | fullName += variable.suffix; |
| 107 | } |
| 108 | |
| 109 | let parsedValues = this.getParsedValue(); |
| 110 | let result = {}; |
| 111 | |
| 112 | if ( parsedValues.value ) { |
| 113 | result[ fullName ] = parsedValues.value; |
| 114 | } else { |
| 115 | |
| 116 | for ( const key in parsedValues ) { |
| 117 | if ( |
| 118 | parsedValues.hasOwnProperty( key ) |
| 119 | && this.isValidValueForVar( parsedValues[ key ], key ) |
| 120 | ) { |
| 121 | result[ fullName + '__' + key ] = parsedValues[ key ]; |
| 122 | } |
| 123 | } |
| 124 | } |
| 125 | |
| 126 | return result; |
| 127 | } |
| 128 | } |