tabs.php — Shortcodes and extra features for Phlox theme 2.17.14

auxin-elements / includes / elementor / widgets / tabs.php

auxin-elements / includes / elementor / widgets Last commit date

tabs.php

643 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Plugin;
5	use Elementor\Widget_Base;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Background;
12
13
14	if ( ! defined( 'ABSPATH' ) ) {
15	exit; // Exit if accessed directly.
16	}
17
18	/**
19	* Elementor 'Tabs' widget.
20	*
21	* Elementor widget that displays an 'Tabs' with lightbox.
22	*
23	* @since 1.0.0
24	*/
25	class Tabs extends Widget_Base {
26
27	/**
28	* Get widget name.
29	*
30	* Retrieve 'Tabs' widget name.
31	*
32	* @since 1.0.0
33	* @access public
34	*
35	* @return string Widget name.
36	*/
37	public function get_name() {
38	return 'aux_tabs';
39	}
40
41	/**
42	* Get widget title.
43	*
44	* Retrieve 'Tabs' widget title.
45	*
46	* @since 1.0.0
47	* @access public
48	*
49	* @return string Widget title.
50	*/
51	public function get_title() {
52	return __('Tabs', 'auxin-elements' );
53	}
54
55	public function has_widget_inner_wrapper(): bool {
56	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
57	}
58
59
60	/**
61	* Get widget icon.
62	*
63	* Retrieve 'Tabs' widget icon.
64	*
65	* @since 1.0.0
66	* @access public
67	*
68	* @return string Widget icon.
69	*/
70	public function get_icon() {
71	return 'eicon-tabs auxin-badge';
72	}
73
74	/**
75	* Get widget categories.
76	*
77	* Retrieve 'Tabs' widget icon.
78	*
79	* @since 1.0.0
80	* @access public
81	*
82	* @return string Widget icon.
83	*/
84	public function get_categories() {
85	return array( 'auxin-core' );
86	}
87
88	/**
89	* Register 'Tabs' widget controls.
90	*
91	* Adds different input fields to allow the user to change and customize the widget settings.
92	*
93	* @since 1.0.0
94	* @access protected
95	*/
96	protected function register_controls() {
97
98	/-----------------------------------------------------------------------------------/
99	/* Content TAB
100	/-----------------------------------------------------------------------------------/
101
102	$this->start_controls_section(
103	'tab_items_section',
104	array(
105	'label' => __('Content', 'auxin-elements' ),
106	)
107	);
108
109	$this->add_control(
110	'tab_items',
111	array(
112	'label' => __( 'Tab Items', 'auxin-elements' ),
113	'type' => Controls_Manager::REPEATER,
114	'default' => array(
115	array(
116	'tab_label' => __( 'Tab #1', 'auxin-elements' ),
117	'content' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'auxin-elements' )
118	),
119	array(
120	'tab_label' => __( 'Tab #2', 'auxin-elements' ),
121	'content' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'auxin-elements' )
122	),
123	array(
124	'tab_label' => __( 'Tab #3', 'auxin-elements' ),
125	'content' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'auxin-elements' )
126	)
127	),
128	'fields' => array(
129	array(
130	'name' => 'tab_label',
131	'label' => __( 'Title & Content', 'auxin-elements' ),
132	'type' => Controls_Manager::TEXT,
133	'default' => __( 'Tab Title' , 'auxin-elements' ),
134	'dynamic' => array(
135	'active' => true
136	),
137	'label_block' => true
138	),
139	array(
140	'name' => 'content',
141	'label' => __( 'Content', 'auxin-elements' ),
142	'type' => Controls_Manager::WYSIWYG,
143	'default' => __( 'Tab Content', 'auxin-elements' ),
144	'show_label' => false,
145	)
146	),
147	'title_field' => '{{{ tab_label }}}'
148	)
149	);
150
151	$this->add_control(
152	'skin',
153	array(
154	'label' => __('Skin','auxin-elements' ),
155	'type' => Controls_Manager::SELECT, //'aux-visual-select',
156	'options' => array(
157	'bordered' => __('Bordered', 'auxin-elements' ),
158	'aux-stripe' => __('No border', 'auxin-elements')
159	),
160	'default' => 'bordered'
161	)
162	);
163
164	/*$this->add_control(
165	'type',
166	array(
167	'label' => __('Type','auxin-elements' ),
168	'type' => Controls_Manager::SELECT, //'aux-visual-select',
169	'options' => array(
170	'horizontal' => __('Horizontal', 'auxin-elements' ),
171	'vertical' => __('Vertical' , 'auxin-elements')
172	),
173	'default' => 'horizontal'
174	)
175	);*/
176
177	$this->end_controls_section();
178
179	/-----------------------------------------------------------------------------------/
180	/* Style TAB
181	/-----------------------------------------------------------------------------------/
182
183	/* Tabs Section
184	/-------------------------------------/
185
186	$this->start_controls_section(
187	'tab_section',
188	array(
189	'label' => __( 'Tabs', 'auxin-elements' ),
190	'tab' => Controls_Manager::TAB_STYLE
191	)
192	);
193
194	$this->add_control(
195	'tab_cursor',
196	array(
197	'label' => __( 'Mouse Cursor', 'auxin-elements' ),
198	'type' => Controls_Manager::SELECT,
199	'options' => array(
200	'default' => __( 'Default', 'auxin-elements' ),
201	'pointer' => __( 'Pointer', 'auxin-elements' ),
202	'zoom-in' => __( 'Zoom', 'auxin-elements' ),
203	'help' => __( 'Help', 'auxin-elements' )
204	),
205	'default' => 'pointer',
206	'selectors' => array(
207	'{{WRAPPER}} .tabs > li:not(.active)' => 'cursor: {{VALUE}};'
208	)
209	)
210	);
211
212	$this->add_responsive_control(
213	'tab_padding',
214	array(
215	'label' => __( 'Padding', 'auxin-elements' ),
216	'type' => Controls_Manager::DIMENSIONS,
217	'size_units' => array( 'px', 'em', '%' ),
218	'selectors' => array(
219	'{{WRAPPER}} .tabs > li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
220	)
221	)
222	);
223
224	/*$this->add_responsive_control(
225	'tab_margin',
226	array(
227	'label' => __( 'Margin', 'auxin-elements' ),
228	'type' => Controls_Manager::DIMENSIONS,
229	'size_units' => array( 'px', 'em' ),
230	'allowed_dimensions' => 'all',
231	'selectors' => array(
232	'{{WRAPPER}} .tabs > li' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
233	)
234	)
235	);*/
236
237	$this->add_control(
238	'tab_border_radius',
239	array(
240	'label' => __( 'Border Radius', 'auxin-elements' ),
241	'type' => Controls_Manager::DIMENSIONS,
242	'size_units' => array( 'px', 'em', '%' ),
243	'selectors' => array(
244	'{{WRAPPER}} .tabs > li' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
245	),
246	'allowed_dimensions' => 'all',
247	'separator' => 'after'
248	)
249	);
250
251	$this->start_controls_tabs( 'tab_status' );
252
253	$this->start_controls_tab(
254	'tab_status_normal',
255	array(
256	'label' => __( 'Normal' , 'auxin-elements' )
257	)
258	);
259
260	$this->add_group_control(
261	Group_Control_Box_Shadow::get_type(),
262	array(
263	'name' => 'tab_boxshadow_normal',
264	'label' => __( 'Box Shadow', 'auxin-elements' ),
265	'selector' => '{{WRAPPER}} .tabs > li',
266	'separator' => 'none'
267	)
268	);
269
270	$this->add_group_control(
271	Group_Control_Border::get_type(),
272	array(
273	'name' => 'tab_border_normal',
274	'selector' => '{{WRAPPER}} .tabs > li',
275	'separator' => 'none'
276	)
277	);
278
279	$this->add_group_control(
280	Group_Control_Background::get_type(),
281	array(
282	'name' => 'tab_background_normal',
283	'selector' => '{{WRAPPER}} .tabs > li',
284	'separator' => 'none'
285	)
286	);
287
288	$this->end_controls_tab();
289
290
291	$this->start_controls_tab(
292	'tab_status_hover',
293	array(
294	'label' => __( 'Hover' , 'auxin-elements' )
295	)
296	);
297
298	$this->add_group_control(
299	Group_Control_Box_Shadow::get_type(),
300	array(
301	'name' => 'tab_boxshadow_hover',
302	'label' => __( 'Box Shadow Normal', 'auxin-elements' ),
303	'selector' => '{{WRAPPER}} .tabs > li:hover',
304	'separator' => 'none'
305	)
306	);
307
308	$this->add_group_control(
309	Group_Control_Border::get_type(),
310	array(
311	'name' => 'tab_border_hover',
312	'selector' => '{{WRAPPER}} .tabs > li:hover',
313	'separator' => 'none'
314	)
315	);
316
317	$this->add_group_control(
318	Group_Control_Background::get_type(),
319	array(
320	'name' => 'tab_background_hover',
321	'selector' => '{{WRAPPER}} .tabs > li:hover',
322	'separator' => 'none'
323	)
324	);
325
326	$this->end_controls_tab();
327
328
329	$this->start_controls_tab(
330	'title_bar_status_active',
331	array(
332	'label' => __( 'Selected' , 'auxin-elements' )
333	)
334	);
335
336	$this->add_group_control(
337	Group_Control_Box_Shadow::get_type(),
338	array(
339	'name' => 'title_bar_boxshadow_active',
340	'label' => __( 'Box Shadow Normal', 'auxin-elements' ),
341	'selector' => '{{WRAPPER}} .tabs > li.active',
342	'separator' => 'none'
343	)
344	);
345
346	$this->add_group_control(
347	Group_Control_Border::get_type(),
348	array(
349	'name' => 'title_bar_border_active',
350	'selector' => '{{WRAPPER}} .tabs > li.active',
351	'separator' => 'none'
352	)
353	);
354
355	$this->add_group_control(
356	Group_Control_Background::get_type(),
357	array(
358	'name' => 'title_bar_background_active',
359	'selector' => '{{WRAPPER}} .tabs > li.active',
360	'separator' => 'none'
361	)
362	);
363
364	$this->end_controls_tab();
365
366	$this->end_controls_tabs();
367
368
369	$this->end_controls_section();
370
371
372	/* Title Style Section
373	/-------------------------------------/
374
375	$this->start_controls_section(
376	'title_style_section',
377	array(
378	'label' => __( 'Title', 'auxin-elements' ),
379	'tab' => Controls_Manager::TAB_STYLE
380	)
381	);
382
383	$this->start_controls_tabs( 'title_colors' );
384
385	$this->start_controls_tab(
386	'title_color_normal',
387	array(
388	'label' => __( 'Normal' , 'auxin-elements' )
389	)
390	);
391
392	$this->add_control(
393	'title_color',
394	array(
395	'label' => __( 'Color', 'auxin-elements' ),
396	'type' => Controls_Manager::COLOR,
397	'selectors' => array(
398	'{{WRAPPER}} .tabs a' => 'color: {{VALUE}} !important;'
399	)
400	)
401	);
402
403	$this->end_controls_tab();
404
405	$this->start_controls_tab(
406	'title_color_hover',
407	array(
408	'label' => __( 'Hover' , 'auxin-elements' )
409	)
410	);
411
412	$this->add_control(
413	'title_hover_color',
414	array(
415	'label' => __( 'Color', 'auxin-elements' ),
416	'type' => Controls_Manager::COLOR,
417	'selectors' => array(
418	'{{WRAPPER}} .tabs li:hover a' => 'color: {{VALUE}} !important;',
419	)
420	)
421	);
422
423	$this->end_controls_tab();
424
425	$this->end_controls_tabs();
426
427	$this->add_group_control(
428	Group_Control_Typography::get_type(),
429	array(
430	'name' => 'title_typography',
431	'global' => [
432	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
433	],
434	'selector' => '{{WRAPPER}} .tabs a'
435	)
436	);
437
438	$this->end_controls_section();
439
440	/* Content Style Section
441	/-------------------------------------/
442
443	$this->start_controls_section(
444	'content_style_section',
445	array(
446	'label' => __( 'Content', 'auxin-elements' ),
447	'tab' => Controls_Manager::TAB_STYLE
448	)
449	);
450
451	$this->add_control(
452	'content_color',
453	array(
454	'label' => __( 'Color', 'auxin-elements' ),
455	'type' => Controls_Manager::COLOR,
456	'selectors' => array(
457	'{{WRAPPER}} .tabs-content .entry-editor' => 'color: {{VALUE}}'
458	)
459	)
460	);
461
462	$this->add_group_control(
463	Group_Control_Typography::get_type(),
464	array(
465	'name' => 'content_typography',
466	'global' => [
467	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
468	],
469	'selector' => '{{WRAPPER}} .tabs-content .entry-editor'
470	)
471	);
472
473	$this->add_responsive_control(
474	'content_padding',
475	array(
476	'label' => __( 'Padding', 'auxin-elements' ),
477	'type' => Controls_Manager::DIMENSIONS,
478	'size_units' => array( 'px', 'em', '%' ),
479	'separator' => 'before',
480	'selectors' => array(
481	'{{WRAPPER}} .tabs-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
482	)
483	)
484	);
485
486	$this->add_responsive_control(
487	'content_margin',
488	array(
489	'label' => __( 'Margin', 'auxin-elements' ),
490	'type' => Controls_Manager::DIMENSIONS,
491	'size_units' => array( 'px', 'em' ),
492	'allowed_dimensions' => 'all',
493	'selectors' => array(
494	'{{WRAPPER}} .tabs-content' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
495	)
496	)
497	);
498
499	$this->add_control(
500	'content_border_radius',
501	array(
502	'label' => __( 'Border Radius', 'auxin-elements' ),
503	'type' => Controls_Manager::DIMENSIONS,
504	'size_units' => array( 'px', 'em', '%' ),
505	'selectors' => array(
506	'{{WRAPPER}} .tabs-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
507	),
508	'allowed_dimensions' => 'all',
509	'separator' => 'before'
510	)
511	);
512
513	$this->add_group_control(
514	Group_Control_Box_Shadow::get_type(),
515	array(
516	'name' => 'content_shadow',
517	'selector' => '{{WRAPPER}} .tabs-content',
518	'separator' => 'none'
519	)
520	);
521
522	$this->add_group_control(
523	Group_Control_Border::get_type(),
524	array(
525	'name' => 'content_border',
526	'selector' => '{{WRAPPER}} .tabs-content',
527	'separator' => 'none'
528	)
529	);
530
531	$this->add_group_control(
532	Group_Control_Background::get_type(),
533	array(
534	'name' => 'content_background',
535	'selector' => '{{WRAPPER}} .tabs-content',
536	'separator' => 'none'
537	)
538	);
539
540	$this->end_controls_section();
541	}
542
543	/**
544	* Render 'Tabs' widget output on the frontend.
545	*
546	* Written in PHP and used to generate the final HTML.
547	*
548	* @since 1.0.0
549	* @access protected
550	*/
551	protected function render() {
552
553	$settings = $this->get_settings_for_display();
554
555	$args = array(
556	'style' => $settings['skin'],
557	'tabs' => $settings['tab_items'],
558	//'type' => $settings['type'],
559	'tab_id_prefix'=> substr( $this->get_id_int(), 0, 3 )
560	);
561
562	// pass the args through the corresponding shortcode callback
563	echo auxin_widget_tabs_callback( $args );
564	}
565
566
567	/**
568	* Render tabs element in the editor.
569	*
570	* @access protected
571	*/
572	protected function content_template() {
573	?>
574	<section class="widget-container aux-widget-tabs">
575	<#
576	view.addRenderAttribute(
577	'widgetTabs',
578	{
579	'class': [ 'widget-container', 'widget-tabs', settings.style ],
580	}
581	);
582	#>
583	<div {{{ view.getRenderAttributeString('widgetTabs') }}}>
584	<div class="widget-inner">
585	<ul class="tabs">
586	<#
587	if ( settings.tab_items ) {
588	var tabindex = view.getIDInt().toString().substr( 0, 3 );
589
590	_.each( settings.tab_items, function( item, index ) {
591	var tabLabelKey = view.getRepeaterSettingKey( 'tab_label', 'tab_items', index ),
592	IdNumber = tabindex + index + 1;
593
594	view.addRenderAttribute( tabLabelKey, {
595	'id': 'aux-tab-' + IdNumber,
596	'href': '',
597	'tabindex': IdNumber,
598	'role': 'tab',
599	'aria-controls': 'aux-tab-content-' + IdNumber
600	} );
601	#>
602	<li><a {{{ view.getRenderAttributeString( tabLabelKey ) }}}>{{{ item.tab_label }}}</a></li>
603	<#
604	});
605	}
606	#>
607	</ul>
608	<ul class="tabs-content">
609	<#
610	if ( settings.tab_items ) {
611	var tabindex = view.getIDInt().toString().substr( 0, 3 );
612
613	_.each( settings.tab_items, function( item, index ) {
614	var tabContentKey = view.getRepeaterSettingKey( 'content', 'tab_items', index ),
615	IdNumber = tabindex + index + 1;
616
617	view.addRenderAttribute( tabContentKey, {
618	'id': 'aux-tab-content-' + IdNumber,
619	'class': [ 'entry-editor' ],
620	'role': 'tabpanel',
621	'aria-labelledby': 'aux-tab-' + IdNumber
622	} );
623
624	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
625	#>
626	<li>
627	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
628	<p>{{{ item.content }}}</p>
629	</div>
630	</li>
631	<#
632	});
633	}
634	#>
635	</ul>
636	</div>
637	</div>
638	</section>
639	<?php
640	}
641
642	}
643