elementor / includes / widgets / tabs.php

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

598 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	'view',
161	[
162	'label' => esc_html__( 'View', 'elementor' ),
163	'type' => Controls_Manager::HIDDEN,
164	'default' => 'traditional',
165	]
166	);
167
168	$this->add_control(
169	'type',
170	[
171	'label' => esc_html__( 'Position', 'elementor' ),
172	'type' => Controls_Manager::SELECT,
173	'default' => 'horizontal',
174	'options' => [
175	'horizontal' => esc_html__( 'Horizontal', 'elementor' ),
176	'vertical' => esc_html__( 'Vertical', 'elementor' ),
177	],
178	'prefix_class' => 'elementor-tabs-view-',
179	'separator' => 'before',
180	]
181	);
182
183	$this->add_control(
184	'tabs_align_horizontal',
185	[
186	'label' => esc_html__( 'Alignment', 'elementor' ),
187	'type' => Controls_Manager::CHOOSE,
188	'options' => [
189	'' => [
190	'title' => esc_html__( 'Start', 'elementor' ),
191	'icon' => "eicon-align-$start-h",
192	],
193	'center' => [
194	'title' => esc_html__( 'Center', 'elementor' ),
195	'icon' => 'eicon-align-center-h',
196	],
197	'end' => [
198	'title' => esc_html__( 'End', 'elementor' ),
199	'icon' => "eicon-align-$end-h",
200	],
201	'stretch' => [
202	'title' => esc_html__( 'Stretch', 'elementor' ),
203	'icon' => 'eicon-align-stretch-h',
204	],
205	],
206	'prefix_class' => 'elementor-tabs-alignment-',
207	'condition' => [
208	'type' => 'horizontal',
209	],
210	]
211	);
212
213	$this->add_control(
214	'tabs_align_vertical',
215	[
216	'label' => esc_html__( 'Alignment', 'elementor' ),
217	'type' => Controls_Manager::CHOOSE,
218	'options' => [
219	'' => [
220	'title' => esc_html__( 'Start', 'elementor' ),
221	'icon' => 'eicon-align-start-v',
222	],
223	'center' => [
224	'title' => esc_html__( 'Center', 'elementor' ),
225	'icon' => 'eicon-align-center-v',
226	],
227	'end' => [
228	'title' => esc_html__( 'End', 'elementor' ),
229	'icon' => 'eicon-align-end-v',
230	],
231	'stretch' => [
232	'title' => esc_html__( 'Stretch', 'elementor' ),
233	'icon' => 'eicon-align-stretch-v',
234	],
235	],
236	'prefix_class' => 'elementor-tabs-alignment-',
237	'condition' => [
238	'type' => 'vertical',
239	],
240	]
241	);
242
243	$this->end_controls_section();
244
245	$this->start_controls_section(
246	'section_tabs_style',
247	[
248	'label' => esc_html__( 'Tabs', 'elementor' ),
249	'tab' => Controls_Manager::TAB_STYLE,
250	]
251	);
252
253	$this->add_control(
254	'navigation_width',
255	[
256	'label' => esc_html__( 'Navigation Width', 'elementor' ),
257	'type' => Controls_Manager::SLIDER,
258	'default' => [
259	'unit' => '%',
260	],
261	'range' => [
262	'%' => [
263	'min' => 10,
264	'max' => 50,
265	],
266	],
267	'selectors' => [
268	'{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
269	],
270	'condition' => [
271	'type' => 'vertical',
272	],
273	]
274	);
275
276	$this->add_control(
277	'border_width',
278	[
279	'label' => esc_html__( 'Border Width', 'elementor' ),
280	'type' => Controls_Manager::SLIDER,
281	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
282	'default' => [
283	'size' => 1,
284	],
285	'range' => [
286	'px' => [
287	'max' => 20,
288	],
289	'em' => [
290	'max' => 2,
291	],
292	],
293	'selectors' => [
294	'{{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}};',
295	],
296	]
297	);
298
299	$this->add_control(
300	'border_color',
301	[
302	'label' => esc_html__( 'Border Color', 'elementor' ),
303	'type' => Controls_Manager::COLOR,
304	'selectors' => [
305	'{{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}};',
306	],
307	]
308	);
309
310	$this->add_control(
311	'background_color',
312	[
313	'label' => esc_html__( 'Background Color', 'elementor' ),
314	'type' => Controls_Manager::COLOR,
315	'selectors' => [
316	'{{WRAPPER}} .elementor-tab-desktop-title.elementor-active' => 'background-color: {{VALUE}};',
317	'{{WRAPPER}} .elementor-tabs-content-wrapper' => 'background-color: {{VALUE}};',
318	],
319	]
320	);
321
322	$this->add_control(
323	'heading_title',
324	[
325	'label' => esc_html__( 'Title', 'elementor' ),
326	'type' => Controls_Manager::HEADING,
327	'separator' => 'before',
328	]
329	);
330
331	$this->add_control(
332	'tab_color',
333	[
334	'label' => esc_html__( 'Color', 'elementor' ),
335	'type' => Controls_Manager::COLOR,
336	'selectors' => [
337	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}}',
338	],
339	'global' => [
340	'default' => Global_Colors::COLOR_PRIMARY,
341	],
342	]
343	);
344
345	$this->add_control(
346	'tab_active_color',
347	[
348	'label' => esc_html__( 'Active Color', 'elementor' ),
349	'type' => Controls_Manager::COLOR,
350	'selectors' => [
351	'{{WRAPPER}} .elementor-tab-title.elementor-active,
352	{{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}}',
353	],
354	'global' => [
355	'default' => Global_Colors::COLOR_ACCENT,
356	],
357	]
358	);
359
360	$this->add_group_control(
361	Group_Control_Typography::get_type(),
362	[
363	'name' => 'tab_typography',
364	'selector' => '{{WRAPPER}} .elementor-tab-title',
365	'global' => [
366	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
367	],
368	]
369	);
370
371	$this->add_group_control(
372	Group_Control_Text_Stroke::get_type(),
373	[
374	'name' => 'text_stroke',
375	'selector' => '{{WRAPPER}} .elementor-tab-title',
376	]
377	);
378
379	$this->add_group_control(
380	Group_Control_Text_Shadow::get_type(),
381	[
382	'name' => 'title_shadow',
383	'selector' => '{{WRAPPER}} .elementor-tab-title',
384	]
385	);
386
387	$this->add_control(
388	'title_align',
389	[
390	'label' => esc_html__( 'Alignment', 'elementor' ),
391	'type' => Controls_Manager::CHOOSE,
392	'options' => [
393	'left' => [
394	'title' => esc_html__( 'Left', 'elementor' ),
395	'icon' => 'eicon-text-align-left',
396	],
397	'center' => [
398	'title' => esc_html__( 'Center', 'elementor' ),
399	'icon' => 'eicon-text-align-center',
400	],
401	'right' => [
402	'title' => esc_html__( 'Right', 'elementor' ),
403	'icon' => 'eicon-text-align-right',
404	],
405	],
406	'selectors' => [
407	'{{WRAPPER}} .elementor-tab-title' => 'text-align: {{VALUE}};',
408	],
409	'condition' => [
410	'tabs_align' => 'stretch',
411	],
412	]
413	);
414
415	$this->add_control(
416	'heading_content',
417	[
418	'label' => esc_html__( 'Content', 'elementor' ),
419	'type' => Controls_Manager::HEADING,
420	'separator' => 'before',
421	]
422	);
423
424	$this->add_control(
425	'content_color',
426	[
427	'label' => esc_html__( 'Color', 'elementor' ),
428	'type' => Controls_Manager::COLOR,
429	'selectors' => [
430	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
431	],
432	'global' => [
433	'default' => Global_Colors::COLOR_TEXT,
434	],
435	]
436	);
437
438	$this->add_group_control(
439	Group_Control_Typography::get_type(),
440	[
441	'name' => 'content_typography',
442	'selector' => '{{WRAPPER}} .elementor-tab-content',
443	'global' => [
444	'default' => Global_Typography::TYPOGRAPHY_TEXT,
445	],
446	]
447	);
448
449	$this->add_group_control(
450	Group_Control_Text_Shadow::get_type(),
451	[
452	'name' => 'content_shadow',
453	'selector' => '{{WRAPPER}} .elementor-tab-content',
454	]
455	);
456
457	$this->end_controls_section();
458	}
459
460	/**
461	* Render tabs widget output on the frontend.
462	*
463	* Written in PHP and used to generate the final HTML.
464	*
465	* @since 1.0.0
466	* @access protected
467	*/
468	protected function render() {
469	$tabs = $this->get_settings_for_display( 'tabs' );
470
471	$id_int = substr( $this->get_id_int(), 0, 3 );
472
473	$this->add_render_attribute( 'elementor-tabs', 'class', 'elementor-tabs' );
474
475	?>
476	<div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
477	<div class="elementor-tabs-wrapper" role="tablist" >
478	<?php
479	foreach ( $tabs as $index => $item ) :
480	$tab_count = $index + 1;
481	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
482
483	$this->add_render_attribute( $tab_title_setting_key, [
484	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
485	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
486	'aria-selected' => 1 === $tab_count ? 'true' : 'false',
487	'data-tab' => $tab_count,
488	'role' => 'tab',
489	'tabindex' => 1 === $tab_count ? '0' : '-1',
490	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
491	'aria-expanded' => 'false',
492	] );
493	?>
494	<div <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>><?php
495	// PHPCS - the main text of a widget should not be escaped.
496	echo $item['tab_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
497	?></div>
498	<?php endforeach; ?>
499	</div>
500	<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
501	<?php
502	foreach ( $tabs as $index => $item ) :
503	$tab_count = $index + 1;
504	$hidden = 1 === $tab_count ? 'false' : 'hidden';
505	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
506
507	$tab_title_mobile_setting_key = $this->get_repeater_setting_key( 'tab_title_mobile', 'tabs', $tab_count );
508
509	$this->add_render_attribute( $tab_content_setting_key, [
510	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
511	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
512	'data-tab' => $tab_count,
513	'role' => 'tabpanel',
514	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
515	'tabindex' => '0',
516	'hidden' => $hidden,
517	] );
518
519	$this->add_render_attribute( $tab_title_mobile_setting_key, [
520	'class' => [ 'elementor-tab-title', 'elementor-tab-mobile-title' ],
521	'aria-selected' => 1 === $tab_count ? 'true' : 'false',
522	'data-tab' => $tab_count,
523	'role' => 'tab',
524	'tabindex' => 1 === $tab_count ? '0' : '-1',
525	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
526	'aria-expanded' => 'false',
527	] );
528
529	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
530	?>
531	<div <?php $this->print_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php
532	$this->print_unescaped_setting( 'tab_title', 'tabs', $index );
533	?></div>
534	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php
535	$this->print_text_editor( $item['tab_content'] );
536	?></div>
537	<?php endforeach; ?>
538	</div>
539	</div>
540	<?php
541	}
542
543	/**
544	* Render tabs widget output in the editor.
545	*
546	* Written as a Backbone JavaScript template and used to generate the live preview.
547	*
548	* @since 2.9.0
549	* @access protected
550	*/
551	protected function content_template() {
552	?>
553	<div class="elementor-tabs" role="tablist" aria-orientation="vertical">
554	<# if ( settings.tabs ) {
555	var elementUid = view.getIDInt().toString().substr( 0, 3 ); #>
556	<div class="elementor-tabs-wrapper" role="tablist">
557	<# _.each( settings.tabs, function( item, index ) {
558	var tabCount = index + 1,
559	tabUid = elementUid + tabCount,
560	tabTitleKey = 'tab-title-' + tabUid;
561
562	view.addRenderAttribute( tabTitleKey, {
563	'id': 'elementor-tab-title-' + tabUid,
564	'class': [ 'elementor-tab-title','elementor-tab-desktop-title' ],
565	'data-tab': tabCount,
566	'role': 'tab',
567	'tabindex': 1 === tabCount ? '0' : '-1',
568	'aria-controls': 'elementor-tab-content-' + tabUid,
569	'aria-expanded': 'false',
570	} );
571	#>
572	<div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>{{{ item.tab_title }}}</div>
573	<# } ); #>
574	</div>
575	<div class="elementor-tabs-content-wrapper">
576	<# _.each( settings.tabs, function( item, index ) {
577	var tabCount = index + 1,
578	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs',index );
579
580	view.addRenderAttribute( tabContentKey, {
581	'id': 'elementor-tab-content-' + elementUid + tabCount,
582	'class': [ 'elementor-tab-content', 'elementor-clearfix', 'elementor-repeater-item-' + item._id ],
583	'data-tab': tabCount,
584	'role' : 'tabpanel',
585	'aria-labelledby' : 'elementor-tab-title-' + elementUid + tabCount
586	} );
587
588	view.addInlineEditingAttributes( tabContentKey, 'advanced' ); #>
589	<div class="elementor-tab-title elementor-tab-mobile-title" data-tab="{{ tabCount }}" role="tab">{{{ item.tab_title }}}</div>
590	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
591	<# } ); #>
592	</div>
593	<# } #>
594	</div>
595	<?php
596	}
597	}
598