carousel-navigation.php — Shortcodes and extra features for Phlox theme 2.5.8

auxin-elements / includes / elementor / widgets / carousel-navigation.php

auxin-elements / includes / elementor / widgets Last commit date

carousel-navigation.php

566 lines

1	<?php
2	namespace Auxin\Plugin\CoreElements\Elementor\Elements;
3
4	use Elementor\Widget_Base;
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Background;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Border;
9
10	if ( ! defined( 'ABSPATH' ) ) {
11	exit; // Exit if accessed directly.
12	}
13
14	/**
15	* Elementor 'CarouselNavigation' widget.
16	*
17	* Elementor widget that displays an 'CarouselNavigation' with lightbox.
18	*
19	* @since 1.0.0
20	*/
21	class CarouselNavigation extends Widget_Base {
22
23	/**
24	* Get widget name.
25	*
26	* Retrieve 'CarouselNavigation' widget name.
27	*
28	* @since 1.0.0
29	* @access public
30	*
31	* @return string Widget name.
32	*/
33	public function get_name() {
34	return 'aux_carousel_navigation';
35	}
36
37	/**
38	* Get widget title.
39	*
40	* Retrieve 'CarouselNavigation' widget title.
41	*
42	* @since 1.0.0
43	* @access public
44	*
45	* @return string Widget title.
46	*/
47	public function get_title() {
48	return __('Carousel Navigation', 'auxin-elements' );
49	}
50
51	/**
52	* Get widget icon.
53	*
54	* Retrieve 'CarouselNavigation' widget icon.
55	*
56	* @since 1.0.0
57	* @access public
58	*
59	* @return string Widget icon.
60	*/
61	public function get_icon() {
62	return 'eicon-post-navigation auxin-badge';
63	}
64
65	/**
66	* Get widget categories.
67	*
68	* Retrieve 'CarouselNavigation' widget icon.
69	*
70	* @since 1.0.0
71	* @access public
72	*
73	* @return string Widget icon.
74	*/
75	public function get_categories() {
76	return ['auxin-core'];
77	}
78
79	/**
80	* Register 'CarouselNavigation' widget controls.
81	*
82	* Adds different input fields to allow the user to change and customize the widget settings.
83	*
84	* @since 1.0.0
85	* @access protected
86	*/
87	protected function _register_controls() {
88
89	$this->start_controls_section(
90	'navigation',
91	[
92	'label' => __('Navigation', 'auxin-elements' ),
93	]
94	);
95
96	$this->add_control(
97	'nav_type',
98	[
99	'label' => __( 'Navigation Type', 'auxin-elements'),
100	'type' => Controls_Manager::SELECT,
101	'default' => 'boxed-arrow',
102	'options' => [
103	'boxed-arrow' => __('Boxed Arrow', 'auxin-elements' ),
104	'long-arrow' => __('Long Arrow', 'auxin-elements' ),
105	'custom' => __('Custom', 'auxin-elements' ),
106	],
107	]
108	);
109
110	$this->add_control(
111	'prev_icon',
112	[
113	'label' => __('Previous Button','auxin-elements' ),
114	'type' => Controls_Manager::ICONS,
115	'default' => [
116	'value' => 'auxicon2-arrows-chevron-thin-left',
117	'library' => 'auxicon'
118	],
119	'condition' => [
120	'nav_type' => ['custom']
121	]
122	]
123	);
124
125	$this->add_control(
126	'next_icon',
127	[
128	'label' => __('Next Button','auxin-elements' ),
129	'type' => Controls_Manager::ICONS,
130	'default' => [
131	'value' => 'auxicon2-arrows-chevron-thin-right',
132	'library' => 'auxicon'
133	],
134	'condition' => [
135	'nav_type' => ['custom']
136	]
137	]
138	);
139
140	$this->add_control(
141	'nav_target',
142	[
143	'label' => __('Carousel Target','auxin-elements' ),
144	'description' => __('CSS selector of target carousel.','auxin-elements' ),
145	'type' => Controls_Manager::TEXT,
146	'default' => '',
147	'placeholder' => '.carousel-classname'
148	]
149	);
150
151	$this->end_controls_section();
152
153	$this->start_controls_section(
154	'navigation_style',
155	[
156	'label' => __( 'Navigation', 'auxin-elements' ),
157	'tab' => Controls_Manager::TAB_STYLE,
158	]
159	);
160
161	$this->add_responsive_control(
162	'navigation_align',
163	[
164	'label' => __( 'Align', 'auxin-elements' ),
165	'type' => Controls_Manager::SELECT,
166	'default' => 'center',
167	'options' => [
168	'' => __( 'Default', 'auxin-elements' ),
169	'flex-start' => __( 'Start', 'auxin-elements' ),
170	'center' => __( 'Center', 'auxin-elements' ),
171	'flex-end' => __( 'End', 'auxin-elements' ),
172	'space-between' => __( 'Space Between', 'auxin-elements' ),
173	'space-around' => __( 'Space Around', 'auxin-elements' ),
174	'space-evenly' => __( 'Space Evenly', 'auxin-elements' ),
175	],
176	'selectors' => [
177	'{{WRAPPER}} .aux-carousel-navigation' => 'justify-content: {{VALUE}}',
178	],
179	]
180	);
181
182	$this->add_responsive_control(
183	'navigation_gap',
184	[
185	'label' => __('Space Between Buttons','auxin-elements' ),
186	'type' => Controls_Manager::SLIDER,
187	'size_units' => ['px', 'em'],
188	'range' => [
189	'px' => [
190	'max' => 100
191	],
192	'em' => [
193	'max' => 10
194	]
195	],
196	'default' => [
197	'unit' => 'px',
198	'size' => 10,
199	],
200	'condition' => [
201	'navigation_align!' => ['space-between', 'space-around', 'space-evenly']
202	],
203	'selectors' => [
204	'{{WRAPPER}} .aux-carousel-navigation .aux-prev' => 'margin-right: {{SIZE}}{{UNIT}};',
205	],
206	]
207	);
208
209	$this->end_controls_section();
210
211
212	// Icon Tab Style
213	$this->start_controls_section(
214	'icon_style',
215	[
216	'label' => __( 'Icon', 'auxin-elements' ),
217	'tab' => Controls_Manager::TAB_STYLE,
218	]
219	);
220
221
222	$this->add_responsive_control(
223	'icon_width',
224	[
225	'label' => __('Width','auxin-elements' ),
226	'type' => Controls_Manager::SLIDER,
227	'size_units' => ['px', 'em','%'],
228	'range' => [
229	'%' => [
230	'min' => 1,
231	'max' => 100,
232	'step' => 1
233	],
234	'em' => [
235	'min' => 1,
236	'max' => 100,
237	'step' => 1
238	],
239	'px' => [
240	'min' => 1,
241	'max' => 1600,
242	'step' => 1
243	]
244	],
245	'selectors' => [
246	'{{WRAPPER}} .aux-custom-nav' => 'width:{{SIZE}}{{UNIT}};'
247	]
248	]
249	);
250
251	$this->add_responsive_control(
252	'icon_height',
253	[
254	'label' => __('Height','auxin-elements' ),
255	'type' => Controls_Manager::SLIDER,
256	'size_units' => ['px', 'em','%'],
257	'range' => [
258	'%' => [
259	'min' => 1,
260	'max' => 100,
261	'step' => 1
262	],
263	'em' => [
264	'min' => 1,
265	'max' => 100,
266	'step' => 1
267	],
268	'px' => [
269	'min' => 1,
270	'max' => 1600,
271	'step' => 1
272	]
273	],
274	'selectors' => [
275	'{{WRAPPER}} .aux-custom-nav' => 'height:{{SIZE}}{{UNIT}};'
276	]
277	]
278	);
279	$this->start_controls_tabs( 'icon_tabs' );
280
281	$this->start_controls_tab(
282	'icon_normal_tab',
283	[
284	'label' => __( 'Normal' , 'auxin-elements' )
285	]
286	);
287
288	$this->add_group_control(
289	Group_Control_Background::get_type(),
290	[
291	'name' => 'icon_bg',
292	'label' => __( 'Background', 'auxin-elements' ),
293	'types' => [ 'classic', 'gradient' ],
294	'selector' => '{{WRAPPER}} .aux-custom-nav'
295	]
296	);
297
298	$this->add_group_control(
299	Group_Control_Box_Shadow::get_type(),
300	[
301	'name' => 'icon_box_shadow',
302	'selector' => '{{WRAPPER}} .aux-custom-nav'
303	]
304	);
305
306	$this->add_responsive_control(
307	'icon_color',
308	[
309	'label' => __( 'Color', 'auxin-elements' ),
310	'type' => Controls_Manager::COLOR,
311	'default' => '#3d3d3d',
312	'selectors' => [
313	'{{WRAPPER}} .aux-custom-nav' => 'color: {{VALUE}};'
314	],
315	'condition' => [
316	'nav_type' => ['custom']
317	]
318	]
319	);
320
321	$this->add_responsive_control(
322	'icon_size',
323	[
324	'label' => __( 'Size', 'auxin-elements' ),
325	'type' => Controls_Manager::SLIDER,
326	'size_units' => [ 'px', 'em' ],
327	'range' => [
328	'px' => [
329	'max' => 100
330	],
331	'em' => [
332	'max' => 10
333	]
334	],
335	'selectors' => [
336	'{{WRAPPER}} .aux-custom-nav' => 'font-size: {{SIZE}}{{UNIT}};',
337	],
338	'default' => [
339	'unit' => 'px',
340	'size' => 25,
341	],
342	'condition' => [
343	'nav_type' => ['custom']
344	]
345	]
346	);
347
348	$this->add_group_control(
349	Group_Control_Border::get_type(),
350	[
351	'name' => 'icon_border',
352	'selector' => '{{WRAPPER}} .aux-custom-nav',
353	'condition' => [
354	'nav_type' => ['custom']
355	]
356	]
357	);
358
359	$this->add_responsive_control(
360	'icon_border_radius',
361	[
362	'label' => __( 'Border Radius', 'auxin-elements' ),
363	'type' => Controls_Manager::DIMENSIONS,
364	'size_units' => [ 'px', 'em', '%' ],
365	'selectors' => [
366	'{{WRAPPER}} .aux-custom-nav, {{WRAPPER}} .aux-arrow-nav' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
367	],
368	'allowed_dimensions' => 'all'
369	]
370	);
371
372	$this->add_responsive_control(
373	'icon_padding',
374	[
375	'label' => __( 'Padding', 'auxin-elements' ),
376	'type' => Controls_Manager::DIMENSIONS,
377	'size_units' => [ 'px', 'em' ],
378	'allowed_dimensions' => 'all',
379	'selectors' => [
380	'{{WRAPPER}} .aux-custom-nav, {{WRAPPER}} .aux-arrow-nav' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
381	'{{WRAPPER}} .aux-custom-nav > span' => 'line-height:0;'
382	]
383	]
384	);
385
386	$this->end_controls_tab();
387
388	$this->start_controls_tab(
389	'icon_hover_tab',
390	[
391	'label' => __( 'Hover' , 'auxin-elements' )
392	]
393	);
394
395	$this->add_group_control(
396	Group_Control_Background::get_type(),
397	[
398	'name' => 'icon_hover_bg',
399	'label' => __( 'Background', 'auxin-elements' ),
400	'types' => [ 'classic', 'gradient' ],
401	'selector' => '{{WRAPPER}} .aux-custom-nav:hover'
402	]
403	);
404
405	$this->add_group_control(
406	Group_Control_Box_Shadow::get_type(),
407	[
408	'name' => 'icon_hover_box_shadow',
409	'selector' => '{{WRAPPER}} .aux-custom-nav:hover'
410	]
411	);
412
413	$this->add_responsive_control(
414	'icon_hover_color',
415	[
416	'label' => __( 'Hover Color', 'auxin-elements' ),
417	'type' => Controls_Manager::COLOR,
418	'selectors' => [
419	'{{WRAPPER}} .aux-custom-nav:hover' => 'color: {{VALUE}};',
420	],
421	'condition' => [
422	'nav_type' => ['custom']
423	]
424	]
425	);
426
427	$this->add_responsive_control(
428	'icon_hover_size',
429	[
430	'label' => __( 'Size', 'auxin-elements' ),
431	'type' => Controls_Manager::SLIDER,
432	'size_units' => [ 'px', 'em' ],
433	'range' => [
434	'px' => [
435	'max' => 100
436	],
437	'em' => [
438	'max' => 10
439	]
440	],
441	'selectors' => [
442	'{{WRAPPER}} .aux-custom-nav:hover' => 'font-size: {{SIZE}}{{UNIT}};',
443	],
444	'default' => [
445	'unit' => 'px',
446	'size' => '',
447	],
448	'condition' => [
449	'nav_type' => ['custom']
450	]
451	]
452	);
453
454	$this->add_group_control(
455	Group_Control_Border::get_type(),
456	[
457	'name' => 'icon_border_hover',
458	'selector' => '{{WRAPPER}} .aux-custom-nav:hover',
459	'condition' => [
460	'nav_type' => ['custom']
461	]
462	]
463	);
464
465	$this->add_responsive_control(
466	'icon_hover_border_radius',
467	[
468	'label' => __( 'Border Radius', 'auxin-elements' ),
469	'type' => Controls_Manager::DIMENSIONS,
470	'size_units' => [ 'px', 'em', '%' ],
471	'selectors' => [
472	'{{WRAPPER}} .aux-custom-nav:hover, {{WRAPPER}} .aux-arrow-nav:hover' => 'border-radius:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
473	],
474	'allowed_dimensions' => 'all'
475	]
476	);
477
478	$this->add_responsive_control(
479	'icon_hover_padding',
480	[
481	'label' => __( 'Padding', 'auxin-elements' ),
482	'type' => Controls_Manager::DIMENSIONS,
483	'size_units' => [ 'px', 'em' ],
484	'allowed_dimensions' => 'all',
485	'selectors' => [
486	'{{WRAPPER}} .aux-custom-nav:hover, {{WRAPPER}} .aux-arrow-nav:hover' => 'padding:{{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
487	]
488	]
489	);
490
491	$this->end_controls_tab();
492
493	$this->end_controls_tabs();
494
495	$this->end_controls_section();
496	}
497
498	/**
499	* Render 'CarouselNavigation' widget output on the frontend.
500	*
501	* @access protected
502	*/
503	protected function get_arrow_output( $type, $settings ) {
504	ob_start();
505
506	switch( $type ) {
507	case 'boxed-arrow':
508	;?>
509	<div class="aux-prev aux-prev-arrow aux-arrow-nav aux-outline aux-hover-fill">
510	<span class="aux-svg-arrow aux-small-left"></span>
511	<span class="aux-hover-arrow aux-white aux-svg-arrow aux-small-left"></span>
512	</div>
513	<div class="aux-next aux-next-arrow aux-arrow-nav aux-outline aux-hover-fill">
514	<span class="aux-svg-arrow aux-small-right"></span>
515	<span class="aux-hover-arrow aux-white aux-svg-arrow aux-small-right"></span>
516	</div>
517	<?php
518	break;
519	case 'long-arrow':
520	;?>
521	<div class="aux-prev aux-prev-arrow">
522	<span class="aux-svg-arrow aux-l-left"></span>
523	</div>
524	<div class="aux-next aux-next-arrow">
525	<span class="aux-svg-arrow aux-l-right"></span>
526	</div>
527	<?php
528	break;
529	case 'custom':
530	$prev_icon = isset( $settings['prev_icon']['value'] ) ? $settings['prev_icon']['value'] : $settings['prev_icon'];
531	$next_icon = isset( $settings['next_icon']['value'] ) ? $settings['next_icon']['value'] : $settings['next_icon'];
532	;?>
533	<div class="aux-prev aux-prev-custom aux-custom-nav">
534	<span class="<?php echo esc_attr( $prev_icon ); ?>"></span>
535	</div>
536	<div class="aux-next aux-next-custom aux-custom-nav">
537	<span class="<?php echo esc_attr( $next_icon ); ?>"></span>
538	</div>
539	<?php
540	break;
541	default:
542	break;
543
544	}
545
546	return ob_get_clean();
547	}
548
549
550	/**
551	* Render 'CarouselNavigation' widget output on the frontend.
552	*
553	* @access protected
554	*/
555	protected function render() {
556	$settings = $this->get_settings_for_display(); ?>
557
558	<div class="aux-carousel-navigation" data-target="<?php echo $settings['nav_target'];?>">
559	<?php echo $this->get_arrow_output( $settings['nav_type'] , $settings );?>
560	</div>
561
562	<?php
563	}
564
565	}
566