elementor / includes / widgets / tabs.php

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

438 lines 11.3 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 __( '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	/**
78	* Register tabs widget controls.
79	*
80	* Adds different input fields to allow the user to change and customize the widget settings.
81	*
82	* @since 1.0.0
83	* @access protected
84	*/
85	protected function _register_controls() {
86	$this->start_controls_section(
87	'section_tabs',
88	[
89	'label' => __( 'Tabs', 'elementor' ),
90	]
91	);
92
93	$repeater = new Repeater();
94
95	$repeater->add_control(
96	'tab_title',
97	[
98	'label' => __( 'Title & Description', 'elementor' ),
99	'type' => Controls_Manager::TEXT,
100	'default' => __( 'Tab Title', 'elementor' ),
101	'placeholder' => __( 'Tab Title', 'elementor' ),
102	'label_block' => true,
103	]
104	);
105
106	$repeater->add_control(
107	'tab_content',
108	[
109	'label' => __( 'Content', 'elementor' ),
110	'default' => __( 'Tab Content', 'elementor' ),
111	'placeholder' => __( 'Tab Content', 'elementor' ),
112	'type' => Controls_Manager::WYSIWYG,
113	'show_label' => false,
114	'dynamic' => [
115	'active' => false,
116	],
117	]
118	);
119
120	$this->add_control(
121	'tabs',
122	[
123	'label' => __( 'Tabs Items', 'elementor' ),
124	'type' => Controls_Manager::REPEATER,
125	'fields' => $repeater->get_controls(),
126	'default' => [
127	[
128	'tab_title' => __( 'Tab #1', 'elementor' ),
129	'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
130	],
131	[
132	'tab_title' => __( 'Tab #2', 'elementor' ),
133	'tab_content' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
134	],
135	],
136	'title_field' => '{{{ tab_title }}}',
137	]
138	);
139
140	$this->add_control(
141	'view',
142	[
143	'label' => __( 'View', 'elementor' ),
144	'type' => Controls_Manager::HIDDEN,
145	'default' => 'traditional',
146	]
147	);
148
149	$this->add_control(
150	'type',
151	[
152	'label' => __( 'Type', 'elementor' ),
153	'type' => Controls_Manager::SELECT,
154	'default' => 'horizontal',
155	'options' => [
156	'horizontal' => __( 'Horizontal', 'elementor' ),
157	'vertical' => __( 'Vertical', 'elementor' ),
158	],
159	'prefix_class' => 'elementor-tabs-view-',
160	'separator' => 'before',
161	]
162	);
163
164	$this->end_controls_section();
165
166	$this->start_controls_section(
167	'section_tabs_style',
168	[
169	'label' => __( 'Tabs', 'elementor' ),
170	'tab' => Controls_Manager::TAB_STYLE,
171	]
172	);
173
174	$this->add_control(
175	'navigation_width',
176	[
177	'label' => __( 'Navigation Width', 'elementor' ),
178	'type' => Controls_Manager::SLIDER,
179	'default' => [
180	'unit' => '%',
181	],
182	'range' => [
183	'%' => [
184	'min' => 10,
185	'max' => 50,
186	],
187	],
188	'selectors' => [
189	'{{WRAPPER}} .elementor-tabs-wrapper' => 'width: {{SIZE}}{{UNIT}}',
190	],
191	'condition' => [
192	'type' => 'vertical',
193	],
194	]
195	);
196
197	$this->add_control(
198	'border_width',
199	[
200	'label' => __( 'Border Width', 'elementor' ),
201	'type' => Controls_Manager::SLIDER,
202	'default' => [
203	'size' => 1,
204	],
205	'range' => [
206	'px' => [
207	'min' => 0,
208	'max' => 10,
209	],
210	],
211	'selectors' => [
212	'{{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}};',
213	],
214	]
215	);
216
217	$this->add_control(
218	'border_color',
219	[
220	'label' => __( 'Border Color', 'elementor' ),
221	'type' => Controls_Manager::COLOR,
222	'selectors' => [
223	'{{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}};',
224	],
225	]
226	);
227
228	$this->add_control(
229	'background_color',
230	[
231	'label' => __( 'Background Color', 'elementor' ),
232	'type' => Controls_Manager::COLOR,
233	'selectors' => [
234	'{{WRAPPER}} .elementor-tab-desktop-title.elementor-active' => 'background-color: {{VALUE}};',
235	'{{WRAPPER}} .elementor-tabs-content-wrapper' => 'background-color: {{VALUE}};',
236	],
237	]
238	);
239
240	$this->add_control(
241	'heading_title',
242	[
243	'label' => __( 'Title', 'elementor' ),
244	'type' => Controls_Manager::HEADING,
245	'separator' => 'before',
246	]
247	);
248
249	$this->add_control(
250	'tab_color',
251	[
252	'label' => __( 'Color', 'elementor' ),
253	'type' => Controls_Manager::COLOR,
254	'selectors' => [
255	'{{WRAPPER}} .elementor-tab-title, {{WRAPPER}} .elementor-tab-title a' => 'color: {{VALUE}};',
256	],
257	'global' => [
258	'default' => Global_Colors::COLOR_PRIMARY,
259	],
260	]
261	);
262
263	$this->add_control(
264	'tab_active_color',
265	[
266	'label' => __( 'Active Color', 'elementor' ),
267	'type' => Controls_Manager::COLOR,
268	'selectors' => [
269	'{{WRAPPER}} .elementor-tab-title.elementor-active a' => 'color: {{VALUE}};',
270	],
271	'global' => [
272	'default' => Global_Colors::COLOR_ACCENT,
273	],
274	]
275	);
276
277	$this->add_group_control(
278	Group_Control_Typography::get_type(),
279	[
280	'name' => 'tab_typography',
281	'selector' => '{{WRAPPER}} .elementor-tab-title',
282	'global' => [
283	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
284	],
285	]
286	);
287
288	$this->add_control(
289	'heading_content',
290	[
291	'label' => __( 'Content', 'elementor' ),
292	'type' => Controls_Manager::HEADING,
293	'separator' => 'before',
294	]
295	);
296
297	$this->add_control(
298	'content_color',
299	[
300	'label' => __( 'Color', 'elementor' ),
301	'type' => Controls_Manager::COLOR,
302	'selectors' => [
303	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
304	],
305	'global' => [
306	'default' => Global_Colors::COLOR_TEXT,
307	],
308	]
309	);
310
311	$this->add_group_control(
312	Group_Control_Typography::get_type(),
313	[
314	'name' => 'content_typography',
315	'selector' => '{{WRAPPER}} .elementor-tab-content',
316	'global' => [
317	'default' => Global_Typography::TYPOGRAPHY_TEXT,
318	],
319	]
320	);
321
322	$this->end_controls_section();
323	}
324
325	/**
326	* Render tabs widget output on the frontend.
327	*
328	* Written in PHP and used to generate the final HTML.
329	*
330	* @since 1.0.0
331	* @access protected
332	*/
333	protected function render() {
334	$tabs = $this->get_settings_for_display( 'tabs' );
335
336	$id_int = substr( $this->get_id_int(), 0, 3 );
337	?>
338	<div class="elementor-tabs" role="tablist">
339	<div class="elementor-tabs-wrapper">
340	<?php
341	foreach ( $tabs as $index => $item ) :
342	$tab_count = $index + 1;
343
344	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
345
346	$this->add_render_attribute( $tab_title_setting_key, [
347	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
348	'class' => [ 'elementor-tab-title', 'elementor-tab-desktop-title' ],
349	'data-tab' => $tab_count,
350	'role' => 'tab',
351	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
352	] );
353	?>
354	<div <?php echo $this->get_render_attribute_string( $tab_title_setting_key ); ?>><a href=""><?php echo $item['tab_title']; ?></a></div>
355	<?php endforeach; ?>
356	</div>
357	<div class="elementor-tabs-content-wrapper">
358	<?php
359	foreach ( $tabs as $index => $item ) :
360	$tab_count = $index + 1;
361
362	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
363
364	$tab_title_mobile_setting_key = $this->get_repeater_setting_key( 'tab_title_mobile', 'tabs', $tab_count );
365
366	$this->add_render_attribute( $tab_content_setting_key, [
367	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
368	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
369	'data-tab' => $tab_count,
370	'role' => 'tabpanel',
371	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
372	] );
373
374	$this->add_render_attribute( $tab_title_mobile_setting_key, [
375	'class' => [ 'elementor-tab-title', 'elementor-tab-mobile-title' ],
376	'data-tab' => $tab_count,
377	'role' => 'tab',
378	] );
379
380	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
381	?>
382	<div <?php echo $this->get_render_attribute_string( $tab_title_mobile_setting_key ); ?>><?php echo $item['tab_title']; ?></div>
383	<div <?php echo $this->get_render_attribute_string( $tab_content_setting_key ); ?>><?php echo $this->parse_text_editor( $item['tab_content'] ); ?></div>
384	<?php endforeach; ?>
385	</div>
386	</div>
387	<?php
388	}
389
390	/**
391	* Render tabs widget output in the editor.
392	*
393	* Written as a Backbone JavaScript template and used to generate the live preview.
394	*
395	* @since 2.9.0
396	* @access protected
397	*/
398	protected function content_template() {
399	?>
400	<div class="elementor-tabs" role="tablist">
401	<#
402	if ( settings.tabs ) {
403	var tabindex = view.getIDInt().toString().substr( 0, 3 );
404	#>
405	<div class="elementor-tabs-wrapper">
406	<#
407	_.each( settings.tabs, function( item, index ) {
408	var tabCount = index + 1;
409	#>
410	<div id="elementor-tab-title-{{ tabindex + tabCount }}" class="elementor-tab-title elementor-tab-desktop-title" data-tab="{{ tabCount }}" role="tab" aria-controls="elementor-tab-content-{{ tabindex + tabCount }}"><a href="">{{{ item.tab_title }}}</a></div>
411	<# } ); #>
412	</div>
413	<div class="elementor-tabs-content-wrapper">
414	<#
415	_.each( settings.tabs, function( item, index ) {
416	var tabCount = index + 1,
417	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs',index );
418
419	view.addRenderAttribute( tabContentKey, {
420	'id': 'elementor-tab-content-' + tabindex + tabCount,
421	'class': [ 'elementor-tab-content', 'elementor-clearfix', 'elementor-repeater-item-' + item._id ],
422	'data-tab': tabCount,
423	'role' : 'tabpanel',
424	'aria-labelledby' : 'elementor-tab-title-' + tabindex + tabCount
425	} );
426
427	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
428	#>
429	<div class="elementor-tab-title elementor-tab-mobile-title" data-tab="{{ tabCount }}" role="tab">{{{ item.tab_title }}}</div>
430	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
431	<# } ); #>
432	</div>
433	<# } #>
434	</div>
435	<?php
436	}
437	}
438