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

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

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

tabs.php

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