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

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

683 lines 24.0 KB

Raw Download Zip

1	<?php
2	/**
3	* Team Member Slider Widget
4	*
5	* @package King_Addons
6	*/
7	namespace King_Addons;
8
9	use Elementor\Controls_Manager;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Group_Control_Border;
13	use Elementor\Group_Control_Box_Shadow;
14	use Elementor\Group_Control_Css_Filter;
15	use Elementor\Repeater;
16	use Elementor\Utils;
17	use Elementor\Widget_Base;
18
19	if (!defined('ABSPATH')) {
20	exit; // Exit if accessed directly.
21	}
22
23
24
25	class Team_Member_Slider extends Widget_Base {
26
27
28	public function get_name(): string {
29	return 'king-addons-team-member-slider';
30	}
31
32	public function get_title(): string {
33	return esc_html__('Team Member Slider', 'king-addons');
34	}
35
36	public function get_icon(): string {
37	return 'king-addons-icon king-addons-team-member-slider';
38	}
39
40	public function get_script_depends(): array {
41	return [
42	KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper',
43	KING_ADDONS_ASSETS_UNIQUE_KEY . '-team-member-slider-script',
44	];
45	}
46
47	public function get_style_depends(): array {
48	return [
49	KING_ADDONS_ASSETS_UNIQUE_KEY . '-swiper-swiper',
50	KING_ADDONS_ASSETS_UNIQUE_KEY . '-team-member-slider-style',
51	];
52	}
53
54	public function get_categories(): array {
55	return ['king-addons'];
56	}
57
58	public function get_keywords(): array {
59	return ['team', 'members', 'slider', 'carousel', 'staff', 'profile'];
60	}
61
62	protected function register_controls(): void {
63	// Slider behavior settings
64	$this->start_controls_section(
65	'section_slider_settings',
66	[
67	'label' => esc_html__('Slider Settings', 'king-addons'),
68	'tab' => Controls_Manager::TAB_CONTENT,
69	]
70	);
71	$this->add_control(
72	'slides_per_view',
73	[
74	'label' => esc_html__('Slides Per View', 'king-addons'),
75	'type' => Controls_Manager::NUMBER,
76	'min' => 1,
77	'max' => 6,
78	'step' => 1,
79	'default' => 4,
80	]
81	);
82	$this->add_control(
83	'slides_per_view_tablet',
84	[
85	'label' => esc_html__('Slides Per View (Tablet)', 'king-addons'),
86	'type' => Controls_Manager::NUMBER,
87	'min' => 1,
88	'max' => 6,
89	'step' => 1,
90	'default' => 3,
91	]
92	);
93	$this->add_control(
94	'slides_per_view_mobile',
95	[
96	'label' => esc_html__('Slides Per View (Mobile)', 'king-addons'),
97	'type' => Controls_Manager::NUMBER,
98	'min' => 1,
99	'max' => 6,
100	'step' => 1,
101	'default' => 1,
102	]
103	);
104	$this->add_control(
105	'space_between',
106	[
107	'label' => esc_html__('Space Between (px)', 'king-addons'),
108	'type' => Controls_Manager::SLIDER,
109	'size_units' => ['px'],
110	'range' => [
111	'px' => [
112	'min' => 0,
113	'max' => 100,
114	],
115	],
116	'default' => [
117	'size' => 30,
118	'unit' => 'px',
119	],
120	]
121	);
122	$this->add_control(
123	'loop',
124	[
125	'label' => esc_html__('Loop', 'king-addons'),
126	'type' => Controls_Manager::SWITCHER,
127	'label_on' => esc_html__('Yes', 'king-addons'),
128	'label_off' => esc_html__('No', 'king-addons'),
129	'return_value' => 'yes',
130	'default' => '',
131	]
132	);
133	$this->add_control(
134	'autoplay',
135	[
136	'label' => esc_html__('Autoplay', 'king-addons'),
137	'type' => Controls_Manager::SWITCHER,
138	'label_on' => esc_html__('Yes', 'king-addons'),
139	'label_off' => esc_html__('No', 'king-addons'),
140	'return_value' => 'yes',
141	'default' => '',
142	]
143	);
144	$this->add_control(
145	'autoplay_delay',
146	[
147	'label' => esc_html__('Autoplay Delay (ms)', 'king-addons'),
148	'type' => Controls_Manager::NUMBER,
149	'min' => 0,
150	'step' => 100,
151	'default' => 2000,
152	'condition' => [
153	'autoplay' => 'yes',
154	],
155	]
156	);
157	$this->add_control(
158	'autoplay_reverse',
159	[
160	'label' => esc_html__('Reverse Autoplay Direction', 'king-addons'),
161	'type' => Controls_Manager::SWITCHER,
162	'label_on' => esc_html__('Yes', 'king-addons'),
163	'label_off' => esc_html__('No', 'king-addons'),
164	'return_value' => 'yes',
165	'default' => '',
166	'condition' => [
167	'autoplay' => 'yes',
168	],
169	]
170	);
171	$this->add_control(
172	'speed',
173	[
174	'label' => esc_html__('Transition Speed (ms)', 'king-addons'),
175	'type' => Controls_Manager::NUMBER,
176	'min' => 0,
177	'step' => 100,
178	'default' => 600,
179	]
180	);
181	$this->add_control(
182	'pagination',
183	[
184	'label' => esc_html__('Pagination', 'king-addons'),
185	'type' => Controls_Manager::SWITCHER,
186	'return_value' => 'yes',
187	'default' => 'yes',
188	]
189	);
190	$this->add_control(
191	'navigation',
192	[
193	'label' => esc_html__('Navigation Arrows', 'king-addons'),
194	'type' => Controls_Manager::SWITCHER,
195	'return_value' => 'yes',
196	'default' => 'yes',
197	]
198	);
199	$this->end_controls_section();
200
201	// Style: Slide
202	$this->start_controls_section(
203	'section_style_slide',
204	[
205	'label' => esc_html__('Slide', 'king-addons'),
206	'tab' => Controls_Manager::TAB_STYLE,
207	]
208	);
209	$this->add_responsive_control(
210	'slide_padding',
211	[
212	'label' => esc_html__('Padding', 'king-addons'),
213	'type' => Controls_Manager::DIMENSIONS,
214	'size_units' => ['px', '%', 'em'],
215	'selectors' => [
216	'{{WRAPPER}} .king-addons-tms-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
217	],
218	]
219	);
220	$this->add_control(
221	'slide_bg_color',
222	[
223	'label' => esc_html__('Background Color', 'king-addons'),
224	'type' => Controls_Manager::COLOR,
225	'selectors' => [
226	'{{WRAPPER}} .king-addons-tms-item' => 'background-color: {{VALUE}};',
227	],
228	]
229	);
230	$this->add_group_control(
231	Group_Control_Border::get_type(),
232	[
233	'name' => 'slide_border',
234	'selector' => '{{WRAPPER}} .king-addons-tms-item',
235	]
236	);
237	$this->add_control(
238	'slide_border_radius',
239	[
240	'label' => esc_html__('Border Radius', 'king-addons'),
241	'type' => Controls_Manager::SLIDER,
242	'size_units' => ['px', '%'],
243	'range' => [
244	'px' => ['min' => 0, 'max' => 200],
245	'%' => ['min' => 0, 'max' => 100],
246	],
247	'selectors' => [
248	'{{WRAPPER}} .king-addons-tms-item' => 'border-radius: {{SIZE}}{{UNIT}};',
249	],
250	]
251	);
252	$this->add_group_control(
253	Group_Control_Box_Shadow::get_type(),
254	[
255	'name' => 'slide_box_shadow',
256	'selector' => '{{WRAPPER}} .king-addons-tms-item',
257	]
258	);
259	$this->end_controls_section();
260
261	// Style: Photo
262	$this->start_controls_section(
263	'section_style_photo',
264	[
265	'label' => esc_html__('Photo', 'king-addons'),
266	'tab' => Controls_Manager::TAB_STYLE,
267	]
268	);
269	$this->add_group_control(
270	Group_Control_Image_Size::get_type(),
271	[
272	'name' => 'photo_size',
273	'default' => 'thumbnail',
274	'separator' => 'none',
275	]
276	);
277	$this->add_responsive_control(
278	'photo_width',
279	[
280	'label' => esc_html__('Width', 'king-addons'),
281	'type' => Controls_Manager::SLIDER,
282	'size_units' => ['px', '%', 'em'],
283	'range' => [
284	'px' => ['min' => 0, 'max' => 1000],
285	'%' => ['min' => 0, 'max' => 100],
286	'em' => ['min' => 0, 'max' => 10],
287	],
288	'selectors' => [
289	'{{WRAPPER}} .king-addons-tms-photo img' => 'width: {{SIZE}}{{UNIT}};',
290	],
291	]
292	);
293	$this->add_responsive_control(
294	'photo_height',
295	[
296	'label' => esc_html__('Height', 'king-addons'),
297	'type' => Controls_Manager::SLIDER,
298	'size_units' => ['px', '%', 'em'],
299	'range' => [
300	'px' => ['min' => 0, 'max' => 1000],
301	'%' => ['min' => 0, 'max' => 100],
302	'em' => ['min' => 0, 'max' => 10],
303	],
304	'selectors' => [
305	'{{WRAPPER}} .king-addons-tms-photo img' => 'height: {{SIZE}}{{UNIT}};',
306	],
307	]
308	);
309	$this->add_control(
310	'photo_fit',
311	[
312	'label' => esc_html__('Image Fit', 'king-addons'),
313	'type' => Controls_Manager::SELECT,
314	'options' => [
315	'cover' => esc_html__('Cover', 'king-addons'),
316	'contain' => esc_html__('Contain', 'king-addons'),
317	'fill' => esc_html__('Fill', 'king-addons'),
318	'none' => esc_html__('None', 'king-addons'),
319	],
320	'default' => 'cover',
321	'selectors' => [
322	'{{WRAPPER}} .king-addons-tms-photo img' => 'object-fit: {{VALUE}};',
323	],
324	]
325	);
326	$this->add_control(
327	'photo_border_radius',
328	[
329	'label' => esc_html__('Border Radius', 'king-addons'),
330	'type' => Controls_Manager::SLIDER,
331	'size_units' => ['px', '%'],
332	'range' => [
333	'px' => ['min' => 0, 'max' => 200],
334	'%' => ['min' => 0, 'max' => 100],
335	],
336	'selectors' => [
337	'{{WRAPPER}} .king-addons-tms-photo img' => 'border-radius: {{SIZE}}{{UNIT}};',
338	],
339	]
340	);
341	$this->add_group_control(
342	Group_Control_Box_Shadow::get_type(),
343	[
344	'name' => 'photo_box_shadow',
345	'selector' => '{{WRAPPER}} .king-addons-tms-photo img',
346	]
347	);
348
349	$this->add_group_control(
350	Group_Control_Css_Filter::get_type(),
351	[
352	'name' => 'kng_photo_css_filters',
353	'label' => esc_html__('CSS Filters', 'king-addons'),
354	'selector' => '{{WRAPPER}} .king-addons-tms-photo img',
355	'separator' => 'before',
356	]
357	);
358
359	$this->add_group_control(
360	Group_Control_Css_Filter::get_type(),
361	[
362	'name' => 'kng_photo_css_filters_hover',
363	'label' => esc_html__('CSS Filters on Hover', 'king-addons'),
364	'selector' => '{{WRAPPER}} .king-addons-tms-photo:hover img',
365	]
366	);
367
368	$this->end_controls_section();
369
370	// Style: Name
371	$this->start_controls_section(
372	'section_style_name',
373	[
374	'label' => esc_html__('Name', 'king-addons'),
375	'tab' => Controls_Manager::TAB_STYLE,
376	]
377	);
378	$this->add_group_control(
379	Group_Control_Typography::get_type(),
380	[
381	'name' => 'name_typography',
382	'selector' => '{{WRAPPER}} .king-addons-tms-name',
383	]
384	);
385	$this->add_control(
386	'name_color',
387	[
388	'label' => esc_html__('Color', 'king-addons'),
389	'type' => Controls_Manager::COLOR,
390	'selectors' => [
391	'{{WRAPPER}} .king-addons-tms-name' => 'color: {{VALUE}};',
392	],
393	]
394	);
395	$this->end_controls_section();
396
397	// Style: Role
398	$this->start_controls_section(
399	'section_style_role',
400	[
401	'label' => esc_html__('Role', 'king-addons'),
402	'tab' => Controls_Manager::TAB_STYLE,
403	]
404	);
405	$this->add_group_control(
406	Group_Control_Typography::get_type(),
407	[
408	'name' => 'role_typography',
409	'selector' => '{{WRAPPER}} .king-addons-tms-role',
410	]
411	);
412	$this->add_control(
413	'role_color',
414	[
415	'label' => esc_html__('Color', 'king-addons'),
416	'type' => Controls_Manager::COLOR,
417	'selectors' => [
418	'{{WRAPPER}} .king-addons-tms-role' => 'color: {{VALUE}};',
419	],
420	]
421	);
422	$this->end_controls_section();
423
424	// Style: Bio
425	$this->start_controls_section(
426	'section_style_bio',
427	[
428	'label' => esc_html__('Bio', 'king-addons'),
429	'tab' => Controls_Manager::TAB_STYLE,
430	]
431	);
432	$this->add_group_control(
433	Group_Control_Typography::get_type(),
434	[
435	'name' => 'bio_typography',
436	'selector' => '{{WRAPPER}} .king-addons-tms-bio',
437	]
438	);
439	$this->add_control(
440	'bio_color',
441	[
442	'label' => esc_html__('Color', 'king-addons'),
443	'type' => Controls_Manager::COLOR,
444	'selectors' => [
445	'{{WRAPPER}} .king-addons-tms-bio' => 'color: {{VALUE}};',
446	],
447	]
448	);
449	$this->end_controls_section();
450
451	// Style: Pagination
452	$this->start_controls_section(
453	'section_style_pagination',
454	[
455	'label' => esc_html__('Pagination', 'king-addons'),
456	'tab' => Controls_Manager::TAB_STYLE,
457	]
458	);
459	$this->add_control(
460	'pagination_bullet_size',
461	[
462	'label' => esc_html__('Bullet Size (px)', 'king-addons'),
463	'type' => Controls_Manager::SLIDER,
464	'range' => [
465	'px' => [ 'min' => 4, 'max' => 20 ],
466	],
467	'selectors' => [
468	'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
469	],
470	]
471	);
472	$this->add_control(
473	'pagination_bullet_color',
474	[
475	'label' => esc_html__('Bullet Color', 'king-addons'),
476	'type' => Controls_Manager::COLOR,
477	'selectors' => [
478	'{{WRAPPER}} .swiper-pagination-bullet' => 'background: {{VALUE}};',
479	],
480	]
481	);
482	$this->add_control(
483	'pagination_bullet_active_color',
484	[
485	'label' => esc_html__('Bullet Active Color', 'king-addons'),
486	'type' => Controls_Manager::COLOR,
487	'selectors' => [
488	'{{WRAPPER}} .swiper-pagination-bullet-active' => 'background: {{VALUE}};',
489	],
490	]
491	);
492	// Pagination position (inside/outside)
493	$this->add_control(
494	'pagination_position',
495	[
496	'label' => esc_html__('Pagination Position', 'king-addons'),
497	'type' => Controls_Manager::SELECT,
498	'options' => [
499	'inside' => esc_html__('Inside', 'king-addons'),
500	'outside' => esc_html__('Outside', 'king-addons'),
501	],
502	'default' => 'inside',
503	]
504	);
505	$this->end_controls_section();
506
507	// Style: Navigation
508	$this->start_controls_section(
509	'section_style_navigation',
510	[
511	'label' => esc_html__('Navigation', 'king-addons'),
512	'tab' => Controls_Manager::TAB_STYLE,
513	]
514	);
515	$this->add_responsive_control(
516	'nav_arrow_size',
517	[
518	'label' => esc_html__('Arrow Size (px)', 'king-addons'),
519	'type' => Controls_Manager::SLIDER,
520	'range' => [
521	'px' => [ 'min' => 10, 'max' => 60 ],
522	],
523	'selectors' => [
524	'{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; background-size: {{SIZE}}{{UNIT}} {{SIZE}}{{UNIT}};',
525	'{{WRAPPER}} .swiper-button-next::after, {{WRAPPER}} .swiper-button-prev::after' => 'font-size: {{SIZE}}{{UNIT}};',
526	],
527	]
528	);
529	$this->add_control(
530	'nav_arrow_color',
531	[
532	'label' => esc_html__('Arrow Color', 'king-addons'),
533	'type' => Controls_Manager::COLOR,
534	'selectors' => [
535	'{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'color: {{VALUE}};',
536	],
537	]
538	);
539	// Navigation position (inside/outside)
540	$this->add_control(
541	'navigation_position',
542	[
543	'label' => esc_html__('Arrows Position', 'king-addons'),
544	'type' => Controls_Manager::SELECT,
545	'options' => [
546	'inside' => esc_html__('Inside', 'king-addons'),
547	'outside' => esc_html__('Outside', 'king-addons'),
548	],
549	'default' => 'inside',
550	]
551	);
552	$this->end_controls_section();
553
554	// Team members list
555	$this->start_controls_section(
556	'section_members',
557	[
558	'label' => esc_html__('Team Members', 'king-addons'),
559	'tab' => Controls_Manager::TAB_CONTENT,
560	]
561	);
562
563	$repeater = new Repeater();
564	$repeater->add_control(
565	'name',
566	[
567	'label' => esc_html__('Name', 'king-addons'),
568	'type' => Controls_Manager::TEXT,
569	'default' => esc_html__('John Doe', 'king-addons'),
570	'label_block' => true,
571	]
572	);
573	$repeater->add_control(
574	'role',
575	[
576	'label' => esc_html__('Role', 'king-addons'),
577	'type' => Controls_Manager::TEXT,
578	'default' => esc_html__('CEO', 'king-addons'),
579	'label_block' => true,
580	]
581	);
582	$repeater->add_control(
583	'photo',
584	[
585	'label' => esc_html__('Photo', 'king-addons'),
586	'type' => Controls_Manager::MEDIA,
587	'default' => [
588	'url' => Utils::get_placeholder_image_src(),
589	],
590	]
591	);
592	$repeater->add_control(
593	'bio',
594	[
595	'label' => esc_html__('Bio', 'king-addons'),
596	'type' => Controls_Manager::TEXTAREA,
597	'default' => esc_html__('Brief bio goes here.', 'king-addons'),
598	]
599	);
600
601	$this->add_control(
602	'members',
603	[
604	'label' => esc_html__('Members', 'king-addons'),
605	'type' => Controls_Manager::REPEATER,
606	'fields' => $repeater->get_controls(),
607	'default' => [
608	['name' => esc_html__('John Doe', 'king-addons'), 'role' => esc_html__('CEO', 'king-addons')],
609	],
610	'title_field' => '{{{ name }}}',
611	]
612	);
613
614
615
616	$this->end_controls_section();
617
618
619	}
620
621	protected function render(): void {
622	$settings = $this->get_settings_for_display();
623	if (empty($settings['members'])) {
624	return;
625	}
626	?>
627	<?php
628	// Prepare carousel settings attributes
629	$attrs = [];
630	$attrs[] = 'data-slides-per-view="' . esc_attr($settings['slides_per_view']) . '"';
631	$attrs[] = 'data-slides-per-view-tablet="' . esc_attr($settings['slides_per_view_tablet']) . '"';
632	$attrs[] = 'data-slides-per-view-mobile="' . esc_attr($settings['slides_per_view_mobile']) . '"';
633	$attrs[] = 'data-space-between="' . esc_attr($settings['space_between']['size']) . '"';
634	$attrs[] = 'data-loop="' . esc_attr($settings['loop']) . '"';
635	$attrs[] = 'data-autoplay="' . esc_attr($settings['autoplay']) . '"';
636	$attrs[] = 'data-autoplay-delay="' . esc_attr($settings['autoplay_delay']) . '"';
637	$attrs[] = 'data-autoplay-reverse="' . esc_attr($settings['autoplay_reverse']) . '"';
638	$attrs[] = 'data-speed="' . esc_attr($settings['speed']) . '"';
639	$attrs[] = 'data-pagination="' . esc_attr($settings['pagination']) . '"';
640	$attrs[] = 'data-navigation="' . esc_attr($settings['navigation']) . '"';
641	?>
642	<?php
643	// Build container classes
644	$classes = [
645	'king-addons-team-member-slider',
646	'swiper-container',
647	'swiper',
648	];
649	if (!empty($settings['navigation_position']) && 'outside' === $settings['navigation_position']) {
650	$classes[] = 'arrows-outside';
651	}
652	if (!empty($settings['pagination_position']) && 'outside' === $settings['pagination_position']) {
653	$classes[] = 'pagination-outside';
654	}
655	?>
656	<div class="<?php echo esc_attr(implode(' ', $classes)); ?>" <?php echo implode(' ', $attrs); ?>>
657	<div class="swiper-wrapper">
658	<?php foreach ($settings['members'] as $member) : ?>
659	<div class="swiper-slide">
660	<div class="king-addons-tms-item">
661	<?php if (!empty($member['photo']['url'])) : ?>
662	<div class="king-addons-tms-photo">
663	<img src="<?php echo esc_url($member['photo']['url']); ?>" alt="<?php echo esc_attr($member['name']); ?>" />
664	</div>
665	<?php endif; ?>
666	<div class="king-addons-tms-info">
667	<h4 class="king-addons-tms-name"><?php echo esc_html($member['name']); ?></h4>
668	<span class="king-addons-tms-role"><?php echo esc_html($member['role']); ?></span>
669	<?php if (!empty($member['bio'])) : ?>
670	<p class="king-addons-tms-bio"><?php echo esc_html($member['bio']); ?></p>
671	<?php endif; ?>
672	</div>
673	</div>
674	</div>
675	<?php endforeach; ?>
676	</div>
677	<div class="swiper-pagination"></div>
678	<div class="swiper-button-prev"></div>
679	<div class="swiper-button-next"></div>
680	</div>
681	<?php
682	}
683	}