king-addons / includes / widgets / Accordion / Accordion.php

Accordion.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/widgets/Accordion/Accordion.php

1,346 lines 50.2 KB

Raw Download Zip

1	<?php
2
3	namespace King_Addons;
4
5	use Elementor;
6	use Elementor\Icons_Manager;
7	use Elementor\Repeater;
8	use Elementor\Widget_Base;
9	use Elementor\Controls_Manager;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Background;
12	use Elementor\Group_Control_Typography;
13
14	if (!defined('ABSPATH')) exit;
15
16	/**
17	* Accordion widget for Elementor.
18	*
19	* Renders expandable items from a repeater of titles and WYSIWYG content.
20	*/
21	class Accordion extends Widget_Base
22	{
23
24
25
26	public function get_name()
27	{
28	return 'king-addons-accordion';
29	}
30
31	public function get_title()
32	{
33	return esc_html__('Accordion', 'king-addons');
34	}
35
36	public function get_icon()
37	{
38	return 'king-addons-icon king-addons-accordion';
39	}
40
41	public function get_categories()
42	{
43	return ['king-addons'];
44	}
45
46	public function get_keywords()
47	{
48	return ['king addons', 'king', 'addons', 'kingaddons', 'king-addons',
49	'blog', 'accordion', 'slider', 'accor', 'carousel'];
50	}
51
52	public function get_script_depends()
53	{
54	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-accordion-script',
55	KING_ADDONS_ASSETS_UNIQUE_KEY . '-lightgallery-lightgallery'];
56	}
57
58	public function get_style_depends()
59	{
60	return [
61	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-button',
62	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-general',
63	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing',
64	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-loading',
65	KING_ADDONS_ASSETS_UNIQUE_KEY . '-accordion-style',
66	KING_ADDONS_ASSETS_UNIQUE_KEY . '-lightgallery-lightgallery',
67	];
68	}
69
70	public function get_custom_help_url()
71	{
72	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
73	}
74
75	public function add_repeater_args_accordion_content_type()
76	{
77	return [
78	'editor' => esc_html__('Text Editor', 'king-addons'),
79	'pro-tm' => esc_html__('Elementor Template (Pro)', 'king-addons')
80	];
81	}
82
83	public function add_control_show_acc_search()
84	{
85	$this->add_control(
86	'show_acc_search',
87	[
88	'label' => sprintf(__('Show Search %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
89	'type' => Controls_Manager::SWITCHER,
90	'separator' => 'before',
91	'classes' => 'king-addons-pro-control'
92	]
93	);
94	}
95
96	public function add_section_style_search_input()
97	{
98	}
99
100	public function render_search_input($settings)
101	{
102	}
103
104	protected function register_controls()
105	{
106
107
108	$this->start_controls_section(
109	'section_accordion_content',
110	[
111	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
112	'tab' => Controls_Manager::TAB_CONTENT,
113	]
114	);
115
116
117	$repeater = new Repeater();
118
119	$repeater->add_control(
120	'accordion_title', [
121	'label' => esc_html__('Title', 'king-addons'),
122	'type' => Controls_Manager::TEXT,
123	'dynamic' => [
124	'active' => true,
125	],
126	'default' => esc_html__('Acc Item Title', 'king-addons'),
127	]
128	);
129
130	$repeater->add_control(
131	'accordion_content_type',
132	[
133	'label' => esc_html__('Content Type', 'king-addons'),
134	'type' => Controls_Manager::SELECT,
135	'default' => 'editor',
136	'options' => $this->add_repeater_args_accordion_content_type(),
137	'render_type' => 'template',
138	]
139	);
140
141
142	Core::renderUpgradeProNotice($repeater, Controls_Manager::RAW_HTML, 'accordion', 'accordion_content_type', ['pro-tm']);
143
144	$repeater->add_control(
145	'accordion_content_template',
146	[
147	'label' => esc_html__('Select Template', 'king-addons'),
148	'type' => 'king-addons-ajax-select2',
149	'options' => 'ajaxselect2/getElementorTemplates',
150	'label_block' => true,
151	'condition' => [
152	'accordion_content_type' => 'template',
153	],
154	]
155	);
156
157	$repeater->add_control(
158	'accordion_icon',
159	[
160	'label' => esc_html__('Select Icon', 'king-addons'),
161	'type' => Controls_Manager::ICONS,
162	'skin' => 'inline',
163	'label_block' => false,
164	'separator' => 'before',
165	'default' => [
166	'value' => 'far fa-edit',
167	'library' => 'regular'
168	]
169	]
170	);
171
172	$repeater->add_control(
173	'accordion_content',
174	[
175	'label' => esc_html__('Content', 'king-addons'),
176	'type' => Controls_Manager::WYSIWYG,
177	'placeholder' => esc_html__('Tab Content', 'king-addons'),
178	'default' => 'Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis.',
179	'condition' => [
180	'accordion_content_type!' => 'template'
181	]
182	]
183	);
184
185	$this->add_control(
186	'advanced_accordion',
187	[
188	'label' => esc_html__('Accordion Items', 'king-addons'),
189	'type' => Controls_Manager::REPEATER,
190	'fields' => $repeater->get_controls(),
191	'default' => [
192	[
193	'accordion_title' => esc_html__('Title #1', 'king-addons'),
194	'accordion_icon' => [
195	'value' => 'fas fa-star',
196	'library' => 'solid'
197	],
198	'accordion_content' => esc_html__('Item content. Click the edit button to change this text.', 'king-addons'),
199	],
200	[
201	'accordion_title' => esc_html__('Title #2', 'king-addons'),
202	'accordion_icon' => [
203	'value' => 'fas fa-crown',
204	'library' => 'brands'
205	],
206	'accordion_content' => esc_html__('Item content. Click the edit button to change this text.', 'king-addons'),
207	],
208	[
209	'accordion_title' => esc_html__('Title #3', 'king-addons'),
210	'accordion_icon' => [
211	'value' => 'fas fa-rocket',
212	'library' => 'solid'
213	],
214	'accordion_content' => esc_html__('Item content. Click the edit button to change this text.', 'king-addons'),
215	]
216	],
217	'title_field' => '{{ accordion_title }}',
218	]
219	);
220
221
222	$this->end_controls_section();
223
224
225	$this->start_controls_section(
226	'section_accordion_settings',
227	[
228	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Settings', 'king-addons'),
229	'tab' => Controls_Manager::TAB_CONTENT,
230	]
231	);
232
233	$this->add_control(
234	'accordion_type',
235	[
236	'label' => esc_html__('Accordion Type', 'king-addons'),
237	'type' => Controls_Manager::SELECT,
238	'default' => 'accordion',
239	'label_block' => false,
240	'options' => [
241	'accordion' => esc_html__('Accordion', 'king-addons'),
242	'toggle' => esc_html__('Toggle', 'king-addons'),
243	]
244	]
245	);
246
247	$this->add_control(
248	'accordion_trigger',
249	[
250	'label' => esc_html__('Trigger', 'king-addons'),
251	'type' => Controls_Manager::SELECT,
252	'default' => 'click',
253	'label_block' => false,
254	'options' => [
255	'click' => esc_html__('Click', 'king-addons'),
256	'hover' => esc_html__('Hover', 'king-addons'),
257	],
258	'condition' => [
259	'accordion_type' => 'accordion'
260	]
261	]
262	);
263
264	$this->add_control(
265	'accordion_title_tag',
266	[
267	'label' => esc_html__('Title HTML Tag', 'king-addons'),
268	'type' => Controls_Manager::SELECT,
269	'options' => [
270	'span' => esc_html__('Span', 'king-addons'),
271	'h1' => esc_html__('H1', 'king-addons'),
272	'h2' => esc_html__('H2', 'king-addons'),
273	'h3' => esc_html__('H3', 'king-addons'),
274	'h4' => esc_html__('H4', 'king-addons'),
275	'h5' => esc_html__('H5', 'king-addons'),
276	'h6' => esc_html__('H6', 'king-addons')
277	],
278	'default' => 'span',
279	]
280	);
281
282	$this->add_control(
283	'interaction_speed',
284	[
285	'label' => esc_html__('Animation Duration', 'king-addons'),
286	'type' => Controls_Manager::NUMBER,
287	'default' => 0.4,
288	'step' => 0.1,
289	'min' => 0,
290	'max' => 2,
291	'render_type' => 'template',
292	]
293	);
294
295	$this->add_control(
296	'active_item',
297	[
298	'label' => esc_html__('Active Item Index', 'king-addons'),
299	'type' => Controls_Manager::NUMBER,
300	'label_block' => false,
301	'default' => 1,
302	'min' => 0,
303	'render_type' => 'template',
304	'frontend_available' => true,
305	'separator' => 'before'
306	]
307	);
308
309	$this->add_control_show_acc_search();
310
311	$this->add_control(
312	'acc_search_icon',
313	[
314	'label' => esc_html__('Select Icon', 'king-addons'),
315	'type' => Controls_Manager::ICONS,
316	'skin' => 'inline',
317	'label_block' => false,
318	'default' => [
319	'value' => 'fas fa-search',
320	'library' => 'fa-solid',
321	],
322	'condition' => [
323	'show_acc_search' => 'yes',
324	],
325	]
326	);
327
328	$this->add_control(
329	'acc_search_placeholder',
330	[
331	'label' => esc_html__('Placeholder', 'king-addons'),
332	'type' => Controls_Manager::TEXT,
333	'dynamic' => [
334	'active' => true,
335	],
336	'default' => esc_html__('Search...', 'king-addons'),
337	'condition' => [
338	'show_acc_search' => 'yes'
339	]
340	]
341	);
342
343	$this->end_controls_section();
344
345
346	$this->start_controls_section(
347	'section_icon_settings',
348	[
349	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icons', 'king-addons'),
350	'tab' => Controls_Manager::TAB_CONTENT,
351	]
352	);
353
354	$this->add_control(
355	'change_icons_position',
356	[
357	'label' => esc_html__('Position', 'king-addons'),
358	'type' => Controls_Manager::SELECT,
359	'default' => 'default',
360	'label_block' => false,
361	'options' => [
362	'default' => esc_html__('Default', 'king-addons'),
363	'reverse' => esc_html__('Reverse', 'king-addons'),
364	]
365	]
366	);
367
368	$this->add_control(
369	'accordion_title_icon_box_style',
370	[
371	'label' => esc_html__('Box Style', 'king-addons'),
372	'type' => Controls_Manager::SELECT,
373	'default' => 'side-box',
374	'options' => [
375	'no-box' => esc_html__('None', 'king-addons'),
376	'side-box' => esc_html__('Side Box', 'king-addons'),
377	'side-curve' => esc_html__('Side Curve', 'king-addons')
378	],
379	'prefix_class' => 'king-addons-advanced-accordion-icon-',
380	'render_type' => 'template'
381	]
382	);
383
384	$this->add_control(
385	'accordion_title_icon_box_width',
386	[
387	'label' => esc_html__('Box Width', 'king-addons'),
388	'type' => Controls_Manager::SLIDER,
389	'size_units' => ['px'],
390	'default' => [
391	'size' => 70,
392	'unit' => 'px'
393	],
394	'range' => [
395	'px' => [
396	'min' => 0,
397	'max' => 200,
398	],
399	],
400	'selectors' => [
401	'{{WRAPPER}} .king-addons-acc-icon-box' => 'width: {{SIZE}}{{UNIT}};'
402	],
403	'condition' => [
404	'accordion_title_icon_box_style!' => 'none'
405	]
406	]
407	);
408
409	$this->add_responsive_control(
410	'accordion_title_icon_after_box_width',
411	[
412	'label' => esc_html__('Triangle Width', 'king-addons'),
413	'type' => Controls_Manager::SLIDER,
414	'size_units' => ['px'],
415	'default' => [
416	'size' => 30,
417	'unit' => 'px'
418	],
419	'range' => [
420	'px' => [
421	'min' => 0,
422	'max' => 100,
423	],
424	],
425	'selectors' => [
426	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-acc-icon-box-after' => 'border-left: {{SIZE}}{{UNIT}} solid {{icon_box_color.VALUE}};',
427	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-acc-icon-box-after' => 'border-left: {{SIZE}}{{UNIT}} solid {{icon_box_hover_color.VALUE}};',
428	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-acc-icon-box-after' => 'border-left: {{SIZE}}{{UNIT}} solid {{icon_box_active_color.VALUE}};',
429	],
430	'condition' => [
431	'accordion_title_icon_box_style' => 'side-curve'
432	]
433	]
434	);
435
436	$this->add_control(
437	'toggle_icon',
438	[
439	'label' => esc_html__('Select Toggle Icon', 'king-addons'),
440	'type' => Controls_Manager::ICONS,
441	'skin' => 'inline',
442	'label_block' => false,
443	'default' => [
444	'value' => 'fas fa-plus',
445	'library' => 'fa-solid',
446	],
447	'separator' => 'before',
448	]
449	);
450
451	$this->add_control(
452	'toggle_icon_active',
453	[
454	'label' => esc_html__('Select Toggle Icon Active', 'king-addons'),
455	'type' => Controls_Manager::ICONS,
456	'skin' => 'inline',
457	'label_block' => false,
458	'default' => [
459	'value' => 'fas fa-minus',
460	'library' => 'fa-solid',
461	]
462	]
463	);
464
465	$this->add_control(
466	'toggle_icon_rotation',
467	[
468	'label' => esc_html__('Active Icon Rotation', 'king-addons'),
469	'type' => Controls_Manager::SLIDER,
470	'size_units' => ['px'],
471	'default' => [
472	'size' => 0,
473	'unit' => 'px'
474	],
475	'range' => [
476	'px' => [
477	'min' => 0,
478	'max' => 360,
479	],
480	],
481	'selectors' => [
482	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-active .king-addons-toggle-icon i' => 'transform: rotate({{SIZE}}deg); transform-origin: center;',
483	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-active .king-addons-toggle-icon svg' => 'transform: rotate({{SIZE}}deg); transform-origin: center;'
484	]
485	]
486	);
487
488	$this->end_controls_section();
489
490
491	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'advanced-accordion', [
492	'The Elementor content can be placed inside.',
493	'Enable Accordion Content Live Search'
494	]);
495
496	$this->add_section_style_search_input();
497
498
499	$this->start_controls_section(
500	'section_style_switcher',
501	[
502	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
503	'tab' => Controls_Manager::TAB_STYLE,
504	]
505	);
506
507	$this->start_controls_tabs('tab_style');
508
509	$this->start_controls_tab(
510	'tab_normal_style',
511	[
512	'label' => esc_html__('Normal', 'king-addons')
513	]
514	);
515
516	$this->add_control(
517	'tab_color',
518	[
519	'label' => esc_html__('Color', 'king-addons'),
520	'type' => Controls_Manager::COLOR,
521	'default' => '#5B03FF',
522	'selectors' => [
523	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'color: {{VALUE}}',
524	]
525	]
526	);
527
528	$this->add_group_control(
529	Group_Control_Background::get_type(),
530	[
531	'name' => 'tab_bg_color',
532	'label' => esc_html__('Background', 'king-addons'),
533	'types' => ['classic', 'gradient'],
534	'exclude' => ['image'],
535	'fields_options' => [
536	'background' => [
537	'default' => 'classic',
538	],
539	'color' => [
540	'default' => '#FFFFFF',
541	],
542	],
543	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button'
544	]
545	);
546
547	$this->add_control(
548	'tab_border_color',
549	[
550	'label' => esc_html__('Border Color', 'king-addons'),
551	'type' => Controls_Manager::COLOR,
552	'default' => '#EAEAEA',
553	'selectors' => [
554	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'border-color: {{VALUE}}',
555	]
556	]
557	);
558
559	$this->add_group_control(
560	Group_Control_Box_Shadow::get_type(),
561	[
562	'name' => 'tab_box_shadow',
563	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button',
564	]
565	);
566
567	$this->add_group_control(
568	Group_Control_Typography::get_type(),
569	[
570	'name' => 'tab_typography',
571	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button, {{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-acc-title-text',
572	'fields_options' => [
573	'typography' => [
574	'default' => 'custom',
575	],
576	'font_weight' => [
577	'default' => '400',
578	]
579	]
580	]
581	);
582
583	$this->add_control(
584	'accordion_transition',
585	[
586	'label' => esc_html__('Transition', 'king-addons'),
587	'type' => Controls_Manager::NUMBER,
588	'default' => 0.3,
589	'min' => 0,
590	'max' => 5,
591	'step' => 0.1,
592	'selectors' => [
593	'{{WRAPPER}} .king-addons-advanced-accordion button.king-addons-acc-button' => 'transition: all {{VALUE}}s ease-in-out;',
594	]
595	]
596	);
597
598	$this->end_controls_tab();
599
600	$this->start_controls_tab(
601	'tab_hover_style',
602	[
603	'label' => esc_html__('Hover', 'king-addons')
604	]
605	);
606
607	$this->add_control(
608	'tab_hover_color',
609	[
610	'label' => esc_html__('Color', 'king-addons'),
611	'type' => Controls_Manager::COLOR,
612	'selectors' => [
613	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover' => 'color: {{VALUE}}',
614	]
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Background::get_type(),
620	[
621	'name' => 'tab_hover_bg_color',
622	'label' => esc_html__('Background', 'king-addons'),
623	'types' => ['classic', 'gradient'],
624	'exclude' => ['image'],
625	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover'
626	]
627	);
628
629	$this->add_control(
630	'tab_hover_border_color',
631	[
632	'label' => esc_html__('Border Color', 'king-addons'),
633	'type' => Controls_Manager::COLOR,
634	'selectors' => [
635	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover' => 'border-color: {{VALUE}}',
636	]
637	]
638	);
639
640	$this->add_group_control(
641	Group_Control_Box_Shadow::get_type(),
642	[
643	'name' => 'tab_hover_box_shadow',
644	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover',
645	]
646	);
647
648	$this->end_controls_tab();
649
650	$this->start_controls_tab(
651	'tab_active_style',
652	[
653	'label' => esc_html__('Active', 'king-addons')
654	]
655	);
656
657	$this->add_control(
658	'tab_active_color',
659	[
660	'label' => esc_html__('Color', 'king-addons'),
661	'type' => Controls_Manager::COLOR,
662	'selectors' => [
663	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active' => 'color: {{VALUE}}',
664	]
665	]
666	);
667
668	$this->add_group_control(
669	Group_Control_Background::get_type(),
670	[
671	'name' => 'tab_active_bg_color',
672	'label' => esc_html__('Background', 'king-addons'),
673	'types' => ['classic', 'gradient'],
674	'exclude' => ['image'],
675	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active'
676	]
677	);
678
679	$this->add_control(
680	'tab_active_border_color',
681	[
682	'label' => esc_html__('Border Color', 'king-addons'),
683	'type' => Controls_Manager::COLOR,
684	'selectors' => [
685	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active' => 'border-color: {{VALUE}}',
686	]
687	]
688	);
689
690	$this->add_group_control(
691	Group_Control_Box_Shadow::get_type(),
692	[
693	'name' => 'tab_active_box_shadow',
694	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active',
695	]
696	);
697
698	$this->end_controls_tab();
699
700	$this->end_controls_tabs();
701
702	$this->add_responsive_control(
703	'tab_gutter',
704	[
705	'label' => esc_html__('Vertical Gutter', 'king-addons'),
706	'type' => Controls_Manager::SLIDER,
707	'size_units' => ['px'],
708	'range' => [
709	'px' => [
710	'min' => 0,
711	'max' => 50,
712	],
713	],
714	'default' => [
715	'unit' => 'px',
716	'size' => 6,
717	],
718	'selectors' => [
719	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'margin-top: {{SIZE}}{{UNIT}}; margin-bottom: {{SIZE}}{{UNIT}};',
720	],
721	'separator' => 'before',
722	]
723	);
724
725	$this->add_responsive_control(
726	'tab_title_distance',
727	[
728	'label' => esc_html__('Title Left Distance', 'king-addons'),
729	'type' => Controls_Manager::SLIDER,
730	'size_units' => ['px'],
731	'range' => [
732	'px' => [
733	'min' => 0,
734	'max' => 50,
735	],
736	],
737	'default' => [
738	'unit' => 'px',
739	'size' => 5,
740	],
741	'selectors' => [
742	'{{WRAPPER}}.king-addons-advanced-accordion-icon-no-box .king-addons-acc-item-title .king-addons-acc-title-text' => 'margin-left: {{SIZE}}{{UNIT}};',
743	'{{WRAPPER}}.king-addons-advanced-accordion-icon-side-box .king-addons-acc-item-title .king-addons-acc-title-text' => 'margin-left: calc({{accordion_title_icon_box_width.SIZE}}{{accordion_title_icon_box_width.UNIT}} + {{SIZE}}{{UNIT}});',
744	'{{WRAPPER}}.king-addons-advanced-accordion-icon-side-curve .king-addons-acc-item-title .king-addons-acc-title-text' => 'margin-left: calc({{accordion_title_icon_box_width.SIZE}}{{accordion_title_icon_box_width.UNIT}} + {{accordion_title_icon_after_box_width.SIZE}}{{accordion_title_icon_after_box_width.UNIT}} + {{SIZE}}{{UNIT}});',
745	],
746	]
747	);
748
749	$this->add_responsive_control(
750	'tab_padding',
751	[
752	'label' => esc_html__('Padding', 'king-addons'),
753	'type' => Controls_Manager::DIMENSIONS,
754	'size_units' => ['px'],
755	'default' => [
756	'top' => 18,
757	'right' => 18,
758	'bottom' => 18,
759	'left' => 18,
760	],
761	'selectors' => [
762	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
763	],
764	'separator' => 'before',
765	]
766	);
767
768	$this->add_control(
769	'tab_border_type',
770	[
771	'label' => esc_html__('Border Type', 'king-addons'),
772	'type' => Controls_Manager::SELECT,
773	'options' => [
774	'none' => esc_html__('None', 'king-addons'),
775	'solid' => esc_html__('Solid', 'king-addons'),
776	'double' => esc_html__('Double', 'king-addons'),
777	'dotted' => esc_html__('Dotted', 'king-addons'),
778	'dashed' => esc_html__('Dashed', 'king-addons'),
779	'groove' => esc_html__('Groove', 'king-addons'),
780	],
781	'default' => 'solid',
782	'selectors' => [
783	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'border-style: {{VALUE}};',
784	],
785	'separator' => 'before',
786	]
787	);
788
789	$this->add_responsive_control(
790	'tab_border_width',
791	[
792	'label' => esc_html__('Border Width', 'king-addons'),
793	'type' => Controls_Manager::DIMENSIONS,
794	'size_units' => ['px'],
795	'default' => [
796	'top' => 1,
797	'right' => 1,
798	'bottom' => 1,
799	'left' => 1,
800	],
801	'selectors' => [
802	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
803	],
804	'condition' => [
805	'tab_border_type!' => 'none',
806	],
807	]
808	);
809
810	$this->add_responsive_control(
811	'tab_border_radius',
812	[
813	'label' => esc_html__('Border Radius', 'king-addons'),
814	'type' => Controls_Manager::DIMENSIONS,
815	'size_units' => ['px', '%'],
816	'default' => [
817	'top' => 0,
818	'right' => 0,
819	'bottom' => 0,
820	'left' => 0,
821	],
822	'selectors' => [
823	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
824	]
825	]
826	);
827
828	$this->end_controls_section();
829
830
831	$this->start_controls_section(
832	'section_style_icon',
833	[
834	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Icons', 'king-addons'),
835	'tab' => Controls_Manager::TAB_STYLE
836	]
837	);
838
839	$this->start_controls_tabs('tab_style_icon');
840
841	$this->start_controls_tab(
842	'tab_icon_normal_style',
843	[
844	'label' => esc_html__('Normal', 'king-addons')
845	]
846	);
847
848	$this->add_control(
849	'tab_main_icon_color',
850	[
851	'label' => esc_html__('Main Icon Color', 'king-addons'),
852	'type' => Controls_Manager::COLOR,
853	'default' => '#EDEDED',
854	'selectors' => [
855	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-title-icon i' => 'color: {{VALUE}}',
856	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-title-icon svg' => 'fill: {{VALUE}}',
857	]
858	]
859	);
860
861	$this->add_control(
862	'tab_toggle_icon_color',
863	[
864	'label' => esc_html__('Toggle Icon Color', 'king-addons'),
865	'type' => Controls_Manager::COLOR,
866	'default' => '#333333',
867	'selectors' => [
868	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-toggle-icon i' => 'color: {{VALUE}}',
869	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-toggle-icon svg' => 'fill: {{VALUE}}',
870	]
871	]
872	);
873
874	$this->add_control(
875	'icon_box_color',
876	[
877	'label' => esc_html__('Icon Box Bg Color', 'king-addons'),
878	'type' => Controls_Manager::COLOR,
879	'default' => '#5B03FF',
880	'selectors' => [
881	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-acc-icon-box' => 'background-color: {{VALUE}}',
882	],
883	'condition' => [
884	'accordion_title_icon_box_style!' => 'none'
885	]
886	]
887	);
888
889	$this->add_control(
890	'accordion_icon_transition',
891	[
892	'label' => esc_html__('Transition', 'king-addons'),
893	'type' => Controls_Manager::NUMBER,
894	'default' => 0.3,
895	'min' => 0,
896	'max' => 5,
897	'step' => 0.1,
898	'selectors' => [
899	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-toggle-icon i' => 'transition: all {{VALUE}}s ease-in-out;',
900	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-title-icon i' => 'transition: all {{VALUE}}s ease-in-out;',
901	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-toggle-icon svg' => 'transition: all {{VALUE}}s ease-in-out;',
902	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-title-icon svg' => 'transition: all {{VALUE}}s ease-in-out;',
903	]
904	]
905	);
906
907	$this->end_controls_tab();
908
909	$this->start_controls_tab(
910	'tab_icon_hover_style',
911	[
912	'label' => esc_html__('Hover', 'king-addons')
913	]
914	);
915
916	$this->add_control(
917	'tab_main_hover_icon_color',
918	[
919	'label' => esc_html__('Main Icon Color', 'king-addons'),
920	'type' => Controls_Manager::COLOR,
921	'selectors' => [
922	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-title-icon i' => 'color: {{VALUE}}',
923	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-title-icon svg' => 'fill: {{VALUE}}',
924	]
925	]
926	);
927
928	$this->add_control(
929	'tab_toggle_hover_icon_color',
930	[
931	'label' => esc_html__('Toggle Icon Color', 'king-addons'),
932	'type' => Controls_Manager::COLOR,
933	'selectors' => [
934	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-toggle-icon i' => 'color: {{VALUE}}',
935	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-toggle-icon svg' => 'fill: {{VALUE}}',
936	]
937	]
938	);
939
940	$this->add_control(
941	'icon_box_hover_color',
942	[
943	'label' => esc_html__('Icon Box Bg Color', 'king-addons'),
944	'type' => Controls_Manager::COLOR,
945	'selectors' => [
946	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover .king-addons-acc-icon-box' => 'background-color: {{VALUE}}',
947	],
948	'condition' => [
949	'accordion_title_icon_box_style!' => 'none'
950	]
951	]
952	);
953
954	$this->end_controls_tab();
955
956	$this->start_controls_tab(
957	'tab_icon_active_style',
958	[
959	'label' => esc_html__('Active', 'king-addons')
960	]
961	);
962
963	$this->add_control(
964	'tab_main_active_icon_color',
965	[
966	'label' => esc_html__('Main Icon Color', 'king-addons'),
967	'type' => Controls_Manager::COLOR,
968	'selectors' => [
969	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-title-icon i' => 'color: {{VALUE}}',
970	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-title-icon svg' => 'fill: {{VALUE}}',
971	]
972	]
973	);
974
975	$this->add_control(
976	'tab_toggle_active_icon_color',
977	[
978	'label' => esc_html__('Toggle Icon Color', 'king-addons'),
979	'type' => Controls_Manager::COLOR,
980	'selectors' => [
981	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-toggle-icon i' => 'color: {{VALUE}}',
982	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-toggle-icon svg' => 'fill: {{VALUE}}',
983	]
984	]
985	);
986
987	$this->add_control(
988	'icon_box_active_color',
989	[
990	'label' => esc_html__('Icon Box Bg Color', 'king-addons'),
991	'type' => Controls_Manager::COLOR,
992	'selectors' => [
993	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active .king-addons-acc-icon-box' => 'background-color: {{VALUE}}',
994	],
995	'condition' => [
996	'accordion_title_icon_box_style!' => 'none'
997	]
998	]
999	);
1000
1001	$this->end_controls_tab();
1002
1003	$this->end_controls_tabs();
1004
1005	$this->add_responsive_control(
1006	'tab_main_icon_size',
1007	[
1008	'label' => esc_html__('Main Icon Size', 'king-addons'),
1009	'type' => Controls_Manager::SLIDER,
1010	'size_units' => ['px'],
1011	'range' => [
1012	'px' => [
1013	'min' => 0,
1014	'max' => 50,
1015	],
1016	],
1017	'default' => [
1018	'unit' => 'px',
1019	'size' => 18,
1020	],
1021	'selectors' => [
1022	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-title-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1023	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-title-icon svg' => 'width: {{SIZE}}{{UNIT}};',
1024	],
1025	'separator' => 'before',
1026	]
1027	);
1028
1029	$this->add_responsive_control(
1030	'tab_toggle_icon_size',
1031	[
1032	'label' => esc_html__('Toggle Icon Size', 'king-addons'),
1033	'type' => Controls_Manager::SLIDER,
1034	'size_units' => ['px'],
1035	'range' => [
1036	'px' => [
1037	'min' => 0,
1038	'max' => 50,
1039	],
1040	],
1041	'default' => [
1042	'unit' => 'px',
1043	'size' => 15,
1044	],
1045	'selectors' => [
1046	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-toggle-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1047	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button .king-addons-toggle-icon svg' => 'width: {{SIZE}}{{UNIT}};',
1048	]
1049	]
1050	);
1051
1052	$this->add_responsive_control(
1053	'icon_box_border_radius',
1054	[
1055	'label' => esc_html__('Icon Box Border Radius', 'king-addons'),
1056	'type' => Controls_Manager::DIMENSIONS,
1057	'size_units' => ['px'],
1058	'default' => [
1059	'top' => 0,
1060	'right' => 0,
1061	'bottom' => 0,
1062	'left' => 0,
1063	],
1064	'selectors' => [
1065	'{{WRAPPER}}.king-addons-advanced-accordion-icon-side-box .king-addons-advanced-accordion .king-addons-acc-icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1066	'{{WRAPPER}}.king-addons-advanced-accordion-icon-side-curve .king-addons-advanced-accordion .king-addons-acc-icon-box' => 'border-radius: {{TOP}}{{UNIT}} 0 0 {{LEFT}}{{UNIT}};',
1067	],
1068	'separator' => 'before',
1069	'condition' => [
1070	'accordion_title_icon_box_style!' => 'no-box'
1071	]
1072	]
1073	);
1074
1075	$this->end_controls_section();
1076
1077
1078	$this->start_controls_section(
1079	'section_style_content',
1080	[
1081	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
1082	'tab' => Controls_Manager::TAB_STYLE
1083	]
1084	);
1085
1086	$this->add_control(
1087	'content_color',
1088	[
1089	'label' => esc_html__('Color', 'king-addons'),
1090	'type' => Controls_Manager::COLOR,
1091	'default' => '#7a7a7a',
1092	'selectors' => [
1093	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel .king-addons-acc-panel-content' => 'color: {{VALUE}};',
1094	]
1095	]
1096	);
1097
1098	$this->add_control(
1099	'content_bg_color',
1100	[
1101	'label' => esc_html__('Background Color', 'king-addons'),
1102	'type' => Controls_Manager::COLOR,
1103	'default' => '#FFFFFF',
1104	'selectors' => [
1105	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'background-color: {{VALUE}}',
1106	],
1107	]
1108	);
1109
1110	$this->add_control(
1111	'content_border_color',
1112	[
1113	'label' => esc_html__('Border Color', 'king-addons'),
1114	'type' => Controls_Manager::COLOR,
1115	'default' => '#E8E8E8',
1116	'selectors' => [
1117	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'border-color: {{VALUE}}',
1118	],
1119
1120
1121	]
1122	);
1123
1124	$this->add_group_control(
1125	Group_Control_Box_Shadow::get_type(),
1126	[
1127	'name' => 'content_box_shadow',
1128	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel',
1129	]
1130	);
1131
1132	$this->add_group_control(
1133	Group_Control_Typography::get_type(),
1134	[
1135	'name' => 'content_typography',
1136	'selector' => '{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel .king-addons-acc-panel-content',
1137	]
1138	);
1139
1140	$this->add_responsive_control(
1141	'content_padding',
1142	[
1143	'label' => esc_html__('Padding', 'king-addons'),
1144	'type' => Controls_Manager::DIMENSIONS,
1145	'default' => [
1146	'top' => 25,
1147	'right' => 25,
1148	'bottom' => 25,
1149	'left' => 25,
1150	],
1151	'size_units' => ['px'],
1152	'selectors' => [
1153	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1154	],
1155	'separator' => 'before',
1156	]
1157	);
1158
1159	$this->add_control(
1160	'content_border_type',
1161	[
1162	'label' => esc_html__('Border Type', 'king-addons'),
1163	'type' => Controls_Manager::SELECT,
1164	'options' => [
1165	'none' => esc_html__('None', 'king-addons'),
1166	'solid' => esc_html__('Solid', 'king-addons'),
1167	'double' => esc_html__('Double', 'king-addons'),
1168	'dotted' => esc_html__('Dotted', 'king-addons'),
1169	'dashed' => esc_html__('Dashed', 'king-addons'),
1170	'groove' => esc_html__('Groove', 'king-addons'),
1171	],
1172	'default' => 'solid',
1173	'selectors' => [
1174	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'border-style: {{VALUE}};',
1175	],
1176	'separator' => 'before',
1177	]
1178	);
1179
1180	$this->add_responsive_control(
1181	'content_border_width',
1182	[
1183	'label' => esc_html__('Border Width', 'king-addons'),
1184	'type' => Controls_Manager::DIMENSIONS,
1185	'size_units' => ['px',],
1186	'default' => [
1187	'top' => 1,
1188	'right' => 1,
1189	'bottom' => 1,
1190	'left' => 1,
1191	],
1192	'selectors' => [
1193	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1194	],
1195	'condition' => [
1196	'content_border_type!' => 'none',
1197	],
1198	]
1199	);
1200
1201	$this->add_responsive_control(
1202	'content_border_radius',
1203	[
1204	'label' => esc_html__('Border Radius', 'king-addons'),
1205	'type' => Controls_Manager::DIMENSIONS,
1206	'size_units' => ['px'],
1207	'default' => [
1208	'top' => 0,
1209	'right' => 0,
1210	'bottom' => 0,
1211	'left' => 0,
1212	],
1213	'selectors' => [
1214	'{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1215	]
1216	]
1217	);
1218
1219
1220
1221
1222	$this->end_controls_section();
1223
1224
1225	}
1226
1227	public function king_addons_accordion_template($id)
1228	{
1229	if (empty($id)) return '';
1230	if (defined('ICL_LANGUAGE_CODE')) {
1231	$default_language_code = apply_filters('wpml_default_language', null);
1232	/** @noinspection PhpUndefinedConstantInspection */
1233	if (ICL_LANGUAGE_CODE !== $default_language_code) {
1234	/** @noinspection PhpUndefinedConstantInspection */
1235	/** @noinspection PhpUndefinedFunctionInspection */
1236	$id = icl_object_id($id, 'elementor_library', false, ICL_LANGUAGE_CODE);
1237	}
1238	}
1239	$type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
1240	$has_css = ('internal' === get_option('elementor_css_print_method') \|\| '' !== $type);
1241	return Elementor\Plugin::instance()->frontend->get_builder_content_for_display($id, $has_css);
1242	}
1243
1244	public function render_first_icon($settings, $acc)
1245	{
1246	if ($settings['change_icons_position'] == 'reverse') {
1247	if (!empty($settings['toggle_icon'])) {
1248	echo '<span class="king-addons-toggle-icon king-addons-ti-close">';
1249	Icons_Manager::render_icon($settings['toggle_icon'], ['aria-hidden' => 'true']);
1250	echo '</span><span class="king-addons-toggle-icon king-addons-ti-open">';
1251	Icons_Manager::render_icon($settings['toggle_icon_active'], ['aria-hidden' => 'true']);
1252	echo '</span>';
1253	}
1254	} else {
1255	if (!empty($acc['accordion_icon'])) {
1256	echo '<span class="king-addons-title-icon">';
1257	Icons_Manager::render_icon($acc['accordion_icon'], ['aria-hidden' => 'true']);
1258	echo '</span>';
1259	}
1260	}
1261	}
1262
1263	public function render_second_icon($settings, $acc)
1264	{
1265	if ($settings['change_icons_position'] == 'reverse') {
1266	if (!empty($acc['accordion_icon'])) {
1267	echo '<span class="king-addons-title-icon">';
1268	Icons_Manager::render_icon($acc['accordion_icon'], ['aria-hidden' => 'true']);
1269	echo '</span>';
1270	}
1271	} else {
1272	if (!empty($settings['toggle_icon'])) {
1273	echo '<span class="king-addons-toggle-icon king-addons-ti-close">';
1274	Icons_Manager::render_icon($settings['toggle_icon'], ['aria-hidden' => 'true']);
1275	echo '</span><span class="king-addons-toggle-icon king-addons-ti-open">';
1276	Icons_Manager::render_icon($settings['toggle_icon_active'], ['aria-hidden' => 'true']);
1277	echo '</span>';
1278	}
1279	}
1280	}
1281
1282	/**
1283	* Returns an allowlisted HTML tag for accordion titles.
1284	*
1285	* @param mixed $tag Raw tag name from widget settings.
1286	* @return string Safe HTML tag name.
1287	*/
1288	public function sanitize_accordion_title_tag($tag): string
1289	{
1290	$tags_whitelist = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p'];
1291	$tag = strtolower(sanitize_key((string) $tag));
1292
1293	return in_array($tag, $tags_whitelist, true) ? $tag : 'span';
1294	}
1295
1296	protected function render()
1297	{
1298	$settings = $this->get_settings_for_display();
1299	$accordion_title_tag = $this->sanitize_accordion_title_tag($settings['accordion_title_tag'] ?? 'span');
1300	$this->add_render_attribute('accordion_attributes', [
1301	'class' => ['king-addons-advanced-accordion'],
1302	'data-accordion-type' => esc_attr($settings['accordion_type']),
1303	'data-active-index' => intval($settings['active_item']),
1304	'data-accordion-trigger' => isset($settings['accordion_trigger']) ? esc_attr($settings['accordion_trigger']) : 'click',
1305	'data-interaction-speed' => isset($settings['interaction_speed']) ? floatval($settings['interaction_speed']) : 0.4
1306	]);
1307	if ('yes' === $settings['show_acc_search']) {
1308	$this->add_render_attribute('input', [
1309	'placeholder' => esc_attr($settings['acc_search_placeholder']),
1310	'class' => 'king-addons-acc-search-input',
1311	'type' => 'search',
1312	'title' => esc_html__('Search', 'king-addons')
1313	]);
1314	}
1315	echo '<div ' . $this->get_render_attribute_string('accordion_attributes') . '>';
1316	$this->render_search_input($settings);
1317	foreach ($settings['advanced_accordion'] as $acc) {
1318	$acc_content_type = $acc['accordion_content_type'];
1319	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1320	$acc_content_type = 'editor';
1321	}
1322	echo '<div class="king-addons-accordion-item-wrap"><button class="king-addons-acc-button"><span class="king-addons-acc-item-title">';
1323	if ('side-box' === $settings['accordion_title_icon_box_style']) {
1324	echo '<div class="king-addons-acc-icon-box">';
1325	$this->render_first_icon($settings, $acc);
1326	echo '</div>';
1327	} elseif ('side-curve' === $settings['accordion_title_icon_box_style']) {
1328	echo '<div class="king-addons-acc-icon-box">';
1329	$this->render_first_icon($settings, $acc);
1330	echo '<div class="king-addons-acc-icon-box-after"></div></div>';
1331	} else {
1332	$this->render_first_icon($settings, $acc);
1333	}
1334	echo '<' . tag_escape($accordion_title_tag) . ' class="king-addons-acc-title-text">' . esc_html($acc['accordion_title'] ?? '') . '</' . tag_escape($accordion_title_tag) . '></span>';
1335	$this->render_second_icon($settings, $acc);
1336	echo '</button><div class="king-addons-acc-panel">';
1337	if ('editor' === $acc_content_type) {
1338	echo '<div class="king-addons-acc-panel-content">' . wp_kses_post($acc['accordion_content'] ?? '') . '</div>';
1339	} else {
1340	echo $this->king_addons_accordion_template($acc['accordion_content_template']);
1341	}
1342	echo '</div></div>';
1343	}
1344	echo '</div>';
1345	}
1346	}