elementor / includes / widgets / traits / button-trait.php

button-trait.php in Elementor Website Builder – more than just a page builder 3.7.2, at includes/widgets/traits/button-trait.php

565 lines 16.1 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Includes\Widgets\Traits;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
6	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
7	use Elementor\Group_Control_Background;
8	use Elementor\Group_Control_Border;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Group_Control_Text_Shadow;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Icons_Manager;
13	use Elementor\Widget_Base;
14
15	if ( ! defined( 'ABSPATH' ) ) {
16	exit; // Exit if accessed directly
17	}
18
19	trait Button_Trait {
20	/**
21	* Get button sizes.
22	*
23	* Retrieve an array of button sizes for the button widget.
24	*
25	* @since 3.4.0
26	* @access public
27	* @static
28	*
29	* @return array An array containing button sizes.
30	*/
31	public static function get_button_sizes() {
32	return [
33	'xs' => esc_html__( 'Extra Small', 'elementor' ),
34	'sm' => esc_html__( 'Small', 'elementor' ),
35	'md' => esc_html__( 'Medium', 'elementor' ),
36	'lg' => esc_html__( 'Large', 'elementor' ),
37	'xl' => esc_html__( 'Extra Large', 'elementor' ),
38	];
39	}
40
41	/**
42	* @since 3.4.0
43	*
44	* @param array $args {
45	* An array of values for the button adjustments.
46	*
47	* @type array $section_condition Set of conditions to hide the controls.
48	* @type string $button_text Text contained in button.
49	* @type string $text_control_label Name for the label of the text control.
50	* @type string $alignment_control_prefix_class Prefix class name for the button alignment control.
51	* @type string $alignment_default Default alignment for the button.
52	* @type array $icon_exclude_inline_options Set of icon types to exclude from icon controls.
53	* }
54	*/
55	protected function register_button_content_controls( $args = [] ) {
56	$default_args = [
57	'section_condition' => [],
58	'button_default_text' => esc_html__( 'Click here', 'elementor' ),
59	'text_control_label' => esc_html__( 'Text', 'elementor' ),
60	'alignment_control_prefix_class' => 'elementor%s-align-',
61	'alignment_default' => '',
62	'icon_exclude_inline_options' => [],
63	];
64
65	$args = wp_parse_args( $args, $default_args );
66
67	$this->add_control(
68	'button_type',
69	[
70	'label' => esc_html__( 'Type', 'elementor' ),
71	'type' => Controls_Manager::SELECT,
72	'default' => '',
73	'options' => [
74	'' => esc_html__( 'Default', 'elementor' ),
75	'info' => esc_html__( 'Info', 'elementor' ),
76	'success' => esc_html__( 'Success', 'elementor' ),
77	'warning' => esc_html__( 'Warning', 'elementor' ),
78	'danger' => esc_html__( 'Danger', 'elementor' ),
79	],
80	'prefix_class' => 'elementor-button-',
81	'condition' => $args['section_condition'],
82	]
83	);
84
85	$this->add_control(
86	'text',
87	[
88	'label' => $args['text_control_label'],
89	'type' => Controls_Manager::TEXT,
90	'dynamic' => [
91	'active' => true,
92	],
93	'default' => $args['button_default_text'],
94	'placeholder' => $args['button_default_text'],
95	'condition' => $args['section_condition'],
96	]
97	);
98
99	$this->add_control(
100	'link',
101	[
102	'label' => esc_html__( 'Link', 'elementor' ),
103	'type' => Controls_Manager::URL,
104	'dynamic' => [
105	'active' => true,
106	],
107	'placeholder' => esc_html__( 'https://your-link.com', 'elementor' ),
108	'default' => [
109	'url' => '#',
110	],
111	'condition' => $args['section_condition'],
112	]
113	);
114
115	$this->add_responsive_control(
116	'align',
117	[
118	'label' => esc_html__( 'Alignment', 'elementor' ),
119	'type' => Controls_Manager::CHOOSE,
120	'options' => [
121	'left' => [
122	'title' => esc_html__( 'Left', 'elementor' ),
123	'icon' => 'eicon-text-align-left',
124	],
125	'center' => [
126	'title' => esc_html__( 'Center', 'elementor' ),
127	'icon' => 'eicon-text-align-center',
128	],
129	'right' => [
130	'title' => esc_html__( 'Right', 'elementor' ),
131	'icon' => 'eicon-text-align-right',
132	],
133	'justify' => [
134	'title' => esc_html__( 'Justified', 'elementor' ),
135	'icon' => 'eicon-text-align-justify',
136	],
137	],
138	'prefix_class' => $args['alignment_control_prefix_class'],
139	'default' => $args['alignment_default'],
140	'condition' => $args['section_condition'],
141	]
142	);
143
144	$this->add_control(
145	'size',
146	[
147	'label' => esc_html__( 'Size', 'elementor' ),
148	'type' => Controls_Manager::SELECT,
149	'default' => 'sm',
150	'options' => self::get_button_sizes(),
151	'style_transfer' => true,
152	'condition' => $args['section_condition'],
153	]
154	);
155
156	$this->add_control(
157	'selected_icon',
158	[
159	'label' => esc_html__( 'Icon', 'elementor' ),
160	'type' => Controls_Manager::ICONS,
161	'fa4compatibility' => 'icon',
162	'skin' => 'inline',
163	'label_block' => false,
164	'condition' => $args['section_condition'],
165	'icon_exclude_inline_options' => $args['icon_exclude_inline_options'],
166	]
167	);
168
169	$this->add_control(
170	'icon_align',
171	[
172	'label' => esc_html__( 'Icon Position', 'elementor' ),
173	'type' => Controls_Manager::SELECT,
174	'default' => 'left',
175	'options' => [
176	'left' => esc_html__( 'Before', 'elementor' ),
177	'right' => esc_html__( 'After', 'elementor' ),
178	],
179	'condition' => array_merge( $args['section_condition'], [ 'selected_icon[value]!' => '' ] ),
180	]
181	);
182
183	$this->add_control(
184	'icon_indent',
185	[
186	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
187	'type' => Controls_Manager::SLIDER,
188	'range' => [
189	'px' => [
190	'max' => 50,
191	],
192	],
193	'selectors' => [
194	'{{WRAPPER}} .elementor-button .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
195	'{{WRAPPER}} .elementor-button .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
196	],
197	'condition' => $args['section_condition'],
198	]
199	);
200
201	$this->add_control(
202	'view',
203	[
204	'label' => esc_html__( 'View', 'elementor' ),
205	'type' => Controls_Manager::HIDDEN,
206	'default' => 'traditional',
207	'condition' => $args['section_condition'],
208	]
209	);
210
211	$this->add_control(
212	'button_css_id',
213	[
214	'label' => esc_html__( 'Button ID', 'elementor' ),
215	'type' => Controls_Manager::TEXT,
216	'dynamic' => [
217	'active' => true,
218	],
219	'default' => '',
220	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
221	'description' => esc_html__( 'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows <code>A-z 0-9</code> & underscore chars without spaces.', 'elementor' ),
222	'separator' => 'before',
223	'condition' => $args['section_condition'],
224	]
225	);
226	}
227
228	protected function register_button_style_controls( $args = [] ) {
229	$default_args = [
230	'section_condition' => [],
231	];
232
233	$args = wp_parse_args( $args, $default_args );
234
235	$this->add_group_control(
236	Group_Control_Typography::get_type(),
237	[
238	'name' => 'typography',
239	'global' => [
240	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
241	],
242	'selector' => '{{WRAPPER}} .elementor-button',
243	'condition' => $args['section_condition'],
244	]
245	);
246
247	$this->add_group_control(
248	Group_Control_Text_Shadow::get_type(),
249	[
250	'name' => 'text_shadow',
251	'selector' => '{{WRAPPER}} .elementor-button',
252	'condition' => $args['section_condition'],
253	]
254	);
255
256	$this->start_controls_tabs( 'tabs_button_style', [
257	'condition' => $args['section_condition'],
258	] );
259
260	$this->start_controls_tab(
261	'tab_button_normal',
262	[
263	'label' => esc_html__( 'Normal', 'elementor' ),
264	'condition' => $args['section_condition'],
265	]
266	);
267
268	$this->add_control(
269	'button_text_color',
270	[
271	'label' => esc_html__( 'Text Color', 'elementor' ),
272	'type' => Controls_Manager::COLOR,
273	'default' => '',
274	'selectors' => [
275	'{{WRAPPER}} .elementor-button' => 'fill: {{VALUE}}; color: {{VALUE}};',
276	],
277	'condition' => $args['section_condition'],
278	]
279	);
280
281	$this->add_group_control(
282	Group_Control_Background::get_type(),
283	[
284	'name' => 'background',
285	'label' => esc_html__( 'Background', 'elementor' ),
286	'types' => [ 'classic', 'gradient' ],
287	'exclude' => [ 'image' ],
288	'selector' => '{{WRAPPER}} .elementor-button',
289	'fields_options' => [
290	'background' => [
291	'default' => 'classic',
292	],
293	'color' => [
294	'global' => [
295	'default' => Global_Colors::COLOR_ACCENT,
296	],
297	],
298	],
299	'condition' => $args['section_condition'],
300	]
301	);
302
303	$this->end_controls_tab();
304
305	$this->start_controls_tab(
306	'tab_button_hover',
307	[
308	'label' => esc_html__( 'Hover', 'elementor' ),
309	'condition' => $args['section_condition'],
310	]
311	);
312
313	$this->add_control(
314	'hover_color',
315	[
316	'label' => esc_html__( 'Text Color', 'elementor' ),
317	'type' => Controls_Manager::COLOR,
318	'selectors' => [
319	'{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'color: {{VALUE}};',
320	'{{WRAPPER}} .elementor-button:hover svg, {{WRAPPER}} .elementor-button:focus svg' => 'fill: {{VALUE}};',
321	],
322	'condition' => $args['section_condition'],
323	]
324	);
325
326	$this->add_group_control(
327	Group_Control_Background::get_type(),
328	[
329	'name' => 'button_background_hover',
330	'label' => esc_html__( 'Background', 'elementor' ),
331	'types' => [ 'classic', 'gradient' ],
332	'exclude' => [ 'image' ],
333	'selector' => '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus',
334	'fields_options' => [
335	'background' => [
336	'default' => 'classic',
337	],
338	],
339	'condition' => $args['section_condition'],
340	]
341	);
342
343	$this->add_control(
344	'button_hover_border_color',
345	[
346	'label' => esc_html__( 'Border Color', 'elementor' ),
347	'type' => Controls_Manager::COLOR,
348	'condition' => [
349	'border_border!' => '',
350	],
351	'selectors' => [
352	'{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'border-color: {{VALUE}};',
353	],
354	'condition' => $args['section_condition'],
355	]
356	);
357
358	$this->add_control(
359	'hover_animation',
360	[
361	'label' => esc_html__( 'Hover Animation', 'elementor' ),
362	'type' => Controls_Manager::HOVER_ANIMATION,
363	'condition' => $args['section_condition'],
364	]
365	);
366
367	$this->end_controls_tab();
368
369	$this->end_controls_tabs();
370
371	$this->add_group_control(
372	Group_Control_Border::get_type(),
373	[
374	'name' => 'border',
375	'selector' => '{{WRAPPER}} .elementor-button',
376	'separator' => 'before',
377	'condition' => $args['section_condition'],
378	]
379	);
380
381	$this->add_control(
382	'border_radius',
383	[
384	'label' => esc_html__( 'Border Radius', 'elementor' ),
385	'type' => Controls_Manager::DIMENSIONS,
386	'size_units' => [ 'px', '%', 'em' ],
387	'selectors' => [
388	'{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
389	],
390	'condition' => $args['section_condition'],
391	]
392	);
393
394	$this->add_group_control(
395	Group_Control_Box_Shadow::get_type(),
396	[
397	'name' => 'button_box_shadow',
398	'selector' => '{{WRAPPER}} .elementor-button',
399	'condition' => $args['section_condition'],
400	]
401	);
402
403	$this->add_responsive_control(
404	'text_padding',
405	[
406	'label' => esc_html__( 'Padding', 'elementor' ),
407	'type' => Controls_Manager::DIMENSIONS,
408	'size_units' => [ 'px', 'em', '%' ],
409	'selectors' => [
410	'{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
411	],
412	'separator' => 'before',
413	'condition' => $args['section_condition'],
414	]
415	);
416	}
417
418	/**
419	* Render button widget output on the frontend.
420	*
421	* Written in PHP and used to generate the final HTML.
422	*
423	* @param \Elementor\Widget_Base\|null $instance
424	*
425	* @since 3.4.0
426	* @access protected
427	*/
428	protected function render_button( Widget_Base $instance = null ) {
429	if ( empty( $instance ) ) {
430	$instance = $this;
431	}
432
433	$settings = $instance->get_settings_for_display();
434
435	$instance->add_render_attribute( 'wrapper', 'class', 'elementor-button-wrapper' );
436
437	if ( ! empty( $settings['link']['url'] ) ) {
438	$instance->add_link_attributes( 'button', $settings['link'] );
439	$instance->add_render_attribute( 'button', 'class', 'elementor-button-link' );
440	}
441
442	$instance->add_render_attribute( 'button', 'class', 'elementor-button' );
443	$instance->add_render_attribute( 'button', 'role', 'button' );
444
445	if ( ! empty( $settings['button_css_id'] ) ) {
446	$instance->add_render_attribute( 'button', 'id', $settings['button_css_id'] );
447	}
448
449	if ( ! empty( $settings['size'] ) ) {
450	$instance->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
451	}
452
453	if ( ! empty( $settings['hover_animation'] ) ) {
454	$instance->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
455	}
456	?>
457	<div <?php $instance->print_render_attribute_string( 'wrapper' ); ?>>
458	<a <?php $instance->print_render_attribute_string( 'button' ); ?>>
459	<?php $this->render_text( $instance ); ?>
460	</a>
461	</div>
462	<?php
463	}
464
465	/**
466	* Render button widget output in the editor.
467	*
468	* Written as a Backbone JavaScript template and used to generate the live preview.
469	*
470	* @since 3.4.0
471	* @access protected
472	*/
473	protected function content_template() {
474	?>
475	<#
476	view.addRenderAttribute( 'text', 'class', 'elementor-button-text' );
477	view.addInlineEditingAttributes( 'text', 'none' );
478	var iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
479	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
480	#>
481	<div class="elementor-button-wrapper">
482	<a id="{{ settings.button_css_id }}" class="elementor-button elementor-size-{{ settings.size }} elementor-animation-{{ settings.hover_animation }}" href="{{ settings.link.url }}" role="button">
483	<span class="elementor-button-content-wrapper">
484	<# if ( settings.icon \|\| settings.selected_icon ) { #>
485	<span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
486	<# if ( ( migrated \|\| ! settings.icon ) && iconHTML.rendered ) { #>
487	{{{ iconHTML.value }}}
488	<# } else { #>
489	<i class="{{ settings.icon }}" aria-hidden="true"></i>
490	<# } #>
491	</span>
492	<# } #>
493	<span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.text }}}</span>
494	</span>
495	</a>
496	</div>
497	<?php
498	}
499
500	/**
501	* Render button text.
502	*
503	* Render button widget text.
504	*
505	* @param \Elementor\Widget_Base\|null $instance
506	*
507	* @since 3.4.0
508	* @access protected
509	*/
510	protected function render_text( Widget_Base $instance = null ) {
511	// The default instance should be `$this` (a Button widget), unless the Trait is being used from outside of a widget (e.g. `Skin_Base`) which should pass an `$instance`.
512	if ( empty( $instance ) ) {
513	$instance = $this;
514	}
515
516	$settings = $instance->get_settings_for_display();
517
518	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
519	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
520
521	if ( ! $is_new && empty( $settings['icon_align'] ) ) {
522	// @todo: remove when deprecated
523	// added as bc in 2.6
524	//old default
525	$settings['icon_align'] = $instance->get_settings( 'icon_align' );
526	}
527
528	$instance->add_render_attribute( [
529	'content-wrapper' => [
530	'class' => 'elementor-button-content-wrapper',
531	],
532	'icon-align' => [
533	'class' => [
534	'elementor-button-icon',
535	'elementor-align-icon-' . $settings['icon_align'],
536	],
537	],
538	'text' => [
539	'class' => 'elementor-button-text',
540	],
541	] );
542
543	// TODO: replace the protected with public
544	//$instance->add_inline_editing_attributes( 'text', 'none' );
545	?>
546	<span <?php $instance->print_render_attribute_string( 'content-wrapper' ); ?>>
547	<?php if ( ! empty( $settings['icon'] ) \|\| ! empty( $settings['selected_icon']['value'] ) ) : ?>
548	<span <?php $instance->print_render_attribute_string( 'icon-align' ); ?>>
549	<?php if ( $is_new \|\| $migrated ) :
550	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
551	else : ?>
552	<i class="<?php echo esc_attr( $settings['icon'] ); ?>" aria-hidden="true"></i>
553	<?php endif; ?>
554	</span>
555	<?php endif; ?>
556	<span <?php $instance->print_render_attribute_string( 'text' ); ?>><?php $this->print_unescaped_setting( 'text' ); ?></span>
557	</span>
558	<?php
559	}
560
561	public function on_import( $element ) {
562	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon' );
563	}
564	}
565