Create Elementor Custom Control. Image selector control

custom-control-init.php

<?php
namespace ElementorControls;
if (!defined('ABSPATH')) exit; // Exit if accessed directly

class Elementor_Custom_Controls {

	public function includes() {
		require_once(plugin_dir_path(__FILE__).'inc/elementor/image-selector-control.php');
	}

	public function register_controls() {
		$this->includes();
		$controls_manager = \Elementor\Plugin::$instance->controls_manager;
		$controls_manager->register_control(\Elementor\CustomControl\ImageSelector_Control::ImageSelector, new \Elementor\CustomControl\ImageSelector_Control());
	}

	public function __construct() {
		add_action('elementor/controls/controls_registered', [$this, 'register_controls']);
	}

}
new Elementor_Custom_Controls();

image-selector-control.php

<?php
namespace Elementor\CustomControl;

use \Elementor\Base_Data_Control;

class ImageSelector_Control extends Base_Data_Control {


	const ImageSelector = 'image_selector';

	/**
	 * Set control type.
	 */
	public function get_type() {
		return self::ImageSelector;
	}

	/**
	 * Enqueue control scripts and styles.
	 */
	public function enqueue() {
		$url = plugin_dir_path(__FILE__).'/inc/elementor/assets/css/';
		// Styles
		wp_enqueue_style('image-selector', $url.'image-selector.css', array(), '');
	}

	/**
	 * Set default settings
	 */
	protected function get_default_settings() {
		return [
			'label_block' => true,
			'toggle' => true,
			'options' => [],
		];
	}
	
	/**
	 * control field markup
	 */
	public function content_template() {
		$control_uid = $this->get_control_uid('{{ value }}');
		?>
		<div class="elementor-control-field">
			<label class="elementor-control-title">{{{ data.label }}}</label>
			<div class="elementor-control-image-selector-wrapper">
				<# _.each( data.options, function( options, value ) { #>
				<input id="<?php echo $control_uid; ?>" type="radio" name="elementor-image-selector-{{ data.name }}-{{ data._cid }}" value="{{ value }}" data-setting="{{ data.name }}">
				<label class="elementor-image-selector-label tooltip-target" for="<?php echo $control_uid; ?>" data-tooltip="{{ options.title }}" title="{{ options.title }}">
					<img src="{{ options.url }}" alt="{{ options.title }}">
					<span class="elementor-screen-only">{{{ options.title }}}</span>
				</label>
				<# } ); #>
			</div>
		</div>
		<# if ( data.description ) { #>
		<div class="elementor-control-field-description">{{{ data.description }}}</div>
		<# } #>
		<?php
	}

}

image-selector.css

.elementor-control-image-selector-wrapper input[type="radio"] {
	display: none;
}
.elementor-label-block .elementor-control-image-selector-wrapper{
	width: 100%;
	margin-top: 10px;
}
.elementor-control-image-selector-wrapper .elementor-image-selector-label {
	display: inline-block;
	border: 3px solid transparent;
	cursor: pointer;
	overflow: hidden;
}
.elementor-control-image-selector-wrapper input:checked+.elementor-image-selector-label {
	border: 3px solid #a4afb7;
}

widget.php

<?php

namespace ElementorWidgets\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) exit; // Exit if accessed directly

/**
 * Elementor Custom Widget Test
 */
class Custom_Widget extends Widget_Base {

	public function get_name() {
		return 'test_addon';
	}

	public function get_title() {
		return __('Test Box', 'text-domain');
	}

	public function get_categories() {
		return ['general'];
	}

	/**
	 * Register the widget controls.
	 */
	protected function _register_controls() {
		$this->start_controls_section(
			'page_layout_section',
			[
				'label' => __('Page Layout', 'text-domain'),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		//Image selector
		$this->add_control(
			'page_layout',
			[
				'label' => esc_html__('Layout', 'text-domain'),
				'type' => \Elementor\CustomControl\ImageSelector_Control::ImageSelector,
				'options' => [
					'left-sidebar' => [
						'title' => esc_html__('Left', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/left-sidebar.png',
					],
					'right-sidebar' => [
						'title' => esc_html__('Right', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/right-sidebar.png',
					],
					'no-sidebar' => [
						'title' => esc_html__('No Sidebar', 'text-domain'),
						'url' => 'http://localhost/test/wp-content/themes/test/assets/images/no-sidebar.png',
					],
				],
				'default' => 'right-sidebar',
			]
		);
		$this->end_controls_section();

	}
}

That's ok. Can you help me on triggering input or saving selected data? On Fri, Jun 11, 2021, 7:52 PM Iqbal Hossain Rony ***@***.***> wrote:

…

***@***.**** commented on this gist. ------------------------------ I tried from elementor docs as well as select2. Triggering input is not working as it works in other controls for saving data. Can you provide me the project you worked on? … <#m_2569836163839841907_> On Fri, Jun 11, 2021, 7:25 PM Iqbal Hossain Rony *@*.*> wrote: @.** commented on this gist. ------------------------------ Can anyone help me? I am building a custom control with Select2. I have been able to select an option using ajax but when I refresh the page the value is not showing in select2. How can I let users know what was the value saved after updating when they edit in future? if you study the Select2 js code in elementor & also Select2 js library documentation it might help you. I did this type of work on a project. the process is pretty complex to do in elementor. — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://gist.github.com/4372a12f994c3215041680e0075d083f#gistcomment-3776954, or unsubscribe https://github.com/notifications/unsubscribe-auth/APXSF333VEMWXMR27ZVVFDTTSIG4FANCNFSM4XUOFZ4Q . I am not permitted to share those codes. plz, don't mind. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/4372a12f994c3215041680e0075d083f#gistcomment-3776981>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APXSF345QOVP5B2JNOOBMXTTSIKCXANCNFSM4XUOFZ4Q> .

Or can you share me the actual code which saves the data like onChange or trigger. I am really confused and tried many solutions from docs as well as some forums.

Or can you share me the actual code which saves the data like onChange or trigger. I am really confused and tried many solutions from docs as well as some forums.

you can see the Elementor pro's post widget & their custom query system's code. They modify select2 for on-click ajax requests. I got help from them.

Does anyone know how to copy a value from one control to another? I want to assign a value of 'control1' to 'control2' when 'control1' is changed.

@iqbalrony can you see my issue & code and suggest anything to save to select2 or for alternative saving selected value to input type text?
elementor/elementor#15309