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

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

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