wpdirectorykit / elementor-elements / classes / wdk-listing-sliders-grid-images.php

wdk-listing-sliders-grid-images.php in WP Directory Kit 1.3.3, at elementor-elements/classes/wdk-listing-sliders-grid-images.php

922 lines 37.2 KB

Raw Download Zip

1	<?php
2
3	namespace Wdk\Elementor\Widgets;
4
5	use Wdk\Elementor\Widgets\WdkElementorBase;
6	use Elementor\Widget_Base;
7	use Elementor\Controls_Manager;
8	use Elementor\Utils;
9	use Elementor\Typography;
10	use Elementor\Editor;
11	use Elementor\Plugin;
12	use Elementor\Repeater;
13	use Elementor\Core\Schemes;
14	use Elementor\Icons_Manager;
15	use Elementor\Group_Control_Typography;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Box_Shadow;
18
19	if (!defined('ABSPATH'))
20	exit; // Exit if accessed directly
21
22	/**
23	* @since 1.1.0
24	*/
25	class WdkListingSlidersGridImages extends WdkElementorBase {
26
27	public function __construct($data = array(), $args = null) {
28
29	\Elementor\Controls_Manager::add_tab(
30	'tab_conf',
31	esc_html__('Settings', 'wdk-listing-sliders')
32	);
33
34	\Elementor\Controls_Manager::add_tab(
35	'tab_slider_main',
36	esc_html__('Slider Main', 'wdk-listing-sliders')
37	);
38
39	\Elementor\Controls_Manager::add_tab(
40	'tab_slider_nav',
41	esc_html__('Slider Nav', 'wdk-listing-sliders')
42	);
43
44	if ($this->is_edit_mode_load()) {
45	$this->enqueue_styles_scripts();
46	}
47	parent::__construct($data, $args);
48	}
49
50	/**
51	* Retrieve the list of categories the widget belongs to.
52	*
53	* Used to determine where to display the widget in the editor.
54	*
55	* Note that currently Elementor supports only one category.
56	* When multiple categories passed, Elementor uses the first one.
57	*
58	* @since 1.1.0
59	*
60	* @access public
61	*
62	* @return array Widget categories.
63	*/
64	public function get_categories() {
65	return [ 'wdk-elementor-listing-preview-sliders' ];
66	}
67
68	/**
69	* Retrieve the widget name.
70	*
71	* @since 1.1.0
72	*
73	* @access public
74	*
75	* @return string Widget name.
76	*/
77	public function get_name() {
78	return 'wdk-listing-sliders-grid-images';
79	}
80
81	/**
82	* Retrieve the widget title.
83	*
84	* @since 1.1.0
85	*
86	* @access public
87	*
88	* @return string Widget title.
89	*/
90	public function get_title() {
91	return esc_html__('Wdk Listing Slider Grid', 'wdk-listing-sliders');
92	}
93
94	/**
95	* Retrieve the widget icon.
96	*
97	* @since 1.1.0
98	*
99	* @access public
100	*
101	* @return string Widget icon.
102	*/
103	public function get_icon() {
104	return 'eicon-info-box';
105	}
106
107	/**
108	* Register the widget controls.
109	*
110	* Adds different input fields to allow the user to change and customize the widget settings.
111	*
112	* @since 1.1.0
113	*
114	* @access protected
115	*/
116	protected function register_controls() {
117	$this->generate_controls_conf();
118	$this->generate_controls_layout();
119	$this->generate_controls_styles();
120	$this->generate_controls_content();
121
122	$this->insert_pro_message('tab_conf');
123	parent::register_controls();
124	}
125
126	/**
127	* Render the widget output on the frontend.
128	*
129	* Written in PHP and used to generate the final HTML.
130	*
131	* @since 1.1.0
132	*
133	* @access protected
134	*/
135	protected function render() {
136	parent::render();
137	global $wdk_listing_id;
138	/* test data */
139	$this->data['id_element'] = $this->get_id();
140	$this->data['settings'] = $this->get_settings();
141
142	$this->data['images'] = array();
143	if(!Plugin::$instance->editor->is_edit_mode()) {
144	$this->data['images'] = wdk_listing_images_data (array('listing_images'=>wdk_field_value ('listing_images', $wdk_listing_id)), 'full');
145	$this->data['images'] = array_slice($this->data['images'], ($this->data['settings']['offset_images']-1), $this->data['settings']['limit_images']);
146	} else {
147	$this->data['images'] = array_fill(0, $this->data['settings']['limit_images'], wdk_placeholder_image_src());
148	}
149
150	$this->data['is_edit_mode']= false;
151	if(Plugin::$instance->editor->is_edit_mode()) {
152	$this->data['is_edit_mode']= true;
153	} else {
154	/* return false if no content */
155	}
156
157	echo $this->view('wdk-listing-sliders-grid-images', $this->data);
158	}
159
160
161	private function generate_controls_conf() {
162	$this->start_controls_section(
163	'tab_conf_main_section',
164	[
165	'label' => esc_html__('Main', 'wdk-listing-sliders'),
166	'tab' => 'tab_conf',
167	]
168	);
169
170
171	$this->add_control(
172	'gallery_main_enable',
173	[
174	'label' => __( 'Open Popup Main Image', 'wdk-listing-sliders' ),
175	'type' => \Elementor\Controls_Manager::SWITCHER,
176	'label_on' => __( 'On', 'wdk-listing-sliders' ),
177	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
178	'return_value' => 'true',
179	'default' => 'true',
180	]
181	);
182
183	$this->add_control(
184	'limit_images',
185	[
186	'label' => __( 'Limit Images', 'wdk-listing-sliders' ),
187	'type' => \Elementor\Controls_Manager::NUMBER,
188	'min' => 1,
189	'max' => 100,
190	'step' => 1,
191	'default' => 10,
192	]
193	);
194
195	$this->add_control(
196	'offset_images',
197	[
198	'label' => __( 'Offset Images', 'wdk-listing-sliders' ),
199	'type' => \Elementor\Controls_Manager::NUMBER,
200	'min' => 1,
201	'max' => 100,
202	'step' => 1,
203	'default' => 1,
204	]
205	);
206
207
208	$this->add_responsive_control(
209	'direction',
210	[
211	'label' => __( 'Direction', 'wdk-listing-sliders' ),
212	'type' => Controls_Manager::SELECT,
213	'options' => [
214	'' => esc_html__('Default', 'wdk-listing-sliders'),
215	'row' => esc_html__('Row', 'wdk-listing-sliders'),
216	'row-reverse' => esc_html__('Row Reverse', 'wdk-listing-sliders'),
217	],
218	'selectors_dictionary' => [
219	'row' => 'display: flex; flex-direction: row;',
220	'row-reverse' => 'display: flex; flex-direction: row-reverse;',
221	],
222	'selectors' => [
223	'{{WRAPPER}} .wdk-listing-sliders-grid-images' => '{{UNIT}}',
224	],
225	'default' => '100%',
226	'separator' => 'before',
227	]
228	);
229
230
231	$this->add_control(
232	'wdk_listing_video_disabled',
233	[
234	'label' => __( 'Disable Video', 'wpdirectorykit' ),
235	'type' => \Elementor\Controls_Manager::SWITCHER,
236	'label_on' => __( 'True', 'wpdirectorykit' ),
237	'label_off' => __( 'False', 'wpdirectorykit' ),
238	'return_value' => '1',
239	'default' => '',
240	]
241	);
242
243	$this->end_controls_section();
244
245	}
246
247	private function generate_controls_layout() {
248	if(false) {
249
250	$this->start_controls_section(
251	'tab_slider_nav',
252	[
253	'label' => esc_html__('Basic', 'wdk-listing-sliders'),
254	'tab' => 'tab_slider_main',
255	]
256	);
257
258	$this->end_controls_section();
259	}
260
261	$this->start_controls_section(
262	'layout_carousel_sec',
263	[
264	'label' => esc_html__('Carousel Options', 'wdk-listing-sliders'),
265	'tab' => 'tab_slider_main',
266	]
267	);
268
269	$this->add_control(
270	'layout_carousel_is_infinite',
271	[
272	'label' => __( 'Infinite', 'wdk-listing-sliders' ),
273	'type' => \Elementor\Controls_Manager::SWITCHER,
274	'label_on' => __( 'On', 'wdk-listing-sliders' ),
275	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
276	'return_value' => 'true',
277	'default' => 'true',
278	]
279	);
280
281	$this->add_control(
282	'layout_carousel_is_autoplay',
283	[
284	'label' => __( 'Autoplay', 'wdk-listing-sliders' ),
285	'type' => \Elementor\Controls_Manager::SWITCHER,
286	'label_on' => __( 'On', 'wdk-listing-sliders' ),
287	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
288	'return_value' => 'true',
289	'default' => '',
290	]
291	);
292
293	$this->add_control(
294	'layout_carousel_speed',
295	[
296	'label' => __( 'Speed', 'wdk-listing-sliders' ),
297	'type' => \Elementor\Controls_Manager::NUMBER,
298	'min' => 0,
299	'max' => 100000,
300	'step' => 100,
301	'default' => 500,
302	]
303	);
304
305	$this->add_control(
306	'layout_carousel_animation_style',
307	[
308	'label' => __( 'Animation Style', 'wdk-listing-sliders' ),
309	'type' => \Elementor\Controls_Manager::SELECT,
310	'default' => 'slide',
311	'options' => [
312	'slide' => __( 'Slide', 'wdk-listing-sliders' ),
313	'fade' => __( 'Fade', 'wdk-listing-sliders' ),
314	'fade_in' => __( 'Fade in', 'wdk-listing-sliders' ),
315	],
316	]
317	);
318
319	$this->add_control(
320	'layout_carousel_cssease',
321	[
322	'label' => __( 'cssEase ', 'wdk-listing-sliders' ),
323	'type' => \Elementor\Controls_Manager::SELECT,
324	'default' => 'linear',
325	'options' => [
326	'linear' => __( 'linear', 'wdk-listing-sliders' ),
327	'ease' => __( 'ease', 'wdk-listing-sliders' ),
328	'ease-in' => __( 'ease-in', 'wdk-listing-sliders' ),
329	'ease-out' => __( 'ease-out', 'wdk-listing-sliders' ),
330	'ease-in-out' => __( 'ease-in-out', 'wdk-listing-sliders' ),
331	'step-start' => __( 'step-start', 'wdk-listing-sliders' ),
332	'step-end' => __( 'step-end', 'wdk-listing-sliders' ),
333	],
334	]
335	);
336
337	$this->end_controls_section();
338	}
339
340	private function generate_controls_styles() {
341
342	$items = [
343	[
344	'key'=>'card',
345	'label'=> esc_html__('Slider', 'wdk-listing-sliders'),
346	'selector'=>'.wdk_listing_slider_box .wdk-listing-image-card',
347	'selector_hover'=>'.wdk_listing_slider_box .wdk-listing-image-card%1$s',
348	'options'=>['background','border','border_radius','padding','shadow','transition'],
349	],
350	];
351
352	foreach ($items as $item) {
353	$this->start_controls_section(
354	$item['key'].'_section',
355	[
356	'label' => $item['label'],
357	'tab' => 'tab_slider_main',
358	]
359	);
360
361	$selectors = array(
362	'normal' => '{{WRAPPER}} '.$item['selector'],
363	'hover'=>'{{WRAPPER}} '.$item['selector_hover'],
364	);
365	$this->generate_renders_tabs($selectors, $item['key'].'_dynamic', $item['options']);
366
367	$this->end_controls_section();
368	}
369
370	$this->start_controls_section(
371	'styles_thmbn_type',
372	[
373	'label' => esc_html__('Image Slide', 'wdk-listing-sliders'),
374	'tab' => 'tab_slider_main',
375	]
376	);
377
378	$this->add_control(
379	'layout_image_design',
380	[
381	'label' => __( 'Size style thumbnail', 'wdk-listing-sliders' ),
382	'type' => \Elementor\Controls_Manager::SELECT,
383	'options' => [
384	'' => __( 'Default', 'wdk-listing-sliders' ),
385	'none' => __( 'None', 'wdk-listing-sliders' ),
386	'contain' => __( 'Contain', 'wdk-listing-sliders' ),
387	'cover' => __( 'Cover', 'wdk-listing-sliders' ),
388	'fill' => __( 'Fill', 'wdk-listing-sliders' ),
389	],
390	'selectors' => [
391	'{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image' => 'object-fit: {{VALUE}}',
392	],
393	]
394	);
395
396	$this->add_responsive_control(
397	'layout_image_mask_header',
398	[
399	'label' => esc_html__('Mask', 'wdk-listing-sliders'),
400	'type' => Controls_Manager::HEADING,
401	'separator' => 'before',
402	]
403	);
404
405	$selectors = array(
406	'normal' => '{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image-card:after',
407	);
408	$this->generate_renders_tabs($selectors, 'layout_image_mask_styles', ['background_group']);
409
410	$selectors = array(
411	'normal' => '{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image',
412	);
413
414	$this->generate_renders_tabs($selectors, 'layout_image_dynamic', ['background','border','border_radius','padding','shadow','css_filters','transition']);
415
416	$this->add_responsive_control (
417	'styles_thmbn_nav_des_height',
418	[
419	'label' => esc_html__('Height', 'wdk-listing-sliders'),
420	'type' => Controls_Manager::SLIDER,
421	'range' => [
422	'px' => [
423	'min' => 100,
424	'max' => 1500,
425	],
426	'vw' => [
427	'min' => 0,
428	'max' => 100,
429	],
430	'vh' => [
431	'min' => 0,
432	'max' => 100,
433	],
434	],
435	'size_units' => [ 'px', 'vw', 'vh' ],
436	'selectors' => [
437	'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk_listing_slider_box, {{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs' => 'height: {{SIZE}}{{UNIT}}',
438	],
439	'separator' => 'after',
440	]
441	);
442
443	$this->end_controls_section();
444
445	$this->start_controls_section(
446	'styles_thmbn_nav_section',
447	[
448	'label' => esc_html__('Thumbnail Navs', 'wdk-listing-sliders'),
449	'tab' => '1',
450	]
451	);
452
453	$this->add_responsive_control (
454	'styles_thmbn_des_height',
455	[
456	'label' => esc_html__('Gap', 'wdk-listing-sliders'),
457	'type' => Controls_Manager::SLIDER,
458	'range' => [
459	'px' => [
460	'min' => 0,
461	'max' => 200,
462	],
463	],
464	'size_units' => [ 'px'],
465	'selectors' => [
466	'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs .banner-thumbs .banner-grid' => 'padding: {{SIZE}}{{UNIT}}',
467	'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs .banner-thumbs' => ' height: calc(100% + {{SIZE}}{{UNIT}} * 2); margin: -{{SIZE}}{{UNIT}};',
468	],
469	]
470	);
471
472	$this->add_control(
473	'styles_thmbn_des_height_hr',
474	[
475	'type' => \Elementor\Controls_Manager::DIVIDER,
476	]
477	);
478
479	$selectors = array(
480	'normal' => '{{WRAPPER}} .banner-thumbs .banner-thumb',
481	'hover' => '{{WRAPPER}} .banner-thumbs .banner-thumb%1$s',
482	);
483	$this->generate_renders_tabs($selectors, 'layout_image_nav_dynamic', ['background','border','border_radius','shadow','css_filters', 'transition']);
484
485	$this->add_responsive_control(
486	'layout_image_nav_mask_header',
487	[
488	'label' => esc_html__('Mask', 'wdk-listing-sliders'),
489	'type' => Controls_Manager::HEADING,
490	'separator' => 'before',
491	]
492	);
493
494	$selectors = array(
495	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs .banner-thumbs .banner-thumb .banner-thumb-link',
496	'hover' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs .banner-thumbs .banner-thumb .banner-thumb-link%1$s',
497	'active' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs .banner-thumbs .banner-thumb.wdk-active-nav .banner-thumb-link'
498	);
499	$this->generate_renders_tabs($selectors, 'layout_image_nav_mask_styles', ['background_group','transition']);
500
501	$this->add_responsive_control(
502	'styles_thmbn_nav_box',
503	[
504	'label' => esc_html__('Nav container', 'wdk-listing-sliders'),
505	'type' => Controls_Manager::HEADING,
506	'separator' => 'before',
507	]
508	);
509	$selectors = array(
510	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-cls-banner-thumbs',
511	);
512	$this->generate_renders_tabs($selectors, 'styles_thmbn_nav_box_styles', ['margin']);
513
514	$this->end_controls_section();
515
516
517	$this->start_controls_section(
518	'styles_carousel_arrows_section',
519	[
520	'label' => esc_html__('Carousel Arrows', 'wdk-listing-sliders'),
521	'tab' => 'tab_slider_main',
522	]
523	);
524
525	$this->add_responsive_control(
526	'styles_carousel_arrows_hide',
527	[
528	'label' => esc_html__( 'Hide Element', 'wdk-listing-sliders' ),
529	'type' => Controls_Manager::SWITCHER,
530	'none' => esc_html__( 'Hide', 'wdk-listing-sliders' ),
531	'block' => esc_html__( 'Show', 'wdk-listing-sliders' ),
532	'return_value' => 'none',
533	'default' => '',
534	'selectors' => [
535	'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows' => 'display: {{VALUE}};',
536	],
537	]
538	);
539
540	$this->add_responsive_control(
541	'styles_carousel_arrows_position',
542	[
543	'label' => __( 'Position', 'wdk-listing-sliders' ),
544	'type' => \Elementor\Controls_Manager::SELECT,
545	'default' => 'wdk-listing-sliders-grid-images_arrows_middle',
546	'options' => [
547	'' => __( 'Default', 'wdk-listing-sliders' ),
548	'wdk-listing-sliders-grid-images_arrows_bottom' => __( 'Bottom', 'wdk-listing-sliders' ),
549	'wdk-listing-sliders-grid-images_arrows_middle' => __( 'Center', 'wdk-listing-sliders' ),
550	'wdk-listing-sliders-grid-images_arrows_top' => __( 'Top', 'wdk-listing-sliders' ),
551	],
552	]
553	);
554
555	$this->add_responsive_control(
556	'styles_carousel_arrows_align',
557	[
558	'label' => __( 'Align', 'wdk-listing-sliders' ),
559	'type' => Controls_Manager::CHOOSE,
560	'options' => [
561	'left' => [
562	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
563	'icon' => 'eicon-text-align-left',
564	],
565	'center' => [
566	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
567	'icon' => 'eicon-text-align-center',
568	],
569	'right' => [
570	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
571	'icon' => 'eicon-text-align-right',
572	],
573	'justify' => [
574	'title' => esc_html__( 'Justified', 'wdk-listing-sliders' ),
575	'icon' => 'eicon-text-align-justify',
576	],
577	],
578	'render_type' => 'ui',
579	'selectors_dictionary' => [
580	'left' => 'justify-content: flex-start;',
581	'center' => 'justify-content: center;',
582	'right' => 'justify-content: flex-end;',
583	'justify' => 'justify-content: space-between;',
584	],
585	'selectors' => [
586	'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows' => '{{VALUE}};',
587	],
588	'conditions' => [
589	'terms' => [
590	[
591	'name' => 'styles_carousel_arrows_position',
592	'operator' => '!=',
593	'value' => 'wdk-listing-sliders-grid-images_arrows_middle',
594	]
595	],
596	],
597	]
598	);
599
600	$this->add_responsive_control(
601	'styles_carousel_arrows_icon_left_h',
602	[
603	'label' => esc_html__('Arrow left', 'wdk-listing-sliders'),
604	'type' => Controls_Manager::HEADING,
605	'separator' => 'before',
606	]
607	);
608	$selectors = array(
609	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows .wdk-listing-sliders-grid-images_arrow.wdk-slider-prev',
610	);
611	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_s_m_left', ['margin']);
612
613	$this->add_responsive_control(
614	'styles_carousel_arrows_icon_left',
615	[
616	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
617	'type' => Controls_Manager::ICONS,
618	'label_block' => true,
619	'default' => [
620	'value' => 'fa fa-angle-left',
621	'library' => 'solid',
622	],
623	]
624	);
625
626	$this->add_responsive_control(
627	'styles_carousel_arrows_icon_right_h',
628	[
629	'label' => esc_html__('Arrow right', 'wdk-listing-sliders'),
630	'type' => Controls_Manager::HEADING,
631	'separator' => 'before',
632	]
633	);
634	$selectors = array(
635	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows .wdk-listing-sliders-grid-images_arrow.wdk-slider-next',
636	);
637	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_s_m_next', ['margin']);
638
639	$this->add_responsive_control(
640	'styles_carousel_arrows_icon_right',
641	[
642	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
643	'type' => Controls_Manager::ICONS,
644	'label_block' => true,
645	'default' => [
646	'value' => 'fa fa-angle-right',
647	'library' => 'solid',
648	],
649	]
650	);
651
652	$selectors = array(
653	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows .wdk-listing-sliders-grid-images_arrow',
654	'hover'=>'{{WRAPPER}} .wdk-listing-sliders-grid-images .wdk-listing-sliders-grid-images_arrows .wdk-listing-sliders-grid-images_arrow%1$s'
655	);
656	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_dynamic', ['font-size','color','background','border','border_radius','padding','shadow','transition']);
657
658	$this->end_controls_section();
659
660	$this->start_controls_section(
661	'styles_carousel_dots_section',
662	[
663	'label' => esc_html__('Section Dots', 'wdk-listing-sliders'),
664	'tab' => 'tab_slider_main',
665	]
666	);
667
668	$this->add_responsive_control(
669	'styles_carousel_dots_hide',
670	[
671	'label' => esc_html__( 'Hide Element', 'wdk-listing-sliders' ),
672	'type' => Controls_Manager::SWITCHER,
673	'none' => esc_html__( 'Hide', 'wdk-listing-sliders' ),
674	'block' => esc_html__( 'Show', 'wdk-listing-sliders' ),
675	'return_value' => 'none',
676	'default' => 'none',
677	'selectors' => [
678	'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots' => 'display: {{VALUE}} !important;',
679	],
680	]
681	);
682
683	$this->add_responsive_control(
684	'styles_carousel_dots_position_style',
685	[
686	'label' => __( 'Position Style', 'wdk-listing-sliders' ),
687	'type' => \Elementor\Controls_Manager::SELECT,
688	'default' => 'wdk-listing-sliders-grid-images_dots_in',
689	'options' => [
690	'' => __( 'Default', 'wdk-listing-sliders' ),
691	'wdk-listing-sliders-grid-images_dots_out' => __( 'Out', 'wdk-listing-sliders' ),
692	'wdk-listing-sliders-grid-images_dots_in' => __( 'In', 'wdk-listing-sliders' ),
693	],
694	]
695	);
696
697	$this->add_responsive_control(
698	'styles_carousel_dots_direction',
699	[
700	'label' => __( 'Direction Dots', 'wdk-listing-sliders' ),
701	'type' => Controls_Manager::SELECT,
702	'options' => [
703	'' => esc_html__('Default', 'wdk-listing-sliders'),
704	'column' => esc_html__('Column', 'wdk-listing-sliders'),
705	'column-reverse' => esc_html__('Column Reverse', 'wdk-listing-sliders'),
706	'row' => esc_html__('Row', 'wdk-listing-sliders'),
707	'row-reverse' => esc_html__('Row Reverse', 'wdk-listing-sliders'),
708	],
709	'selectors_dictionary' => [
710	'column' => 'display: flex !important; flex-direction: column;',
711	'column-reverse' => 'display: flex !important; flex-direction: column-reverse;',
712	'row' => 'display: flex !important; flex-direction: row;',
713	'row-reverse' => 'display: flex !important; flex-direction: row-reverse;',
714	],
715	'selectors' => [
716	'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots' => '{{UNIT}}',
717	],
718	'default' => '100%',
719	'separator' => 'before',
720	]
721	);
722
723	$this->add_responsive_control(
724	'styles_carousel_dots_align',
725	[
726	'label' => __( 'Position', 'wdk-listing-sliders' ),
727	'type' => Controls_Manager::CHOOSE,
728	'options' => [
729	'left' => [
730	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
731	'icon' => 'eicon-text-align-left',
732	],
733	'center' => [
734	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
735	'icon' => 'eicon-text-align-center',
736	],
737	'right' => [
738	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
739	'icon' => 'eicon-text-align-right',
740	],
741	'justify' => [
742	'title' => esc_html__( 'Justified', 'wdk-listing-sliders' ),
743	'icon' => 'eicon-text-align-justify',
744	],
745	],
746	'render_type' => 'ui',
747	'selectors_dictionary' => [
748	'left' => 'justify-content: flex-start;',
749	'center' => 'justify-content: center;',
750	'right' => 'justify-content: flex-end;',
751	'justify' => 'justify-content: space-between;',
752	],
753	'selectors' => [
754	'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots' => '{{VALUE}};',
755	],
756	'conditions' => [
757	'terms' => [
758	[
759	'name' => 'styles_carousel_dots_position_style',
760	'operator' => '!=',
761	'value' => 'wdk-listing-sliders-grid-images_dots_in',
762	]
763	],
764	],
765	]
766	);
767
768	$this->add_responsive_control(
769	'styles_carousel_dots_in_align',
770	[
771	'label' => __( 'Position', 'wdk-listing-sliders' ),
772	'type' => Controls_Manager::CHOOSE,
773	'options' => [
774	'left' => [
775	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
776	'icon' => 'eicon-text-align-left',
777	],
778	'center' => [
779	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
780	'icon' => 'eicon-text-align-center',
781	],
782	'right' => [
783	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
784	'icon' => 'eicon-text-align-right',
785	],
786	],
787	'default' => 'center',
788	'render_type' => 'ui',
789	'selectors_dictionary' => [
790	'left' => 'left:0; right: initial',
791	'center' => 'left:50%; right: initial; transform:translateX(-50%)',
792	'right' => 'right:0; left: initial',
793	],
794	'selectors' => [
795	'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots' => '{{VALUE}};',
796	],
797	'conditions' => [
798	'terms' => [
799	[
800	'name' => 'styles_carousel_dots_position_style',
801	'operator' => '=',
802	'value' => 'wdk-listing-sliders-grid-images_dots_in',
803	]
804	],
805	],
806	]
807	);
808
809	$this->add_responsive_control(
810	'styles_carousel_dots_in_align_y',
811	[
812	'label' => __( 'Position Vertical', 'wdk-listing-sliders' ),
813	'type' => Controls_Manager::CHOOSE,
814	'options' => [
815	'top' => [
816	'title' => esc_html__( 'Top', 'wdk-listing-sliders' ),
817	'icon' => 'eicon-justify-start-v',
818	],
819	'center' => [
820	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
821	'icon' => 'eicon-text-align-center',
822	],
823	'bottom' => [
824	'title' => esc_html__( 'Bottom', 'wdk-listing-sliders' ),
825	'icon' => ' eicon-justify-end-v',
826	],
827	],
828	'render_type' => 'ui',
829	'selectors_dictionary' => [
830	'top' => 'top:0; bottom: initial',
831	'center' => 'top:50%; bottom: initial; transform:translateY(-50%)',
832	'bottom' => 'bottom:0; top: initial',
833	],
834	'selectors' => [
835	'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots' => '{{VALUE}};',
836	],
837	'conditions' => [
838	'terms' => [
839	[
840	'name' => 'styles_carousel_dots_position_style',
841	'operator' => '=',
842	'value' => 'wdk-listing-sliders-grid-images_dots_in',
843	]
844	],
845	],
846	]
847	);
848
849	$this->add_responsive_control(
850	'styles_carousel_dots_icon',
851	[
852	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
853	'type' => Controls_Manager::ICONS,
854	'label_block' => true,
855	'default' => [
856	'value' => 'fas fa-circle',
857	'library' => 'solid',
858	],
859	]
860	);
861
862	$selectors = array(
863	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots li .wdk_dot',
864	'hover'=>'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots li .wdk_dot%1$s',
865	'active'=>'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots li.slick-active .wdk_dot'
866	);
867
868	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_dynamic', ['background','border','border_radius','padding','margin','shadow','font-size', 'color','transition']);
869
870	$this->add_responsive_control(
871	'styles_carousel_dots_hover_header',
872	[
873	'label' => esc_html__('Hover Animation', 'wdk-listing-sliders'),
874	'type' => Controls_Manager::HEADING,
875	'separator' => 'before',
876	]
877	);
878
879	$selectors = array(
880	'hover'=>'{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots li .wdk_dot%1$s i, {{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots li .wdk_dot%1$s svg',
881	);
882
883	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_hover_dynamic', ['hover_animation']);
884
885	$this->add_responsive_control(
886	'styles_carousel_dots_box_header',
887	[
888	'label' => esc_html__('Dots container', 'wdk-listing-sliders'),
889	'type' => Controls_Manager::HEADING,
890	'separator' => 'before',
891	]
892	);
893
894	$selectors = array(
895	'normal' => '{{WRAPPER}} .wdk-listing-sliders-grid-images .slick-dots',
896	);
897
898	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_box_dynamic', ['background','padding','margin','shadow', 'transition']);
899
900	$this->end_controls_section();
901	}
902
903	private function generate_controls_content() {
904
905	}
906
907	public function enqueue_styles_scripts() {
908	wp_enqueue_style('wdk-listing-sliders-grid-images');
909	wp_enqueue_style('slick');
910	wp_enqueue_style('slick-theme');
911	wp_enqueue_style('wdk-hover');
912
913	wp_enqueue_script('slick');
914
915	wp_enqueue_style('wdk-notify');
916	wp_enqueue_script('wdk-notify');
917	}
918	}
919
920
921
922