fl-builder-setting-field.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /**
  2. * Controller class for working with fields in the current form.
  3. */
  4. class FLBuilderSettingField {
  5. rootName = ''
  6. form = null
  7. field = null
  8. inputs = {}
  9. constructor( rootName, config = {} ) {
  10. this.rootName = rootName
  11. const selector = `form[data-form-id="${config.id}"]`
  12. this.form = FLBuilder._lightbox._node.find( selector ).get(0)
  13. this.field = this.form?.querySelector(`.fl-field#fl-field-${rootName}`)
  14. if ( ! this.field ) {
  15. return
  16. }
  17. this.inputs = this.getInputs( this.rootName )
  18. }
  19. getInputs() {
  20. const name = this.rootName
  21. const modes = [ 'default', 'large', 'medium', 'responsive' ]
  22. const inputs = {}
  23. if ( this.field ) {
  24. modes.map( mode => {
  25. const key = 'default' !== mode ? `${name}_${mode}` : name
  26. inputs[ mode ] = this.field?.querySelector(`[name="${key}"]`)
  27. } )
  28. }
  29. return inputs
  30. }
  31. getValues() {
  32. let values = {}
  33. for ( const key in this.inputs ) {
  34. values[key] = this.inputs[key] ? this.inputs[key].value : null
  35. }
  36. return values
  37. }
  38. isResponsive() {
  39. return !! this.field?.querySelector('.fl-field-responsive-setting')
  40. }
  41. getInheritedValue( mode = '' ) {
  42. const isDefaultMode = 'default' === mode || '' === mode
  43. let modes = []
  44. const values = this.getValues()
  45. if ( ! this.isResponsive() || isDefaultMode ) {
  46. return values.default
  47. } else {
  48. // Check for upstream values from the current breakpoint
  49. // responsive -> medium -> large -> default
  50. if ( 'large' === mode ) {
  51. if ( '' !== values.default ) {
  52. return values.default
  53. }
  54. } else if ( 'medium' === mode ) {
  55. if ( '' !== values.large ) {
  56. return values.large
  57. } else if ( '' !== values.default ) {
  58. return values.default
  59. }
  60. } else {
  61. if ( '' !== values.medium ) {
  62. return values.medium
  63. } else if ( '' !== values.large ) {
  64. return values.large
  65. } else if ( '' !== values.default ) {
  66. return values.default
  67. }
  68. }
  69. }
  70. }
  71. setValue( value, mode = '' ) {
  72. const input = this.inputs[mode]
  73. if ( input ) {
  74. this.setInputAndTrigger( input, value )
  75. }
  76. }
  77. setSubValue( subKey, value, mode = '' ) {
  78. const key = 'default' !== mode && '' !== mode ? `${this.rootName}_${mode}` : this.rootName
  79. const inputs = this.field?.querySelectorAll(`[name="${key}[${subKey}]"]`)
  80. if ( 0 < inputs.length ) {
  81. inputs.forEach( input => {
  82. this.setInputAndTrigger( input, value )
  83. } )
  84. }
  85. }
  86. setInputAndTrigger( input, value ) {
  87. if ( 'radio' === input.getAttribute('type') ) {
  88. if ( value === input.value ) {
  89. input.setAttribute( 'checked', '' )
  90. jQuery( input ).trigger( 'change' )
  91. input.dispatchEvent( new Event( 'change' ) )
  92. } else {
  93. input.removeAttribute( 'checked' )
  94. }
  95. } else {
  96. input.value = value
  97. jQuery( input ).trigger( 'change' )
  98. input.dispatchEvent( new Event( 'change' ) )
  99. }
  100. }
  101. }