uicore-elements / includes / widgets / accordion.php

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

1,485 lines 52.5 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
1337	$ID = 'ui-e-accordion-' . $this->get_id(); // Sets the accordion item ID that will'be used to implemenet hash features and also if the item has no title.
1338
1339	// Sets schema atts if active
1340	if ($settings['schema_activity'] == 'yes') {
1341	$this->add_render_attribute('accordion', 'itemscope');
1342	$this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1343	}
1344
1345	$titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1346
1347	?>
1348	<div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion');?>>
1349
1350	<?php foreach ($settings['tabs'] as $index => $item) : // loop throught the repeater
1351
1352	$loopCounter = $index + 1;
1353
1354	// Builds the accordion unique ID (should be helper function)
1355	if($item['tab_title']){ // If it has a title, used it as ID, filtering the string to be syntactically suitable
1356	$accID = $item['tab_title'];
1357	$accID = strtolower($accID); // lowercase everything
1358	$accID = preg_replace("/[^a-z0-9_\s-]/", "", $accID); // removes especial characters
1359	$accID = preg_replace("/[\s-]+/", " ", $accID); // remove multiple dashes/whitespaces
1360	$accID = preg_replace("/[\s_]/", "-", $accID); // convert whitespaces and underscore to dash
1361	$accID = 'ui-e-' . $accID; // and finally prefix it
1362	} else { // If it hasn't title, uses the widget ID plus the loop counter iteration
1363	$accID = $ID . $loopCounter;
1364	}
1365
1366	// Creates the title and content atts
1367	$tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
1368	$tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1369
1370	// Render title atts
1371	$this->add_render_attribute($tab_title_setting_key, [
1372	'class' => ['ui-e-title'],
1373	'id' => $accID,
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	]);
1382	if ('sectionId' == $item['source']) { // Check if the current accordion item uses sectionId as source
1383	if($item['section_id'] != ''){ // and also check if an ID was set
1384	$this->add_render_attribute($tab_content_setting_key, [
1385	'class' => ['ui-section-id'], // sets the class searched for the accordion script
1386	'id' => 'ui-' . preg_replace('/#/', '', $item['section_id']), // adds the ID with prefix since it shouldn't exist two or more equal IDs on the same page. Also, since users might or not add the hash on control, we work without it and filters with preg_replace()
1387	]);
1388	$sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end"; // and creates a message to populate the accordion content
1389	} else {
1390	$sectionWarning = esc_html__( "You didn't define an ID.", 'uicore-elements' );
1391	}
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' => ($loopCounter === $settings['active_item']) ? 'ui-e-item ui-open' : 'ui-e-item',
1400	]);
1401
1402	// Render schema atts if active
1403	if ($settings['schema_activity'] == 'yes') {
1404	$this->add_render_attribute($item_key, 'itemscope');
1405	$this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1406	$this->add_render_attribute($item_key, 'itemtype', 'https://schema.org/Question');
1407
1408	$this->add_render_attribute($tab_content_setting_key, 'itemscope');
1409	$this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1410	$this->add_render_attribute($tab_content_setting_key, 'itemtype', 'https://schema.org/Answer', true);
1411
1412	$schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1413	$schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1414	$this->add_render_attribute($schema_text, 'itemprop', 'text');
1415	$this->add_render_attribute($schema_name, 'itemprop', 'name');
1416	// Sets the variables to empty to avoid undefined variable problems
1417	} else {
1418	$schema_text = $schema_name = '';
1419	}
1420	?>
1421	<div <?php $this->print_render_attribute_string($item_key);?>>
1422
1423	<<?php echo esc_html($titleTag)?> <?php $this->print_render_attribute_string($tab_title_setting_key);?>>
1424
1425	<?php if ($settings['accordion_icon']['value']) : ?>
1426	<span class="ui-e-icon ui-e-<?php echo esc_attr($settings['icon_align']); ?>" aria-hidden="true">
1427
1428	<span class="ui-e-icon-closed">
1429	<?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1430	</span>
1431
1432	<?php if($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon ?>
1433	<span class="ui-e-icon-opened">
1434	<?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1435	</span>
1436	<?php endif; ?>
1437
1438	</span>
1439	<?php endif; ?>
1440
1441	<span class="ui-e-title-text" <?php $this->print_render_attribute_string($schema_name) ;?>>
1442	<?php if (!empty($item['repeater_icon']['value']) and $settings['show_custom_icon'] == 'yes') : ?>
1443	<span class="ui-e-custom-icon">
1444	<?php Icons_Manager::render_icon($item['repeater_icon'], ['aria-hidden' => 'true']); ?>
1445	</span>
1446	<?php endif; ?>
1447	<?php echo esc_html($item['tab_title']); ?>
1448	</span>
1449
1450	</<?php echo esc_html($titleTag)?>>
1451
1452	<div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1453	<?php
1454	if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1455
1456	// if schema is active, creates a wrapper for the itemprop structure
1457	if($settings['schema_activity'] == 'yes') {
1458	?>
1459	<div <?php $this->print_render_attribute_string($schema_text);?> >
1460	<?php
1461	}
1462
1463	echo $this->parse_text_editor($item['tab_content']);// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1464
1465	if($settings['schema_activity'] == 'yes') {
1466	?>
1467	</div>
1468	<?php
1469	}
1470	}
1471	// if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1472	if ('sectionId' == $item['source'] && Plugin::$instance->editor->is_edit_mode()) {
1473	echo wp_kses($sectionWarning, ['em' => []]);
1474	}
1475	?>
1476	</div>
1477
1478	</div>
1479	<?php endforeach; ?>
1480	</div>
1481	<?php
1482	}
1483	}
1484	\Elementor\Plugin::instance()->widgets_manager->register(new Accordion());
1485