easy-elements / widgets / service-list / service-list.php

service-list.php in Easy Elements for Elementor – Addons & Website Templates 1.4.5, at widgets/service-list/service-list.php

855 lines 25.0 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Widget_Base;
5	use Elementor\Group_Control_Typography;
6	use Elementor\Group_Control_Image_Size;
7	use Elementor\Group_Control_Background;
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	exit;
11	}
12
13	class Easyel_Service_List_Widget extends \Elementor\Widget_Base {
14
15
16	public function get_name() {
17	return 'eel-service-list';
18	}
19
20	public function get_title() {
21	return __( 'Service List', 'easy-elements' );
22	}
23
24	public function get_icon() {
25	return 'easyicon easyelIcon-service-list';
26	}
27
28	public function get_categories() {
29	return [ 'easyelements_category' ];
30	}
31
32	public function get_keywords() {
33	return [ 'service', 'image', 'link', 'click', 'text' ];
34	}
35
36	public function get_style_depends() {
37	return [
38	'eel-service-list',
39	];
40	}
41
42
43	protected function register_controls() {
44
45	$this->start_controls_section(
46	'section_content',
47	[
48	'label' => __( 'Content', 'easy-elements' ),
49	]
50	);
51
52	// service style
53	$this->add_control(
54	'skin_style',
55	[
56	'label' => __( 'Skin', 'easy-elements' ),
57	'type' => Controls_Manager::SELECT,
58	'options' => [
59	'skin1' => __( 'Skin 1', 'easy-elements' ),
60	'skin2' => __( 'Skin 2', 'easy-elements' ),
61	'skin3' => __( 'Skin 3', 'easy-elements' ),
62	],
63	'default' => 'skin1',
64	'toggle' => false,
65	'prefix_class' => 'eel-service-list-wrapper-',
66	]
67	);
68
69	$this->add_control(
70	'media_type',
71	[
72	'label' => __('Choose Media Type', 'easy-elements'),
73	'type' => Controls_Manager::CHOOSE,
74	'options' => [
75	'icon' => [
76	'title' => __('Icon Box', 'easy-elements'),
77	'icon' => 'eicon-star',
78	],
79	'image' => [
80	'title' => __('Image Box', 'easy-elements'),
81	'icon' => 'eicon-image',
82	],
83	'image_only' => [
84	'title' => __('Only Image', 'easy-elements'),
85	'icon' => 'eicon-image',
86	],
87	'number' => [
88	'title' => __('Number', 'easy-elements'),
89	'icon' => 'eicon-number-field',
90	],
91	],
92	'default' => 'icon',
93	'toggle' => false,
94	]
95	);
96
97
98	$this->add_control(
99	'service_icon',
100	[
101	'label' => __('Icon', 'easy-elements'),
102	'type' => Controls_Manager::ICONS,
103	'condition' => [
104	'media_type' => 'icon',
105	],
106	'default' => [
107	'value' => 'fas fa-star',
108	'library' => 'fa-solid',
109	],
110	]
111	);
112
113	$this->add_control(
114	'service_image',
115	[
116	'label' => __('Image', 'easy-elements'),
117	'type' => Controls_Manager::MEDIA,
118	'default' => [
119	'url' => \Elementor\Utils::get_placeholder_image_src(),
120	],
121	'condition' => [
122	'media_type' => ['image', 'image_only'],
123	],
124	]
125	);
126
127	$this->add_control(
128	'title',
129	[
130	'label' => __( 'Title', 'easy-elements' ),
131	'type' => Controls_Manager::TEXT,
132	'default' => __( 'Managed IT Services', 'easy-elements' ),
133	]
134	);
135
136	$this->add_control(
137	'number',
138	[
139	'label' => __('Number', 'easy-elements'),
140	'type' => Controls_Manager::TEXT,
141	'condition' => [ 'media_type' => 'number' ],
142	'default' => '1',
143	]
144	);
145
146	$this->add_control(
147	'title_tag',
148	[
149	'label' => __('Title HTML Tag', 'easy-elements'),
150	'type' => Controls_Manager::SELECT,
151	'options' => [
152	'h1' => 'H1',
153	'h2' => 'H2',
154	'h3' => 'H3',
155	'h4' => 'H4',
156	'h5' => 'H5',
157	'h6' => 'H6',
158	'div' => 'div',
159	'span' => 'span',
160	'p' => 'p',
161	],
162	'default' => 'h3',
163	]
164	);
165
166	$this->add_control(
167	'description',
168	[
169	'label' => __( 'Description', 'easy-elements' ),
170	'type' => Controls_Manager::TEXTAREA,
171	'default' => __( 'Professional monitoring and management of your IT systems 24/7/365, ensuring optimal performance and security.', 'easy-elements' ),
172	]
173	);
174
175	$this->add_control(
176	'readmore_type',
177	[
178	'label' => __( 'Read More Type', 'easy-elements' ),
179	'type' => Controls_Manager::SELECT,
180	'options' => [
181	'readmore' => __( 'Read More', 'easy-elements' ),
182	'icon' => __( 'Only Icon', 'easy-elements' ),
183	'magnetic_hover' => __( 'Magnetic Hover', 'easy-elements' ),
184	],
185	'default' => 'readmore',
186	]
187	);
188
189	$this->add_control(
190	'readmore_text',
191	[
192	'label' => __( 'Read More Text', 'easy-elements' ),
193	'type' => Controls_Manager::TEXT,
194	'default' => __( 'Read More', 'easy-elements' ),
195	'condition' => [ 'readmore_type' => 'readmore' ],
196	]
197	);
198
199	$this->add_control(
200	'readmore_icon',
201	[
202	'label' => __( 'ReadMore Icon', 'easy-elements' ),
203	'type' => Controls_Manager::ICONS,
204	]
205	);
206	$this->add_control(
207	'readmore_icon_spacing',
208	[
209	'label' => __('Icon Spacing', 'easy-elements'),
210	'type' => \Elementor\Controls_Manager::SLIDER,
211	'size_units' => ['px','em'],
212	'selectors' => [
213	'{{WRAPPER}} .eel-service-list .eel-readmore i, {{WRAPPER}} .eel-service-list .eel-readmore svg' => 'margin-left: {{SIZE}}{{UNIT}};',
214	],
215	'condition' => [ 'readmore_type!' => 'icon' ],
216	]
217	);
218
219	$this->add_control(
220	'readmore_icon_color',
221	[
222	'label' => __( 'Icon Color', 'easy-elements' ),
223	'type' => Controls_Manager::COLOR,
224	'selectors' => [
225	'{{WRAPPER}} .eel-service-list .eel-only-icon i' => 'color: {{VALUE}};',
226	'{{WRAPPER}} .eel-service-list .eel-only-icon svg' => 'fill: {{VALUE}};',
227	'{{WRAPPER}} .eel-service-list .eel-only-icon svg path' => 'fill: {{VALUE}};',
228	],
229	'condition' => [ 'readmore_type' => 'icon' ],
230	]
231	);
232
233	$this->add_group_control(
234	\Elementor\Group_Control_Background::get_type(),
235	[
236	'name' => 'readmore_icon_bg_color',
237	'types' => [ 'classic', 'gradient' ],
238	'selector' => '{{WRAPPER}} .eel-service-list .eel-only-icon span',
239	'condition' => [ 'readmore_type' => 'icon' ],
240	]
241	);
242
243	$this->add_responsive_control(
244	'circle_size_only_icon',
245	[
246	'label' => __('Circle Size', 'easy-elements'),
247	'type' => \Elementor\Controls_Manager::SLIDER,
248	'size_units' => ['px'],
249	'range' => [
250	'px' => [
251	'min' => 10,
252	'max' => 300,
253	'step' => 1,
254	],
255	],
256	'default' => [
257	'size' => 100,
258	'unit' => 'px',
259	],
260	'selectors' => [
261	'{{WRAPPER}} .eel-only-icon span' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
262	],
263	'condition' => [ 'readmore_type' => 'icon' ],
264	]
265	);
266
267	$this->add_responsive_control(
268	'circle_border_radius_only_icon',
269	[
270	'label' => __('Border Radius', 'easy-elements'),
271	'type' => \Elementor\Controls_Manager::DIMENSIONS,
272	'size_units' => ['px', '%'],
273	'selectors' => [
274	'{{WRAPPER}} .eel-service-list .eel-only-icon span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
275	],
276	'condition' => [ 'readmore_type' => 'icon' ],
277	]
278	);
279
280
281
282	$this->add_responsive_control(
283	'circle_icon_size_only',
284	[
285	'label' => __('Icon Size', 'easy-elements'),
286	'type' => \Elementor\Controls_Manager::SLIDER,
287	'size_units' => ['px', 'em', 'rem'],
288	'range' => [
289	'px' => [
290	'min' => 10,
291	'max' => 100,
292	'step' => 1,
293	],
294	'em' => [
295	'min' => 0.5,
296	'max' => 5,
297	'step' => 0.1,
298	],
299	'rem' => [
300	'min' => 0.5,
301	'max' => 5,
302	'step' => 0.1,
303	],
304	],
305	'default' => [
306	'size' => 25,
307	'unit' => 'px',
308	],
309	'selectors' => [
310	'{{WRAPPER}} .eel-only-icon span i' => 'font-size: {{SIZE}}{{UNIT}};',
311	'{{WRAPPER}} .eel-only-icon span svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
312	'{{WRAPPER}} .eel-only-icon span svg path' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
313	],
314	'condition' => [ 'readmore_type' => 'icon' ],
315	]
316	);
317
318	$this->add_control(
319	'readmore_link',
320	[
321	'label' => __( 'Read More URL', 'easy-elements' ),
322	'type' => Controls_Manager::URL,
323	'default' => [
324	'url' => '#',
325	'is_external' => false,
326	'nofollow' => false,
327	],
328	'show_external' => true,
329	]
330	);
331	$this->add_responsive_control(
332	'service_list_v_alignment',
333	[
334	'label' => esc_html__( 'Vertical Alignment', 'easy-elements' ),
335	'type' => \Elementor\Controls_Manager::CHOOSE,
336	'options' => [
337	'flex-start' => [
338	'title' => esc_html__( 'Top', 'easy-elements' ),
339	'icon' => 'eicon-v-align-top',
340	],
341	'center' => [
342	'title' => esc_html__( 'Center', 'easy-elements' ),
343	'icon' => 'eicon-v-align-middle',
344	],
345	'flex-end' => [
346	'title' => esc_html__( 'Bottom', 'easy-elements' ),
347	'icon' => 'eicon-v-align-bottom',
348	],
349	],
350	'selectors' => [
351	'{{WRAPPER}} .eel-service-list' => 'align-items: {{VALUE}};',
352	'{{WRAPPER}} .eel-service-list .eel-service-media' => 'align-items: {{VALUE}};',
353	],
354	'separator' => 'before',
355	]
356	);
357	$this->add_responsive_control(
358	'service_list_media_content_gap',
359	[
360	'label' => __('Media & Content Between Gap ', 'easy-elements'),
361	'type' => \Elementor\Controls_Manager::SLIDER,
362	'selectors' => [
363	'{{WRAPPER}} .eel-service-list .eel-service-media' => 'gap: {{SIZE}}{{UNIT}};',
364	],
365	]
366	);
367
368	$this->end_controls_section();
369
370	$this->start_controls_section(
371	'section_icon_style',
372	[
373	'label' => __('Icon Style', 'easy-elements'),
374	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
375	'condition' => ['media_type' => 'icon'],
376	]
377	);
378
379	$this->add_control(
380	'icon_color',
381	[
382	'label' => __('Icon Color', 'easy-elements'),
383	'type' => \Elementor\Controls_Manager::COLOR,
384	'selectors' => [
385	'{{WRAPPER}} .eel-service-list .eel-service-icon i' => 'color: {{VALUE}};',
386	'{{WRAPPER}} .eel-service-list .eel-service-icon svg' => 'fill: {{VALUE}};',
387	'{{WRAPPER}} .eel-service-list .eel-service-icon svg path' => 'fill: {{VALUE}};',
388	],
389	]
390	);
391
392	$this->add_group_control(
393	\Elementor\Group_Control_Background::get_type(),
394	[
395	'name' => 'icon_background',
396	'label' => __('Background', 'easy-elements'),
397	'types' => ['classic', 'gradient'],
398	'selector' => '{{WRAPPER}} .eel-service-list .eel-icon-img-wrap',
399	]
400	);
401
402	$this->add_responsive_control(
403	'icon_size',
404	[
405	'label' => __('Icon Size', 'easy-elements'),
406	'type' => \Elementor\Controls_Manager::SLIDER,
407	'range' => [
408	'px' => ['min' => 10, 'max' => 200],
409	],
410	'selectors' => [
411	'{{WRAPPER}} .eel-service-list .eel-service-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
412	],
413	]
414	);
415
416	$this->add_responsive_control(
417	'icon_padding',
418	[
419	'label' => __('Icon Padding', 'easy-elements'),
420	'type' => \Elementor\Controls_Manager::DIMENSIONS,
421	'size_units' => ['px', '%', 'em'],
422	'selectors' => [
423	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
424	],
425	]
426	);
427
428	$this->add_responsive_control(
429	'icon_border_radius',
430	[
431	'label' => __('Border Radius', 'easy-elements'),
432	'type' => \Elementor\Controls_Manager::DIMENSIONS,
433	'size_units' => ['px', '%'],
434	'selectors' => [
435	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
436	],
437	]
438	);
439
440	$this->end_controls_section();
441
442	$this->start_controls_section(
443	'section_circle_style',
444	[
445	'label' => __('Circle Style', 'easy-elements'),
446	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
447	]
448	);
449
450	$this->add_group_control(
451	\Elementor\Group_Control_Background::get_type(),
452	[
453	'name' => 'circle_bg_group',
454	'types' => [ 'classic', 'gradient' ],
455	'selector' => '{{WRAPPER}} .eel-service-list .eel-icon-img-wrap, {{WRAPPER}} .eel-service-list-skin2 .eel-icon-img-wrap',
456	]
457	);
458
459	$this->add_control(
460	'circle_size',
461	[
462	'label' => __('Circle Size', 'easy-elements'),
463	'type' => \Elementor\Controls_Manager::SLIDER,
464	'size_units' => ['px'],
465	'range' => [
466	'px' => [
467	'min' => 40,
468	'max' => 200,
469	],
470	],
471	'selectors' => [
472	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap, {{WRAPPER}} .eel-service-list-skin2 .eel-icon-img-wrap' => 'max-width: {{SIZE}}{{UNIT}}; min-width: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}}; min-height: {{SIZE}}{{UNIT}};',
473	],
474	]
475	);
476
477	$this->add_responsive_control(
478	'circle_border_radius',
479	[
480	'label' => __('Border Radius', 'easy-elements'),
481	'type' => \Elementor\Controls_Manager::DIMENSIONS,
482	'size_units' => ['px', '%'],
483	'selectors' => [
484	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap, {{WRAPPER}} .eel-service-list-skin2 .eel-icon-img-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
485	],
486	]
487	);
488
489	$this->add_responsive_control(
490	'circle_padding',
491	[
492	'label' => __('Padding', 'easy-elements'),
493	'type' => \Elementor\Controls_Manager::DIMENSIONS,
494	'size_units' => ['px', '%'],
495	'selectors' => [
496	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap, {{WRAPPER}} .eel-service-list-skin2 .eel-icon-img-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
497	],
498	]
499	);
500
501	$this->add_group_control(
502	\Elementor\Group_Control_Border::get_type(),
503	[
504	'name' => 'circle_border',
505	'selector' => '{{WRAPPER}} .eel-service-list .eel-icon-img-wrap, {{WRAPPER}} .eel-service-list-skin2 .eel-icon-img-wrap',
506	]
507	);
508
509	$this->end_controls_section();
510
511	$this->start_controls_section(
512	'section_number_style',
513	[
514	'label' => __('Number Style', 'easy-elements'),
515	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
516	'condition' => [ 'media_type' => 'number' ],
517	]
518	);
519
520	$this->add_control(
521	'number_color',
522	[
523	'label' => __('Number Color', 'easy-elements'),
524	'type' => \Elementor\Controls_Manager::COLOR,
525	'selectors' => [
526	'{{WRAPPER}} .eel-service-list .eel--number' => 'color: {{VALUE}};',
527	],
528	]
529	);
530
531	$this->add_group_control(
532	\Elementor\Group_Control_Typography::get_type(),
533	[
534	'name' => 'number_typography',
535	'label' => __('Number Typography', 'easy-elements'),
536	'selector' => '{{WRAPPER}} .eel-service-list .eel--number',
537	]
538	);
539
540	$this->end_controls_section();
541
542	$this->start_controls_section(
543	'section_title_style',
544	[
545	'label' => __('Title Style', 'easy-elements'),
546	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
547	]
548	);
549
550	$this->add_control(
551	'title_color',
552	[
553	'label' => __('Title Color', 'easy-elements'),
554	'type' => \Elementor\Controls_Manager::COLOR,
555	'selectors' => [
556	'{{WRAPPER}} .eel-service-list .eel-service-title' => 'color: {{VALUE}};',
557	],
558	]
559	);
560
561	$this->add_group_control(
562	\Elementor\Group_Control_Typography::get_type(),
563	[
564	'name' => 'title_typography',
565	'label' => __('Title Typography', 'easy-elements'),
566	'selector' => '{{WRAPPER}} .eel-service-list .eel-service-title',
567	]
568	);
569	$this->add_responsive_control(
570	'title_margin',
571	[
572	'label' => __('Margin', 'easy-elements'),
573	'type' => \Elementor\Controls_Manager::DIMENSIONS,
574	'size_units' => ['px', '%', 'em'],
575	'selectors' => [
576	'{{WRAPPER}} .eel-service-list .eel-service-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
577	],
578	]
579	);
580
581	$this->end_controls_section();
582
583	$this->start_controls_section(
584	'section_description_style',
585	[
586	'label' => __('Description Style', 'easy-elements'),
587	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
588	]
589	);
590
591	$this->add_control(
592	'desc_color',
593	[
594	'label' => __('Description Color', 'easy-elements'),
595	'type' => \Elementor\Controls_Manager::COLOR,
596	'selectors' => [
597	'{{WRAPPER}} .eel-service-list .eel-service-des .eel-des, {{WRAPPER}} .eel-service-list-skin2 .eel-des' => 'color: {{VALUE}};',
598	],
599	]
600	);
601
602	$this->add_group_control(
603	\Elementor\Group_Control_Typography::get_type(),
604	[
605	'name' => 'desc_typography',
606	'label' => __('Description Typography', 'easy-elements'),
607	'selector' => '{{WRAPPER}} .eel-service-list .eel-service-des .eel-des, {{WRAPPER}} .eel-service-list-skin2 .eel-des',
608	]
609	);
610
611	$this->add_responsive_control(
612	'description_margin',
613	[
614	'label' => __('Margin', 'easy-elements'),
615	'type' => \Elementor\Controls_Manager::DIMENSIONS,
616	'size_units' => ['px', '%', 'em'],
617	'selectors' => [
618	'{{WRAPPER}} .eel-service-list-skin2 .eel-des' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
619	],
620	]
621	);
622	$this->end_controls_section();
623
624	$this->start_controls_section(
625	'section_readmore_style',
626	[
627	'label' => __('Read More Style', 'easy-elements'),
628	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
629	'condition' => [ 'readmore_type!' => 'icon' ],
630	]
631	);
632
633	$this->start_controls_tabs('tabs_readmore_style');
634
635	/**
636	* Normal Tab
637	*/
638	$this->start_controls_tab(
639	'tab_readmore_normal',
640	[
641	'label' => __('Normal', 'easy-elements'),
642	]
643	);
644	$this->add_group_control(
645	\Elementor\Group_Control_Typography::get_type(),
646	[
647	'name' => 'readmore_typography',
648	'label' => __('Typography', 'easy-elements'),
649	'selector' => '{{WRAPPER}} .eel-service-list .eel-readmore',
650	]
651	);
652
653	$this->add_control(
654	'readmore_color',
655	[
656	'label' => __('Color', 'easy-elements'),
657	'type' => \Elementor\Controls_Manager::COLOR,
658	'selectors' => [
659	'{{WRAPPER}} .eel-service-list .eel-readmore' => 'color: {{VALUE}};',
660	],
661	]
662	);
663	$this->add_group_control(
664	\Elementor\Group_Control_Background::get_type(),
665	[
666	'name' => 'readmore_background',
667	'types' => [ 'classic', 'gradient' ],
668	'selector' => '{{WRAPPER}} .eel-service-list .eel-readmore',
669	]
670	);
671	$this->add_responsive_control(
672	'readmore_padding',
673	[
674	'label' => __('Padding', 'easy-elements'),
675	'type' => \Elementor\Controls_Manager::DIMENSIONS,
676	'size_units' => ['px', '%', 'em'],
677	'selectors' => [
678	'{{WRAPPER}} .eel-service-list .eel-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
679	],
680	]
681	);
682	$this->add_responsive_control(
683	'readmore_border_radius',
684	[
685	'label' => __('Border Radius', 'easy-elements'),
686	'type' => \Elementor\Controls_Manager::DIMENSIONS,
687	'size_units' => ['px', '%', 'em'],
688	'selectors' => [
689	'{{WRAPPER}} .eel-service-list .eel-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
690	],
691	]
692	);
693	$this->add_group_control(
694	\Elementor\Group_Control_Border::get_type(),
695	[
696	'name' => 'readmore_border',
697	'selector' => '{{WRAPPER}} .eel-service-list .eel-readmore',
698	]
699	);
700
701	$this->end_controls_tab();
702
703	/**
704	* Hover Tab
705	*/
706	$this->start_controls_tab(
707	'tab_readmore_hover',
708	[
709	'label' => __('Hover', 'easy-elements'),
710	]
711	);
712
713	$this->add_control(
714	'readmore_hover_color',
715	[
716	'label' => __('Color', 'easy-elements'),
717	'type' => \Elementor\Controls_Manager::COLOR,
718	'selectors' => [
719	'{{WRAPPER}} .eel-service-list .eel-readmore:hover' => 'color: {{VALUE}};',
720	],
721	]
722	);
723	$this->add_group_control(
724	\Elementor\Group_Control_Background::get_type(),
725	[
726	'name' => 'readmore_hover_background',
727	'types' => [ 'classic', 'gradient' ],
728	'selector' => '{{WRAPPER}} .eel-service-list .eel-readmore:hover',
729	]
730	);
731	$this->add_control(
732	'readmore_hover_border_color',
733	[
734	'label' => __('Hover Border Color', 'easy-elements'),
735	'type' => \Elementor\Controls_Manager::COLOR,
736	'selectors' => [
737	'{{WRAPPER}} .eel-service-list .eel-readmore:hover' => 'border-color: {{VALUE}};',
738	],
739	]
740	);
741
742	$this->end_controls_tab();
743	$this->end_controls_tabs();
744	$this->end_controls_section();
745
746	$this->start_controls_section(
747	'section_image_style',
748	[
749	'label' => __('Image Style', 'easy-elements'),
750	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
751	'condition' => ['media_type' => ['image', 'image_only']],
752	]
753	);
754
755	$this->add_responsive_control(
756	'image_width',
757	[
758	'label' => __('Image Height', 'easy-elements'),
759	'type' => \Elementor\Controls_Manager::SLIDER,
760	'range' => [
761	'px' => ['min' => 10, 'max' => 500],
762	],
763	'selectors' => [
764	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap img' => 'height: {{SIZE}}{{UNIT}};',
765	],
766	]
767	);
768
769	$this->add_responsive_control(
770	'image_border_radius',
771	[
772	'label' => __('Border Radius', 'easy-elements'),
773	'type' => \Elementor\Controls_Manager::DIMENSIONS,
774	'size_units' => ['px', '%'],
775	'selectors' => [
776	'{{WRAPPER}} .eel-service-list .eel-icon-img-wrap img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
777	],
778	]
779	);
780
781	$this->end_controls_section();
782
783	// others style
784	$this->start_controls_section(
785	'section_others_style',
786	[
787	'label' => __('Others Style', 'easy-elements'),
788	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
789	'condition' => [ 'skin_style' => 'skin2' ],
790	]
791	);
792
793	// Circle style
794	$this->add_control(
795	'circle_hover_color',
796	[
797	'label' => __('Circle Hover Bg Color', 'easy-elements'),
798	'type' => \Elementor\Controls_Manager::COLOR,
799	'selectors' => [
800	'{{WRAPPER}} .eel-service-list:hover .eel-icon-img-wrap' => 'background-color: {{VALUE}} !important; border-color: {{VALUE}} !important;',
801	],
802	]
803	);
804
805	$this->add_control(
806	'line_color',
807	[
808	'label' => __('Line Color Normal', 'easy-elements'),
809	'type' => \Elementor\Controls_Manager::COLOR,
810	'selectors' => [
811	'{{WRAPPER}} .eel-service-list-skin2:before' => 'border-bottom-color: {{VALUE}};',
812	],
813	]
814	);
815
816	$this->add_control(
817	'line_color_hover',
818	[
819	'label' => __('Line Color Hover', 'easy-elements'),
820	'type' => \Elementor\Controls_Manager::COLOR,
821	'selectors' => [
822	'{{WRAPPER}} .eel-service-list-skin2:after' => 'border-bottom-color: {{VALUE}};',
823	],
824	]
825	);
826
827	$this->end_controls_section();
828	}
829
830	protected function render() {
831	$settings = $this->get_settings_for_display();
832	$title = $settings['title'];
833	$desc = $settings['description'];
834	$readmore = $settings['readmore_text'];
835	$link = $settings['readmore_link']['url'];
836	$is_external = !empty($settings['readmore_link']['is_external']) ? 'target="_blank"' : '';
837	$nofollow = !empty($settings['readmore_link']['nofollow']) ? 'rel="nofollow"' : '';
838
839	$title_tag = $settings['title_tag'];
840	$title = $settings['title'];
841	$image_only = ( isset($settings['media_type']) && $settings['media_type'] === 'image_only' ) ? 'eel-image-only' : '';
842
843	$skin = $settings['skin_style'] ?? 'skin1';
844	$template_path = plugin_dir_path(__FILE__) . 'skins/' . $skin . '.php';
845
846	if ( file_exists( $template_path ) ) {
847	?>
848	<div class="eel-service-list eel-service-list-<?php echo esc_attr($skin); ?>">
849	<?php include $template_path; ?>
850	</div>
851	<?php
852	}
853	}
854	}
855