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

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

881 lines 34.4 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 WdkCoolListingCarousel 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_nav',
36	esc_html__('Slider Nav', 'wdk-listing-sliders')
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-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 Carousel', 'wdk-listing-sliders');
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-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-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'),
161	'tab' => 'tab_conf',
162	]
163	);
164
165	$this->add_control(
166	'limit_images',
167	[
168	'label' => __( 'Limit Images', 'wdk-listing-sliders' ),
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' ),
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_responsive_control(
191	'direction',
192	[
193	'label' => __( 'Direction', 'wdk-listing-sliders' ),
194	'type' => Controls_Manager::SELECT,
195	'options' => [
196	'' => esc_html__('Default', 'wdk-listing-sliders'),
197	'row' => esc_html__('Row', 'wdk-listing-sliders'),
198	'row-reverse' => esc_html__('Row Reverse', 'wdk-listing-sliders'),
199	],
200	'selectors_dictionary' => [
201	'row' => 'display: flex; flex-direction: row;',
202	'row-reverse' => 'display: flex; flex-direction: row-reverse;',
203	],
204	'selectors' => [
205	'{{WRAPPER}} .wdk-listing-carousel' => '{{UNIT}}',
206	],
207	'default' => '100%',
208	'separator' => 'before',
209	]
210	);
211
212	$this->add_control(
213	'wdk_listing_video_disabled',
214	[
215	'label' => __( 'Disable Video', 'wpdirectorykit' ),
216	'type' => \Elementor\Controls_Manager::SWITCHER,
217	'label_on' => __( 'True', 'wpdirectorykit' ),
218	'label_off' => __( 'False', 'wpdirectorykit' ),
219	'return_value' => '1',
220	'default' => '',
221	]
222	);
223
224	$this->end_controls_section();
225
226	}
227
228	private function generate_controls_layout() {
229	if(false) {
230
231	$this->start_controls_section(
232	'tab_slider_nav',
233	[
234	'label' => esc_html__('Basic', 'wdk-listing-sliders'),
235	'tab' => '1',
236	]
237	);
238
239	$this->end_controls_section();
240	}
241
242	$this->start_controls_section(
243	'layout_carousel_sec',
244	[
245	'label' => esc_html__('Carousel Options', 'wdk-listing-sliders'),
246	'tab' => '1',
247	]
248	);
249
250
251	$this->add_responsive_control(
252	'styles_thmbn_columns',
253	[
254	'label' => __( 'Count grid', 'wdk-listing-sliders' ),
255	'type' => \Elementor\Controls_Manager::NUMBER,
256	'min' => 1,
257	'max' => 10,
258	'step' => 1,
259	'default' => 4,
260	]
261	);
262
263	$this->add_control(
264	'layout_carousel_is_infinite',
265	[
266	'label' => __( 'Infinite', 'wdk-listing-sliders' ),
267	'type' => \Elementor\Controls_Manager::SWITCHER,
268	'label_on' => __( 'On', 'wdk-listing-sliders' ),
269	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
270	'return_value' => 'true',
271	'default' => 'true',
272	]
273	);
274
275	$this->add_control(
276	'layout_carousel_variableWidth',
277	[
278	'label' => __( 'Variable width slides', 'wdk-listing-sliders' ),
279	'description' => __( 'Ignore columns', 'wdk-listing-sliders' ),
280	'type' => \Elementor\Controls_Manager::SWITCHER,
281	'label_on' => __( 'On', 'wdk-listing-sliders' ),
282	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
283	'return_value' => 'true',
284	'default' => '',
285	]
286	);
287
288	$this->add_control(
289	'layout_carousel_is_center',
290	[
291	'label' => __( 'Center Mode', 'wdk-listing-sliders' ),
292	'type' => \Elementor\Controls_Manager::SWITCHER,
293	'label_on' => __( 'On', 'wdk-listing-sliders' ),
294	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
295	'return_value' => 'true',
296	'default' => '',
297	]
298	);
299
300	$this->add_control(
301	'layout_carousel_speed',
302	[
303	'label' => __( 'Animations Speed', 'wdk-listing-sliders' ),
304	'type' => \Elementor\Controls_Manager::NUMBER,
305	'min' => 0,
306	'max' => 100000,
307	'step' => 100,
308	'default' => 500,
309	]
310	);
311
312
313	$this->add_control(
314	'layout_carousel_is_autoplay',
315	[
316	'label' => __( 'Autoplay', 'wdk-listing-sliders' ),
317	'type' => \Elementor\Controls_Manager::SWITCHER,
318	'label_on' => __( 'On', 'wdk-listing-sliders' ),
319	'label_off' => __( 'Off', 'wdk-listing-sliders' ),
320	'return_value' => 'true',
321	'default' => '',
322	]
323	);
324
325	$this->add_control(
326	'layout_carousel_autoplay_speed',
327	[
328	'label' => __( 'Autoplay Speed', 'wdk-listing-sliders' ),
329	'type' => \Elementor\Controls_Manager::NUMBER,
330	'min' => 0,
331	'max' => 100000,
332	'step' => 100,
333	'default' => 500,
334	]
335	);
336
337	$this->add_control(
338	'layout_carousel_animation_style',
339	[
340	'label' => __( 'Animation Style', 'wdk-listing-sliders' ),
341	'type' => \Elementor\Controls_Manager::SELECT,
342	'default' => 'fade_in',
343	'options' => [
344	'slide' => __( 'Slide', 'wdk-listing-sliders' ),
345	'fade' => __( 'Fade', 'wdk-listing-sliders' ),
346	'fade_in' => __( 'Fade in', 'wdk-listing-sliders' ),
347	],
348	]
349	);
350
351	$this->add_control(
352	'layout_carousel_cssease',
353	[
354	'label' => __( 'cssEase ', 'wdk-listing-sliders' ),
355	'type' => \Elementor\Controls_Manager::SELECT,
356	'default' => 'linear',
357	'options' => [
358	'linear' => __( 'linear', 'wdk-listing-sliders' ),
359	'ease' => __( 'ease', 'wdk-listing-sliders' ),
360	'ease-in' => __( 'ease-in', 'wdk-listing-sliders' ),
361	'ease-out' => __( 'ease-out', 'wdk-listing-sliders' ),
362	'ease-in-out' => __( 'ease-in-out', 'wdk-listing-sliders' ),
363	'step-start' => __( 'step-start', 'wdk-listing-sliders' ),
364	'step-end' => __( 'step-end', 'wdk-listing-sliders' ),
365	],
366	]
367	);
368
369	$this->end_controls_section();
370	}
371
372	private function generate_controls_styles() {
373
374	$items = [
375	[
376	'key'=>'card',
377	'label'=> esc_html__('Slider', 'wdk-listing-sliders'),
378	'selector'=>'.wdk_listing_slider_box .wdk-listing-image-card',
379	'selector_hover'=>'.wdk_listing_slider_box .wdk-listing-image-card%1$s',
380	'options'=>['background','border','border_radius','padding','shadow','transition'],
381	],
382	];
383
384	foreach ($items as $item) {
385	$this->start_controls_section(
386	$item['key'].'_section',
387	[
388	'label' => $item['label'],
389	'tab' => '1',
390	]
391	);
392
393	$selectors = array(
394	'normal' => '{{WRAPPER}} '.$item['selector'],
395	'hover'=>'{{WRAPPER}} '.$item['selector_hover'],
396	);
397	$this->generate_renders_tabs($selectors, $item['key'].'_dynamic', $item['options']);
398
399	$this->end_controls_section();
400	}
401
402	$this->start_controls_section(
403	'styles_thmbn_type',
404	[
405	'label' => esc_html__('Image Slide', 'wdk-listing-sliders'),
406	'tab' => '1',
407	]
408	);
409
410	$this->add_control(
411	'layout_image_design',
412	[
413	'label' => __( 'Size style thumbnail', 'wdk-listing-sliders' ),
414	'type' => \Elementor\Controls_Manager::SELECT,
415	'options' => [
416	'' => __( 'Default', 'wdk-listing-sliders' ),
417	'contain' => __( 'Contain', 'wdk-listing-sliders' ),
418	'cover' => __( 'Cover', 'wdk-listing-sliders' ),
419	'fill' => __( 'Fill', 'wdk-listing-sliders' ),
420	],
421	'selectors' => [
422	'{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image' => 'object-fit: {{VALUE}}',
423	],
424	]
425	);
426
427	$this->add_responsive_control(
428	'layout_image_mask_header',
429	[
430	'label' => esc_html__('Mask', 'wdk-listing-sliders'),
431	'type' => Controls_Manager::HEADING,
432	'separator' => 'before',
433	]
434	);
435
436	$selectors = array(
437	'normal' => '{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image-card:after',
438	);
439	$this->generate_renders_tabs($selectors, 'layout_image_mask_styles', ['background_group']);
440
441	$selectors = array(
442	'normal' => '{{WRAPPER}} .wdk_listing_slider_box .wdk-listing-image',
443	);
444
445	$this->generate_renders_tabs($selectors, 'layout_image_dynamic', ['background','border','border_radius','padding','shadow','css_filters','transition']);
446
447	$this->add_responsive_control (
448	'styles_thmbn_nav_des_height',
449	[
450	'label' => esc_html__('Height', 'wdk-listing-sliders'),
451	'type' => Controls_Manager::SLIDER,
452	'range' => [
453	'px' => [
454	'min' => 100,
455	'max' => 1500,
456	],
457	'vw' => [
458	'min' => 0,
459	'max' => 100,
460	],
461	'vh' => [
462	'min' => 0,
463	'max' => 100,
464	],
465	],
466	'size_units' => [ 'px', 'vw', 'vh' ],
467	'selectors' => [
468	'{{WRAPPER}} .wdk-listing-carousel .wdk_listing_slider_box, {{WRAPPER}} .wdk-listing-carousel .wdk-cls-banner-thumbs' => 'height: {{SIZE}}{{UNIT}}',
469	],
470	'separator' => 'after',
471	]
472	);
473
474	$this->end_controls_section();
475
476	$this->start_controls_section(
477	'styles_carousel_arrows_section',
478	[
479	'label' => esc_html__('Carousel Arrows', 'wdk-listing-sliders'),
480	'tab' => '1',
481	]
482	);
483
484	$this->add_responsive_control(
485	'styles_carousel_arrows_hide',
486	[
487	'label' => esc_html__( 'Hide Element', 'wdk-listing-sliders' ),
488	'type' => Controls_Manager::SWITCHER,
489	'none' => esc_html__( 'Hide', 'wdk-listing-sliders' ),
490	'block' => esc_html__( 'Show', 'wdk-listing-sliders' ),
491	'return_value' => 'none',
492	'default' => '',
493	'selectors' => [
494	'{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows' => 'display: {{VALUE}};',
495	],
496	]
497	);
498
499	$this->add_responsive_control(
500	'styles_carousel_arrows_position',
501	[
502	'label' => __( 'Position', 'wdk-listing-sliders' ),
503	'type' => \Elementor\Controls_Manager::SELECT,
504	'default' => 'wdk-listing-carousel_arrows_middle',
505	'options' => [
506	'' => __( 'Default', 'wdk-listing-sliders' ),
507	'wdk-listing-carousel_arrows_bottom' => __( 'Bottom', 'wdk-listing-sliders' ),
508	'wdk-listing-carousel_arrows_middle' => __( 'Center', 'wdk-listing-sliders' ),
509	'wdk-listing-carousel_arrows_top' => __( 'Top', 'wdk-listing-sliders' ),
510	],
511	]
512	);
513
514	$this->add_responsive_control(
515	'styles_carousel_arrows_align',
516	[
517	'label' => __( 'Align', 'wdk-listing-sliders' ),
518	'type' => Controls_Manager::CHOOSE,
519	'options' => [
520	'left' => [
521	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
522	'icon' => 'eicon-text-align-left',
523	],
524	'center' => [
525	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
526	'icon' => 'eicon-text-align-center',
527	],
528	'right' => [
529	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
530	'icon' => 'eicon-text-align-right',
531	],
532	'justify' => [
533	'title' => esc_html__( 'Justified', 'wdk-listing-sliders' ),
534	'icon' => 'eicon-text-align-justify',
535	],
536	],
537	'render_type' => 'ui',
538	'selectors_dictionary' => [
539	'left' => 'justify-content: flex-start;',
540	'center' => 'justify-content: center;',
541	'right' => 'justify-content: flex-end;',
542	'justify' => 'justify-content: space-between;',
543	],
544	'selectors' => [
545	'{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows' => '{{VALUE}};',
546	],
547	'conditions' => [
548	'terms' => [
549	[
550	'name' => 'styles_carousel_arrows_position',
551	'operator' => '!=',
552	'value' => 'wdk-listing-carousel_arrows_middle',
553	]
554	],
555	],
556	]
557	);
558
559	$this->add_responsive_control(
560	'styles_carousel_arrows_icon_left_h',
561	[
562	'label' => esc_html__('Arrow left', 'wdk-listing-sliders'),
563	'type' => Controls_Manager::HEADING,
564	'separator' => 'before',
565	]
566	);
567	$selectors = array(
568	'normal' => '{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-prev',
569	);
570	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_s_m_left', ['margin']);
571
572	$this->add_responsive_control(
573	'styles_carousel_arrows_icon_left',
574	[
575	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
576	'type' => Controls_Manager::ICONS,
577	'label_block' => true,
578	'default' => [
579	'value' => 'fa fa-angle-left',
580	'library' => 'solid',
581	],
582	]
583	);
584
585	$this->add_responsive_control(
586	'styles_carousel_arrows_icon_right_h',
587	[
588	'label' => esc_html__('Arrow right', 'wdk-listing-sliders'),
589	'type' => Controls_Manager::HEADING,
590	'separator' => 'before',
591	]
592	);
593	$selectors = array(
594	'normal' => '{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow.wdk-slider-next',
595	);
596	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_s_m_next', ['margin']);
597
598	$this->add_responsive_control(
599	'styles_carousel_arrows_icon_right',
600	[
601	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
602	'type' => Controls_Manager::ICONS,
603	'label_block' => true,
604	'default' => [
605	'value' => 'fa fa-angle-right',
606	'library' => 'solid',
607	],
608	]
609	);
610
611	$selectors = array(
612	'normal' => '{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow',
613	'hover'=>'{{WRAPPER}} .wdk-listing-carousel .wdk-listing-carousel_arrows .wdk-listing-carousel_arrow%1$s'
614	);
615	$this->generate_renders_tabs($selectors, 'styles_carousel_arrows_dynamic', ['font-size','color','background','border','border_radius','padding','shadow','transition']);
616
617	$this->end_controls_section();
618
619	$this->start_controls_section(
620	'styles_carousel_dots_section',
621	[
622	'label' => esc_html__('Section Dots', 'wdk-listing-sliders'),
623	'tab' => '1',
624	]
625	);
626
627	$this->add_responsive_control(
628	'styles_carousel_dots_hide',
629	[
630	'label' => esc_html__( 'Hide Element', 'wdk-listing-sliders' ),
631	'type' => Controls_Manager::SWITCHER,
632	'none' => esc_html__( 'Hide', 'wdk-listing-sliders' ),
633	'block' => esc_html__( 'Show', 'wdk-listing-sliders' ),
634	'return_value' => 'none',
635	'default' => '',
636	'selectors' => [
637	'{{WRAPPER}} .wdk-listing-carousel .slick-dots' => 'display: {{VALUE}} !important;',
638	],
639	]
640	);
641
642	$this->add_responsive_control(
643	'styles_carousel_dots_position_style',
644	[
645	'label' => __( 'Position Style', 'wdk-listing-sliders' ),
646	'type' => \Elementor\Controls_Manager::SELECT,
647	'default' => 'wdk-listing-carousel_dots_out',
648	'options' => [
649	'' => __( 'Default', 'wdk-listing-sliders' ),
650	'wdk-listing-carousel_dots_out' => __( 'Out', 'wdk-listing-sliders' ),
651	'wdk-listing-carousel_dots_in' => __( 'In', 'wdk-listing-sliders' ),
652	],
653	]
654	);
655
656	$this->add_responsive_control(
657	'styles_carousel_dots_direction',
658	[
659	'label' => __( 'Direction Dots', 'wdk-listing-sliders' ),
660	'type' => Controls_Manager::SELECT,
661	'options' => [
662	'' => esc_html__('Default', 'wdk-listing-sliders'),
663	'column' => esc_html__('Column', 'wdk-listing-sliders'),
664	'column-reverse' => esc_html__('Column Reverse', 'wdk-listing-sliders'),
665	'row' => esc_html__('Row', 'wdk-listing-sliders'),
666	'row-reverse' => esc_html__('Row Reverse', 'wdk-listing-sliders'),
667	],
668	'selectors_dictionary' => [
669	'column' => 'display: flex !important; flex-direction: column;',
670	'column-reverse' => 'display: flex !important; flex-direction: column-reverse;',
671	'row' => 'display: flex !important; flex-direction: row;',
672	'row-reverse' => 'display: flex !important; flex-direction: row-reverse;',
673	],
674	'selectors' => [
675	'{{WRAPPER}} .wdk-listing-carousel .slick-dots' => '{{UNIT}}',
676	],
677	'default' => '100%',
678	'separator' => 'before',
679	]
680	);
681
682	$this->add_responsive_control(
683	'styles_carousel_dots_align',
684	[
685	'label' => __( 'Position', 'wdk-listing-sliders' ),
686	'type' => Controls_Manager::CHOOSE,
687	'options' => [
688	'left' => [
689	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
690	'icon' => 'eicon-text-align-left',
691	],
692	'center' => [
693	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
694	'icon' => 'eicon-text-align-center',
695	],
696	'right' => [
697	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
698	'icon' => 'eicon-text-align-right',
699	],
700	'justify' => [
701	'title' => esc_html__( 'Justified', 'wdk-listing-sliders' ),
702	'icon' => 'eicon-text-align-justify',
703	],
704	],
705	'render_type' => 'ui',
706	'selectors_dictionary' => [
707	'left' => 'justify-content: flex-start;',
708	'center' => 'justify-content: center;',
709	'right' => 'justify-content: flex-end;',
710	'justify' => 'justify-content: space-between;',
711	],
712	'selectors' => [
713	'{{WRAPPER}} .wdk-listing-carousel .slick-dots' => '{{VALUE}};',
714	],
715	'conditions' => [
716	'terms' => [
717	[
718	'name' => 'styles_carousel_dots_position_style',
719	'operator' => '!=',
720	'value' => 'wdk-listing-carousel_dots_in',
721	]
722	],
723	],
724	]
725	);
726
727	$this->add_responsive_control(
728	'styles_carousel_dots_in_align',
729	[
730	'label' => __( 'Position', 'wdk-listing-sliders' ),
731	'type' => Controls_Manager::CHOOSE,
732	'options' => [
733	'left' => [
734	'title' => esc_html__( 'Left', 'wdk-listing-sliders' ),
735	'icon' => 'eicon-text-align-left',
736	],
737	'center' => [
738	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
739	'icon' => 'eicon-text-align-center',
740	],
741	'right' => [
742	'title' => esc_html__( 'Right', 'wdk-listing-sliders' ),
743	'icon' => 'eicon-text-align-right',
744	],
745	],
746	'default' => 'center',
747	'render_type' => 'ui',
748	'selectors_dictionary' => [
749	'left' => 'left:0; right: initial',
750	'center' => 'left:50%; right: initial; transform:translateX(-50%)',
751	'right' => 'right:0; left: initial',
752	],
753	'selectors' => [
754	'{{WRAPPER}} .wdk-listing-carousel .slick-dots' => '{{VALUE}};',
755	],
756	'conditions' => [
757	'terms' => [
758	[
759	'name' => 'styles_carousel_dots_position_style',
760	'operator' => '=',
761	'value' => 'wdk-listing-carousel_dots_in',
762	]
763	],
764	],
765	]
766	);
767
768	$this->add_responsive_control(
769	'styles_carousel_dots_in_align_y',
770	[
771	'label' => __( 'Position Vertical', 'wdk-listing-sliders' ),
772	'type' => Controls_Manager::CHOOSE,
773	'options' => [
774	'top' => [
775	'title' => esc_html__( 'Top', 'wdk-listing-sliders' ),
776	'icon' => 'eicon-justify-start-v',
777	],
778	'center' => [
779	'title' => esc_html__( 'Center', 'wdk-listing-sliders' ),
780	'icon' => 'eicon-text-align-center',
781	],
782	'bottom' => [
783	'title' => esc_html__( 'Bottom', 'wdk-listing-sliders' ),
784	'icon' => ' eicon-justify-end-v',
785	],
786	],
787	'render_type' => 'ui',
788	'selectors_dictionary' => [
789	'top' => 'top:0; bottom: initial',
790	'center' => 'top:50%; bottom: initial; transform:translateY(-50%)',
791	'bottom' => 'bottom:0; top: initial',
792	],
793	'selectors' => [
794	'{{WRAPPER}} .wdk-listing-carousel .slick-dots' => '{{VALUE}};',
795	],
796	'conditions' => [
797	'terms' => [
798	[
799	'name' => 'styles_carousel_dots_position_style',
800	'operator' => '=',
801	'value' => 'wdk-listing-carousel_dots_in',
802	]
803	],
804	],
805	]
806	);
807
808	$this->add_responsive_control(
809	'styles_carousel_dots_icon',
810	[
811	'label' => esc_html__('Icon', 'wdk-listing-sliders'),
812	'type' => Controls_Manager::ICONS,
813	'label_block' => true,
814	'default' => [
815	'value' => 'fas fa-circle',
816	'library' => 'solid',
817	],
818	]
819	);
820
821	$selectors = array(
822	'normal' => '{{WRAPPER}} .wdk-listing-carousel .slick-dots li .wdk_dot',
823	'hover'=>'{{WRAPPER}} .wdk-listing-carousel .slick-dots li .wdk_dot%1$s',
824	'active'=>'{{WRAPPER}} .wdk-listing-carousel .slick-dots li.slick-active .wdk_dot'
825	);
826
827	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_dynamic', ['background','border','border_radius','padding','margin','shadow','font-size', 'color','transition']);
828
829	$this->add_responsive_control(
830	'styles_carousel_dots_hover_header',
831	[
832	'label' => esc_html__('Hover Animation', 'wdk-listing-sliders'),
833	'type' => Controls_Manager::HEADING,
834	'separator' => 'before',
835	]
836	);
837
838	$selectors = array(
839	'hover'=>'{{WRAPPER}} .wdk-listing-carousel .slick-dots li .wdk_dot%1$s i, {{WRAPPER}} .wdk-listing-carousel .slick-dots li .wdk_dot%1$s svg',
840	);
841
842	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_hover_dynamic', ['hover_animation']);
843
844	$this->add_responsive_control(
845	'styles_carousel_dots_box_header',
846	[
847	'label' => esc_html__('Dots container', 'wdk-listing-sliders'),
848	'type' => Controls_Manager::HEADING,
849	'separator' => 'before',
850	]
851	);
852
853	$selectors = array(
854	'normal' => '{{WRAPPER}} .wdk-listing-carousel .slick-dots',
855	);
856
857	$this->generate_renders_tabs($selectors, 'styles_carousel_dots_box_dynamic', ['background','padding','margin','shadow', 'transition']);
858
859	$this->end_controls_section();
860	}
861
862	private function generate_controls_content() {
863
864	}
865
866	public function enqueue_styles_scripts() {
867	wp_enqueue_style('wdk-listing-carousel');
868	wp_enqueue_style('slick');
869	wp_enqueue_style('slick-theme');
870	wp_enqueue_style('wdk-hover');
871
872	wp_enqueue_script('slick');
873
874	wp_enqueue_style('wdk-notify');
875	wp_enqueue_script('wdk-notify');
876	}
877	}
878
879
880
881