ui-field-select.php 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <?php
  2. /**
  3. * Select field
  4. *
  5. * Setup attributes example:
  6. *
  7. * 'select_field_name' => array(
  8. * 'type' => 'select',
  9. * 'label' => esc_html__( 'Select Field', 'fl-builder' ),
  10. * 'default' => 'option-1',
  11. * 'className' => '',
  12. * 'multi-select' => false,
  13. * 'options' => array(
  14. * 'option-1' => esc_html__( 'Option 1', 'fl-builder' ),
  15. * 'option-2' => array(
  16. * 'label' => esc_html__( 'Premium Option 2', 'fl-builder' ),
  17. * 'premium' => true,
  18. * ),
  19. * 'optgroup-1' => array(
  20. * 'label' => esc_html__( 'Optgroup 1', 'fl-builder' ),
  21. * 'options' => array( *
  22. * 'option-3' => esc_html__( 'Option 3', 'fl-builder' ),
  23. * 'option-4' => array(
  24. * 'label' => esc_html__( 'Premium Option 4', 'fl-builder' ),
  25. * 'premium' => true,
  26. * ),
  27. * ),
  28. * 'premium' => false,
  29. * ),
  30. * ),
  31. * 'toggle' => array(
  32. * 'option-1' => array(
  33. * 'fields' => array( 'my_field_1', 'my_field_2' ),
  34. * 'sections' => array( 'my_section' ),
  35. * 'tabs' => array( 'my_tab' ),
  36. * ),
  37. * 'option-2' => array(),
  38. * ),
  39. * 'hide' => '', @todo Write example setup attribute value
  40. * 'trigger' => '', @todo Write example setup attribute value
  41. * );
  42. *
  43. */
  44. ?>
  45. <#
  46. var atts = '',
  47. field = data.field,
  48. name = data.name,
  49. value = data.value;
  50. // Multiselect?
  51. if ( field['multi-select'] ) {
  52. atts += ' multiple';
  53. name += '[]';
  54. }
  55. // Class
  56. if ( field.className ) {
  57. atts += ' class="' + field.className + '"';
  58. }
  59. // Toggle data
  60. if ( field.toggle ) {
  61. atts += " data-toggle='" + JSON.stringify( field.toggle ) + "'";
  62. }
  63. // Hide data
  64. if ( field.hide ) {
  65. atts += " data-hide='" + JSON.stringify( field.hide ) + "'";
  66. }
  67. // Trigger data
  68. if ( field.trigger ) {
  69. atts += " data-trigger='" + JSON.stringify( field.trigger ) + "'";
  70. }
  71. #>
  72. <select name="{{name}}"{{{atts}}}>
  73. <#
  74. // Loop through the options
  75. for ( var optionKey in field.options ) {
  76. var optionVal = field.options[ optionKey ];
  77. // Do not display premium options if using lite plugin version
  78. if ( 'object' === typeof optionVal && optionVal.premium && true === FLBuilderConfig.lite ) {
  79. continue;
  80. }
  81. if ( 'object' === typeof optionVal && optionVal.label && optionVal.options ) {
  82. #>
  83. <optgroup label="{{optionVal.label}}">
  84. <#
  85. for ( var groupKey in optionVal.options ) {
  86. var groupVal = optionVal.options[ groupKey ],
  87. selected = '';
  88. // Do not display premium optgroup options if using lite plugin version
  89. if ( 'object' === typeof groupVal && groupVal.premium && true === FLBuilderConfig.lite ) {
  90. continue;
  91. }
  92. // Is selected?
  93. if ( 'object' === typeof value && jQuery.inArray( groupKey, value ) != -1 ) {
  94. // Multi select
  95. selected = ' selected="selected"';
  96. } else if ( 'string' === typeof value && groupKey == value ) {
  97. // Single select
  98. selected = ' selected="selected"';
  99. }
  100. // Option label
  101. var label = 'object' === typeof groupVal ? groupVal.label : groupVal;
  102. // Output option
  103. #>
  104. <option value="{{groupKey}}"{{{selected}}}>{{{label}}}</option>
  105. <#
  106. }
  107. #>
  108. </optgroup>
  109. <#
  110. } else {
  111. // Is selected?
  112. var selected = '';
  113. if ( 'object' === typeof value && jQuery.inArray( optionKey, value ) != -1 ) {
  114. // Multi select
  115. selected = ' selected="selected"';
  116. } else if ( 'string' === typeof value && optionKey == value ) {
  117. // Single select
  118. selected = ' selected="selected"';
  119. }
  120. // Option label
  121. var label = 'object' === typeof optionVal ? optionVal.label : optionVal;
  122. // Output option
  123. #>
  124. <option value="{{optionKey}}"{{{selected}}}>{{{label}}}</option>
  125. <#
  126. }
  127. }
  128. #>
  129. </select>