accordion.php — Shortcodes and extra features for Phlox theme 2.5.8

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

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

accordion.php

789 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 'Accordion' widget.
20	*
21	* Elementor widget that displays an 'Accordion' with lightbox.
22	*
23	* @since 1.0.0
24	*/
25	class Accordion extends Widget_Base {
26
27	/**
28	* Get widget name.
29	*
30	* Retrieve 'Accordion' 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_accordion';
39	}
40
41	/**
42	* Get widget title.
43	*
44	* Retrieve 'Accordion' 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 __('Accordion', 'auxin-elements' );
53	}
54
55	/**
56	* Get widget icon.
57	*
58	* Retrieve 'Accordion' 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-accordion auxin-badge';
67	}
68
69	/**
70	* Get widget categories.
71	*
72	* Retrieve 'Accordion' 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 'Accordion' 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' => __( 'Accordion Items', 'auxin-elements' ),
108	'type' => Controls_Manager::REPEATER,
109	'default' => array(
110	array(
111	'accordion_label' => __( 'Accordion #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	'accordion_label' => __( 'Accordion #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	),
119	'fields' => array(
120	array(
121	'name' => 'accordion_label',
122	'label' => __( 'Title & Content', 'auxin-elements' ),
123	'type' => Controls_Manager::TEXT,
124	'default' => __( 'Accordion Title' , 'auxin-elements' ),
125	'dynamic' => array(
126	'active' => true
127	),
128	'label_block' => true
129	),
130	array(
131	'name' => 'content',
132	'label' => __( 'Content', 'auxin-elements' ),
133	'type' => Controls_Manager::WYSIWYG,
134	'default' => __( 'Accordion Content', 'auxin-elements' ),
135	'show_label' => false,
136	)
137	),
138	'title_field' => '{{{ accordion_label }}}'
139	)
140	);
141
142	$this->add_control(
143	'type',
144	array(
145	'label' => __('Type','auxin-elements' ),
146	'label_block' => true,
147	'type' => Controls_Manager::SELECT, //'aux-visual-select',
148	'options' => array(
149	'false' => __('Toggle', 'auxin-elements'),
150	'true' => __('Accordion (auto close other open tabs)', 'auxin-elements')
151	),
152	'default' => 'true'
153	)
154	);
155
156	$this->add_control(
157	'title_tag',
158	array(
159	'label' => __( 'Title HTML Tag', 'auxin-elements' ),
160	'type' => Controls_Manager::SELECT,
161	'options' => array(
162	'div' => 'div',
163	'section' => 'section',
164	'h1' => 'H1',
165	'h2' => 'H2',
166	'h3' => 'H3',
167	'h4' => 'H4',
168	'h5' => 'H5',
169	'h6' => 'H6'
170	),
171	'default' => 'h5'
172	)
173	);
174
175	$this->end_controls_section();
176
177	/-----------------------------------------------------------------------------------/
178	/* Style TAB
179	/-----------------------------------------------------------------------------------/
180
181	/* Accordion Item Section
182	/-------------------------------------/
183
184	$this->start_controls_section(
185	'item_container_section',
186	array(
187	'label' => __( 'Item Wrapper', 'auxin-elements' ),
188	'tab' => Controls_Manager::TAB_STYLE
189	)
190	);
191
192	$this->add_responsive_control(
193	'item_container_margin',
194	array(
195	'label' => __( 'Margin', 'auxin-elements' ),
196	'type' => Controls_Manager::DIMENSIONS,
197	'size_units' => array( 'px', 'em' ),
198	'allowed_dimensions' => 'all',
199	'selectors' => array(
200	'{{WRAPPER}} .aux-toggle-item' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
201	)
202	)
203	);
204
205	$this->add_control(
206	'item_container_border_radius',
207	array(
208	'label' => __( 'Border Radius', 'auxin-elements' ),
209	'type' => Controls_Manager::DIMENSIONS,
210	'size_units' => array( 'px', 'em', '%' ),
211	'selectors' => array(
212	'{{WRAPPER}} .aux-toggle-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
213	),
214	'allowed_dimensions' => 'all',
215	'separator' => 'after'
216	)
217	);
218
219	$this->start_controls_tabs( 'item_container_status' );
220
221	$this->start_controls_tab(
222	'item_container_status_normal',
223	array(
224	'label' => __( 'Normal' , 'auxin-elements' )
225	)
226	);
227
228	$this->add_group_control(
229	Group_Control_Box_Shadow::get_type(),
230	array(
231	'name' => 'item_container_boxshadow_normal',
232	'label' => __( 'Box Shadow', 'auxin-elements' ),
233	'selector' => '{{WRAPPER}} .aux-toggle-item',
234	'separator' => 'none'
235	)
236	);
237
238	$this->add_group_control(
239	Group_Control_Background::get_type(),
240	array(
241	'name' => 'item_container_background_normal',
242	'selector' => '{{WRAPPER}} .aux-toggle-item',
243	'separator' => 'before'
244	)
245	);
246
247	$this->add_group_control(
248	Group_Control_Border::get_type(),
249	array(
250	'name' => 'item_container_border_normal',
251	'selector' => '{{WRAPPER}} .aux-toggle-item',
252	'separator' => 'before'
253	)
254	);
255
256	$this->end_controls_tab();
257
258
259	$this->start_controls_tab(
260	'item_container_status_hover',
261	array(
262	'label' => __( 'Hover' , 'auxin-elements' )
263	)
264	);
265
266	$this->add_group_control(
267	Group_Control_Box_Shadow::get_type(),
268	array(
269	'name' => 'item_container_boxshadow_hover',
270	'label' => __( 'Box Shadow', 'auxin-elements' ),
271	'selector' => '{{WRAPPER}} .aux-toggle-item:hover',
272	'separator' => 'none'
273	)
274	);
275
276	$this->add_group_control(
277	Group_Control_Background::get_type(),
278	array(
279	'name' => 'item_container_background_hover',
280	'selector' => '{{WRAPPER}} .aux-toggle-item:hover',
281	'separator' => 'before'
282	)
283	);
284
285	$this->add_group_control(
286	Group_Control_Border::get_type(),
287	array(
288	'name' => 'item_container_border_hover',
289	'selector' => '{{WRAPPER}} .aux-toggle-item:hover',
290	'separator' => 'before'
291	)
292	);
293
294	$this->end_controls_tab();
295
296
297	$this->start_controls_tab(
298	'item_container_status_active',
299	array(
300	'label' => __( 'Selected' , 'auxin-elements' )
301	)
302	);
303
304	$this->add_group_control(
305	Group_Control_Box_Shadow::get_type(),
306	array(
307	'name' => 'item_container_boxshadow_active',
308	'label' => __( 'Box Shadow', 'auxin-elements' ),
309	'selector' => '{{WRAPPER}} .active.aux-toggle-item',
310	'separator' => 'none'
311	)
312	);
313
314	$this->add_group_control(
315	Group_Control_Background::get_type(),
316	array(
317	'name' => 'item_container_background_active',
318	'selector' => '{{WRAPPER}} .active.aux-toggle-item',
319	'separator' => 'before'
320	)
321	);
322
323	$this->add_group_control(
324	Group_Control_Border::get_type(),
325	array(
326	'name' => 'item_container_border_active',
327	'selector' => '{{WRAPPER}} .active.aux-toggle-item',
328	'separator' => 'before'
329	)
330	);
331
332	$this->end_controls_tab();
333
334	$this->end_controls_tabs();
335
336
337	$this->end_controls_section();
338
339	/* Title Bar Section
340	/-------------------------------------/
341
342	$this->start_controls_section(
343	'title_bar_section',
344	array(
345	'label' => __( 'Title Bar', 'auxin-elements' ),
346	'tab' => Controls_Manager::TAB_STYLE
347	)
348	);
349
350	$this->add_control(
351	'title_bar_cursor',
352	array(
353	'label' => __( 'Mouse Cursor', 'auxin-elements' ),
354	'type' => Controls_Manager::SELECT,
355	'options' => array(
356	'default' => __( 'Default', 'auxin-elements' ),
357	'pointer' => __( 'Pointer', 'auxin-elements' ),
358	'zoom-in' => __( 'Zoom', 'auxin-elements' ),
359	'help' => __( 'Help', 'auxin-elements' )
360	),
361	'default' => 'pointer',
362	'selectors' => array(
363	'{{WRAPPER}} .widget-inner > :not(.active) .aux-toggle-header' => 'cursor: {{VALUE}};'
364	)
365	)
366	);
367
368	$this->add_responsive_control(
369	'title_bar_padding',
370	array(
371	'label' => __( 'Padding', 'auxin-elements' ),
372	'type' => Controls_Manager::DIMENSIONS,
373	'size_units' => array( 'px', 'em', '%' ),
374	'selectors' => array(
375	'{{WRAPPER}} .aux-toggle-header' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
376	)
377	)
378	);
379
380	$this->add_responsive_control(
381	'title_bar_margin',
382	array(
383	'label' => __( 'Margin', 'auxin-elements' ),
384	'type' => Controls_Manager::DIMENSIONS,
385	'size_units' => array( 'px', 'em' ),
386	'allowed_dimensions' => 'all',
387	'selectors' => array(
388	'{{WRAPPER}} .aux-toggle-header' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
389	)
390	)
391	);
392
393	$this->add_control(
394	'title_bar_border_radius',
395	array(
396	'label' => __( 'Border Radius', 'auxin-elements' ),
397	'type' => Controls_Manager::DIMENSIONS,
398	'size_units' => array( 'px', 'em', '%' ),
399	'selectors' => array(
400	'{{WRAPPER}} .aux-toggle-header' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
401	),
402	'allowed_dimensions' => 'all',
403	'separator' => 'after'
404	)
405	);
406
407	$this->start_controls_tabs( 'title_bar_status' );
408
409	$this->start_controls_tab(
410	'title_bar_status_normal',
411	array(
412	'label' => __( 'Normal' , 'auxin-elements' )
413	)
414	);
415
416	$this->add_group_control(
417	Group_Control_Box_Shadow::get_type(),
418	array(
419	'name' => 'title_bar_boxshadow_normal',
420	'label' => __( 'Box Shadow', 'auxin-elements' ),
421	'selector' => '{{WRAPPER}} .aux-toggle-header',
422	'separator' => 'none'
423	)
424	);
425
426	$this->add_group_control(
427	Group_Control_Background::get_type(),
428	array(
429	'name' => 'title_bar_background_normal',
430	'selector' => '{{WRAPPER}} .aux-toggle-header',
431	'separator' => 'before'
432	)
433	);
434
435	$this->add_group_control(
436	Group_Control_Border::get_type(),
437	array(
438	'name' => 'title_bar_border_normal',
439	'selector' => '{{WRAPPER}} .aux-toggle-header',
440	'separator' => 'before'
441	)
442	);
443
444	$this->end_controls_tab();
445
446
447	$this->start_controls_tab(
448	'title_bar_status_hover',
449	array(
450	'label' => __( 'Hover' , 'auxin-elements' )
451	)
452	);
453
454	$this->add_group_control(
455	Group_Control_Box_Shadow::get_type(),
456	array(
457	'name' => 'title_bar_boxshadow_hover',
458	'label' => __( 'Box Shadow', 'auxin-elements' ),
459	'selector' => '{{WRAPPER}} .aux-toggle-header:hover',
460	'separator' => 'none'
461	)
462	);
463
464	$this->add_group_control(
465	Group_Control_Background::get_type(),
466	array(
467	'name' => 'title_bar_background_hover',
468	'selector' => '{{WRAPPER}} .aux-toggle-header:hover',
469	'separator' => 'before'
470	)
471	);
472
473	$this->add_group_control(
474	Group_Control_Border::get_type(),
475	array(
476	'name' => 'title_bar_border_hover',
477	'selector' => '{{WRAPPER}} .aux-toggle-header:hover',
478	'separator' => 'before'
479	)
480	);
481
482	$this->end_controls_tab();
483
484
485	$this->start_controls_tab(
486	'title_bar_status_active',
487	array(
488	'label' => __( 'Selected' , 'auxin-elements' )
489	)
490	);
491
492	$this->add_group_control(
493	Group_Control_Box_Shadow::get_type(),
494	array(
495	'name' => 'title_bar_boxshadow_active',
496	'label' => __( 'Box Shadow', 'auxin-elements' ),
497	'selector' => '{{WRAPPER}} .active .aux-toggle-header',
498	'separator' => 'none'
499	)
500	);
501
502	$this->add_group_control(
503	Group_Control_Background::get_type(),
504	array(
505	'name' => 'title_bar_background_active',
506	'selector' => '{{WRAPPER}} .active .aux-toggle-header',
507	'separator' => 'before'
508	)
509	);
510
511	$this->add_group_control(
512	Group_Control_Border::get_type(),
513	array(
514	'name' => 'title_bar_border_active',
515	'selector' => '{{WRAPPER}} .active .aux-toggle-header',
516	'separator' => 'before'
517	)
518	);
519
520	$this->end_controls_tab();
521
522	$this->end_controls_tabs();
523
524
525	$this->end_controls_section();
526
527
528	/* Title Style Section
529	/-------------------------------------/
530
531	$this->start_controls_section(
532	'title_style_section',
533	array(
534	'label' => __( 'Title', 'auxin-elements' ),
535	'tab' => Controls_Manager::TAB_STYLE
536	)
537	);
538
539	$this->start_controls_tabs( 'title_colors' );
540
541	$this->start_controls_tab(
542	'title_color_normal',
543	array(
544	'label' => __( 'Normal' , 'auxin-elements' )
545	)
546	);
547
548	$this->add_control(
549	'title_color',
550	array(
551	'label' => __( 'Color', 'auxin-elements' ),
552	'type' => Controls_Manager::COLOR,
553	'selectors' => array(
554	'{{WRAPPER}} .aux-toggle-header' => 'color: {{VALUE}} !important;'
555	)
556	)
557	);
558
559	$this->end_controls_tab();
560
561	$this->start_controls_tab(
562	'title_color_hover',
563	array(
564	'label' => __( 'Hover' , 'auxin-elements' )
565	)
566	);
567
568	$this->add_control(
569	'title_hover_color',
570	array(
571	'label' => __( 'Color', 'auxin-elements' ),
572	'type' => Controls_Manager::COLOR,
573	'selectors' => array(
574	'{{WRAPPER}} .aux-toggle-header:hover' => 'color: {{VALUE}} !important;',
575	)
576	)
577	);
578
579	$this->end_controls_tab();
580
581	$this->start_controls_tab(
582	'title_color_selected',
583	array(
584	'label' => __( 'Selected' , 'auxin-elements' )
585	)
586	);
587
588	$this->add_control(
589	'title_selected_color',
590	array(
591	'label' => __( 'Color', 'auxin-elements' ),
592	'type' => Controls_Manager::COLOR,
593	'selectors' => array(
594	'{{WRAPPER}} .active .aux-toggle-header' => 'color: {{VALUE}} !important;',
595	)
596	)
597	);
598
599	$this->end_controls_tabs();
600
601	$this->add_group_control(
602	Group_Control_Typography::get_type(),
603	array(
604	'name' => 'title_typography',
605	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
606	'selector' => '{{WRAPPER}} .aux-toggle-header'
607	)
608	);
609
610	$this->end_controls_section();
611
612	/* Content Style Section
613	/-------------------------------------/
614
615	$this->start_controls_section(
616	'content_style_section',
617	array(
618	'label' => __( 'Content', 'auxin-elements' ),
619	'tab' => Controls_Manager::TAB_STYLE
620	)
621	);
622
623	$this->add_control(
624	'content_color',
625	array(
626	'label' => __( 'Color', 'auxin-elements' ),
627	'type' => Controls_Manager::COLOR,
628	'selectors' => array(
629	'{{WRAPPER}} .aux-toggle-content' => 'color: {{VALUE}}'
630	)
631	)
632	);
633
634	$this->add_group_control(
635	Group_Control_Typography::get_type(),
636	array(
637	'name' => 'content_typography',
638	'scheme' => Scheme_Typography::TYPOGRAPHY_1,
639	'selector' => '{{WRAPPER}} .aux-toggle-content'
640	)
641	);
642
643	$this->add_responsive_control(
644	'content_padding',
645	array(
646	'label' => __( 'Padding', 'auxin-elements' ),
647	'type' => Controls_Manager::DIMENSIONS,
648	'size_units' => array( 'px', 'em', '%' ),
649	'separator' => 'before',
650	'selectors' => array(
651	'{{WRAPPER}} .aux-toggle-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
652	)
653	)
654	);
655
656	$this->add_responsive_control(
657	'content_margin',
658	array(
659	'label' => __( 'Margin', 'auxin-elements' ),
660	'type' => Controls_Manager::DIMENSIONS,
661	'size_units' => array( 'px', 'em' ),
662	'allowed_dimensions' => 'all',
663	'selectors' => array(
664	'{{WRAPPER}} .aux-toggle-content' => 'margin:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
665	)
666	)
667	);
668
669	$this->add_control(
670	'content_border_radius',
671	array(
672	'label' => __( 'Border Radius', 'auxin-elements' ),
673	'type' => Controls_Manager::DIMENSIONS,
674	'size_units' => array( 'px', 'em', '%' ),
675	'selectors' => array(
676	'{{WRAPPER}} .aux-toggle-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow:hidden;'
677	),
678	'allowed_dimensions' => 'all',
679	'separator' => 'before'
680	)
681	);
682
683	$this->add_group_control(
684	Group_Control_Box_Shadow::get_type(),
685	array(
686	'name' => 'content_shadow',
687	'selector' => '{{WRAPPER}} .aux-toggle-content',
688	'separator' => 'none'
689	)
690	);
691
692	$this->add_group_control(
693	Group_Control_Background::get_type(),
694	array(
695	'name' => 'content_background',
696	'selector' => '{{WRAPPER}} .aux-toggle-content',
697	'separator' => 'before'
698	)
699	);
700
701	$this->add_group_control(
702	Group_Control_Border::get_type(),
703	array(
704	'name' => 'content_border',
705	'selector' => '{{WRAPPER}} .aux-toggle-content',
706	'separator' => 'before'
707	)
708	);
709
710	$this->end_controls_section();
711	}
712
713	/**
714	* Render 'Accordion' widget output on the frontend.
715	*
716	* Written in PHP and used to generate the final HTML.
717	*
718	* @since 1.0.0
719	* @access protected
720	*/
721	protected function render() {
722
723	$settings = $this->get_settings_for_display();
724
725	$args = array(
726	'type' => $settings['type'],
727	'accordion' => $settings['tab_items'],
728	'title_tag' => $settings['title_tag'],
729	'tab_id_prefix'=> substr( $this->get_id_int(), 0, 3 )
730	);
731
732	// pass the args through the corresponding shortcode callback
733	echo auxin_widget_accordion_callback( $args );
734	}
735
736	/**
737	* Render accordion element in the editor.
738	*
739	* @access protected
740	*/
741	protected function _content_template() {
742	?>
743	<# var typeClass = settings.type == 'true' ? 'aux-type-toggle' : 'aux-type-accordion'; #>
744	<section class="widget-container aux-widget-accordion widget-toggle">
745	<div class="widget-inner {{{ typeClass }}}" data-toggle="{{{ settings.type }}}">
746	<#
747	if ( settings.tab_items ) {
748	var tabindex = view.getIDInt().toString().substr( 0, 3 );
749
750	_.each( settings.tab_items, function( item, index ) {
751	var tabLabelKey = view.getRepeaterSettingKey( 'accordion_label', 'tab_items', index ),
752	tabContentKey = view.getRepeaterSettingKey( 'content', 'tab_items', index ),
753	IdNumber = tabindex + index + 1;
754
755	view.addRenderAttribute( tabLabelKey, {
756	'id': 'aux-toggle-header-' + IdNumber,
757	'class': [ 'aux-toggle-header', 'toggle-header' ],
758	'tabindex': IdNumber,
759	'role': 'tab',
760	'aria-controls': 'aux-toggle-content-' + IdNumber
761	} );
762
763	view.addRenderAttribute( tabContentKey, {
764	'id': 'aux-toggle-content-' + IdNumber,
765	'class': [ 'aux-toggle-content', 'toggle-content' ],
766	'role': 'tabpanel',
767	'aria-labelledby': 'aux-toggle-header-' + IdNumber
768	} );
769
770	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
771	#>
772	<section>
773	<{{{ settings.title_tag }}} {{{ view.getRenderAttributeString( tabLabelKey ) }}}>
774	{{{ item.accordion_label }}}
775	</{{{ settings.title_tag }}}>
776	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
777	<p>{{{ item.content }}}</p>
778	</div>
779	</section>
780	<#
781	});
782	} #>
783	</div>
784	</section>
785	<?php
786	}
787
788	}
789