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

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

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