shopbuilder / app / Elementor / Widgets / Controls / ProductImagesSettings.php

ProductImagesSettings.php in ShopBuilder – WooCommerce Builder For Elementor 1.0.0, at app/Elementor/Widgets/Controls/ProductImagesSettings.php

583 lines 16.3 KB

Raw Download Zip

1	<?php
2	/**
3	* Main ProductImagesSettings class.
4	*
5	* @package RadiusTheme\SB
6	*/
7
8	namespace RadiusTheme\SB\Elementor\Widgets\Controls;
9
10	use Elementor\Controls_Manager;
11
12	// Do not allow directly accessing this file.
13	if ( ! defined( 'ABSPATH' ) ) {
14	exit( 'This script cannot be accessed directly.' );
15	}
16
17
18	/**
19	* Product Image Settings class
20	*/
21	class ProductImagesSettings {
22	/**
23	* Widget Control Selectors
24	*
25	* @var array
26	*/
27	private static $selectors = [];
28	/**
29	* Widget Field
30	*
31	* @return array
32	*/
33	public static function widget_fields( $widget ) {
34	self::$selectors = $widget->selectors;
35	return self::general_section() +
36	self::image() +
37	self::flash_sale() +
38	self::zoom_icon();
39	}
40
41	/**
42	* Widget Field
43	*
44	* @return array
45	*/
46	public static function general_section() {
47	$fields = [
48	'image_general_section_start' => [
49	'mode' => 'section_start',
50	'label' => esc_html__( 'General', 'shopbuilder' ),
51	],
52	'sale_flash_badge' => [
53	'label' => esc_html__( 'Show Flash Sale?', 'shopbuilder' ),
54	'type' => 'switch',
55	'description' => esc_html__( 'Switch on to show Flash Sale.', 'shopbuilder' ),
56	'default' => 'yes',
57	'separator' => 'default',
58	],
59	'show_zoom' => [
60	'label' => esc_html__( 'Show Zoom Icon?', 'shopbuilder' ),
61	'type' => 'switch',
62	'description' => esc_html__( 'Switch on to show Zoom Icon.', 'shopbuilder' ),
63	'default' => 'yes',
64	],
65	'show_thumbnails' => [
66	'label' => esc_html__( 'Show Thumbnails?', 'shopbuilder' ),
67	'type' => 'switch',
68	'description' => esc_html__( 'Switch on to show Thumbnails.', 'shopbuilder' ),
69	'default' => 'yes',
70	],
71	'lightbox_icon' => [
72	'label' => esc_html__( 'Icon', 'shopbuilder' ),
73	'type' => 'icons',
74	'fa4compatibility' => 'icon',
75	'default' => [
76	'value' => 'fas fa-expand-alt',
77	'library' => 'fa-solid',
78	],
79	'condition' => [
80	'show_zoom' => 'yes',
81	],
82	],
83	'image_general_section_end' => [
84	'mode' => 'section_end',
85	],
86	];
87	return $fields;
88	}
89	/**
90	* Widget Field
91	*
92	* @return array
93	*/
94	public static function image() {
95	$fields = [
96	'image_section_start' => [
97	'mode' => 'section_start',
98	'label' => esc_html__( 'Product Image', 'shopbuilder' ),
99	'tab' => 'style',
100	],
101	'image_width' => [
102	'label' => esc_html__( 'Image Width', 'shopbuilder' ),
103	'type' => 'slider',
104	'size_units' => [ '%', 'px' ],
105	'range' => [
106	'%' => [
107	'min' => 0,
108	'max' => 100,
109	'step' => 1,
110	],
111	'px' => [
112	'min' => 0,
113	'max' => 2000,
114	'step' => 1,
115	],
116	],
117	'default' => [
118	'unit' => '%',
119	],
120	'separator' => 'default',
121	'selectors' => [
122	self::$selectors['image_width'] => 'width: {{SIZE}}{{UNIT}} !important;',
123	],
124	],
125	'image_border_radius' => [
126	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
127	'type' => 'slider',
128	'size_units' => [ 'px', '%' ],
129	'range' => [
130	'px' => [
131	'min' => 0,
132	'max' => 100,
133	'step' => 1,
134	],
135	'%' => [
136	'min' => 0,
137	'max' => 100,
138	'step' => 1,
139	],
140	],
141	'selectors' => [
142	self::$selectors['image_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}} !important;',
143	],
144	],
145	'gallery_thumbs_style' => [
146	'type' => 'html',
147	'raw' => sprintf(
148	'<h3 class="rtsb-elementor-group-heading">%s</h3>',
149	esc_html__( 'Gallery Thumbnails', 'shopbuilder' )
150	),
151	'content_classes' => 'elementor-panel-heading-title',
152	],
153
154	'gallery_thumbs_column_gap' => [
155	'mode' => 'responsive',
156	'label' => esc_html__( 'Thumbnail Gap', 'shopbuilder' ),
157	'type' => 'slider',
158	'range' => [
159	'px' => [
160	'min' => 0,
161	'max' => 20,
162	'step' => 1,
163	],
164	],
165	'default' => [
166	'unit' => 'px',
167	'size' => 5,
168	],
169	'selectors' => [
170	self::$selectors['gallery_thumbs_column_gap']['padding'] => 'padding: 0 {{SIZE}}{{UNIT}} calc( {{SIZE}}{{UNIT}} * 2 );',
171	self::$selectors['gallery_thumbs_column_gap']['margin-lf'] => 'margin-left: -{{SIZE}}{{UNIT}};margin-right: -{{SIZE}}{{UNIT}}; width:calc( 100% + ( {{SIZE}}{{UNIT}} * 2) )',
172	],
173	],
174	'gallery_thumbs_column' => [
175	'mode' => 'responsive',
176	'label' => esc_html__( 'Column', 'shopbuilder' ),
177	'type' => 'slider',
178	'range' => [
179	'px' => [
180	'min' => 2,
181	'max' => 20,
182	'step' => 1,
183	],
184	],
185	'default' => [
186	'unit' => 'px',
187	'size' => 4,
188	],
189	'separator' => 'default',
190	'selectors' => [
191	self::$selectors['gallery_thumbs_column'] => 'width: calc(100%/{{SIZE}} - ( {{gallery_thumbs_column_gap.size}}{{gallery_thumbs_column_gap.unit}} / {{SIZE}} ) * ({{SIZE}} - 1 ) );flex: 0 0 auto;max-width: initial;',
192	],
193	],
194	'gallery_image_gap_with_main' => [
195	'mode' => 'responsive',
196	'label' => esc_html__( 'Gap with main image', 'shopbuilder' ),
197	'type' => 'slider',
198	'range' => [
199	'px' => [
200	'min' => 0,
201	'max' => 200,
202	'step' => 1,
203	],
204	],
205	'default' => [
206	'unit' => 'px',
207	'size' => 10,
208	],
209	'selectors' => [
210	self::$selectors['gallery_image_gap_with_main']['margin-top'] => 'margin-top: {{SIZE}}{{UNIT}};',
211	self::$selectors['gallery_image_gap_with_main']['rtwpvg-thumb-mb'] => 'margin-bottom: {{SIZE}}{{UNIT}};',
212	self::$selectors['gallery_image_gap_with_main']['rtwpvg-thumb-ml'] => 'margin-left: {{SIZE}}{{UNIT}};',
213	self::$selectors['gallery_image_gap_with_main']['rtwpvg-thumb-mr'] => 'margin-right: {{SIZE}}{{UNIT}};',
214	],
215	],
216	'thumb_border' => [
217	'mode' => 'group',
218	'type' => 'border',
219	'selector' => self::$selectors['thumb_border'],
220	'size_units' => [ 'px' ],
221	],
222	'thumbs_border_radius' => [
223	'label' => esc_html__( 'Border Radius', 'shopbuilder' ),
224	'type' => 'slider',
225	'size_units' => [ 'px', '%' ],
226	'range' => [
227	'px' => [
228	'min' => 0,
229	'max' => 100,
230	'step' => 1,
231	],
232	'%' => [
233	'min' => 0,
234	'max' => 100,
235	'step' => 1,
236	],
237	],
238	'selectors' => [
239	self::$selectors['thumbs_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}}',
240	],
241	],
242	'image_section_end' => [
243	'mode' => 'section_end',
244	],
245	];
246	if ( function_exists( 'rtwpvg' ) ) {
247	unset( $fields['gallery_thumbs_column'] );
248	unset( $fields['gallery_thumbs_column_gap'] );
249	}
250	return $fields;
251	}
252	/**
253	* Widget Field
254	*
255	* @return array
256	*/
257	public static function flash_sale() {
258	$fields = [
259	'flash_sale_section_start' => [
260	'mode' => 'section_start',
261	'label' => esc_html__( 'Flash Sale', 'shopbuilder' ),
262	'tab' => 'style',
263	'condition' => [
264	'sale_flash_badge' => 'yes',
265	],
266	],
267	'flash_sale_typography' => [
268	'mode' => 'group',
269	'type' => 'typography',
270	'label' => esc_html__( 'Typography', 'shopbuilder' ),
271	'selector' => self::$selectors['flash_sale_typography'],
272	],
273	'product_flash_sale_color' => [
274	'label' => esc_html__( 'Color', 'shopbuilder' ),
275	'type' => 'color',
276	'selectors' => [
277	self::$selectors['product_flash_sale_color'] => 'color: {{VALUE}};',
278	],
279	],
280	'flash_sale_bg_color' => [
281	'label' => esc_html__( 'Background Color', 'shopbuilder' ),
282	'type' => 'color',
283	'selectors' => [
284	self::$selectors['flash_sale_bg_color'] => 'background-color: {{VALUE}};',
285	],
286	],
287	'flash_sale_badge_width' => [
288	'label' => esc_html__( 'Badge Width (px)', 'shopbuilder' ),
289	'type' => 'slider',
290	'size_units' => [ 'px' ],
291	'range' => [
292	'px' => [
293	'min' => 15,
294	'max' => 500,
295	'step' => 1,
296	],
297	],
298	'selectors' => [
299	self::$selectors['flash_sale_badge_width'] => 'width: {{SIZE}}{{UNIT}};min-width: initial;',
300	],
301	'separator' => 'before',
302	],
303	'flash_sale_badge_height' => [
304	'label' => esc_html__( 'Badge Height (px)', 'shopbuilder' ),
305	'type' => 'slider',
306	'size_units' => [ 'px' ],
307	'range' => [
308	'px' => [
309	'min' => 15,
310	'max' => 200,
311	'step' => 1,
312	],
313	],
314	'selectors' => [
315	self::$selectors['flash_sale_badge_height'] => 'height: {{SIZE}}{{UNIT}};min-height: initial;',
316	],
317	],
318	'flash_sale_badge_border_radius' => [
319	'label' => esc_html__( 'Badge Border Radius (px)', 'shopbuilder' ),
320	'type' => 'slider',
321	'size_units' => [ 'px' ],
322	'range' => [
323	'px' => [
324	'min' => 0,
325	'max' => 100,
326	'step' => 1,
327	],
328	],
329	'selectors' => [
330	self::$selectors['flash_sale_badge_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}};',
331	],
332	],
333	'flash_sale_position' => [
334	'label' => esc_html__( 'Position', 'shopbuilder' ),
335	'type' => 'choose',
336	'options' => [
337	'left' => [
338	'title' => esc_html__( 'Left', 'shopbuilder' ),
339	'icon' => 'eicon-h-align-left',
340	],
341	'right' => [
342	'title' => esc_html__( 'Right', 'shopbuilder' ),
343	'icon' => 'eicon-h-align-right',
344	],
345	],
346	'default' => 'left',
347	'separator' => 'before',
348
349	],
350	'flash_sale_position_horizontal' => [
351	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
352	'type' => 'slider',
353	'size_units' => [ 'px', '%' ],
354	'range' => [
355	'px' => [
356	'min' => -100,
357	'max' => 100,
358	'step' => 5,
359	],
360	'%' => [
361	'min' => 0,
362	'max' => 100,
363	],
364	],
365	'default' => [
366	'unit' => 'px',
367	'size' => 0,
368	],
369	'selectors' => [
370	self::$selectors['flash_sale_position_horizontal'] => '{{flash_sale_position.VALUE}}: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
371	],
372	],
373	'flash_sale_position_vertical' => [
374	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
375	'type' => 'slider',
376	'size_units' => [ 'px', '%' ],
377	'range' => [
378	'px' => [
379	'min' => -100,
380	'max' => 100,
381	'step' => 5,
382	],
383	'%' => [
384	'min' => 0,
385	'max' => 100,
386	],
387	],
388	'default' => [
389	'unit' => 'px',
390	'size' => 0,
391	],
392	'selectors' => [
393	self::$selectors['flash_sale_position_vertical'] => 'top: {{SIZE}}{{UNIT}};position: absolute;z-index: 2;',
394	],
395	],
396	'flash_sale_section_end' => [
397	'mode' => 'section_end',
398	],
399	];
400	return $fields;
401	}
402	/**
403	* Widget Field
404	*
405	* @return array
406	*/
407	public static function zoom_icon() {
408	$fields = [
409	'zoom_section_start' => [
410	'mode' => 'section_start',
411	'label' => esc_html__( 'Image Zoom', 'shopbuilder' ),
412	'tab' => 'style',
413	'condition' => [
414	'show_zoom' => 'yes',
415	],
416	],
417	'zoom_color' => [
418	'label' => esc_html__( 'Color', 'shopbuilder' ),
419	'type' => 'color',
420
421	'separator' => 'default',
422	'selectors' => [
423	self::$selectors['zoom_color'] => 'color: {{VALUE}};',
424	],
425	],
426	'zoom_bg_color' => [
427	'label' => esc_html__( 'Background Color', 'shopbuilder' ),
428	'type' => 'color',
429	'selectors' => [
430	self::$selectors['zoom_bg_color'] => 'background-color: {{VALUE}};',
431	],
432	],
433	'zoom_icon_size' => [
434	'label' => esc_html__( 'Icon Size (px)', 'shopbuilder' ),
435	'type' => 'slider',
436	'size_units' => [ 'px' ],
437	'range' => [
438	'px' => [
439	'min' => 0,
440	'max' => 50,
441	'step' => 1,
442	],
443	],
444	'selectors' => [
445	self::$selectors['zoom_icon_size'] => 'font-size: {{SIZE}}{{UNIT}};',
446	],
447	'separator' => 'before',
448	],
449	'zoom_badge_width' => [
450	'label' => esc_html__( 'Badge Width (px)', 'shopbuilder' ),
451	'type' => 'slider',
452	'size_units' => [ 'px' ],
453	'range' => [
454	'px' => [
455	'min' => 15,
456	'max' => 100,
457	'step' => 1,
458	],
459	],
460	'selectors' => [
461	self::$selectors['zoom_badge_width'] => 'width: {{SIZE}}{{UNIT}};min-width: initial;',
462	],
463	],
464	'zoom_badge_height' => [
465	'label' => esc_html__( 'Badge Height (px)', 'shopbuilder' ),
466	'type' => 'slider',
467	'size_units' => [ 'px' ],
468	'range' => [
469	'px' => [
470	'min' => 15,
471	'max' => 100,
472	'step' => 1,
473	],
474	],
475	'selectors' => [
476	self::$selectors['zoom_badge_height'] => 'height: {{SIZE}}{{UNIT}};min-height: initial;',
477	],
478	],
479	'zoom_badge_border_radius' => [
480	'label' => esc_html__( 'Badge Border Radius (px)', 'shopbuilder' ),
481	'type' => 'slider',
482	'size_units' => [ 'px', '%' ],
483	'range' => [
484	'px' => [
485	'min' => 0,
486	'max' => 100,
487	'step' => 1,
488	],
489	'%' => [
490	'min' => 0,
491	'max' => 100,
492	'step' => 1,
493	],
494	],
495	'selectors' => [
496	self::$selectors['zoom_badge_border_radius'] => 'border-radius: {{SIZE}}{{UNIT}};',
497	],
498	],
499	'zoom_padding' => [
500	'label' => esc_html__( 'Padding (px)', 'shopbuilder' ),
501	'type' => 'dimensions',
502	'size_units' => [ 'px' ],
503	'default' => [
504	'top' => '0',
505	'right' => '0',
506	'bottom' => '0',
507	'left' => '0',
508	'unit' => 'px',
509	'isLinked' => true,
510	],
511	'selectors' => [
512	self::$selectors['zoom_padding'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
513	],
514	],
515	'zoom_position' => [
516	'label' => esc_html__( 'Position', 'shopbuilder' ),
517	'type' => 'choose',
518	'options' => [
519	'left' => [
520	'title' => esc_html__( 'Left', 'shopbuilder' ),
521	'icon' => 'eicon-h-align-left',
522	],
523	'right' => [
524	'title' => esc_html__( 'Right', 'shopbuilder' ),
525	'icon' => 'eicon-h-align-right',
526	],
527	],
528	'default' => 'right',
529	'separator' => 'before',
530	],
531	'zoom_position_horizontal' => [
532	'label' => esc_html__( 'Horizontal', 'shopbuilder' ),
533	'type' => 'slider',
534	'size_units' => [ 'px', '%' ],
535	'range' => [
536	'px' => [
537	'min' => -200,
538	'max' => 200,
539	'step' => 5,
540	],
541	'%' => [
542	'min' => 0,
543	'max' => 100,
544	],
545	],
546
547	'selectors' => [
548	self::$selectors['zoom_position_horizontal']['zoom_position'] => '{{zoom_position.VALUE}}: {{SIZE}}{{UNIT}};',
549	self::$selectors['zoom_position_horizontal']['rtwpvg-tr-br'] => 'right: {{SIZE}}{{UNIT}};',
550	self::$selectors['zoom_position_horizontal']['rtwpvg-tl-bl'] => 'left: {{SIZE}}{{UNIT}};',
551	],
552	],
553	'zoom_position_vertical' => [
554	'label' => esc_html__( 'Vertical', 'shopbuilder' ),
555	'type' => 'slider',
556	'size_units' => [ 'px', '%' ],
557	'range' => [
558	'px' => [
559	'min' => -200,
560	'max' => 200,
561	'step' => 5,
562	],
563	'%' => [
564	'min' => 0,
565	'max' => 100,
566	],
567	],
568	'selectors' => [
569	self::$selectors['zoom_position_vertical']['zoom-icon-top'] => 'top: {{SIZE}}{{UNIT}};',
570	self::$selectors['zoom_position_vertical']['zoom-icon-bottom'] . ':is(.rtwpvg-trigger-position-bottom-right, .rtwpvg-trigger-position-bottom-left)' => 'bottom: {{SIZE}}{{UNIT}};',
571	],
572	],
573	'zoom_section_end' => [
574	'mode' => 'section_end',
575	],
576	];
577	if ( function_exists( 'rtwpvg' ) ) {
578	unset( $fields['zoom_position'] );
579	}
580	return $fields;
581	}
582	}
583