select2.php 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor select2 control.
  8. *
  9. * A base control for creating select2 control. Displays a select box control
  10. * based on select2 jQuery plugin @see https://select2.github.io/ .
  11. * It accepts an array in which the `key` is the value and the `value` is the
  12. * option name. Set `multiple` to `true` to allow multiple value selection.
  13. *
  14. * @since 1.0.0
  15. */
  16. class Control_Select2 extends Base_Data_Control {
  17. /**
  18. * Get select2 control type.
  19. *
  20. * Retrieve the control type, in this case `select2`.
  21. *
  22. * @since 1.0.0
  23. * @access public
  24. *
  25. * @return string Control type.
  26. */
  27. public function get_type() {
  28. return 'select2';
  29. }
  30. /**
  31. * Get select2 control default settings.
  32. *
  33. * Retrieve the default settings of the select2 control. Used to return the
  34. * default settings while initializing the select2 control.
  35. *
  36. * @since 1.8.0
  37. * @access protected
  38. *
  39. * @return array Control default settings.
  40. */
  41. protected function get_default_settings() {
  42. return [
  43. 'options' => [],
  44. 'multiple' => false,
  45. 'select2options' => [],
  46. ];
  47. }
  48. /**
  49. * Render select2 control output in the editor.
  50. *
  51. * Used to generate the control HTML in the editor using Underscore JS
  52. * template. The variables for the class are available using `data` JS
  53. * object.
  54. *
  55. * @since 1.0.0
  56. * @access public
  57. */
  58. public function content_template() {
  59. $control_uid = $this->get_control_uid();
  60. ?>
  61. <div class="elementor-control-field">
  62. <label for="<?php echo $control_uid; ?>" class="elementor-control-title">{{{ data.label }}}</label>
  63. <div class="elementor-control-input-wrapper">
  64. <# var multiple = ( data.multiple ) ? 'multiple' : ''; #>
  65. <select id="<?php echo $control_uid; ?>" class="elementor-select2" type="select2" {{ multiple }} data-setting="{{ data.name }}">
  66. <# _.each( data.options, function( option_title, option_value ) {
  67. var value = data.controlValue;
  68. if ( typeof value == 'string' ) {
  69. var selected = ( option_value === value ) ? 'selected' : '';
  70. } else if ( null !== value ) {
  71. var value = _.values( value );
  72. var selected = ( -1 !== value.indexOf( option_value ) ) ? 'selected' : '';
  73. }
  74. #>
  75. <option {{ selected }} value="{{ option_value }}">{{{ option_title }}}</option>
  76. <# } ); #>
  77. </select>
  78. </div>
  79. </div>
  80. <# if ( data.description ) { #>
  81. <div class="elementor-control-field-description">{{{ data.description }}}</div>
  82. <# } #>
  83. <?php
  84. }
  85. }