File Manager

Editing File: /home/maglabs/greentech/wp-content/plugins/alpus-flexbox/inc/modules/slider/widget.php

<?php

// Direct load is not allowed
if ( ! defined( 'ABSPATH' ) ) {
	die();
}

use Elementor\Plugin;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Modules\NestedElements\Base\Widget_Nested_Base;
use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater;

class Alpus_Nested_Slider extends Widget_Nested_Base {

public function get_name() {
		return 'alpus-nested-slider';
	}

public function get_title() {
		return esc_html__( 'Alpus Nested Slider', 'alpus-flexbox' );
	}

public function get_icon() {
		return 'eicon-slides';
	}

public function get_categories() {
		return array( 'layout' );
	}

public function get_script_depends() {
		
		return array( 'alpus-el-slider' );
	}

public function get_keywords() {
		return array( 'nested', 'slider', 'carousel', 'flexbox', 'container', 'slides', 'image' );
	}

protected function get_default_children_placeholder_selector() {
		return '.alpus-nested-slider';
	}

protected function slide_item_container( int $index ) {
		return array(
			'elType'   => 'container',
			'settings' => array(
				'_title'        => sprintf( __( 'Slide #%s', 'alpus-flexbox' ), $index ),
				'content_width' => 'full',
				'padding'       => array(
					'unit'     => 'px',
					'top'      => '0',
					'right'    => '0',
					'bottom'   => '0',
					'left'     => '0',
					'isLinked' => true,
				),
            ),
        );
	}

protected function get_default_children_title() {
		return esc_html__( 'Slide #%d', 'alpus-flexbox' );
	}

protected function get_default_repeater_title_setting_key() {
		// return 'slide_title';
		return '';
	}

protected function get_default_children_elements() {
		return array(
			$this->slide_item_container( 1 ),
			$this->slide_item_container( 2 ),
        );
	}

protected function register_controls() {

$swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';

$this->start_controls_section(
            'section_slider',
            array(
                'label' => esc_html__( 'Slider', 'alpus-flexbox' ),
                'tab'   => Controls_Manager::TAB_LAYOUT,
            )
        );
		
       		$repeater = new Repeater();

$this->add_control( 
				'slides', 
				array(
					'label'   => esc_html__( 'Slide Items', 'alpus-flexbox' ),
					'type'    => Control_Nested_Repeater::CONTROL_TYPE,
					'fields'  => $repeater->get_controls(),
					'default' => [
						[
						],
						[
						],
					],
					'button_text' => esc_html__( 'Add Slide', 'alpus-flexbox' ),
				)
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_slider_options',
			array(
				'label' => esc_html__( 'Slider Options', 'alpus-flexbox' ),
				'tab'   => Controls_Manager::TAB_LAYOUT,
			)
		);

$this->add_responsive_control(
				'slides_to_show',
				array(
					'label'              => esc_html__( 'Slides to Show', 'alpus-flexbox' ),
					'type'               => Controls_Manager::NUMBER,
					'min'                => 1,
					'max'                => 10,
					'step'               => 0.5,
					'default'            => 1,
					'frontend_available' => true,
					'render_type'        => 'template',
					'selectors'          => array(
						'{{WRAPPER}} .elementor-main-swiper:not(.' . $swiper_class . '-initialized) .swiper-slide' => 'max-width: calc(100% / var(--alpus-nested-carousel-slides-to-show, 1));',
						'{{WRAPPER}}' => '--alpus-nested-carousel-slides-to-show: {{VALUE}}',
					),
				)
			);

$this->add_responsive_control(
				'slides_to_scroll',
				array(
					'label'       => esc_html__( 'Slides to Scroll', 'alpus-flexbox' ),
					'description' => esc_html__( 'Set how many slides are scrolled per swipe.', 'alpus-flexbox' ),
					'type'        => Controls_Manager::NUMBER,
					'min'         => 1,
					'max'         => 10,
					'step'        => 0.5,
					'condition' => array(
						'slides_to_show!' => 1,
					),
					'frontend_available' => true,
				)
			);
			
			$this->add_responsive_control(
				'slide_spacing',
				array(
					'label' => esc_html__( 'Space Between', 'alpus-flexbox' ) . ' (px)',
					'type'  => Controls_Manager::SLIDER,
					'range' => array(
						'px' => array(
							'max' => 100,
						),
					),
					'frontend_available' => true,
					'render_type'        => 'none',
					'condition'          => array(
						'transition!' => array( 'fade', 'cube', 'flip', 'cards', 'creative', 'creative2', 'creative3', 'creative4' ),
					),
				)
			);

$this->add_control(
				'navigation',
				array(
					'label'   => esc_html__( 'Navigation', 'alpus-flexbox' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'both',
					'options' => array(
						'both'   => esc_html__( 'Arrows and Dots', 'alpus-flexbox' ),
						'arrows' => esc_html__( 'Arrows', 'alpus-flexbox' ),
						'dots'   => esc_html__( 'Dots', 'alpus-flexbox' ),
						'none'   => esc_html__( 'None', 'alpus-flexbox' ),
					),
					'frontend_available' => true,
				)
			);

$this->add_control(
				'autoplay',
				array(
					'label'              => esc_html__( 'Autoplay', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'frontend_available' => true,
				)
			);

$this->add_control(
				'pause_on_hover',
				array(
					'label'              => esc_html__( 'Pause on Hover', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'render_type'        => 'none',
					'frontend_available' => true,
					'condition'          => array(
						'autoplay!' => '',
					),
				)
			);

$this->add_control(
				'pause_on_interaction',
				array(
					'label'              => esc_html__( 'Pause on Interaction', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'render_type'        => 'none',
					'frontend_available' => true,
					'condition'          => array(
						'autoplay!' => '',
					),
				)
			);

$this->add_control(
				'autoplay_speed',
				array(
					'label'     => esc_html__( 'Autoplay Speed', 'alpus-flexbox' ) . ' (ms)',
					'type'      => Controls_Manager::NUMBER,
					'default'   => 5000,
					'condition' => array(
						'autoplay' => 'yes',
					),
					'selectors' => array(
						'{{WRAPPER}} .swiper-slide' => 'transition-duration: calc({{VALUE}}ms*1.2)',
					),
					'render_type'        => 'none',
					'frontend_available' => true,
					'separator'          => 'after',
				)
			);

$this->add_control(
				'infinite',
				array(
					'label'              => esc_html__( 'Infinite Loop', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'frontend_available' => true,
				)
			);

$this->add_control(
				'center_mode',
				array(
					'label'              => esc_html__( 'Center Mode', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'frontend_available' => true,
					'condition' => array(
						'transition' => array( 'slide', 'coverflow', 'coverflow2' ),
					),
				)
			);
			$this->add_control(
				'disable_drag',
				array(
					'label'              => esc_html__( 'Disable Mouse Drag', 'alpus-flexbox' ),
					'type'               => Controls_Manager::SWITCHER,
					'frontend_available' => true,
				)
			);

if ( Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ) {
				$this->add_control(
					'transition',
					array(
						'label'   => esc_html__( 'Transition', 'alpus-flexbox' ),
						'type'    => Controls_Manager::SELECT,
						'default' => 'slide',
						'options' => array(
							'slide'     => esc_html__( 'Slide', 'alpus-flexbox' ),
							'fade'      => esc_html__( 'Fade (Slides To Show = 1)', 'alpus-flexbox' ),
							'cube'      => esc_html__( 'Cube (Slides To Show = 1)', 'alpus-flexbox' ),
							'coverflow' => esc_html__( 'Coverflow (Slides To Show > 2)', 'alpus-flexbox' ),
							'coverflow2' => esc_html__( 'Coverflow 2 (Slides To Show > 2)', 'alpus-flexbox' ),
							'flip'      => esc_html__( 'Flip (Slides To Show = 1)', 'alpus-flexbox' ),
							'cards'     => esc_html__( 'Cards (Slides To Show = 1)', 'alpus-flexbox' ),
							'creative'  => esc_html__( 'Creative (Slides To Show = 1)', 'alpus-flexbox' ),
							'creative2' => esc_html__( 'Creative 2 (Slides To Show = 1)', 'alpus-flexbox' ),
							'creative3' => esc_html__( 'Creative 3 (Slides To Show = 1)', 'alpus-flexbox' ),
							'creative4' => esc_html__( 'Creative 4 (Slides To Show = 1)', 'alpus-flexbox' ),
						),
						'frontend_available' => true,
						'label_block'        => true,
					)
				);
			} else {
				$this->add_control(
					'transition',
					array(
						'label'   => esc_html__( 'Transition', 'alpus-flexbox' ),
						'type'    => Controls_Manager::SELECT,
						'default' => 'slide',
						'options' => array(
							'slide'     => esc_html__( 'Slide', 'alpus-flexbox' ),
							'fade'      => esc_html__( 'Fade (Slides To Show = 1)', 'alpus-flexbox' ),
							'cube'      => esc_html__( 'Cube (Slides To Show = 1)', 'alpus-flexbox' ),
							'coverflow' => esc_html__( 'Coverflow (Slides To Show > 2)', 'alpus-flexbox' ),
						),
						'frontend_available' => true,
						'label_block'        => true,
					)
				);
			}
			$this->add_control(
				'transition_notice',
				array(
					'type'            => Controls_Manager::RAW_HTML,
					'raw'             => esc_html__( '\'Slides To Show\' option should be 1.', 'alpus-flexbox' ),
					'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
					'condition'       => array(
						'transition!'  => array( 'slide', 'coverflow', 'coverflow2' ),
					)
				)
			);
			$this->add_control(
				'transition_speed',
				array(
					'label'              => esc_html__( 'Transition Speed', 'alpus-flexbox' ) . ' (ms)',
					'type'               => Controls_Manager::NUMBER,
					'default'            => 500,
					'render_type'        => 'none',
					'frontend_available' => true,
				)
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_style_arrow',
			array(
				'label'     => esc_html__( 'Arrows', 'alpus-flexbox' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'navigation' => array( 'arrows', 'both' ),
				),
			)
		);

$this->add_control(
				'arrow_icon_prev',
				array(
					'label'            => esc_html__( 'Prev Icon', 'alpus-flexbox' ),
					'type'             => Controls_Manager::ICONS,
					'skin'             => 'inline',
					'label_block'      => false,
					'default'          => array(
						'value'   => 'fas fa-chevron-left',
						'library' => 'fa-solid',
					),
				)
			);
			$this->add_control(
				'arrow_icon_next',
				array(
					'label'            => esc_html__( 'Next Icon', 'alpus-flexbox' ),
					'type'             => Controls_Manager::ICONS,
					'skin'             => 'inline',
					'label_block'      => false,
					'default'          => array(
						'value'   => 'fas fa-chevron-right',
						'library' => 'fa-solid',
					),
				)
			);

$this->add_control(
				'arrows_position',
				array(
					'label'   => esc_html__( 'Position', 'alpus-flexbox' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'inside',
					'options' => array(
						'inside'  => esc_html__( 'Inside', 'alpus-flexbox' ),
						'outside' => esc_html__( 'Outside', 'alpus-flexbox' ),
						'custom'  => esc_html__( 'Custom', 'alpus-flexbox' ),
					),
					'prefix_class' => 'elementor-arrows-position-',	
					'condition' => array(
						'transition' => array( 'slide', 'fade' ),
					),
				)
			);
			$this->add_control(
				'arrows_position_2',
				array(
					'label'   => esc_html__( 'Position', 'alpus-flexbox' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'inside',
					'options' => array(
						'inside'  => esc_html__( 'Inside', 'alpus-flexbox' ),
						'custom'  => esc_html__( 'Custom', 'alpus-flexbox' ),
					),
					'prefix_class' => 'elementor-arrows-position-',	
					'condition' => array(
						'transition!' => array( 'slide', 'fade' ),
					),
				)
			);

$this->add_control(
				'custom_arrow_y',
				array(
					'label'      => esc_html__( 'Vertical Position', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range'      => [
						'px' => [
							'min' => -100,
							'max' => 100,
							'step' => 5,
						],
						'%' => [
							'min' => -100,
							'max' => 100,
						],
					],
					'default' => [
						'unit' => '%',
						'size' => 50,
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'top: {{SIZE}}{{UNIT}};',
					],
					'conditions' => array(
						'relation' => 'or',
						'terms'    => array(
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => 'in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							),
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position_2',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => '!in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							
							)							
						),
					),			
				)
			);
			$this->add_control(
				'custom_arrow_prev_x',
				array(
					'label'      => esc_html__( 'Prev Icon Horizontal Position', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range'      => [
						'px' => [
							'min' => -100,
							'max' => 100,
							'step' => 5,
						],
						'%' => [
							'min' => -100,
							'max' => 100,
						],
					],
					'default' => [
						'unit' => 'px',
						'size' => 10,
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button-prev' => 'left: {{SIZE}}{{UNIT}};',
					],
					'conditions' => array(
						'relation' => 'or',
						'terms'    => array(
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => 'in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							),
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position_2',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => '!in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							
							)							
						),
					),			
				)
			);	
			$this->add_control(
				'custom_arrow_next_x',
				array(
					'label'      => esc_html__( 'Next Icon Horizontal Position', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => -100,
							'max' => 100,
							'step' => 5,
						],
						'%' => [
							'min' => -100,
							'max' => 100,
						],
					],
					'default' => [
						'unit' => 'px',
						'size' => 10,
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button-next' => 'right: {{SIZE}}{{UNIT}};',
					],
					'conditions' => array(
						'relation' => 'or',
						'terms'    => array(
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => 'in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							),
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'arrows_position_2',
										'operator' => '===',
										'value'    => 'custom',
									),
									array(
										'name'     => 'transition',
										'operator' => '!in',
										'value'    => array( 'slide', 'fade' ),
									),									
								),
							
							)							
						),
					),				
				)
			);

$this->add_control(
				'arrows_size',
				array(
					'label'      => esc_html__( 'Size', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 20,
							'max' => 60,
						],
					],
					'separator' => 'before',
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'font-size: {{SIZE}}{{UNIT}}',
					],
				)
			);
			$this->add_control(
				'arrows_width',
				array(
					'label'      => esc_html__( 'Width', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 20,
							'max' => 60,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'width: {{SIZE}}{{UNIT}};align-items: center;justify-content: center;',
					],
				)
			);
			$this->add_control(
				'arrows_height',
				array(
					'label'      => esc_html__( 'Height', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 20,
							'max' => 60,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'height: {{SIZE}}{{UNIT}};align-items: center;justify-content: center;',
					],
				)
			);

$this->add_control(
				'arrows_border_width',
				array(
					'label'      => esc_html__( 'Border Width', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
					'range' => [
						'px' => [
							'max' => 20,
						],
						'em' => [
							'max' => 2,
						],
					],
					'separator' => 'before',
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'border-width: {{SIZE}}{{UNIT}};border-style: solid;',
					],
				)
			);
	
			$this->add_control(
				'arrows_border_radius',
				array(
					'label' => esc_html__( 'Border Radius', 'alpus-flexbox' ),
					'type' => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .elementor-swiper-button' => 'border-radius: {{SIZE}}{{UNIT}};',
					],
				)
			);

$this->start_controls_tabs( 'arrows_tabs' );
				$this->start_controls_tab( 
					'normal', 
					array( 
						'label' => esc_html__( 'Normal', 'alpus-flexbox' ) 
					) 
				);
					$this->add_control(
						'arrows_color',
						array(
							'label' => esc_html__( 'Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button'     => 'color: {{VALUE}}',
								'{{WRAPPER}} .elementor-swiper-button svg' => 'fill: {{VALUE}}',
							),
						)
					);

$this->add_control(
						'arrows_bg_color',
						array(
							'label' => esc_html__( 'Background Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button' => 'background-color: {{VALUE}}',
							),
						)
					);

$this->add_control(
						'arrows_bd_color',
						array(
							'label' => esc_html__( 'Border Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button' => 'border-color: {{VALUE}}',
							),
							'condition' => array(
								'arrows_border_width!' => '',
							),							
						)
					);
				$this->end_controls_tab();

$this->start_controls_tab( 
					'hover', 
					array( 
						'label' => esc_html__( 'Hover', 'alpus-flexbox' ) 
					) 
				);
					$this->add_control(
						'arrows_hover_color',
						array(
							'label' => esc_html__( 'Hover Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button:hover'     => 'color: {{VALUE}}',
								'{{WRAPPER}} .elementor-swiper-button:hover svg' => 'fill: {{VALUE}}',
							),
						)
					);
					$this->add_control(
						'arrows_hover_bg_color',
						array(
							'label' => esc_html__( 'Hover Background Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button:hover' => 'background-color: {{VALUE}}',
							),
						)
					);

$this->add_control(
						'arrows_hover_bd_color',
						array(
							'label' => esc_html__( 'Hover Border Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button:hover' => 'border-color: {{VALUE}}',
							),
							'condition' => array(
								'arrows_border_width!' => '',
							),	
						)
					);		
					$this->add_control(
						'arrows_hover_transition',
						array(
							'label'     => esc_html__( 'Transition Speed', 'alpus-flexbox' ) . ' (s)',
							'type'      => Controls_Manager::NUMBER,
							'default'   => 0.3,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button' => 'transition: {{VALUE}}s',
							),
						)
					);								
				$this->end_controls_tab();
				
				$this->start_controls_tab( 
					'disabled', 
					array( 
						'label' => esc_html__( 'Disabled', 'alpus-flexbox' ) 
					) 
				);
					$this->add_control(
						'arrows_disabled_color',
						array(
							'label' => esc_html__( 'Disabled Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button.swiper-button-disabled'     => 'color: {{VALUE}}',
								'{{WRAPPER}} .elementor-swiper-button.swiper-button-disabled svg' => 'fill: {{VALUE}}',
							),
						)
					);
					$this->add_control(
						'arrows_disabled_bg_color',
						array(
							'label' => esc_html__( 'Disabled Background Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button.swiper-button-disabled' => 'background-color: {{VALUE}}',
							),
						)
					);

$this->add_control(
						'arrows_disabled_bd_color',
						array(
							'label' => esc_html__( 'Disabled Border Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .elementor-swiper-button.swiper-button-disabled' => 'border-color: {{VALUE}}',
							),
							'condition' => array(
								'arrows_border_width!' => '',
							),								
						)
					);					
				$this->end_controls_tab();
			$this->end_controls_tabs();
		$this->end_controls_section();

$this->start_controls_section(
			'section_style_dots',
			array(
				'label'     => esc_html__( 'Pagination', 'alpus-flexbox' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'navigation' => array( 'dots', 'both' ),
				),
			)
		);

$this->add_control(
				'pagination',
				array(
					'label'   => esc_html__( 'Pagination', 'alpus-flexbox' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'bullets',
					'options' => array(
						'bullets'     => esc_html__( 'Dots', 'alpus-flexbox' ),
						'dynamic'     => esc_html__( 'Dynamic Bullets', 'alpus-flexbox' ),
						'fraction'    => esc_html__( 'Fraction', 'alpus-flexbox' ),
						'progressbar' => esc_html__( 'Progress', 'alpus-flexbox' ),
					),
					'prefix_class'       => 'elementor-pagination-type-',
					'render_type'        => 'template',
					'frontend_available' => true,
				)
			);

$this->add_control(
				'dots_width',
				array(
					'type'      => Controls_Manager::SWITCHER,
					'label'     => __( 'Width Auto', 'alpus-flexbox' ),
					'selectors' => array(
						'{{WRAPPER}} .swiper-pagination-fraction,{{WRAPPER}} .swiper-pagination-custom,{{WRAPPER}} .' . $swiper_class . '-horizontal > .swiper-pagination-bullets' => "width:auto;",
					),
					'condition' => array(
						'pagination!' => array( 'dynamic', 'progressbar' ),
					),					
				)
			);

$this->add_control(
				'dots_position',
				array(
					'label'   => esc_html__( 'Position', 'alpus-flexbox' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'inside',
					'options' => array(
						'outside' => esc_html__( 'Outside', 'alpus-flexbox' ),
						'inside'  => esc_html__( 'Inside', 'alpus-flexbox' ),
						'custom'  => esc_html__( 'Custom', 'alpus-flexbox' ),
					),
					'prefix_class' => 'elementor-pagination-position-',
					'condition'    => array(
						'pagination!' => 'progressbar',
					),
				)
			);
			$this->add_control(
				'custom_dots_y',
				array(
					'label'      => esc_html__( 'Vertical Position', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => -100,
							'max' => 100,
							'step' => 5,
						],
						'%' => [
							'min' => -100,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .swiper-pagination-fraction,{{WRAPPER}} .swiper-pagination-custom,{{WRAPPER}} .' . $swiper_class . '-horizontal > .swiper-pagination-bullets' => 'bottom: {{SIZE}}{{UNIT}};',

],
					'condition' => array(
						'dots_position' => 'custom',
					),			
				)
			);
			$this->add_control(
				'custom_dots_x',
				array(
					'label'      => esc_html__( 'Horizontal Position', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
					'range' => [
						'px' => [
							'min' => -100,
							'max' => 100,
							'step' => 5,
						],
						'%' => [
							'min' => -100,
							'max' => 100,
						],
					],
					'default' => [
						'unit' => 'px',
						'size' => 10,
					],
					'selectors' => [
						'{{WRAPPER}} .swiper-pagination-fraction,{{WRAPPER}} .swiper-pagination-custom,{{WRAPPER}} .' . $swiper_class . '-horizontal > .swiper-pagination-bullets' => 'left: {{SIZE}}{{UNIT}};',
					],
					'condition' => array(
						'dots_position' => 'custom',
					),			
				)
			);

$this->add_control(
				'dots_size',
				array(
					'label'      => esc_html__( 'Size', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => array( 'px', 'em', 'rem', 'custom' ),
					'range' => array(
						'px' => array(
							'min' => 5,
							'max' => 15,
						),
					),
					'selectors' => array(
						'{{WRAPPER}} .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}',
						'{{WRAPPER}} .' . $swiper_class . '-horizontal .swiper-pagination-progressbar' => 'height: {{SIZE}}{{UNIT}}',
						'{{WRAPPER}} .swiper-pagination-fraction' => 'font-size: {{SIZE}}{{UNIT}}',
					),
				)
			);

$this->add_responsive_control(
				'dots_spacing',
				array(
					'label'      => esc_html__( 'Dots Spacing', 'alpus-flexbox' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => array( 'px', 'custom' ),
					'range'      => array(
						'px' => array(
							'max' => 100,
						),
					),
					'selectors' => array(
						'{{WRAPPER}}' => '--swiper-pagination-bullet-horizontal-gap: {{SIZE}}{{UNIT}};',
					),
					'condition' => array(
						'pagination' => array( 'bullets', 'dynamic' ),
					),
				)
			);

$this->start_controls_tabs( 'dots_tabs' );
				$this->start_controls_tab( 
					'dots_normal', 
					array( 
						'label' => esc_html__( 'Normal', 'alpus-flexbox' ) 
					) 
				);
					
					$this->add_control(
						'dots_bg_color',
						array(
							'label'     => esc_html__( 'Background Color', 'alpus-flexbox' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => array(
								// The opacity property will override the default inactive dot color which is opacity 0.2.
								'{{WRAPPER}} .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)' => 'background-color: {{VALUE}}; opacity: 1;',
								'{{WRAPPER}} .swiper-pagination-progressbar' => 'background-color: {{VALUE}};',
							),
							'condition' => array(
								'pagination!' => 'fraction',
							),							
						)
					);	
					$this->add_control(
						'dots_fraction_color',
						array(
							'label'     => esc_html__( 'Color', 'alpus-flexbox' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .swiper-pagination-fraction .swiper-pagination-total' => 'color: {{VALUE}}',
							),
							'condition' => array(
								'pagination' => 'fraction',
							),
						)
					);

$this->end_controls_tab();

$this->start_controls_tab( 
					'dots_hover', 
					array( 
						'label' => esc_html__( 'Hover', 'alpus-flexbox' ),
						'condition' => array(
							'pagination' => array( 'bullets', 'dynamic' ),
						),
					) 
				);
				
					$this->add_control(
						'dots_hover_bg_color',
						array(
							'label' => esc_html__( 'Hover Background Color', 'alpus-flexbox' ),
							'type'  => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .swiper-pagination-bullet:hover' => 'background-color: {{VALUE}}',
							),
						)
					);	
					$this->add_control(
						'dots_hover_transition',
						array(
							'label'     => esc_html__( 'Transition Speed', 'alpus-flexbox' ) . ' (s)',
							'type'      => Controls_Manager::NUMBER,
							'default'   => 0.3,
							'selectors' => array(
								'{{WRAPPER}} .swiper-pagination-bullet' => 'transition: {{VALUE}}s',
							),
						)
					);						
				
				$this->end_controls_tab();
			
				$this->start_controls_tab( 
					'dots_active', 
					array( 
						'label' => esc_html__( 'Active', 'alpus-flexbox' ) 
					) 
				);
					
					$this->add_control(
						'dots_active_bg_color',
						array(
							'label'     => esc_html__( 'Active Background Color', 'alpus-flexbox' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .swiper-pagination-bullet-active' => 'background-color: {{VALUE}}',
								'{{WRAPPER}} .swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => '--swiper-pagination-color: {{VALUE}};',
							),
							'condition' => array(
								'pagination!' => 'fraction',
							),
						)
					);	
					$this->add_control(
						'dots_active_fraction_color',
						array(
							'label'     => esc_html__( 'Active Color', 'alpus-flexbox' ),
							'type'      => Controls_Manager::COLOR,
							'selectors' => array(
								'{{WRAPPER}} .swiper-pagination-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
							),
							'condition' => array(
								'pagination' => 'fraction',
							),
						)
					);						
					
				$this->end_controls_tab();
			$this->end_controls_tabs();

$this->end_controls_section();
		
    }

private function render_swiper_button( $settings, $type ) {
		$icon_key = 'arrow_icon_' . $type;

Icons_Manager::render_icon( $settings[ $icon_key ], [ 'aria-hidden' => 'true' ] );
	}

protected function render() {
        $settings = $this->get_settings_for_display();
		if ( empty( $settings['slides'] ) ) {
			return;
		}
		$direction = is_rtl() ? 'rtl' : 'ltr';

$show_dots = ( in_array( $settings['navigation'], [ 'dots', 'both' ] ) );
		$show_arrows = ( in_array( $settings['navigation'], [ 'arrows', 'both' ] ) );

$slides_count = count( $settings['slides'] );
		$swiper_class = Plugin::$instance->experiments->is_feature_active( 'e_swiper_latest' ) ? 'swiper' : 'swiper-container';

$slides_html = '';
		foreach ( $settings['slides'] as $index => $slide ) {
			// Slide Content.
			ob_start();
			$this->print_child( $index );
			$slide_html = ob_get_clean();
			$slides_html .= '<div class="swiper-slide">' . $slide_html . '</div>';
		}
		?>
		<div class="elementor-swiper">
			<div class="elementor-slides-wrapper elementor-main-swiper <?php echo esc_attr( $swiper_class ); ?>" dir="<?php echo esc_attr( $direction ); ?>">
				<div class="swiper-wrapper elementor-slides alpus-nested-slider">
					<?php echo $slides_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
				</div>
				<?php if ( 1 < $slides_count ) : ?>
					<?php if ( $show_dots ) : ?>
						<div class="swiper-pagination"></div>
					<?php endif; ?>
					<?php if ( $show_arrows ) : ?>
						<div class="elementor-swiper-button elementor-swiper-button-prev">
							<?php $this->render_swiper_button( $settings, 'prev' ); ?>
							<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'alpus-flexbox' ); ?></span>
						</div>
						<div class="elementor-swiper-button elementor-swiper-button-next">
							<?php $this->render_swiper_button( $settings, 'next' ); ?>
							<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'alpus-flexbox' ); ?></span>
						</div>
					<?php endif; ?>
				<?php endif; ?>
			</div>
		</div>
		<?php
    }

protected function content_template() {
		?>
		<#
			var direction        = elementorFrontend.config.is_rtl ? 'rtl' : 'ltr',
				navi             = settings.navigation,
				showDots         = ( 'dots' === navi || 'both' === navi ),
				showArrows       = ( 'arrows' === navi || 'both' === navi ),
				buttonSize       = settings.button_size;
			var	prev = elementor.helpers.renderIcon( view, settings.arrow_icon_prev, { 'aria-hidden': true }, 'i' , 'object' ),
				next = elementor.helpers.renderIcon( view, settings.arrow_icon_next, { 'aria-hidden': true }, 'i' , 'object' );
		#>
		<div class="elementor-swiper">
			<div class="elementor-slides-wrapper elementor-main-swiper {{ elementorFrontend.config.swiperClass }}" dir="{{ direction }}">
				<div class="swiper-wrapper elementor-slides alpus-nested-slider">
				</div>
				<# if ( 1 < settings.slides.length ) { #>
					<# if ( showDots ) { #>
						<div class="swiper-pagination"></div>
					<# } #>
					<# if ( showArrows ) { #>
						<div class="elementor-swiper-button elementor-swiper-button-prev">
							{{{ prev.value }}}
							<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'alpus-flexbox' ); ?></span>
						</div>
						<div class="elementor-swiper-button elementor-swiper-button-next">
							{{{ next.value }}}
							<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'alpus-flexbox' ); ?></span>
						</div>
					<# } #>
				<# } #>

</div>
		</div>
		<?php
	}
}

Back to Directory File Manager