elementor / includes / widgets / tabs.php

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

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