jetformbuilder
/
modules
/
framework
/
blocks-style-manager
/
assets
/
src
/
css-engine
/
fields
/
dimensions.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
dimensions.js
100 lines
| 1 | import BaseField from "./base-field"; |
| 2 | import { isObject } from "../../helpers/utils"; |
| 3 | |
| 4 | export default class Dimensions extends BaseField { |
| 5 | |
| 6 | static getType() { |
| 7 | return 'dimensions'; |
| 8 | } |
| 9 | |
| 10 | parseVariable( variable ) { |
| 11 | |
| 12 | const prefix = variable.prefix || ''; |
| 13 | const name = variable.name || false; |
| 14 | |
| 15 | let fullName = variable.full_name || prefix + '-' + name; |
| 16 | |
| 17 | if ( ! fullName ) { |
| 18 | return ''; |
| 19 | } |
| 20 | |
| 21 | if ( variable.suffix ) { |
| 22 | fullName += variable.suffix; |
| 23 | } |
| 24 | |
| 25 | let parsedValues = this.getParsedValue(); |
| 26 | let parsedVar = ''; |
| 27 | let result = {}; |
| 28 | |
| 29 | if ( ! isObject( parsedValues ) ) { |
| 30 | return result; |
| 31 | } |
| 32 | |
| 33 | let sidesMap = [ 'top', 'right', 'bottom', 'left' ]; |
| 34 | let eachEmpty = true; |
| 35 | |
| 36 | for ( const side of sidesMap ) { |
| 37 | |
| 38 | if ( parsedValues[ side ] ) { |
| 39 | eachEmpty = false; |
| 40 | } |
| 41 | |
| 42 | parsedVar += `${ parsedValues[ side ] || 0 } `; |
| 43 | } |
| 44 | |
| 45 | if ( eachEmpty ) { |
| 46 | return result; |
| 47 | } else { |
| 48 | result[ fullName ] = parsedVar.trim(); |
| 49 | } |
| 50 | |
| 51 | return result; |
| 52 | } |
| 53 | |
| 54 | getParsedValue() { |
| 55 | |
| 56 | if ( ! this.rawValue ) { |
| 57 | return { |
| 58 | top: '', |
| 59 | right: '', |
| 60 | bottom: '', |
| 61 | left: '', |
| 62 | }; |
| 63 | } |
| 64 | |
| 65 | let value = {}; |
| 66 | |
| 67 | if ( isObject( this.rawValue ) ) { |
| 68 | value = { |
| 69 | top: this.rawValue.top || '', |
| 70 | right: this.rawValue.right || '', |
| 71 | bottom: this.rawValue.bottom || '', |
| 72 | left: this.rawValue.left || '', |
| 73 | }; |
| 74 | } else { |
| 75 | value = { |
| 76 | top: this.rawValue, |
| 77 | right: this.rawValue, |
| 78 | bottom: this.rawValue, |
| 79 | left: this.rawValue, |
| 80 | }; |
| 81 | } |
| 82 | |
| 83 | /** |
| 84 | * Check - if values has no other units provided - assume it's pixels |
| 85 | */ |
| 86 | for ( const side in value ) { |
| 87 | |
| 88 | if ( ! value[ side ] ) { |
| 89 | value[ side ] = '0'; |
| 90 | } |
| 91 | |
| 92 | if ( ! value[ side ].match( /[^\d]+$/ ) ) { |
| 93 | value[ side ] += 'px'; |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | return value; |
| 98 | } |
| 99 | } |
| 100 |