-
-
Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
| <?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(); |
| <?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 | |
| } | |
| } |
| .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; | |
| } |
| <?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(); | |
| } | |
| } |
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.
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?
…
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.
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
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?