ultimate-store-kit / modules / brand-carousel / widgets / brand-carousel.php

brand-carousel.php in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 2.0.2, at modules/brand-carousel/widgets/brand-carousel.php

574 lines 15.0 KB

Raw Download Zip

1	<?php
2
3	namespace UltimateStoreKit\Modules\BrandCarousel\Widgets;
4
5	use UltimateStoreKit\Base\Module_Base;
6	use Elementor\Group_Control_Css_Filter;
7	use Elementor\Repeater;
8	use Elementor\Controls_Manager;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Group_Control_Image_Size;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Group_Control_Text_Shadow;
13	use Elementor\Group_Control_Background;
14	use Elementor\Group_Control_Border;
15	use Elementor\Utils;
16
17	use UltimateStoreKit\traits\Global_Widget_Controls;
18	use UltimateStoreKit\traits\Global_Widget_Template;
19
20	if ( ! defined( 'ABSPATH' ) ) {
21	exit;
22	} // Exit if accessed directly
23
24	class Brand_Carousel extends Module_Base {
25	use Global_Widget_Controls;
26	use Global_Widget_Template;
27
28	public function get_name() {
29	return 'usk-brand-carousel';
30	}
31
32	public function get_title() {
33	return esc_html__( 'Brand Carousel', 'ultimate-store-kit' );
34	}
35
36	public function get_icon() {
37	return 'usk-widget-icon usk-icon-brand-carousel';
38	}
39
40	public function get_categories() {
41	return ['ultimate-store-kit'];
42	}
43
44	public function get_keywords() {
45	return [ 'brand', 'carousel', 'client', 'logo', 'showcase' ];
46	}
47
48	public function get_style_depends() {
49	if ( $this->usk_is_edit_mode() ) {
50	return [ 'usk-styles' ];
51	} else {
52	return [ 'usk-font', 'usk-brand-carousel' ];
53	}
54	}
55
56	// public function get_custom_help_url() {
57	// return 'https://youtu.be/a_wJL950Kz4';
58	// }
59
60	protected function register_controls() {
61
62	$this->start_controls_section(
63	'usk_section_brands',
64	[
65	'label' => __( 'Brand Items', 'ultimate-store-kit' ),
66	'tab' => Controls_Manager::TAB_CONTENT,
67	]
68	);
69
70	$repeater = new Repeater();
71
72	$repeater->add_control(
73	'image',
74	[
75	'label' => __( 'Brand Image', 'ultimate-store-kit' ),
76	'type' => Controls_Manager::MEDIA,
77	'default' => [
78	'url' => Utils::get_placeholder_image_src(),
79	],
80	]
81	);
82
83	$repeater->add_control(
84	'brand_name',
85	[
86	'label' => __( 'Brand Name', 'ultimate-store-kit' ),
87	'type' => Controls_Manager::TEXT,
88	'default' => __( 'Brand Name', 'ultimate-store-kit' ),
89	'label_block' => true,
90	'dynamic' => [ 'active' =>true ],
91	]
92	);
93
94	$repeater->add_control(
95	'link',
96	[
97	'label' => __( 'Url', 'ultimate-store-kit' ),
98	'type' => Controls_Manager::URL,
99	'placeholder' => __( 'https://your-link.com', 'plugin-domain' ),
100	'show_external' => true,
101	'default' => [
102	'url' => '#',
103	'is_external' => true,
104	'nofollow' => true,
105	],
106	'label_block' => true,
107	'dynamic' => [ 'active' =>true ],
108	]
109	);
110
111	$this->add_control(
112	'brand_items',
113	[
114	'show_label' => false,
115	'type' => Controls_Manager::REPEATER,
116	'fields' => $repeater->get_controls(),
117	'title_field' => '{{{ name }}}',
118	'default' => [
119	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
120	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
121	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
122	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
123	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
124	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
125	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
126	[ 'image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
127	]
128	]
129	);
130
131	$this->end_controls_section();
132
133	$this->start_controls_section(
134	'section_layout',
135	[
136	'label' => __( 'Additional Options', 'ultimate-store-kit' ),
137	'tab' => Controls_Manager::TAB_CONTENT,
138	]
139	);
140
141	$this->add_responsive_control(
142	'columns',
143	[
144	'label' => esc_html__('Columns', 'ultimate-store-kit'),
145	'type' => Controls_Manager::SELECT,
146	'default' => 3,
147	'tablet_default' => 2,
148	'mobile_default' => 1,
149	'options' => [
150	1 => '1',
151	2 => '2',
152	3 => '3',
153	4 => '4',
154	5 => '5',
155	6 => '6',
156	],
157	]
158	);
159
160	$this->add_responsive_control(
161	'items_gap',
162	[
163	'label' => esc_html__('Item Gap', 'ultimate-store-kit'),
164	'type' => Controls_Manager::SLIDER,
165	'default' => [
166	'size' => 30,
167	],
168	'range' => [
169	'px' => [
170	'min' => 0,
171	'max' => 100,
172	],
173	],
174	'tablet_default' => [
175	'size' => 20,
176	],
177	'mobile_default' => [
178	'size' => 20,
179	],
180	]
181	);
182
183	$this->add_group_control(
184	Group_Control_Image_Size::get_type(),
185	[
186	'name' => 'thumbnail',
187	'default' => 'medium',
188	'separator' => 'before',
189	'exclude' => ['custom']
190	]
191	);
192
193	$this->end_controls_section();
194
195	$this->register_global_controls_carousel_navigation();
196	$this->register_global_controls_carousel_settings();
197
198	//Style
199	$this->start_controls_section(
200	'section_style_items',
201	[
202	'label' => __( 'Items', 'ultimate-store-kit' ),
203	'tab' => Controls_Manager::TAB_STYLE,
204	]
205	);
206
207	$this->start_controls_tabs( 'tabs_item_style' );
208
209	$this->start_controls_tab(
210	'tab_item_normal',
211	[
212	'label' => esc_html__( 'Normal', 'ultimate-store-kit' ),
213	]
214	);
215
216	$this->add_group_control(
217	Group_Control_Background::get_type(),
218	[
219	'name' => 'item_background',
220	'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
221	]
222	);
223
224	$this->add_group_control(
225	Group_Control_Border::get_type(),
226	[
227	'name' => 'item_border',
228	'label' => esc_html__( 'Border', 'ultimate-store-kit' ),
229	'fields_options' => [
230	'border' => [
231	'default' => 'solid',
232	],
233	'width' => [
234	'default' => [
235	'top' => '1',
236	'right' => '1',
237	'bottom' => '1',
238	'left' => '1',
239	'isLinked' => false,
240	],
241	],
242	'color' => [
243	'default' => '#dbdbdb',
244	],
245	],
246	'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
247	'separator' => 'before',
248	]
249	);
250
251	$this->add_responsive_control(
252	'item_border_radius',
253	[
254	'label' => esc_html__( 'Border Radius', 'ultimate-store-kit' ),
255	'type' => Controls_Manager::DIMENSIONS,
256	'size_units' => [ 'px', 'em', '%' ],
257	'selectors' => [
258	'{{WRAPPER}} .usk-brand-carousel-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
259	],
260	]
261	);
262
263	$this->add_responsive_control(
264	'item_padding',
265	[
266	'label' => esc_html__( 'Padding', 'ultimate-store-kit' ),
267	'type' => Controls_Manager::DIMENSIONS,
268	'size_units' => [ 'px', 'em', '%' ],
269	'selectors' => [
270	'{{WRAPPER}} .usk-brand-carousel-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
271	],
272	]
273	);
274
275	$this->add_group_control(
276	Group_Control_Box_Shadow::get_type(),
277	[
278	'name' => 'item_box_shadow',
279	'selector' => '{{WRAPPER}} .usk-brand-carousel-item',
280	]
281	);
282
283	$this->add_control(
284	'carousel_shadow_mode',
285	[
286	'label' => esc_html__( 'Shadow Mode', 'ultimate-store-kit' ),
287	'type' => Controls_Manager::SWITCHER,
288	'prefix_class' => 'usk-shadow-mode-',
289	'render_type' => 'template',
290	'separator' => 'before'
291	]
292	);
293
294	$this->add_control(
295	'carousel_shadow_color',
296	[
297	'label' => esc_html__( 'Shadow Color', 'ultimate-store-kit' ),
298	'type' => Controls_Manager::COLOR,
299	'condition' => [
300	'carousel_shadow_mode' => 'yes',
301	],
302	'selectors' => [
303	'{{WRAPPER}} .elementor-widget-container:before' => is_rtl() ? 'background: linear-gradient(to left, {{VALUE}} 5%,rgba(255,255,255,0) 100%);' : 'background: linear-gradient(to right, {{VALUE}} 5%,rgba(255,255,255,0) 100%);',
304	'{{WRAPPER}} .elementor-widget-container:after' => is_rtl() ? 'background: linear-gradient(to left, rgba(255,255,255,0) 0%, {{VALUE}} 95%);' : 'background: linear-gradient(to right, rgba(255,255,255,0) 0%, {{VALUE}} 95%);',
305	],
306	]
307	);
308
309	$this->end_controls_tab();
310
311	$this->start_controls_tab(
312	'tab_item_hover',
313	[
314	'label' => esc_html__( 'Hover', 'ultimate-store-kit' ),
315	]
316	);
317
318	$this->add_group_control(
319	Group_Control_Background::get_type(),
320	[
321	'name' => 'item_hover_background',
322	'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover',
323	]
324	);
325
326	$this->add_control(
327	'item_hover_border_color',
328	[
329	'label' => esc_html__( 'Border Color', 'ultimate-store-kit' ),
330	'type' => Controls_Manager::COLOR,
331	'default' => '#2B2D42',
332	'condition' => [
333	'item_border_border!' => '',
334	],
335	'selectors' => [
336	'{{WRAPPER}} .usk-brand-carousel-item:hover' => 'border-color: {{VALUE}};',
337	],
338	'separator' => 'before'
339	]
340	);
341
342	$this->add_group_control(
343	Group_Control_Box_Shadow::get_type(),
344	[
345	'name' => 'item_hover_box_shadow',
346	'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover',
347	]
348	);
349
350	$this->end_controls_tab();
351
352	$this->end_controls_tabs();
353
354	$this->end_controls_section();
355	$this->start_controls_section(
356	'section_style_image',
357	[
358	'label' => __('Image', 'ultimate-store-kit'),
359	'tab' => Controls_Manager::TAB_STYLE,
360	]
361	);
362
363	$this->start_controls_tabs('tabs_image_style');
364
365	$this->start_controls_tab(
366	'tab_image_normal',
367	[
368	'label' => esc_html__('Normal', 'ultimate-store-kit'),
369	]
370	);
371
372	$this->add_group_control(
373	Group_Control_Border::get_type(),
374	[
375	'name' => 'image_border',
376	'selector' => '{{WRAPPER}} .usk-brand-carousel-img',
377	]
378	);
379
380	$this->add_responsive_control(
381	'image_border_radius',
382	[
383	'label' => esc_html__('Border Radius', 'ultimate-store-kit'),
384	'type' => Controls_Manager::DIMENSIONS,
385	'size_units' => ['px', 'em', '%'],
386	'selectors' => [
387	'{{WRAPPER}} .usk-brand-carousel-img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
388	],
389	]
390	);
391
392	$this->add_responsive_control(
393	'image_padding',
394	[
395	'label' => esc_html__('Padding', 'ultimate-store-kit'),
396	'type' => Controls_Manager::DIMENSIONS,
397	'size_units' => ['px', 'em', '%'],
398	'selectors' => [
399	'{{WRAPPER}} .usk-brand-carousel-img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
400	],
401	]
402	);
403
404	$this->add_responsive_control(
405	'brand_image_height',
406	[
407	'label' => __('Height', 'ultimate-store-kit'),
408	'type' => Controls_Manager::SLIDER,
409	'range' => [
410	'px' => [
411	'min' => 10,
412	'max' => 500,
413	],
414	],
415	'selectors' => [
416	'{{WRAPPER}} .usk-brand-carousel-img' => 'height: {{SIZE}}{{UNIT}};',
417	],
418	]
419	);
420
421	$this->add_responsive_control(
422	'brand_image_width',
423	[
424	'label' => __('Width', 'ultimate-store-kit'),
425	'type' => Controls_Manager::SLIDER,
426	'range' => [
427	'px' => [
428	'min' => 10,
429	'max' => 500,
430	],
431	],
432	'selectors' => [
433	'{{WRAPPER}} .usk-brand-carousel-img' => 'width: {{SIZE}}{{UNIT}};',
434	],
435	]
436	);
437
438	$this->add_control(
439	'brand_image_opaciry',
440	[
441	'label' => __('Opaciry', 'ultimate-store-kit'),
442	'type' => Controls_Manager::SLIDER,
443	'default' => [
444	'size' => 0.3,
445	],
446	'range' => [
447	'px' => [
448	'min' => 0,
449	'max' => 1,
450	'step' => 0.1,
451	],
452	],
453	'selectors' => [
454	'{{WRAPPER}} .usk-brand-carousel-img' => 'opacity: {{SIZE}};',
455	],
456	]
457	);
458
459	$this->add_group_control(
460	Group_Control_Css_Filter::get_type(),
461	[
462	'name' => 'css_filters',
463	'selector' => '{{WRAPPER}} .usk-brand-carousel-img',
464	]
465	);
466
467	$this->end_controls_tab();
468
469	$this->start_controls_tab(
470	'tab_image_hover',
471	[
472	'label' => esc_html__('Hover', 'ultimate-store-kit'),
473	]
474	);
475
476	$this->add_control(
477	'image_hover_border_color',
478	[
479	'label' => esc_html__('Border Color', 'ultimate-store-kit'),
480	'type' => Controls_Manager::COLOR,
481	'condition' => [
482	'image_border_border!' => '',
483	],
484	'selectors' => [
485	'{{WRAPPER}} .usk-brand-carousel-item:hover .usk-brand-carousel-img' => 'border-color: {{VALUE}};',
486	],
487	]
488	);
489
490	$this->add_control(
491	'brand_image_opaciry_hover',
492	[
493	'label' => __('Opaciry', 'ultimate-store-kit'),
494	'type' => Controls_Manager::SLIDER,
495	'default' => [
496	'size' => 1,
497	],
498	'range' => [
499	'px' => [
500	'min' => 0,
501	'max' => 1,
502	'step' => 0.1,
503	],
504	],
505	'selectors' => [
506	'{{WRAPPER}} .usk-brand-carousel-item:hover .usk-brand-carousel-img' => 'opacity: {{SIZE}};',
507	],
508	]
509	);
510
511	$this->add_group_control(
512	Group_Control_Css_Filter::get_type(),
513	[
514	'name' => 'css_filters_hover',
515	'selector' => '{{WRAPPER}} .usk-brand-carousel-item:hover .usk-brand-carousel-img',
516	]
517	);
518
519	$this->end_controls_tab();
520	$this->end_controls_tabs();
521	$this->end_controls_section();
522
523	$this->register_global_controls_navigation_style();
524
525	}
526
527	public function render_loop_item() {
528	$settings = $this->get_settings_for_display();
529
530	if ( empty( $settings['brand_items'] ) ) {
531	return;
532	}
533
534	?>
535	<?php foreach ( $settings['brand_items'] as $item ) :
536
537	$thumb_url = Group_Control_Image_Size::get_attachment_image_src($item['image']['id'], 'thumbnail', $settings);
538	if ( !$thumb_url ) {
539	$thumb_url = $item['image']['url'];
540	}
541
542	$this->add_render_attribute(
543	[
544	'link' => [
545	'href' => isset($item['link']['url']) && !empty($item['link']['url']) ? esc_url($item['link']['url']) : 'javascript:void(0);',
546	'target' => $item['link']['is_external'] ? '_blank' : '_self'
547	]
548	], '', '', true
549	);
550
551	$this->add_render_attribute('item-wrap', 'class', 'usk-brand-carousel-item usk-flex usk-flex-middle usk-flex-center', true);
552
553	?>
554	<div class="swiper-slide">
555	<div <?php $this->print_render_attribute_string('item-wrap'); ?> title="<?php echo esc_html($item['brand_name']); ?>">
556	<img class="usk-brand-carousel-img" src="<?php echo esc_url($thumb_url); ?>" alt="<?php echo esc_html($item['brand_name']); ?>">
557	<?php
558	if ( !empty($item['link']['url']) ){
559	printf('<a %1$s title="%2$s"></a>', wp_kses_post($this->get_render_attribute_string( 'link' )), wp_kses_post($item['brand_name'])); }?>
560	</div>
561	</div>
562
563	<?php endforeach; ?>
564	<!-- </div> -->
565	<?php
566	}
567
568	public function render() {
569	$this->register_global_template_carousel_header();
570	$this->render_loop_item();
571	$this->usk_register_global_template_carousel_footer();
572	}
573	}
574