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

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

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