elementor / includes / widgets / tabs.php

tabs.php in Elementor Website Builder – more than just a page builder 3.19.4, at includes/widgets/tabs.php

602 lines 16.0 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor tabs widget.
13	*
14	* Elementor widget that displays vertical or horizontal tabs with different
15	* pieces of content.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Tabs extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve tabs widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'tabs';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve tabs widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Tabs', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve tabs widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-tabs';
61	}
62
63	/**
64	* Get widget keywords.
65	*
66	* Retrieve the list of keywords the widget belongs to.
67	*
68	* @since 2.1.0
69	* @access public
70	*
71	* @return array Widget keywords.
72	*/
73	public function get_keywords() {
74	return [ 'tabs', 'accordion', 'toggle' ];
75	}
76
77	public function show_in_panel(): bool {
78	return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements' );
79	}
80
81	/**
82	* Register tabs widget controls.
83	*
84	* Adds different input fields to allow the user to change and customize the widget settings.
85	*
86	* @since 3.1.0
87	* @access protected
88	*/
89	protected function register_controls() {
90	$start = is_rtl() ? 'end' : 'start';
91	$end = is_rtl() ? 'start' : 'end';
92
93	$this->start_controls_section(
94	'section_tabs',
95	[
96	'label' => esc_html__( 'Tabs', 'elementor' ),
97	]
98	);
99
100	$repeater = new Repeater();
101
102	$repeater->add_control(
103	'tab_title',
104	[
105	'label' => esc_html__( 'Title', 'elementor' ),
106	'type' => Controls_Manager::TEXT,
107	'default' => esc_html__( 'Tab Title', 'elementor' ),
108	'placeholder' => esc_html__( 'Tab Title', 'elementor' ),
109	'label_block' => true,
110	'dynamic' => [
111	'active' => true,
112	],
113	]
114	);
115
116	$repeater->add_control(
117	'tab_content',
118	[
119	'label' => esc_html__( 'Content', 'elementor' ),
120	'default' => esc_html__( 'Tab Content', 'elementor' ),
121	'placeholder' => esc_html__( 'Tab Content', 'elementor' ),
122	'type' => Controls_Manager::WYSIWYG,
123	]
124	);
125
126	$is_nested_tabs_active = Plugin::$instance->widgets_manager->get_widget_types( 'nested-tabs' );
127
128	if ( $is_nested_tabs_active ) {
129	$this->add_deprecation_message(
130	'3.8.0',
131	esc_html__(
132	'You are currently editing a Tabs Widget in its old version. Any new tabs widget dragged into the canvas will be the new Tab widget, with the improved Nested capabilities.',
133	'elementor'
134	),
135	'nested-tabs'
136	);
137	}
138
139	$this->add_control(
140	'tabs',
141	[
142	'label' => esc_html__( 'Tabs Items', 'elementor' ),
143	'type' => Controls_Manager::REPEATER,
144	'fields' => $repeater->get_controls(),
145	'default' => [
146	[
147	'tab_title' => esc_html__( 'Tab #1', 'elementor' ),
148	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
149	],
150	[
151	'tab_title' => esc_html__( 'Tab #2', 'elementor' ),
152	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
153	],
154	],
155	'title_field' => '{{{ tab_title }}}',
156	]
157	);
158
159	$this->add_control(
160	'type',
161	[
162	'label' => esc_html__( 'Position', 'elementor' ),
163	'type' => Controls_Manager::SELECT,
164	'default' => 'horizontal',
165	'options' => [
166	'horizontal' => esc_html__( 'Horizontal', 'elementor' ),
167	'vertical' => esc_html__( 'Vertical', 'elementor' ),
168	],
169	'prefix_class' => 'elementor-tabs-view-',
170	'separator' => 'before',
171	]
172	);
173
174	$this->add_control(
175	'tabs_align_horizontal',
176	[
177	'label' => esc_html__( 'Alignment', 'elementor' ),
178	'type' => Controls_Manager::CHOOSE,
179	'options' => [
180	'' => [
181	'title' => esc_html__( 'Start', 'elementor' ),
182	'icon' => "eicon-align-$start-h",
183	],
184	'center' => [
185	'title' => esc_html__( 'Center', 'elementor' ),
186	'icon' => 'eicon-align-center-h',
187	],
188	'end' => [
189	'title' => esc_html__( 'End', 'elementor' ),
190	'icon' => "eicon-align-$end-h",
191	],
192	'stretch' => [
193	'title' => esc_html__( 'Stretch', 'elementor' ),
194	'icon' => 'eicon-align-stretch-h',
195	],
196	],
197	'prefix_class' => 'elementor-tabs-alignment-',
198	'condition' => [
199	'type' => 'horizontal',
200	],
201	]
202	);
203
204	$this->add_control(
205	'tabs_align_vertical',
206	[
207	'label' => esc_html__( 'Alignment', 'elementor' ),
208	'type' => Controls_Manager::CHOOSE,
209	'options' => [
210	'' => [
211	'title' => esc_html__( 'Start', 'elementor' ),
212	'icon' => 'eicon-align-start-v',
213	],
214	'center' => [
215	'title' => esc_html__( 'Center', 'elementor' ),
216	'icon' => 'eicon-align-center-v',
217	],
218	'end' => [
219	'title' => esc_html__( 'End', 'elementor' ),
220	'icon' => 'eicon-align-end-v',
221	],
222	'stretch' => [
223	'title' => esc_html__( 'Stretch', 'elementor' ),
224	'icon' => 'eicon-align-stretch-v',
225	],
226	],
227	'prefix_class' => 'elementor-tabs-alignment-',
228	'condition' => [
229	'type' => 'vertical',
230	],
231	]
232	);
233
234	$this->end_controls_section();
235
236	$this->start_controls_section(
237	'section_tabs_style',
238	[
239	'label' => esc_html__( 'Tabs', 'elementor' ),
240	'tab' => Controls_Manager::TAB_STYLE,
241	]
242	);
243
244	$this->add_control(
245	'navigation_width',
246	[
247	'label' => esc_html__( 'Navigation Width', 'elementor' ),
248	'type' => Controls_Manager::SLIDER,
249	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
250	'default' => [
251	'unit' => '%',
252	],
253	'range' => [
254	'px' => [
255	'min' => 10,
256	'max' => 500,
257	],
258	'%' => [
259	'min' => 10,
260	'max' => 50,
261	],
262	'em' => [
263	'min' => 1,
264	'max' => 50,
265	],
266	'rem' => [
267	'min' => 1,
268	'max' => 50,
269	],
270	],
271	'selectors' => [
272	'{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
273	],
274	'condition' => [
275	'type' => 'vertical',
276	],
277	]
278	);
279
280	$this->add_control(
281	'border_width',
282	[
283	'label' => esc_html__( 'Border Width', 'elementor' ),
284	'type' => Controls_Manager::SLIDER,
285	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
286	'default' => [
287	'size' => 1,
288	],
289	'range' => [
290	'px' => [
291	'max' => 20,
292	],
293	'em' => [
294	'max' => 2,
295	],
296	],
297	'selectors' => [
298	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title:before, {{WRAPPER}} .elementor-tab-title:after, {{WRAPPER}} .elementor-tab-content, {{WRAPPER}} .elementor-tabs-content-wrapper' => 'border-width: {{SIZE}}{{UNIT}};',
299	],
300	]
301	);
302
303	$this->add_control(
304	'border_color',
305	[
306	'label' => esc_html__( 'Border Color', 'elementor' ),
307	'type' => Controls_Manager::COLOR,
308	'selectors' => [
309	'{{WRAPPER}} .elementor-tab-mobile-title, {{WRAPPER}} .elementor-tab-desktop-title.elementor-active, {{WRAPPER}} .elementor-tab-title:before, {{WRAPPER}} .elementor-tab-title:after, {{WRAPPER}} .elementor-tab-content, {{WRAPPER}} .elementor-tabs-content-wrapper' => 'border-color: {{VALUE}};',
310	],
311	]
312	);
313
314	$this->add_control(
315	'background_color',
316	[
317	'label' => esc_html__( 'Background Color', 'elementor' ),
318	'type' => Controls_Manager::COLOR,
319	'selectors' => [
320	'{{WRAPPER}} .elementor-tab-desktop-title.elementor-active' => 'background-color: {{VALUE}};',
321	'{{WRAPPER}} .elementor-tabs-content-wrapper' => 'background-color: {{VALUE}};',
322	],
323	]
324	);
325
326	$this->add_control(
327	'heading_title',
328	[
329	'label' => esc_html__( 'Title', 'elementor' ),
330	'type' => Controls_Manager::HEADING,
331	'separator' => 'before',
332	]
333	);
334
335	$this->add_control(
336	'tab_color',
337	[
338	'label' => esc_html__( 'Color', 'elementor' ),
339	'type' => Controls_Manager::COLOR,
340	'selectors' => [
341	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}}',
342	],
343	'global' => [
344	'default' => Global_Colors::COLOR_PRIMARY,
345	],
346	]
347	);
348
349	$this->add_control(
350	'tab_active_color',
351	[
352	'label' => esc_html__( 'Active Color', 'elementor' ),
353	'type' => Controls_Manager::COLOR,
354	'selectors' => [
355	'{{WRAPPER}} .elementor-tab-title.elementor-active,
356	{{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}}',
357	],
358	'global' => [
359	'default' => Global_Colors::COLOR_ACCENT,
360	],
361	]
362	);
363
364	$this->add_group_control(
365	Group_Control_Typography::get_type(),
366	[
367	'name' => 'tab_typography',
368	'selector' => '{{WRAPPER}} .elementor-tab-title',
369	'global' => [
370	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
371	],
372	]
373	);
374
375	$this->add_group_control(
376	Group_Control_Text_Stroke::get_type(),
377	[
378	'name' => 'text_stroke',
379	'selector' => '{{WRAPPER}} .elementor-tab-title',
380	]
381	);
382
383	$this->add_group_control(
384	Group_Control_Text_Shadow::get_type(),
385	[
386	'name' => 'title_shadow',
387	'selector' => '{{WRAPPER}} .elementor-tab-title',
388	]
389	);
390
391	$this->add_control(
392	'title_align',
393	[
394	'label' => esc_html__( 'Alignment', 'elementor' ),
395	'type' => Controls_Manager::CHOOSE,
396	'options' => [
397	'left' => [
398	'title' => esc_html__( 'Left', 'elementor' ),
399	'icon' => 'eicon-text-align-left',
400	],
401	'center' => [
402	'title' => esc_html__( 'Center', 'elementor' ),
403	'icon' => 'eicon-text-align-center',
404	],
405	'right' => [
406	'title' => esc_html__( 'Right', 'elementor' ),
407	'icon' => 'eicon-text-align-right',
408	],
409	],
410	'selectors' => [
411	'{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
412	],
413	'condition' => [
414	'tabs_align' => 'stretch',
415	],
416	]
417	);
418
419	$this->add_control(
420	'heading_content',
421	[
422	'label' => esc_html__( 'Content', 'elementor' ),
423	'type' => Controls_Manager::HEADING,
424	'separator' => 'before',
425	]
426	);
427
428	$this->add_control(
429	'content_color',
430	[
431	'label' => esc_html__( 'Color', 'elementor' ),
432	'type' => Controls_Manager::COLOR,
433	'selectors' => [
434	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
435	],
436	'global' => [
437	'default' => Global_Colors::COLOR_TEXT,
438	],
439	]
440	);
441
442	$this->add_group_control(
443	Group_Control_Typography::get_type(),
444	[
445	'name' => 'content_typography',
446	'selector' => '{{WRAPPER}} .elementor-tab-content',
447	'global' => [
448	'default' => Global_Typography::TYPOGRAPHY_TEXT,
449	],
450	]
451	);
452
453	$this->add_group_control(
454	Group_Control_Text_Shadow::get_type(),
455	[
456	'name' => 'content_shadow',
457	'selector' => '{{WRAPPER}} .elementor-tab-content',
458	]
459	);
460
461	$this->end_controls_section();
462	}
463
464	/**
465	* Render tabs widget output on the frontend.
466	*
467	* Written in PHP and used to generate the final HTML.
468	*
469	* @since 1.0.0
470	* @access protected
471	*/
472	protected function render() {
473	$tabs = $this->get_settings_for_display( 'tabs' );
474
475	$id_int = substr( $this->get_id_int(), 0, 3 );
476
477	$this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
478
479	?>
480	<div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
481	<div class="elementor-tabs-wrapper" role="tablist" >
482	<?php
483	foreach ( $tabs as $index => $item ) :
484	$tab_count = $index + 1;
485	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
486
487	$this->add_render_attribute( $tab_title_setting_key, [
488	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
489	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
490	'aria-selected' => 1 === $tab_count ? 'true' : 'false',
491	'data-tab' => $tab_count,
492	'role' => 'tab',
493	'tabindex' => 1 === $tab_count ? '0' : '-1',
494	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
495	'aria-expanded' => 'false',
496	] );
497	?>
498	<div <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>><?php
499	// PHPCS - the main text of a widget should not be escaped.
500	echo $item['tab_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
501	?></div>
502	<?php endforeach; ?>
503	</div>
504	<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
505	<?php
506	foreach ( $tabs as $index => $item ) :
507	$tab_count = $index + 1;
508	$hidden = 1 === $tab_count ? 'false' : 'hidden';
509	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
510
511	$tab_title_mobile_setting_key = $this->get_repeater_setting_key( 'tab_title_mobile', 'tabs', $tab_count );
512
513	$this->add_render_attribute( $tab_content_setting_key, [
514	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
515	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
516	'data-tab' => $tab_count,
517	'role' => 'tabpanel',
518	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
519	'tabindex' => '0',
520	'hidden' => $hidden,
521	] );
522
523	$this->add_render_attribute( $tab_title_mobile_setting_key, [
524	'class' => [ 'elementor-tab-title', 'elementor-tab-mobile-title' ],
525	'aria-selected' => 1 === $tab_count ? 'true' : 'false',
526	'data-tab' => $tab_count,
527	'role' => 'tab',
528	'tabindex' => 1 === $tab_count ? '0' : '-1',
529	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
530	'aria-expanded' => 'false',
531	] );
532
533	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
534	?>
535	<div <?php $this->print_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php
536	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
537	?></div>
538	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
539	$this->print_text_editor( $item['tab_content'] );
540	?></div>
541	<?php endforeach; ?>
542	</div>
543	</div>
544	<?php
545	}
546
547	/**
548	* Render tabs widget output in the editor.
549	*
550	* Written as a Backbone JavaScript template and used to generate the live preview.
551	*
552	* @since 2.9.0
553	* @access protected
554	*/
555	protected function content_template() {
556	?>
557	<div class="elementor-tabs" role="tablist" aria-orientation="vertical">
558	<# if ( settings.tabs ) {
559	var elementUid = view.getIDInt().toString().substr( 0, 3 ); #>
560	<div class="elementor-tabs-wrapper" role="tablist">
561	<# _.each( settings.tabs, function( item, index ) {
562	var tabCount = index + 1,
563	tabUid = elementUid + tabCount,
564	tabTitleKey = 'tab-title-' + tabUid;
565
566	view.addRenderAttribute( tabTitleKey, {
567	'id': 'elementor-tab-title-' + tabUid,
568	'class': [ 'elementor-tab-title','elementor-tab-desktop-title' ],
569	'data-tab': tabCount,
570	'role': 'tab',
571	'tabindex': 1 === tabCount ? '0' : '-1',
572	'aria-controls': 'elementor-tab-content-' + tabUid,
573	'aria-expanded': 'false',
574	} );
575	#>
576	<div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>{{{ item.tab_title }}}</div>
577	<# } ); #>
578	</div>
579	<div class="elementor-tabs-content-wrapper">
580	<# _.each( settings.tabs, function( item, index ) {
581	var tabCount = index + 1,
582	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs',index );
583
584	view.addRenderAttribute( tabContentKey, {
585	'id': 'elementor-tab-content-' + elementUid + tabCount,
586	'class': [ 'elementor-tab-content', 'elementor-clearfix', 'elementor-repeater-item-' + item._id ],
587	'data-tab': tabCount,
588	'role' : 'tabpanel',
589	'aria-labelledby' : 'elementor-tab-title-' + elementUid + tabCount
590	} );
591
592	view.addInlineEditingAttributes( tabContentKey, 'advanced' ); #>
593	<div class="elementor-tab-title elementor-tab-mobile-title" data-tab="{{ tabCount }}" role="tab">{{{ item.tab_title }}}</div>
594	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
595	<# } ); #>
596	</div>
597	<# } #>
598	</div>
599	<?php
600	}
601	}
602