Control_Select2()
Elementor select2 control.
Description
A base control for creating select2 control. Displays a select box control based on select2 jQuery plugin @see https://select2.github.io/ . It accepts an array in which the key
is the value and the value
is the option name. Set multiple
to true
to allow multiple value selection.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Methods
- content_template — Render select2 control output in the editor.
- get_default_settings — Get select2 control default settings.
- get_type — Get select2 control type.
Source
includes/controls/select2.php
class Control_Select2 extends Base_Data_Control { /** * Retrieve select2 control type. * * @since 1.0.0 * @access public * * @return string Control type. */ public function get_type() { return 'select2'; } /** * Retrieve select2 control default settings. * * Get the default settings of the select2 control. Used to return the * default settings while initializing the select2 control. * * @since 1.0.0 * @access protected * * @return array Control default settings. */ protected function get_default_settings() { return [ 'multiple' => false, ]; } /** * Render select2 control output in the editor. * * Used to generate the control HTML in the editor using Underscore JS * template. The variables for the class are available using `data` JS * object. * * @since 1.0.0 * @access public */ public function content_template() { $control_uid = $this->get_control_uid(); ?> <div class="elementor-control-field"> <label for="<?php echo $control_uid; ?>" class="elementor-control-title">{{{ data.label }}}</label> <div class="elementor-control-input-wrapper"> <# var multiple = ( data.multiple ) ? 'multiple' : ''; #> <select id="<?php echo $control_uid; ?>" class="elementor-select2" type="select2" {{ multiple }} data-setting="{{ data.name }}"> <# _.each( data.options, function( option_title, option_value ) { var value = data.controlValue; if ( typeof value == 'string' ) { var selected = ( option_value === value ) ? 'selected' : ''; } else if ( null !== value ) { var value = _.values( value ); var selected = ( -1 !== value.indexOf( option_value ) ) ? 'selected' : ''; } #> <option {{ selected }} value="{{ option_value }}">{{{ option_title }}}</option> <# } ); #> </select> </div> </div> <# if ( data.description ) { #> <div class="elementor-control-field-description">{{{ data.description }}}</div> <# } #> <?php } }