wpdirectorykit / elementor-elements / classes / wdk-listing-sliders-carousel.php

wdk-listing-sliders-carousel.php in WP Directory Kit 1.3.1, at elementor-elements/classes/wdk-listing-sliders-carousel.php

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