uicore-elements / includes / widgets / accordion.php

accordion.php in UiCore Elements – Free widgets and templates for Elementor 1.2.0, at includes/widgets/accordion.php

1,484 lines 52.1 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3
4	use Elementor\Repeater;
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Plugin;
11	use Elementor\Icons_Manager;
12
13	use UiCoreElements\UiCoreWidget;
14
15	defined('ABSPATH') \|\| exit();
16
17	/**
18	* Accordion
19	*
20	* @author Lucas Marini Falbo <lucas@uicore.co>
21	* @since 1.0.0
22	*/
23
24	class Accordion extends UiCoreWidget
25	{
26
27	public function get_name()
28	{
29	return 'uicore-accordion';
30	}
31	public function get_title()
32	{
33	return __('Accordion', 'uicore-elements');
34	}
35	public function get_icon()
36	{
37	return 'eicon-accordion ui-e-widget';
38	}
39	public function get_categories()
40	{
41	return ['uicore'];
42	}
43	public function get_keywords()
44	{
45	return ['accordion', 'tabs', 'toggle', 'uicore'];
46	}
47	public function get_styles()
48	{
49	return ['accordion'];
50	}
51	public function get_scripts()
52	{
53	return ['accordion'];
54	}
55	// TODO: remove or set as false, after 3.30, when the full deprecation of widget innet wrapper is ready
56	public function has_widget_inner_wrapper(): bool {
57	return true;
58	}
59	protected function register_controls()
60	{
61	$this->start_controls_section(
62	'section_title',
63	[
64	'label' => __('Accordion', 'uicore-elements'),
65	]
66	);
67
68	$repeater = new Repeater();
69
70	$repeater->add_control(
71	'tab_title',
72	[
73	'label' => __('Title & Content', 'uicore-elements'),
74	'type' => Controls_Manager::TEXT,
75	'dynamic' => ['active' => true],
76	'default' => __('Accordion Title', 'uicore-elements'),
77	'label_block' => true,
78	]
79	);
80
81	$repeater->add_control(
82	'source',
83	[
84	'label' => esc_html__('Select Source', 'uicore-elements'),
85	'type' => Controls_Manager::SELECT,
86	'default' => 'custom',
87	'options' => [
88	'custom' => esc_html__('Custom Content', 'uicore-elements'),
89	'sectionId' => esc_html__('Section ID', 'uicore-elements'),
90	],
91	]
92	);
93
94	$repeater->add_control(
95	'tab_content',
96	[
97	'label' => __('Content', 'uicore-elements'),
98	'type' => Controls_Manager::WYSIWYG,
99	'dynamic' => ['active' => true],
100	'default' => __('Accordion Content', 'uicore-elements'),
101	'show_label' => false,
102	'condition' => ['source' => 'custom'],
103	]
104	);
105
106	$repeater->add_control(
107	'section_id',
108	[
109	'label' => esc_html__( 'Section ID', 'uicore-elements' ),
110	'type' => Controls_Manager::TEXT,
111	'placeholder' => esc_html__( 'CSS ID from an element', 'uicore-elements' ),
112	'condition' => [
113	'source' => 'sectionId'
114	],
115	'dynamic' => ['active' => true],
116	]
117	);
118
119	$repeater->add_control(
120	'repeater_icon',
121	[
122	'label' => __('Title Icon', 'uicore-elements'),
123	'type' => Controls_Manager::ICONS,
124	'label_block' => false,
125	'skin' => 'inline',
126	]
127	);
128
129	$this->add_control(
130	'tabs',
131	[
132	'label' => __('Items', 'uicore-elements'),
133	'type' => Controls_Manager::REPEATER,
134	'fields' => $repeater->get_controls(),
135	'default' => [
136	[
137	'tab_title' => __('Accordion #1', 'uicore-elements'),
138	'tab_content' => __('I am item 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.', 'uicore-elements'),
139	],
140	[
141	'tab_title' => __('Accordion #2', 'uicore-elements'),
142	'tab_content' => __('I am item 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.', 'uicore-elements'),
143	],
144	[
145	'tab_title' => __('Accordion #3', 'uicore-elements'),
146	'tab_content' => __('I am item 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.', 'uicore-elements'),
147	],
148	],
149	'title_field' => '{{{ tab_title }}}',
150	]
151	);
152
153	$this->add_control(
154	'title_html_tag',
155	[
156	'label' => __('Title HTML Tag', 'uicore-elements'),
157	'type' => Controls_Manager::SELECT,
158	'options' => Helper::get_title_tags(),
159	'default' => 'h5',
160	]
161	);
162
163	$this->add_control(
164	'accordion_icon',
165	[
166	'label' => __('Icon', 'uicore-elements'),
167	'type' => Controls_Manager::ICONS,
168	'default' => [
169	'value' => 'fas fa-plus',
170	'library' => 'fa-solid',
171	],
172	'recommended' => [
173	'fa-solid' => [
174	'chevron-down',
175	'angle-down',
176	'angle-double-down',
177	'caret-down',
178	'caret-square-down',
179	],
180	'fa-regular' => [
181	'caret-square-down',
182	],
183	],
184	'label_block' => false,
185	'skin' => 'inline',
186	]
187	);
188
189	$this->add_control(
190	'accordion_active_icon',
191	[
192	'label' => __('Active Icon', 'uicore-elements'),
193	'type' => Controls_Manager::ICONS,
194	'default' => [
195	'value' => 'fas fa-minus',
196	'library' => 'fa-solid',
197	],
198	'recommended' => [
199	'fa-solid' => [
200	'chevron-up',
201	'angle-up',
202	'angle-double-up',
203	'caret-up',
204	'caret-square-up',
205	],
206	'fa-regular' => [
207	'caret-square-up',
208	],
209	],
210	'label_block' => false,
211	'skin' => 'inline',
212	'condition' => [
213	'accordion_icon[value]!' => '',
214	'icon_animation!' => 'ui-e-animation-ico-spin'
215	],
216	]
217	);
218
219	$this->add_control(
220	'show_custom_icon',
221	[
222	'label' => esc_html__('Show Title Icon', 'uicore-elements'),
223	'type' => Controls_Manager::SWITCHER,
224	'separator' => 'before'
225	]
226	);
227
228	$this->end_controls_section();
229
230	$this->start_controls_section(
231	'section_content_additional',
232	[
233	'label' => __('Additional', 'uicore-elements'),
234	]
235	);
236
237	$this->add_control(
238	'collapsible',
239	[
240	'label' => __('Collapse All Items', 'uicore-elements'),
241	'type' => Controls_Manager::SWITCHER,
242	'default' => 'true',
243	'return_value' => 'true',
244	'frontend_available' => true,
245	]
246	);
247
248	$this->add_control(
249	'multiple',
250	[
251	'label' => __('Multiple Open', 'uicore-elements'),
252	'type' => Controls_Manager::SWITCHER,
253	'return_value' => 'true',
254	'frontend_available' => true,
255	]
256	);
257
258	$this->add_control(
259	'active_item',
260	[
261	'label' => __('Active Item', 'uicore-elements'),
262	'type' => Controls_Manager::NUMBER,
263	'min' => 1,
264	'max' => 20,
265	'default' => 1,
266	]
267	);
268
269	$this->add_control(
270	'active_hash',
271	[
272	'label' => esc_html__('Hash Location', 'uicore-elements'),
273	'type' => Controls_Manager::SWITCHER,
274	'default' => 'no',
275	'frontend_available' => true,
276	]
277	);
278
279	$this->add_control(
280	'active_scrollspy',
281	[
282	'label' => esc_html__('Scrollspy', 'uicore-elements'),
283	'type' => Controls_Manager::SWITCHER,
284	'default' => 'no',
285	'return' => 'yes',
286	'frontend_available' => true,
287	'condition' => [
288	'active_hash' => 'yes'
289	]
290	]
291	);
292
293	$this->add_control(
294	'hash_top_offset',
295	[
296	'label' => esc_html__('Top Offset ', 'uicore-elements'),
297	'type' => Controls_Manager::SLIDER,
298	'size_units' => ['px', ''],
299	'range' => [
300	'px' => [
301	'min' => 0,
302	'max' => 200,
303	'step' => 5,
304	],
305
306	],
307	'default' => [
308	'unit' => 'px',
309	'size' => 70,
310	],
311	'condition' => [
312	'active_hash' => 'yes',
313	'active_scrollspy' => 'yes',
314	],
315	'frontend_available' => true,
316	]
317	);
318
319	$this->add_control(
320	'hash_scrollspy_delay',
321	[
322	'label' => esc_html__('Scrollspy Delay', 'uicore-elements'),
323	'type' => Controls_Manager::SLIDER,
324	'size_units' => ['ms', ''],
325	'range' => [
326	'ms' => [
327	'min' => 100,
328	'max' => 5000,
329	'step' => 50,
330	],
331	],
332	'default' => [
333	'unit' => 'ms',
334	'size' => 1000,
335	],
336	'condition' => [
337	'active_hash' => 'yes',
338	'active_scrollspy' => 'yes',
339	],
340	'frontend_available' => true,
341	]
342	);
343
344	$this->add_control(
345	'hash_scrollspy_duration',
346	[
347	'label' => esc_html__('Scrollspy Duration', 'uicore-elements'),
348	'type' => Controls_Manager::SLIDER,
349	'size_units' => ['ms', ''],
350	'range' => [
351	'ms' => [
352	'min' => 100,
353	'max' => 5000,
354	'step' => 50,
355	],
356	],
357	'default' => [
358	'unit' => 'ms',
359	'size' => 800,
360	],
361	'condition' => [
362	'active_hash' => 'yes',
363	'active_scrollspy' => 'yes',
364	],
365	'frontend_available' => true,
366	]
367	);
368
369	$this->add_control(
370	'schema_activity',
371	[
372	'label' => esc_html__('FAQ Schema', 'uicore-elements'),
373	'description' => esc_html__('Avoid activating schema for multiple Accordions on the same page to prevent errors in Google indexing. Activate schema only for the Accordion you intend to display in search results.', 'uicore-elements'),
374	'type' => Controls_Manager::SWITCHER,
375	'separator' => 'before',
376	]
377	);
378
379	$this->end_controls_section();
380
381	//Style
382	$this->start_controls_section(
383	'section_toggle_style_item',
384	[
385	'label' => __('Item', 'uicore-elements'),
386	'tab' => Controls_Manager::TAB_STYLE,
387	]
388	);
389
390	$this->add_control(
391	'item_spacing',
392	[
393	'label' => __('Item Gap', 'uicore-elements'),
394	'type' => Controls_Manager::SLIDER,
395	'range' => [
396	'px' => [
397	'min' => 0,
398	'max' => 100,
399	],
400	],
401	'default' => [
402	'size' => 5,
403	],
404	'selectors' => [
405	'{{WRAPPER}} .ui-e-item + .ui-e-item' => 'margin-top: {{SIZE}}{{UNIT}};',
406	],
407	]
408	);
409
410	$this->start_controls_tabs('tabs_item_style');
411
412	$this->start_controls_tab(
413	'tab_item_normal',
414	[
415	'label' => __('Normal', 'uicore-elements'),
416	]
417	);
418
419	$this->add_group_control(
420	Group_Control_Background::get_type(),
421	[
422	'name' => 'item_background',
423	'selector' => '{{WRAPPER}} .ui-e-item',
424	]
425	);
426
427	$this->add_group_control(
428	Group_Control_Border::get_type(),
429	[
430	'name' => 'item_border',
431	'placeholder' => '1px',
432	'default' => '1px',
433	'selector' => '{{WRAPPER}} .ui-e-item',
434	]
435	);
436
437	$this->add_responsive_control(
438	'item_radius',
439	[
440	'label' => __('Border Radius', 'uicore-elements'),
441	'type' => Controls_Manager::DIMENSIONS,
442	'size_units' => ['px', '%'],
443	'selectors' => [
444	'{{WRAPPER}} .ui-e-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
445	],
446	]
447	);
448
449	$this->add_responsive_control(
450	'item_padding',
451	[
452	'label' => __('Padding', 'uicore-elements'),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => ['px', 'em', '%'],
455	'default' => [
456	'top' => 15,
457	'right' => 15,
458	'bottom' => 15,
459	'left' => 15,
460	'unit' => 'px',
461	'isLinked' => true,
462	],
463	'selectors' => [
464	'{{WRAPPER}} .ui-e-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
465	],
466	]
467	);
468
469	$this->add_group_control(
470	Group_Control_Box_Shadow::get_type(),
471	[
472	'name' => 'item_shadow',
473	'selector' => '{{WRAPPER}} .ui-e-item',
474	]
475	);
476
477	$this->end_controls_tab();
478
479	$this->start_controls_tab(
480	'tab_item_hover',
481	[
482	'label' => __('Hover', 'uicore-elements'),
483	]
484	);
485
486	$this->add_group_control(
487	Group_Control_Background::get_type(),
488	[
489	'name' => 'hover_item_background',
490	'selector' => '{{WRAPPER}} .ui-e-item:hover',
491	]
492	);
493
494	$this->add_control(
495	'item_hover_border_color',
496	[
497	'label' => __('Border Color', 'uicore-elements'),
498	'type' => Controls_Manager::COLOR,
499	'condition' => [
500	'item_border_border!' => '',
501	],
502	'selectors' => [
503	'{{WRAPPER}} .ui-e-item:hover' => 'border-color: {{VALUE}};',
504	],
505	]
506	);
507
508	$this->end_controls_tab();
509
510	$this->start_controls_tab(
511	'tab_item_active',
512	[
513	'label' => __('Active', 'uicore-elements'),
514	]
515	);
516
517	$this->add_group_control(
518	Group_Control_Background::get_type(),
519	[
520	'name' => 'active_item_background',
521	'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
522	]
523	);
524
525	$this->add_group_control(
526	Group_Control_Box_Shadow::get_type(),
527	[
528	'name' => 'active_item_shadow',
529	'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
530	]
531	);
532
533	$this->add_group_control(
534	Group_Control_Border::get_type(),
535	[
536	'name' => 'active_item_border',
537	'placeholder' => '1px',
538	'default' => '1px',
539	'selector' => '{{WRAPPER}} .ui-e-item.ui-open',
540	]
541	);
542
543	$this->add_responsive_control(
544	'active_item_radius',
545	[
546	'label' => __('Border Radius', 'uicore-elements'),
547	'type' => Controls_Manager::DIMENSIONS,
548	'size_units' => ['px', '%'],
549	'selectors' => [
550	'{{WRAPPER}} .ui-e-item.ui-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
551	],
552	]
553	);
554
555	$this->end_controls_tab();
556
557	$this->end_controls_tabs();
558
559	$this->end_controls_section();
560
561	$this->start_controls_section(
562	'section_toggle_style_title',
563	[
564	'label' => __('Title', 'uicore-elements'),
565	'tab' => Controls_Manager::TAB_STYLE,
566	]
567	);
568
569	$this->add_responsive_control(
570	'title_alignment',
571	[
572	'label' => __('Alignment', 'uicore-elements'),
573	'type' => Controls_Manager::CHOOSE,
574	'options' => [
575	'flex-start' => [
576	'title' => __('Left', 'uicore-elements'),
577	'icon' => 'eicon-text-align-left',
578	],
579	'center' => [
580	'title' => __('Center', 'uicore-elements'),
581	'icon' => 'eicon-text-align-center',
582	],
583	'flex-end' => [
584	'title' => __('Right', 'uicore-elements'),
585	'icon' => 'eicon-text-align-right',
586	],
587	],
588	'default' => is_rtl() ? 'flex-end' : 'flex-start',
589	'default' => 'flex-start',
590	'toggle' => false,
591	'label_block' => false,
592	'selectors' => [
593	'{{WRAPPER}} .ui-e-title-text' => 'justify-content: {{VALUE}};',
594	],
595	]
596	);
597
598	$this->start_controls_tabs('tabs_title_style');
599
600	$this->start_controls_tab(
601	'tab_title_normal',
602	[
603	'label' => __('Normal', 'uicore-elements'),
604	]
605	);
606
607	$this->add_control(
608	'title_color',
609	[
610	'label' => __('Title Color', 'uicore-elements'),
611	'type' => Controls_Manager::COLOR,
612	'selectors' => [
613	'{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
614	'{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
615	],
616	]
617	);
618
619	$this->add_group_control(
620	Group_Control_Background::get_type(),
621	[
622	'name' => 'title_background',
623	'selector' => '{{WRAPPER}} .ui-e-title',
624	]
625	);
626
627	$this->add_group_control(
628	Group_Control_Border::get_type(),
629	[
630	'name' => 'title_border',
631	'placeholder' => '1px',
632	'default' => '1px',
633	'selector' => '{{WRAPPER}} .ui-e-title',
634	]
635	);
636
637	$this->add_responsive_control(
638	'title_radius',
639	[
640	'label' => __('Border Radius', 'uicore-elements'),
641	'type' => Controls_Manager::DIMENSIONS,
642	'size_units' => ['px', '%'],
643	'selectors' => [
644	'{{WRAPPER}} .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
645	],
646	]
647	);
648
649	$this->add_responsive_control(
650	'title_padding',
651	[
652	'label' => __('Padding', 'uicore-elements'),
653	'type' => Controls_Manager::DIMENSIONS,
654	'size_units' => ['px', 'em', '%'],
655	'selectors' => [
656	'{{WRAPPER}} .ui-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
657	],
658	]
659	);
660
661	$this->add_group_control(
662	Group_Control_Typography::get_type(),
663	[
664	'name' => 'title_typography',
665	'selector' => '{{WRAPPER}} .ui-e-title',
666	]
667	);
668
669	$this->add_group_control(
670	Group_Control_Box_Shadow::get_type(),
671	[
672	'name' => 'title_shadow',
673	'selector' => '{{WRAPPER}} .ui-e-title',
674	]
675	);
676
677	$this->end_controls_tab();
678
679	$this->start_controls_tab(
680	'tab_title_hover',
681	[
682	'label' => __('Hover', 'uicore-elements'),
683	]
684	);
685
686	$this->add_control(
687	'hover_title_color',
688	[
689	'label' => __('Title Color', 'uicore-elements'),
690	'type' => Controls_Manager::COLOR,
691	'selectors' => [
692	'{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'color: {{VALUE}};',
693	'{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
694	],
695	]
696	);
697
698	$this->add_group_control(
699	Group_Control_Background::get_type(),
700	[
701	'name' => 'hover_title_background',
702	'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-title',
703	]
704	);
705
706	$this->add_control(
707	'title_hover_border_color',
708	[
709	'label' => __('Border Color', 'uicore-elements'),
710	'type' => Controls_Manager::COLOR,
711	'condition' => [
712	'title_border_border!' => '',
713	],
714	'selectors' => [
715	'{{WRAPPER}} .ui-e-item:hover .ui-e-title' => 'border-color: {{VALUE}};',
716	],
717	]
718	);
719
720	$this->end_controls_tab();
721
722	$this->start_controls_tab(
723	'tab_title_active',
724	[
725	'label' => __('Active', 'uicore-elements'),
726	]
727	);
728
729	$this->add_control(
730	'active_title_color',
731	[
732	'label' => __('Title Color', 'uicore-elements'),
733	'type' => Controls_Manager::COLOR,
734	'selectors' => [
735	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'color: {{VALUE}};',
736	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
737	],
738	]
739	);
740
741	$this->add_group_control(
742	Group_Control_Background::get_type(),
743	[
744	'name' => 'active_title_background',
745	'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
746	]
747	);
748
749	$this->add_group_control(
750	Group_Control_Box_Shadow::get_type(),
751	[
752	'name' => 'active_title_shadow',
753	'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
754	]
755	);
756
757	$this->add_group_control(
758	Group_Control_Border::get_type(),
759	[
760	'name' => 'active_title_border',
761	'placeholder' => '1px',
762	'default' => '1px',
763	'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-title',
764	]
765	);
766
767	$this->add_responsive_control(
768	'active_title_radius',
769	[
770	'label' => __('Border Radius', 'uicore-elements'),
771	'type' => Controls_Manager::DIMENSIONS,
772	'size_units' => ['px', '%'],
773	'selectors' => [
774	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
775	],
776	]
777	);
778
779	$this->end_controls_tab();
780
781	$this->end_controls_tabs();
782
783	$this->end_controls_section();
784
785	$this->start_controls_section(
786	'section_style_title_icon',
787	[
788	'label' => __('Title Icon', 'uicore-elements'),
789	'tab' => Controls_Manager::TAB_STYLE,
790	'condition' => [
791	'show_custom_icon' => 'yes'
792	]
793	]
794	);
795
796	$this->start_controls_tabs('tabs_title_icon_style');
797
798	$this->start_controls_tab(
799	'tab_title_icon_normal',
800	[
801	'label' => __('Normal', 'uicore-elements'),
802	]
803	);
804
805	$this->add_control(
806	'title_icon_color',
807	[
808	'label' => __('Title Icon Color', 'uicore-elements'),
809	'type' => Controls_Manager::COLOR,
810	'selectors' => [
811	'{{WRAPPER}} .ui-e-custom-icon i' => 'color: {{VALUE}};',
812	'{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
813	],
814	]
815	);
816
817	$this->add_responsive_control(
818	'title_icon_size',
819	[
820	'label' => esc_html__('Size', 'uicore-elements'),
821	'type' => Controls_Manager::SLIDER,
822	'selectors' => [
823	'{{WRAPPER}} .ui-e-custom-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
824	'{{WRAPPER}} .ui-e-custom-icon svg' => 'width: {{SIZE}}{{UNIT}};',
825	],
826	]
827	);
828
829	$this->add_responsive_control(
830	'icon_indent',
831	[
832	'label' => esc_html__('Spacing', 'uicore-elements'),
833	'type' => Controls_Manager::SLIDER,
834	'range' => [
835	'px' => [
836	'max' => 50,
837	],
838	],
839	'default' => [
840	'unit' => 'px',
841	'size' => 5,
842	],
843	'selectors' => [
844	'{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
845	],
846	]
847	);
848
849	$this->end_controls_tab();
850
851	$this->start_controls_tab(
852	'tab_title_icon_hover',
853	[
854	'label' => __('Hover', 'uicore-elements'),
855	]
856	);
857
858	$this->add_control(
859	'title_hover_icon_color',
860	[
861	'label' => __('Title Icon Color', 'uicore-elements'),
862	'type' => Controls_Manager::COLOR,
863	'selectors' => [
864	'{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon i' => 'color: {{VALUE}};',
865	'{{WRAPPER}} .ui-e-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
866	],
867	]
868	);
869
870	$this->end_controls_tab();
871
872	$this->start_controls_tab(
873	'tab_title_icon_active',
874	[
875	'label' => __('Active', 'uicore-elements'),
876	]
877	);
878
879	$this->add_control(
880	'title_active_icon_color',
881	[
882	'label' => __('Title Icon Color', 'uicore-elements'),
883	'type' => Controls_Manager::COLOR,
884	'selectors' => [
885	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon i' => 'color: {{VALUE}};',
886	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
887	],
888	]
889	);
890
891	$this->end_controls_tab();
892
893	$this->end_controls_tabs();
894
895	$this->end_controls_section();
896
897	$this->start_controls_section(
898	'section_toggle_style_icon',
899	[
900	'label' => __('Open & Close Icon', 'uicore-elements'),
901	'tab' => Controls_Manager::TAB_STYLE,
902	'condition' => [
903	'accordion_icon[value]!' => '',
904	],
905	]
906	);
907
908	$this->add_control(
909	'icon_align',
910	[
911	'label' => __('Alignment', 'uicore-elements'),
912	'type' => Controls_Manager::CHOOSE,
913	'options' => [
914	'left' => [
915	'title' => __('Start', 'uicore-elements'),
916	'icon' => 'eicon-h-align-left',
917	],
918	'right' => [
919	'title' => __('End', 'uicore-elements'),
920	'icon' => 'eicon-h-align-right',
921	],
922	],
923	'default' => is_rtl() ? 'left' : 'right',
924	'toggle' => false,
925	'label_block' => false,
926	]
927	);
928
929	$this->start_controls_tabs('tabs_icon_style');
930
931	$this->start_controls_tab(
932	'tab_icon_normal',
933	[
934	'label' => __('Normal', 'uicore-elements'),
935	]
936	);
937
938	$this->add_control(
939	'icon_color',
940	[
941	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
942	'type' => Controls_Manager::COLOR,
943	'selectors' => [
944	'{{WRAPPER}} .ui-e-icon' => 'color: {{VALUE}};',
945	'{{WRAPPER}} .ui-e-icon svg' => 'fill: {{VALUE}};',
946	],
947	]
948	);
949
950	$this->add_group_control(
951	Group_Control_Background::get_type(),
952	[
953	'name' => 'icon_background_color',
954	'selector' => '{{WRAPPER}} .ui-e-icon'
955	]
956	);
957
958	$this->add_group_control(
959	Group_Control_Border::get_type(),
960	[
961	'name' => 'icon_border',
962	'selector' => '{{WRAPPER}} .ui-e-icon',
963	]
964	);
965
966	$this->add_responsive_control(
967	'icon_border_radius',
968	[
969	'label' => esc_html__('Border Radius', 'uicore-elements'),
970	'type' => Controls_Manager::DIMENSIONS,
971	'size_units' => ['px', '%'],
972	'selectors' => [
973	'{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
974	],
975	]
976	);
977
978	$this->add_responsive_control(
979	'icon_padding',
980	[
981	'label' => esc_html__('Padding', 'uicore-elements'),
982	'type' => Controls_Manager::DIMENSIONS,
983	'size_units' => ['px', 'em', '%'],
984	'selectors' => [
985	// set as css variables because animations may need some particular value, such as pad-top for fade icon animation
986	'{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-pad-top: {{TOP}}{{UNIT}}; --ui-e-icon-pad-right: {{RIGHT}}{{UNIT}}; --ui-e-icon-pad-bot: {{BOTTOM}}{{UNIT}}; --ui-e-icon-pad-left: {{LEFT}}{{UNIT}};',
987	],
988	]
989	);
990
991	$this->add_responsive_control(
992	'icon_size',
993	[
994	'label' => __('Icon Size', 'uicore-elements'),
995	'type' => Controls_Manager::SLIDER,
996	'range' => [
997	'px' => [
998	'min' => 10,
999	'max' => 100,
1000	],
1001	],
1002	'default' => [
1003	'unit' => 'px',
1004	'size' => 15,
1005	],
1006	'selectors' => [
1007	'{{WRAPPER}} .ui-e-title .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1008	],
1009	]
1010	);
1011
1012	$this->add_responsive_control(
1013	'icon_spacing',
1014	[
1015	'label' => __('Icon Spacing', 'uicore-elements'),
1016	'type' => Controls_Manager::SLIDER,
1017	'range' => [
1018	'px' => [
1019	'min' => 0,
1020	'max' => 50,
1021	],
1022	],
1023	'selectors' => [
1024	'{{WRAPPER}} .ui-e-title' => 'gap: {{SIZE}}{{UNIT}};',
1025	]
1026	]
1027	);
1028
1029	$this->add_group_control(
1030	Group_Control_Box_Shadow::get_type(),
1031	[
1032	'name' => 'icon_box_shadow',
1033	'selector' => '{{WRAPPER}} .ui-e-icon',
1034	]
1035	);
1036
1037	$this->end_controls_tab();
1038
1039	$this->start_controls_tab(
1040	'tab_icon_hover',
1041	[
1042	'label' => __('Hover', 'uicore-elements'),
1043	]
1044	);
1045
1046	$this->add_control(
1047	'icon_hover_color',
1048	[
1049	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1050	'type' => Controls_Manager::COLOR,
1051	'selectors' => [
1052	'{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'color: {{VALUE}};',
1053	'{{WRAPPER}} .ui-e-item:hover .ui-e-icon svg' => 'fill: {{VALUE}};',
1054	],
1055	]
1056	);
1057
1058	$this->add_group_control(
1059	Group_Control_Background::get_type(),
1060	[
1061	'name' => 'icon_hover_background_color',
1062	'selector' => '{{WRAPPER}} .ui-e-item:hover .ui-e-icon'
1063	]
1064	);
1065
1066	$this->add_control(
1067	'icon_hover_border_color',
1068	[
1069	'label' => esc_html__('Border Color', 'uicore-elements'),
1070	'type' => Controls_Manager::COLOR,
1071	'condition' => [
1072	'icon_border_border!' => '',
1073	],
1074	'selectors' => [
1075	'{{WRAPPER}} .ui-e-item:hover .ui-e-icon' => 'border-color: {{VALUE}};',
1076	],
1077	]
1078	);
1079
1080	$this->end_controls_tab();
1081
1082	$this->start_controls_tab(
1083	'tab_icon_active',
1084	[
1085	'label' => __('Active', 'uicore-elements'),
1086	]
1087	);
1088
1089	$this->add_control(
1090	'icon_active_color',
1091	[
1092	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1093	'type' => Controls_Manager::COLOR,
1094	'selectors' => [
1095	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'color: {{VALUE}};',
1096	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon svg' => 'fill: {{VALUE}};',
1097	],
1098	]
1099	);
1100
1101	$this->add_group_control(
1102	Group_Control_Background::get_type(),
1103	[
1104	'name' => 'icon_active_background_color',
1105	'selector' => '{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon'
1106	]
1107	);
1108
1109	$this->add_control(
1110	'icon_active_border_color',
1111	[
1112	'label' => esc_html__('Border Color', 'uicore-elements'),
1113	'type' => Controls_Manager::COLOR,
1114	'condition' => [
1115	'icon_border_border!' => '',
1116	],
1117	'selectors' => [
1118	'{{WRAPPER}} .ui-e-item.ui-open .ui-e-icon' => 'border-color: {{VALUE}};',
1119	],
1120	]
1121	);
1122
1123	$this->end_controls_tab();
1124
1125	$this->end_controls_tabs();
1126
1127	$this->end_controls_section();
1128
1129	$this->start_controls_section(
1130	'section_toggle_style_content',
1131	[
1132	'label' => __('Content', 'uicore-elements'),
1133	'tab' => Controls_Manager::TAB_STYLE,
1134	]
1135	);
1136
1137	$this->add_control(
1138	'content_color',
1139	[
1140	'label' => __('Text Color', 'uicore-elements'),
1141	'type' => Controls_Manager::COLOR,
1142	'selectors' => [
1143	'{{WRAPPER}} .ui-e-content' => 'color: {{VALUE}};',
1144	],
1145	]
1146	);
1147
1148	$this->add_group_control(
1149	Group_Control_Background::get_type(),
1150	[
1151	'name' => 'content_background_color',
1152	'selector' => '{{WRAPPER}} .ui-e-content',
1153	]
1154	);
1155
1156	$this->add_group_control(
1157	Group_Control_Border::get_type(),
1158	[
1159	'name' => 'content_border',
1160	'label' => __('Border', 'uicore-elements'),
1161	'selector' => '{{WRAPPER}} .ui-e-content',
1162	]
1163	);
1164
1165	$this->add_responsive_control(
1166	'content_radius',
1167	[
1168	'label' => __('Border Radius', 'uicore-elements'),
1169	'type' => Controls_Manager::DIMENSIONS,
1170	'size_units' => ['px', '%'],
1171	'selectors' => [
1172	'{{WRAPPER}} .ui-e-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1173	],
1174	]
1175	);
1176
1177	$this->add_responsive_control(
1178	'content_padding',
1179	[
1180	'label' => __('Padding', 'uicore-elements'),
1181	'type' => Controls_Manager::DIMENSIONS,
1182	'size_units' => ['px', 'em', '%'],
1183	'selectors' => [
1184	'{{WRAPPER}} .ui-e-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1185	],
1186	]
1187	);
1188
1189	$this->add_responsive_control(
1190	'content_spacing',
1191	[
1192	'label' => __('Spacing', 'uicore-elements'),
1193	'type' => Controls_Manager::SLIDER,
1194	'range' => [
1195	'px' => [
1196	'min' => 0,
1197	'max' => 100,
1198	],
1199	],
1200	'default' => [
1201	'unit' => 'px',
1202	'size' => 15,
1203	],
1204	'selectors' => [
1205	'{{WRAPPER}} .ui-e-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1206	],
1207	]
1208	);
1209
1210	$this->add_group_control(
1211	Group_Control_Typography::get_type(),
1212	[
1213	'name' => 'content_typography',
1214	'selector' => '{{WRAPPER}} .ui-e-content',
1215	]
1216	);
1217
1218	$this->add_group_control(
1219	Group_Control_Box_Shadow::get_type(),
1220	[
1221	'name' => 'content_shadow',
1222	'label' => __('Box Shadow', 'uicore-elements'),
1223	'selector' => '{{WRAPPER}} .ui-e-content',
1224	]
1225	);
1226
1227	$this->add_responsive_control(
1228	'align',
1229	[
1230	'label' => __('Alignment', 'uicore-elements'),
1231	'type' => Controls_Manager::CHOOSE,
1232	'options' => [
1233	'left' => [
1234	'title' => __('Left', 'uicore-elements'),
1235	'icon' => 'eicon-text-align-left',
1236	],
1237	'center' => [
1238	'title' => __('Center', 'uicore-elements'),
1239	'icon' => 'eicon-text-align-center',
1240	],
1241	'right' => [
1242	'title' => __('Right', 'uicore-elements'),
1243	'icon' => 'eicon-text-align-right',
1244	],
1245	],
1246	'selectors' => [
1247	'{{WRAPPER}} .ui-e-content' => 'text-align: {{VALUE}};',
1248	],
1249	]
1250	);
1251
1252	$this->end_controls_section();
1253
1254	$this->start_controls_section(
1255	'section_animation',
1256	[
1257	'label' => esc_html__('Animations', 'uicore-elements'),
1258	'tab' => Controls_Manager::TAB_STYLE,
1259	]
1260	);
1261
1262	$this->add_control(
1263	'accordion_animation',
1264	[
1265	'label' => esc_html__( 'Accordion Animation', 'uicore-elements' ),
1266	'type' => \Elementor\Controls_Manager::SELECT,
1267	'default' => 'ui-e-animation-acc-basic',
1268	'options' => [
1269	'' => esc_html__( 'None', 'uicore-elements' ),
1270	'ui-e-animation-acc-basic' => esc_html__( 'Basic', 'uicore-elements' ),
1271	'ui-e-animation-acc-slow' => esc_html__( 'Slow', 'uicore-elements' ),
1272	'ui-e-animation-acc-expand' => esc_html__( 'Expand', 'uicore-elements' ),
1273	'ui-e-animation-acc-overshadow' => esc_html__( 'Overshadow', 'uicore-elements'),
1274	],
1275	'prefix_class' => '',
1276	'render_type' => 'template',
1277	'frontend_available' => true,
1278	]
1279	);
1280
1281	$this->add_control(
1282	'icon_animation',
1283	[
1284	'label' => esc_html__( 'Icon Animation', 'uicore-elements' ),
1285	'type' => \Elementor\Controls_Manager::SELECT,
1286	'default' => 'ui-e-animation-ico-fade',
1287	'options' => [
1288	'' => esc_html__( 'None', 'uicore-elements' ),
1289	'ui-e-animation-ico-fade' => esc_html__( 'Fade', 'uicore-elements' ),
1290	'ui-e-animation-ico-spin' => esc_html__( 'Spin', 'uicore-elements' ),
1291	'ui-e-animation-ico-slide' => esc_html__( 'Slide', 'uicore-elements' ),
1292	],
1293	'prefix_class' => '',
1294	'render_type' => 'template',
1295	]
1296	);
1297
1298	$this->add_control(
1299	'icon_spin_value',
1300	[
1301	'label' => esc_html__( 'Icon Rotation', 'uicore-elements' ),
1302	'type' => \Elementor\Controls_Manager::SLIDER,
1303	'size_units' => ['deg', ''],
1304	'range' => [
1305	'deg' => [
1306	'min' => 0,
1307	'max' => 360,
1308	'step' => 1,
1309	],
1310	],
1311	'default' => [
1312	'unit' => 'deg',
1313	'size' => 315,
1314	],
1315	'selectors' => [
1316	'{{WRAPPER}} .ui-e-icon' => '--ui-e-spin:{{SIZE}}deg;',
1317	],
1318	'condition' =>[
1319	'icon_animation' => 'ui-e-animation-ico-spin',
1320	]
1321	]
1322	);
1323
1324	$this->end_controls_section();
1325	}
1326	protected function render()
1327	{
1328
1329	$settings = $this->get_settings_for_display(); // Get settings
1330	$ID = 'ui-e-accordion-' . $this->get_id(); // Sets the accordion item ID that will'be used to implement hash features and also if the item has no title.
1331
1332	// Sets schema atts if active
1333	if ($settings['schema_activity'] == 'yes') {
1334	$this->add_render_attribute('accordion', 'itemscope');
1335	$this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1336	}
1337
1338	$titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1339
1340	?>
1341	<div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion');?>>
1342
1343	<?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1344
1345	$loopCounter = $index + 1;
1346
1347	// Builds the accordion ID
1348	if($item['tab_title']){
1349	$acc_id = 'ui-e-' . sanitize_title($item['tab_title']); // filters so it can be used as ID, also prefixing it
1350	} else {
1351	$acc_id = $ID . $loopCounter; // If it hasn't title, uses the widget ID plus the loop counter iteration
1352	}
1353	// Build the Aria ID
1354	if('sectionId' == $item['source']){
1355	$aria_id = 'ui-' . preg_replace('/#/', '', $item['section_id']);
1356	} else {
1357	$aria_id = 'ui-e-acc-' . $loopCounter;
1358	}
1359
1360
1361	// Creates the title and content atts
1362	$tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
1363	$tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1364
1365	// Render title atts
1366	$this->add_render_attribute($tab_title_setting_key, [
1367	'class' => ['ui-e-title'],
1368	]);
1369	$this->add_render_attribute($tab_title_setting_key, 'class', ('right' == $settings['icon_align']) ? 'ui-right' : '');
1370
1371	// Render content atts
1372	$this->add_render_attribute($tab_content_setting_key, [
1373	'class' => ['ui-e-content'],
1374	'style' => ($loopCounter === $settings['active_item']) ? '' : 'display:none;', // keep content hide if item not active (has to be set inline so jquery can take control over it)
1375	'aria-labelledby' => $acc_id,
1376	'id' => $aria_id
1377	]);
1378	// Check if the current accordion item uses sectionId as source
1379	if ('sectionId' == $item['source']) {
1380	// and also check if an ID was set
1381	if($item['section_id'] != ''){
1382	$this->add_render_attribute($tab_content_setting_key, ['class' => ['ui-section-id']]); // class used by JS
1383	$sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end";
1384	} else {
1385	$sectionWarning = esc_html__( "You didn't define an ID.", 'uicore-elements' );
1386	}
1387	}
1388	$this->add_inline_editing_attributes($tab_content_setting_key, 'advanced'); // Allow content inline editing
1389
1390	// Render item atts
1391	$item_key = 'ui-e-item-' . $index;
1392	$this->add_render_attribute($item_key, [
1393	'class' => ($loopCounter === $settings['active_item']) ? 'ui-e-item ui-open' : 'ui-e-item',
1394	'role' => 'button',
1395	'tabindex' => '0',
1396	'aria-expanded' => ($loopCounter === $settings['active_item']) ? 'true' : 'false',
1397	'aria-controls' => $aria_id,
1398	'id' => $acc_id,
1399	]);
1400
1401	// Render schema atts if active
1402	if ($settings['schema_activity'] == 'yes') {
1403	$this->add_render_attribute($item_key, 'itemscope');
1404	$this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1405	$this->add_render_attribute($item_key, 'itemtype', 'https://schema.org/Question');
1406
1407	$this->add_render_attribute($tab_content_setting_key, 'itemscope');
1408	$this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1409	$this->add_render_attribute($tab_content_setting_key, 'itemtype', 'https://schema.org/Answer', true);
1410
1411	$schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1412	$schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1413	$this->add_render_attribute($schema_text, 'itemprop', 'text');
1414	$this->add_render_attribute($schema_name, 'itemprop', 'name');
1415	// Sets the variables to empty to avoid undefined variable problems
1416	} else {
1417	$schema_text = $schema_name = '';
1418	}
1419	?>
1420	<div <?php $this->print_render_attribute_string($item_key);?>>
1421
1422	<<?php echo esc_html($titleTag)?> <?php $this->print_render_attribute_string($tab_title_setting_key);?>>
1423
1424	<?php if ($settings['accordion_icon']['value']) : ?>
1425	<span class="ui-e-icon ui-e-<?php echo esc_attr($settings['icon_align']); ?>" aria-hidden="true">
1426
1427	<span class="ui-e-icon-closed">
1428	<?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1429	</span>
1430
1431	<?php if($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon ?>
1432	<span class="ui-e-icon-opened">
1433	<?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1434	</span>
1435	<?php endif; ?>
1436
1437	</span>
1438	<?php endif; ?>
1439
1440	<span class="ui-e-title-text" <?php $this->print_render_attribute_string($schema_name) ;?>>
1441	<?php if (!empty($item['repeater_icon']['value']) and $settings['show_custom_icon'] == 'yes') : ?>
1442	<span class="ui-e-custom-icon">
1443	<?php Icons_Manager::render_icon($item['repeater_icon'], ['aria-hidden' => 'true']); ?>
1444	</span>
1445	<?php endif; ?>
1446	<?php echo esc_html($item['tab_title']); ?>
1447	</span>
1448
1449	</<?php echo esc_html($titleTag)?>>
1450
1451	<div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1452	<?php
1453	if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1454
1455	// if schema is active, creates a wrapper for the itemprop structure
1456	if($settings['schema_activity'] == 'yes') {
1457	?>
1458	<div <?php $this->print_render_attribute_string($schema_text);?> >
1459	<?php
1460	}
1461
1462	echo $this->parse_text_editor($item['tab_content']);// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1463
1464	if($settings['schema_activity'] == 'yes') {
1465	?>
1466	</div>
1467	<?php
1468	}
1469	}
1470	// if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1471	if ('sectionId' == $item['source'] && Plugin::$instance->editor->is_edit_mode()) {
1472	echo wp_kses($sectionWarning, ['em' => []]);
1473	}
1474	?>
1475	</div>
1476
1477	</div>
1478	<?php endforeach; ?>
1479	</div>
1480	<?php
1481	}
1482	}
1483	\Elementor\Plugin::instance()->widgets_manager->register(new Accordion());
1484