uicore-elements / includes / widgets / accordion.php

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

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