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

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

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

theme-elements 6 months ago accordion.php 6 months ago audio.php 6 months ago before-after.php 6 months ago button.php 6 months ago carousel-navigation.php 6 months ago circle-chart.php 6 months ago contact-box.php 6 months ago contact-form.php 6 months ago custom-list.php 6 months ago divider.php 6 months ago gallery.php 6 months ago gmap.php 2 days ago heading-modern.php 5 months ago icon.php 6 months ago image.php 6 months ago mailchimp.php 6 months ago modern-button.php 6 months ago products-grid.php 6 months ago quote.php 6 months ago recent-comments.php 6 months ago recent-posts-grid-carousel.php 1 month ago recent-posts-land-style.php 6 months ago recent-posts-masonry.php 6 months ago recent-posts-tiles-carousel.php 6 months ago recent-posts-tiles.php 6 months ago recent-posts-timeline.php 6 months ago recent-products.php 6 months ago responsive-table.php 6 months ago search.php 6 months ago staff.php 6 months ago svg.php 6 months ago tabs.php 6 months ago testimonial.php 6 months ago text.php 6 months ago touch-slider.php 6 months ago video.php 6 months ago

carousel-navigation.php

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