123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- /**
- * Controller class for working with fields in the current form.
- */
- class FLBuilderSettingField {
- rootName = ''
- form = null
- field = null
- inputs = {}
- constructor( rootName, config = {} ) {
- this.rootName = rootName
- const selector = `form[data-form-id="${config.id}"]`
- this.form = FLBuilder._lightbox._node.find( selector ).get(0)
- this.field = this.form?.querySelector(`.fl-field#fl-field-${rootName}`)
- if ( ! this.field ) {
- return
- }
- this.inputs = this.getInputs( this.rootName )
- }
- getInputs() {
- const name = this.rootName
- const modes = [ 'default', 'large', 'medium', 'responsive' ]
- const inputs = {}
- if ( this.field ) {
- modes.map( mode => {
- const key = 'default' !== mode ? `${name}_${mode}` : name
- inputs[ mode ] = this.field?.querySelector(`[name="${key}"]`)
- } )
- }
- return inputs
- }
- getValues() {
- let values = {}
- for ( const key in this.inputs ) {
- values[key] = this.inputs[key] ? this.inputs[key].value : null
- }
- return values
- }
- isResponsive() {
- return !! this.field?.querySelector('.fl-field-responsive-setting')
- }
- getInheritedValue( mode = '' ) {
- const isDefaultMode = 'default' === mode || '' === mode
- let modes = []
- const values = this.getValues()
- if ( ! this.isResponsive() || isDefaultMode ) {
- return values.default
- } else {
- // Check for upstream values from the current breakpoint
- // responsive -> medium -> large -> default
- if ( 'large' === mode ) {
- if ( '' !== values.default ) {
- return values.default
- }
- } else if ( 'medium' === mode ) {
- if ( '' !== values.large ) {
- return values.large
- } else if ( '' !== values.default ) {
- return values.default
- }
- } else {
- if ( '' !== values.medium ) {
- return values.medium
- } else if ( '' !== values.large ) {
- return values.large
- } else if ( '' !== values.default ) {
- return values.default
- }
- }
- }
- }
- setValue( value, mode = '' ) {
- const input = this.inputs[mode]
- if ( input ) {
- this.setInputAndTrigger( input, value )
- }
- }
- setSubValue( subKey, value, mode = '' ) {
- const key = 'default' !== mode && '' !== mode ? `${this.rootName}_${mode}` : this.rootName
- const inputs = this.field?.querySelectorAll(`[name="${key}[${subKey}]"]`)
- if ( 0 < inputs.length ) {
- inputs.forEach( input => {
- this.setInputAndTrigger( input, value )
- } )
- }
- }
- setInputAndTrigger( input, value ) {
- if ( 'radio' === input.getAttribute('type') ) {
- if ( value === input.value ) {
- input.setAttribute( 'checked', '' )
- jQuery( input ).trigger( 'change' )
- input.dispatchEvent( new Event( 'change' ) )
- } else {
- input.removeAttribute( 'checked' )
- }
- } else {
- input.value = value
- jQuery( input ).trigger( 'change' )
- input.dispatchEvent( new Event( 'change' ) )
- }
- }
- }
|