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

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

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