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

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

541 lines 17.5 KB

Raw Download Zip

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