Last active
December 29, 2022 09:36
-
-
Save iqbalrony/4372a12f994c3215041680e0075d083f to your computer and use it in GitHub Desktop.
Create Elementor Custom Control. Image selector control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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(); | |
| } | |
| } |
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 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.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.