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.84, at includes/widgets/Team_Member_Slider/Team_Member_Slider.php

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