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

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

593 lines 16.7 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	'default' => [
108	'url' => '#',
109	],
110	'condition' => $args['section_condition'],
111	]
112	);
113
114	$this->add_responsive_control(
115	'align',
116	[
117	'label' => esc_html__( 'Alignment', 'elementor' ),
118	'type' => Controls_Manager::CHOOSE,
119	'options' => [
120	'left' => [
121	'title' => esc_html__( 'Left', 'elementor' ),
122	'icon' => 'eicon-text-align-left',
123	],
124	'center' => [
125	'title' => esc_html__( 'Center', 'elementor' ),
126	'icon' => 'eicon-text-align-center',
127	],
128	'right' => [
129	'title' => esc_html__( 'Right', 'elementor' ),
130	'icon' => 'eicon-text-align-right',
131	],
132	'justify' => [
133	'title' => esc_html__( 'Justified', 'elementor' ),
134	'icon' => 'eicon-text-align-justify',
135	],
136	],
137	'prefix_class' => $args['alignment_control_prefix_class'],
138	'default' => $args['alignment_default'],
139	'condition' => $args['section_condition'],
140	]
141	);
142
143	$this->add_control(
144	'size',
145	[
146	'label' => esc_html__( 'Size', 'elementor' ),
147	'type' => Controls_Manager::SELECT,
148	'default' => 'sm',
149	'options' => self::get_button_sizes(),
150	'style_transfer' => true,
151	'condition' => $args['section_condition'],
152	]
153	);
154
155	$this->add_control(
156	'selected_icon',
157	[
158	'label' => esc_html__( 'Icon', 'elementor' ),
159	'type' => Controls_Manager::ICONS,
160	'fa4compatibility' => 'icon',
161	'skin' => 'inline',
162	'label_block' => false,
163	'condition' => $args['section_condition'],
164	'icon_exclude_inline_options' => $args['icon_exclude_inline_options'],
165	]
166	);
167
168	$this->add_control(
169	'icon_align',
170	[
171	'label' => esc_html__( 'Icon Position', 'elementor' ),
172	'type' => Controls_Manager::SELECT,
173	'default' => 'left',
174	'options' => [
175	'left' => esc_html__( 'Before', 'elementor' ),
176	'right' => esc_html__( 'After', 'elementor' ),
177	],
178	'condition' => array_merge( $args['section_condition'], [ 'selected_icon[value]!' => '' ] ),
179	]
180	);
181
182	$this->add_control(
183	'icon_indent',
184	[
185	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
186	'type' => Controls_Manager::SLIDER,
187	'range' => [
188	'px' => [
189	'max' => 50,
190	],
191	],
192	'selectors' => [
193	'{{WRAPPER}} .elementor-button .elementor-align-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
194	'{{WRAPPER}} .elementor-button .elementor-align-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
195	],
196	'condition' => $args['section_condition'],
197	]
198	);
199
200	$this->add_control(
201	'view',
202	[
203	'label' => esc_html__( 'View', 'elementor' ),
204	'type' => Controls_Manager::HIDDEN,
205	'default' => 'traditional',
206	'condition' => $args['section_condition'],
207	]
208	);
209
210	$this->add_control(
211	'button_css_id',
212	[
213	'label' => esc_html__( 'Button ID', 'elementor' ),
214	'type' => Controls_Manager::TEXT,
215	'dynamic' => [
216	'active' => true,
217	],
218	'ai' => [
219	'active' => false,
220	],
221	'default' => '',
222	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
223	'description' => sprintf(
224	esc_html__( 'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows %1$sA-z 0-9%2$s & underscore chars without spaces.', 'elementor' ),
225	'<code>',
226	'</code>'
227	),
228	'separator' => 'before',
229	'condition' => $args['section_condition'],
230	]
231	);
232	}
233
234	protected function register_button_style_controls( $args = [] ) {
235	$default_args = [
236	'section_condition' => [],
237	];
238
239	$args = wp_parse_args( $args, $default_args );
240
241	$this->add_group_control(
242	Group_Control_Typography::get_type(),
243	[
244	'name' => 'typography',
245	'global' => [
246	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
247	],
248	'selector' => '{{WRAPPER}} .elementor-button',
249	'condition' => $args['section_condition'],
250	]
251	);
252
253	$this->add_group_control(
254	Group_Control_Text_Shadow::get_type(),
255	[
256	'name' => 'text_shadow',
257	'selector' => '{{WRAPPER}} .elementor-button',
258	'condition' => $args['section_condition'],
259	]
260	);
261
262	$this->start_controls_tabs( 'tabs_button_style', [
263	'condition' => $args['section_condition'],
264	] );
265
266	$this->start_controls_tab(
267	'tab_button_normal',
268	[
269	'label' => esc_html__( 'Normal', 'elementor' ),
270	'condition' => $args['section_condition'],
271	]
272	);
273
274	$this->add_control(
275	'button_text_color',
276	[
277	'label' => esc_html__( 'Text Color', 'elementor' ),
278	'type' => Controls_Manager::COLOR,
279	'default' => '',
280	'selectors' => [
281	'{{WRAPPER}} .elementor-button' => 'fill: {{VALUE}}; color: {{VALUE}};',
282	],
283	'condition' => $args['section_condition'],
284	]
285	);
286
287	$this->add_group_control(
288	Group_Control_Background::get_type(),
289	[
290	'name' => 'background',
291	'types' => [ 'classic', 'gradient' ],
292	'exclude' => [ 'image' ],
293	'selector' => '{{WRAPPER}} .elementor-button',
294	'fields_options' => [
295	'background' => [
296	'default' => 'classic',
297	],
298	'color' => [
299	'global' => [
300	'default' => Global_Colors::COLOR_ACCENT,
301	],
302	],
303	],
304	'condition' => $args['section_condition'],
305	]
306	);
307
308	$this->end_controls_tab();
309
310	$this->start_controls_tab(
311	'tab_button_hover',
312	[
313	'label' => esc_html__( 'Hover', 'elementor' ),
314	'condition' => $args['section_condition'],
315	]
316	);
317
318	$this->add_control(
319	'hover_color',
320	[
321	'label' => esc_html__( 'Text Color', 'elementor' ),
322	'type' => Controls_Manager::COLOR,
323	'selectors' => [
324	'{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'color: {{VALUE}};',
325	'{{WRAPPER}} .elementor-button:hover svg, {{WRAPPER}} .elementor-button:focus svg' => 'fill: {{VALUE}};',
326	],
327	'condition' => $args['section_condition'],
328	]
329	);
330
331	$this->add_group_control(
332	Group_Control_Background::get_type(),
333	[
334	'name' => 'button_background_hover',
335	'types' => [ 'classic', 'gradient' ],
336	'exclude' => [ 'image' ],
337	'selector' => '{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus',
338	'fields_options' => [
339	'background' => [
340	'default' => 'classic',
341	],
342	],
343	'condition' => $args['section_condition'],
344	]
345	);
346
347	$this->add_control(
348	'button_hover_border_color',
349	[
350	'label' => esc_html__( 'Border Color', 'elementor' ),
351	'type' => Controls_Manager::COLOR,
352	'condition' => [
353	'border_border!' => '',
354	],
355	'selectors' => [
356	'{{WRAPPER}} .elementor-button:hover, {{WRAPPER}} .elementor-button:focus' => 'border-color: {{VALUE}};',
357	],
358	'condition' => $args['section_condition'],
359	]
360	);
361
362	$this->add_control(
363	'hover_animation',
364	[
365	'label' => esc_html__( 'Hover Animation', 'elementor' ),
366	'type' => Controls_Manager::HOVER_ANIMATION,
367	'condition' => $args['section_condition'],
368	]
369	);
370
371	$this->end_controls_tab();
372
373	$this->end_controls_tabs();
374
375	$this->add_group_control(
376	Group_Control_Border::get_type(),
377	[
378	'name' => 'border',
379	'selector' => '{{WRAPPER}} .elementor-button',
380	'separator' => 'before',
381	'condition' => $args['section_condition'],
382	]
383	);
384
385	$this->add_responsive_control(
386	'border_radius',
387	[
388	'label' => esc_html__( 'Border Radius', 'elementor' ),
389	'type' => Controls_Manager::DIMENSIONS,
390	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
391	'selectors' => [
392	'{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
393	],
394	'condition' => $args['section_condition'],
395	]
396	);
397
398	$this->add_group_control(
399	Group_Control_Box_Shadow::get_type(),
400	[
401	'name' => 'button_box_shadow',
402	'selector' => '{{WRAPPER}} .elementor-button',
403	'condition' => $args['section_condition'],
404	]
405	);
406
407	$this->add_responsive_control(
408	'text_padding',
409	[
410	'label' => esc_html__( 'Padding', 'elementor' ),
411	'type' => Controls_Manager::DIMENSIONS,
412	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
413	'selectors' => [
414	'{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
415	],
416	'separator' => 'before',
417	'condition' => $args['section_condition'],
418	]
419	);
420	}
421
422	/**
423	* Render button widget output on the frontend.
424	*
425	* Written in PHP and used to generate the final HTML.
426	*
427	* @param \Elementor\Widget_Base\|null $instance
428	*
429	* @since 3.4.0
430	* @access protected
431	*/
432	protected function render_button( Widget_Base $instance = null ) {
433	if ( empty( $instance ) ) {
434	$instance = $this;
435	}
436
437	$settings = $instance->get_settings_for_display();
438
439	$instance->add_render_attribute( 'wrapper', 'class', 'elementor-button-wrapper' );
440
441	$instance->add_render_attribute( 'button', 'class', 'elementor-button' );
442
443	if ( ! empty( $settings['link']['url'] ) ) {
444	$instance->add_link_attributes( 'button', $settings['link'] );
445	$instance->add_render_attribute( 'button', 'class', 'elementor-button-link' );
446	} else {
447	$instance->add_render_attribute( 'button', 'role', 'button' );
448	}
449
450	if ( ! empty( $settings['button_css_id'] ) ) {
451	$instance->add_render_attribute( 'button', 'id', $settings['button_css_id'] );
452	}
453
454	if ( ! empty( $settings['size'] ) ) {
455	$instance->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['size'] );
456	}
457
458	if ( ! empty( $settings['hover_animation'] ) ) {
459	$instance->add_render_attribute( 'button', 'class', 'elementor-animation-' . $settings['hover_animation'] );
460	}
461	?>
462	<div <?php $instance->print_render_attribute_string( 'wrapper' ); ?>>
463	<a <?php $instance->print_render_attribute_string( 'button' ); ?>>
464	<?php $this->render_text( $instance ); ?>
465	</a>
466	</div>
467	<?php
468	}
469
470	/**
471	* Render button widget output in the editor.
472	*
473	* Written as a Backbone JavaScript template and used to generate the live preview.
474	*
475	* @since 3.4.0
476	* @access protected
477	*/
478	protected function content_template() {
479	?>
480	<#
481	view.addRenderAttribute( 'wrapper', 'class', 'elementor-button-wrapper' );
482
483	view.addRenderAttribute( 'button', 'class', 'elementor-button' );
484
485	if ( '' !== settings.link.url ) {
486	view.addRenderAttribute( 'button', 'href', settings.link.url );
487	view.addRenderAttribute( 'button', 'class', 'elementor-button-link' );
488	} else {
489	view.addRenderAttribute( 'button', 'role', 'button' );
490	}
491
492	if ( '' !== settings.button_css_id ) {
493	view.addRenderAttribute( 'button', 'id', settings.button_css_id );
494	}
495
496	if ( '' !== settings.size ) {
497	view.addRenderAttribute( 'button', 'class', 'elementor-size-' + settings.size );
498	}
499
500	if ( '' !== settings.hover_animation ) {
501	view.addRenderAttribute( 'button', 'class', 'elementor-animation-' + settings.hover_animation );
502	}
503
504	view.addRenderAttribute( 'text', 'class', 'elementor-button-text' );
505	view.addInlineEditingAttributes( 'text', 'none' );
506	var iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
507	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' );
508	#>
509	<div {{{ view.getRenderAttributeString( 'wrapper' ) }}}>
510	<a {{{ view.getRenderAttributeString( 'button' ) }}}>
511	<span class="elementor-button-content-wrapper">
512	<# if ( settings.icon \|\| settings.selected_icon ) { #>
513	<span class="elementor-button-icon elementor-align-icon-{{ settings.icon_align }}">
514	<# if ( ( migrated \|\| ! settings.icon ) && iconHTML.rendered ) { #>
515	{{{ iconHTML.value }}}
516	<# } else { #>
517	<i class="{{ settings.icon }}" aria-hidden="true"></i>
518	<# } #>
519	</span>
520	<# } #>
521	<span {{{ view.getRenderAttributeString( 'text' ) }}}>{{{ settings.text }}}</span>
522	</span>
523	</a>
524	</div>
525	<?php
526	}
527
528	/**
529	* Render button text.
530	*
531	* Render button widget text.
532	*
533	* @param \Elementor\Widget_Base\|null $instance
534	*
535	* @since 3.4.0
536	* @access protected
537	*/
538	protected function render_text( Widget_Base $instance = null ) {
539	// 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`.
540	if ( empty( $instance ) ) {
541	$instance = $this;
542	}
543
544	$settings = $instance->get_settings_for_display();
545
546	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
547	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
548
549	if ( ! $is_new && empty( $settings['icon_align'] ) ) {
550	// @todo: remove when deprecated
551	// added as bc in 2.6
552	//old default
553	$settings['icon_align'] = $instance->get_settings( 'icon_align' );
554	}
555
556	$instance->add_render_attribute( [
557	'content-wrapper' => [
558	'class' => 'elementor-button-content-wrapper',
559	],
560	'icon-align' => [
561	'class' => [
562	'elementor-button-icon',
563	'elementor-align-icon-' . $settings['icon_align'],
564	],
565	],
566	'text' => [
567	'class' => 'elementor-button-text',
568	],
569	] );
570
571	// TODO: replace the protected with public
572	//$instance->add_inline_editing_attributes( 'text', 'none' );
573	?>
574	<span <?php $instance->print_render_attribute_string( 'content-wrapper' ); ?>>
575	<?php if ( ! empty( $settings['icon'] ) \|\| ! empty( $settings['selected_icon']['value'] ) ) : ?>
576	<span <?php $instance->print_render_attribute_string( 'icon-align' ); ?>>
577	<?php if ( $is_new \|\| $migrated ) :
578	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
579	else : ?>
580	<i class="<?php echo esc_attr( $settings['icon'] ); ?>" aria-hidden="true"></i>
581	<?php endif; ?>
582	</span>
583	<?php endif; ?>
584	<span <?php $instance->print_render_attribute_string( 'text' ); ?>><?php $this->print_unescaped_setting( 'text' ); ?></span>
585	</span>
586	<?php
587	}
588
589	public function on_import( $element ) {
590	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon' );
591	}
592	}
593