trAvis - MANAGER

Edit File: tp_cascading_image.php

<?php 
/*
Widget Name: Cascading Image/Text
Description: cascading multiple image/Text creative effects.
Author: Theplus
Author URI: https://posimyth.com
*/
namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Image_Size;

if (!defined('ABSPATH'))
    exit; // Exit if accessed directly

class ThePlus_Cascading_Image extends Widget_Base {
		
	public function get_name() {
		return 'tp-cascading-image';
	}

public function get_title() {
        return esc_html__('Image Cascading', 'theplus');
    }

public function get_icon() {
        return 'fa fa-object-group theplus_backend_icon';
    }

public function get_categories() {
        return array('plus-creatives');
    }

protected function _register_controls() {
		
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Image Cascading', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'layer_position',
			[
				'label' => esc_html__( 'Layer Position', 'theplus' ),
				'type' => Controls_Manager::HEADING,
			]
		);
		$repeater->start_controls_tabs( 'responsive_device' );
		$repeater->start_controls_tab( 'normal',
			[
				'label' => esc_html__( 'Desktop', 'theplus' ),
			]
		);
		/*desktop  start*/
		$repeater->add_control(
			'd_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);

$repeater->add_control(
			'd_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater->add_control(
			'd_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 40,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),				
			]
		);
		$repeater->add_control(
			'd_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
			]
		);
		$repeater->add_control(
			'd_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 20,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					'd_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'd_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => 150,
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'after',
			]
		);
		$repeater->end_controls_tab();
		/*desktop end*/
		/*tablet start*/
		$repeater->start_controls_tab( 'tablet',
			[
				'label' => esc_html__( 'Tablet', 'theplus' ),
			]
		);
		$repeater->add_control(
			't_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
			]
		);
		$repeater->add_control(
			't_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_left_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater->add_control(
			't_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_right_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],					
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
					't_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			't_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'separator' => 'after',
				'condition'    => [
					't_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		/*tablet end*/
		/*mobile start*/
		$repeater->start_controls_tab( 'mobile',
			[
				'label' => esc_html__( 'Mobile', 'theplus' ),
			]
		);
		$repeater->add_control(
			'm_responsive', [
				'label'   => esc_html__( 'Responsive Values', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( 'Yes', 'theplus' ),
				'label_off' => esc_html__( 'No', 'theplus' ),
			]
		);
		$repeater->add_control(
			'm_left_auto', [
				'label'   => esc_html__( 'Left (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_xposition', [
				'label' => esc_html__( 'Left', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_left_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_right_auto',[
				'label'   => esc_html__( 'Right (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_rightposition',[
				'label' => esc_html__( 'Right', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_right_auto' => [ 'yes' ],
				],
			]
		);
		
		$repeater->add_control(
			'm_top_auto', [
				'label'   => esc_html__( 'Top (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_yposition', [
				'label' => esc_html__( 'Top', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_top_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_bottom_auto', [
				'label'   => esc_html__( 'Bottom (Auto / %)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => esc_html__( '%', 'theplus' ),
				'label_off' => esc_html__( 'Auto', 'theplus' ),
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_bottomposition', [
				'label' => esc_html__( 'Bottom', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => '',
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 1,
					],
				],
				'condition'    => [
					'm_responsive' => [ 'yes' ],
					'm_bottom_auto' => [ 'yes' ],
				],
			]
		);
		$repeater->add_control(
			'm_pos_width',[
				'label' => esc_html__( 'Width', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => '',
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
						'step' => 2,
					],
				],
				'condition'    => [
					'm_responsive' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		/*mobile end*/
		$repeater->add_control(
			'select_option',[
				'label' => esc_html__( 'Layer Type','theplus' ),
				'type' => Controls_Manager::SELECT,
				'separator' => 'before',
				'default' => 'image',				
				'options' => [
					'image' => esc_html__( 'Image','theplus' ),
					'text' => esc_html__( 'Text Content','theplus' ),
				],
			]
		);
		$repeater->add_control(
			'multiple_image',[
				'label' => esc_html__( 'Image Select', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active'   => true,
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		
		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'image',
				'default' => 'full',
				'separator' => 'none',
				'separator' => 'after',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'text_content',
			[
				'label' => esc_html__( 'Text Content', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'ThePlus Addons', 'theplus' ),
				'dynamic' => [
					'active'   => true,
				],
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'text_content_typography',
				'label' => esc_html__( 'Text Typography', 'theplus' ),
				'scheme' => Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content a',
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		
		$repeater->add_control(
			'text_content_color',
			[
				'label' => esc_html__( 'Text Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content a' => 'color: {{VALUE}}',
				],
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_control(
			'text_content_hover_color',
			[
				'label' => esc_html__( 'Text Hover Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-text{{CURRENT_ITEM}}:hover .cascading-inner-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}}:hover .cascading-inner-content a' => 'color: {{VALUE}}',
				],
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'text_content_bg',
				'label' => esc_html__( 'Text Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'selector' => '{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content',
				'separator' => 'before',
				'dynamic' => [
					'active'   => true,
				],
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_control(
			'text_content_radius',
			[
				'label' => esc_html__( 'Border Radius', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors' => [
					'{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'text_content_shadow',
				'label' => esc_html__( 'Text Shadow', 'theplus' ),
				'selector' => '{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content',
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'text' ],
				],
			]
		);
		$repeater->add_control(
			'extra_options',[
				'label' => esc_html__( 'Extra Options', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);		
		$repeater->add_control(
			'image_effect',[
				'label' => esc_html__( 'Continues Effect','theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					'' => esc_html__( 'None','theplus' ),
					'pulse' => esc_html__( 'Pulse','theplus' ),
					'floating' => esc_html__( 'Floating','theplus' ),
					'tossing' => esc_html__( 'Tossing','theplus' ),
					'rotate-continue' => esc_html__( 'Rotating','theplus' ),
					'continue-scale' => esc_html__( 'Kenburns Scale','theplus' ),
					'hover-scale' => esc_html__( 'Hover Scale','theplus' ),
					'drop-waves' => esc_html__( 'Drop Waves','theplus' ),
					'hover-drop-waves' => esc_html__( 'Hover Drop Waves','theplus' ),
				],
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_control(
			'drop_waves_color',
			[
				'label' => esc_html__( 'Drop Wave Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content.drop-waves:after,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content.hover-drop-waves:after,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content.drop-waves:after,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content.hover-drop-waves:after' => 'background: {{VALUE}}'
				],
				'condition'    => [
					'select_option' => [ 'image','text' ],
					'image_effect' => [ 'drop-waves','hover-drop-waves' ],
				],
			]
		);
		$repeater->add_control(
			'mask_image_display',[
				'label'   => esc_html__( 'Mask Image Shape', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
				'description' => esc_html__('Use PNG image with the shape you want to mask around Media Image.', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_control(
			'mask_shape_image',
			[
				'label' => esc_html__( 'Mask Image', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => '',
				],
				'description' => esc_html__( 'Use PNG image with the shape you want to mask around feature image.', 'theplus' ),
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .cascading-inner-content' => 'mask-image: url({{URL}});-webkit-mask-image: url({{URL}});',
				],
				'condition' => [					
					'mask_image_display' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'mask_image_shadow',
			[
				'label' => esc_html__( 'Image Shadow', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'placeholder' => esc_html__( 'Ex. 1px 1px 4px rgba(0,0,0,0.75)', 'theplus' ),
				'description' => esc_html__( 'Ex. 1px 1px 4px rgba(0,0,0,0.75)', 'theplus' ),
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}},{{WRAPPER}} .cascading-text{{CURRENT_ITEM}}' => '-webkit-filter: drop-shadow({{VALUE}});-moz-filter: drop-shadow({{VALUE}});-ms-filter: drop-shadow({{VALUE}});-o-filter: drop-shadow({{VALUE}});filter: drop-shadow({{VALUE}});',
				],
				'render_type' => 'ui',
				'condition' => [					
					'mask_image_display' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'loop_magic_scroll',[
				'label'   => esc_html__( 'Magic Scroll', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_Option_Style_Group::get_type(),
			[
				'label' => esc_html__( 'Scroll Options', 'theplus' ),
				'name'           => 'loop_scroll_option',
				'render_type'  => 'template',
				'condition'    => [
					'loop_magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->start_controls_tabs( 'loop_tab_magic_scroll' );
		$repeater->start_controls_tab(
			'loop_tab_scroll_from',
			[
				'label' => esc_html__( 'Initial', 'theplus' ),
				'condition'    => [
					'loop_magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_From_Style_Group::get_type(),
			[
				'label' => esc_html__( 'Initial Position', 'theplus' ),
				'name'           => 'loop_scroll_from',
				'condition'    => [
					'loop_magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'loop_tab_scroll_to',
			[
				'label' => esc_html__( 'Final', 'theplus' ),
				'condition'    => [
					'loop_magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Magic_Scroll_To_Style_Group::get_type(),
			[
				'label' => esc_html__( 'Final Position', 'theplus' ),
				'name'           => 'loop_scroll_to',
				'condition'    => [
					'loop_magic_scroll' => [ 'yes' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$repeater->add_control(
			'plus_tooltip',
			[
				'label'        => esc_html__( 'Tooltip', 'theplus' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'theplus' ),
				'label_off'    => esc_html__( 'No', 'theplus' ),
				'separator' => 'before',
			]
		);

$repeater->start_controls_tabs( 'plus_tooltip_tabs' );

$repeater->start_controls_tab(
			'plus_tooltip_content_tab',
			[
				'label' => esc_html__( 'Content', 'theplus' ),
				'condition' => [
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'plus_tooltip_content_type',
			[
				'label' => esc_html__( 'Content Type', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'normal_desc',
				'options' => [
					'normal_desc'  => esc_html__( 'Content Text', 'theplus' ),
					'content_wysiwyg'  => esc_html__( 'Content WYSIWYG', 'theplus' ),
				],
				'condition' => [
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'plus_tooltip_content_desc',
			[
				'label' => esc_html__( 'Description', 'theplus' ),
				'type' => Controls_Manager::TEXTAREA,
				'rows' => 5,
				'default' => esc_html__( 'Luctus nec ullamcorper mattis', 'theplus' ),
				'condition' => [
					'plus_tooltip_content_type' => 'normal_desc',
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'plus_tooltip_content_wysiwyg',
			[
				'label' => esc_html__( 'Tooltip Content', 'theplus' ),
				'type' => Controls_Manager::WYSIWYG,
				'default' => esc_html__( 'Luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'theplus' ),
				'condition' => [
					'plus_tooltip_content_type' => 'content_wysiwyg',
					'plus_tooltip' => 'yes',
				],
			]				
		);
		$repeater->add_control(
			'plus_tooltip_content_align',
			[
				'label'   => esc_html__( 'Text Alignment', 'theplus' ),
				'type'    => Controls_Manager::CHOOSE,
				'default' => 'center',
				'options' => [
					'left'    => [
						'title' => esc_html__( 'Left', 'theplus' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'theplus' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'theplus' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .tippy-tooltip .tippy-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .tippy-tooltip .tippy-content' => 'text-align: {{VALUE}};',
				],
				'condition' => [
					'plus_tooltip_content_type' => 'normal_desc',
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'plus_tooltip_content_typography',
				'selector' => '{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .tippy-tooltip .tippy-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .tippy-tooltip .tippy-content',
				'condition' => [
					'plus_tooltip_content_type' => ['normal_desc','content_wysiwyg'],
					'plus_tooltip' => 'yes',
				],
			]
		);

$repeater->add_control(
			'plus_tooltip_content_color',
			[
				'label'  => esc_html__( 'Text Color', 'theplus' ),
				'type'   => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .tippy-tooltip .tippy-content,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .tippy-tooltip .tippy-content p,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .tippy-tooltip .tippy-content,{{WRAPPER}} .cascading-text{{CURRENT_ITEM}} .tippy-tooltip .tippy-content p' => 'color: {{VALUE}}',
				],
				'condition' => [
					'plus_tooltip_content_type' => ['normal_desc','content_wysiwyg'],
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->end_controls_tab();

$repeater->start_controls_tab(
			'plus_tooltip_styles_tab',
			[
				'label' => esc_html__( 'Style', 'theplus' ),
				'condition' => [
					'plus_tooltip' => 'yes',
				],
			]
		);
		$repeater->add_group_control(
			\Theplus_Tooltips_Option_Group::get_type(),
			array(
				'label' => esc_html__( 'Tooltip Options', 'theplus' ),
				'name'           => 'tooltip_opt',
				'render_type'  => 'template',
				'condition'    => [
					'plus_tooltip' => [ 'yes' ],
				],
			)
		);
		$repeater->add_group_control(
			\Theplus_Loop_Tooltips_Option_Style_Group::get_type(),
			array(
				'label' => esc_html__( 'Style Options', 'theplus' ),
				'name'           => 'tooltip_style',
				'render_type'  => 'template',
				'condition'    => [
					'plus_tooltip' => [ 'yes' ],
				],
			)
		);
		$repeater->end_controls_tab();

$repeater->end_controls_tabs();
		$repeater->add_control(
			'special_effect',[
				'label'   => esc_html__( 'Special Effect', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',				
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_control(
			'effect_color_1',[
				'label' => esc_html__('Effect Color 1', 'theplus'),
				'type' => Controls_Manager::COLOR,
				'default' => '#313131',
				'condition'    => [
					'special_effect' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'effect_color_2',[
				'label' => esc_html__('Effect Color 2', 'theplus'),
				'type' => Controls_Manager::COLOR,
				'default' => '#ff214f',
				'condition'    => [
					'special_effect' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'cascading_move_parallax',[
				'label'   => esc_html__( 'Parallax Move', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_control(
			'cascading_move_speed_x',[
				'label' => esc_html__( 'Move Parallax (X)', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 30,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'cascading_move_parallax' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'cascading_move_speed_y',[
				'label' => esc_html__( 'Move Parallax (Y)', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 30,
				],
				'range' => [
					'%' => [
						'min' => -100,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'cascading_move_parallax' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'hover_parallax',[
				'label'   => esc_html__( 'On Hover Tilt', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
				'condition'    => [
					'select_option' => [ 'image','text' ],
				],
			]
		);
		$repeater->add_control(
			'parallax_translatez',[
				'label' => esc_html__( 'TranslateZ', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => 'px',
					'size' => 30,
				],
				'range' => [
					'px' => [
						'min' => -100,
						'max' => 100,
						'step' => 2,
					],
				],
				'condition'    => [
					'hover_parallax' => 'yes',
				],
			]
		);
		$repeater->add_control(
            'link_option', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('Link /Popup', 'theplus'),
				'default' => '',
				'separator' => 'before',
				'options' => [
                    '' => esc_html__('Select Option', 'theplus'),
                    'normal_link' => esc_html__('Link', 'theplus'),
					'popup_link' => esc_html__('Popup', 'theplus'),
                ],	
			]
        );
		$repeater->add_control(
			'image_link',
			[
				'label' => esc_html__( 'Link', 'theplus' ),
				'type' => Controls_Manager::URL,
				'placeholder' => esc_html__( 'https://your-link.com', 'theplus' ),
				'show_external' => true,
				'default' => [
					'url' => '',
					'is_external' => true,
					'nofollow' => true,
				],
				'separator' => 'after',
				'condition' => [
					'link_option' => [ 'normal_link' ],
				],
			]
		);
		$repeater->add_control(
			'popup_content',
			[
				'label' => esc_html__( 'Popup Content', 'theplus' ),
				'type' => Controls_Manager::URL,
				'placeholder' => esc_html__( 'https://www.youtube.com/embed/2ReiWfKUxIM', 'theplus' ),
				'show_external' => false,
				'description' => esc_html__('Enter direct link of Youtube,Vimeo, Google Map or any other.', 'theplus'),
				'separator' => 'after',
				'default' => [
					'url' => '',
					'is_external' => false,
					'nofollow' => true,
				],
				'separator' => 'after',
				'condition' => [
					'link_option' => [ 'popup_link' ],
				],
			]
		);
		$repeater->start_controls_tabs( 'nav_shadow_style' );
		$repeater->start_controls_tab(
			'nav_shadow_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'overlay_background',
			[
				'label' => esc_html__( 'Overlay Background', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content:after' => 'background: {{VALUE}}'
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'img_shadow',
				'selector' => '{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-image-inner',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'opacity_normal',[
				'label' => esc_html__( 'Opacity', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 1,
				],
				'range' => [
					'%' => [
						'max' => 1,
						'min' => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}' => 'opacity: {{SIZE}};',
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'transform_css',
			[
				'label' => esc_html__( 'Transform css', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'placeholder' => esc_html__( 'rotate(10deg) scale(1.1)', 'theplus' ),
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};transform-style: preserve-3d;-ms-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;'
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-image-inner,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content:after,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content.drop-waves:after,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content.hover-drop-waves:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'after',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'nav_shadow_active',
			[
				'label' => esc_html__( 'Hover', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'hover_overlay_background',
			[
				'label' => esc_html__( 'Overlay Background', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}} .cascading-inner-content:hover:after' => 'background: {{VALUE}}'
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'img_hover_shadow',
				'selector' => '{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'opacity_hover',[
				'label' => esc_html__( 'Hover Opacity', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'unit' => '%',
					'size' => 1,
				],
				'range' => [
					'%' => [
						'max' => 1,
						'min' => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover' => 'opacity: {{SIZE}};',
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'transform_hover_css',
			[
				'label' => esc_html__( 'Transform Hover css', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'placeholder' => esc_html__( 'rotate(10deg) scale(1.1)', 'theplus' ),
				'selectors' => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};'
				],
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'border_radius_hover',
			[
				'label'      => esc_html__( 'Border Radius Hover', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover .cascading-inner-content:after,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover .cascading-inner-content.drop-waves:after,{{WRAPPER}} .cascading-image{{CURRENT_ITEM}}:hover .cascading-inner-content.hover-drop-waves:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'after',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$repeater->add_control(
			'responsive_visible_opt',[
				'label'   => esc_html__( 'Responsive Visibility', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'separator' => 'before',
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),	
				'default' => 'no',
				'condition'    => [
					'select_option' => [ 'image' ],
				],
			]
		);
		$repeater->add_control(
			'desktop_opt',[
				'label'   => esc_html__( 'Desktop', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image' ],
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'tablet_opt',[
				'label'   => esc_html__( 'Tablet', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image' ],
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		$repeater->add_control(
			'mobile_opt',[
				'label'   => esc_html__( 'Mobile', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'condition'    => [
					'select_option' => [ 'image' ],
					'responsive_visible_opt' => 'yes',
				],
			]
		);
		
		$this->add_control(
            'image_cascading',
            [
				'label' => esc_html__( 'Add Multiple Cascading Sections', 'theplus' ),
                'type' => Controls_Manager::REPEATER,
				'description' => 'Add Cascading Sections with Positions.',
                'default' => [
                    [
                        'select_option' => 'image',                       
                    ],
                ],                
				'fields' => $repeater->get_controls(),
                'title_field' => '{{{select_option}}}',
            ]
        );
		
		$this->end_controls_section();
		$this->start_controls_section(
			'styling_section',
			[
				'label' => esc_html__( 'Styling', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);	
		$this->add_responsive_control(
			'min_height',
			[
				'label' => esc_html__( 'Minimum Height', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'default' => [
					'size' => 400,
				],
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 1000,
					],
				],
				'separator' => 'after',
				'selectors' => [
					'{{WRAPPER}} .pt_plus_animated_image.cascading-block' => 'min-height:{{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_control(
			'slide_show',
			[
				'label'   => esc_html__( 'Slide Show', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
			]
		);
		$this->add_control(
            'slide_change_opt', [
				'type' => Controls_Manager::SELECT,
				'label' => esc_html__('SlideShow Type', 'theplus'),
				'default' => 'onclick',
				'options' => [
                    'onclick' => esc_html__('On Click', 'theplus'),
                    'setinterval' => esc_html__('Autoplay', 'theplus'),
                ],
				'condition' => [
					'slide_show' => [ 'yes' ],
				],		
			]
        );
		$this->add_control(
            'interval_time',
            [
                'type' => Controls_Manager::TEXT,
				'label' => esc_html__('Autoplay Duration', 'theplus'),
				'default' => 4000,
				'condition' => [
					'slide_show' => [ 'yes' ],
					'slide_change_opt' => [ 'setinterval' ],
				],
            ]
        );
		$this->add_control(
			'section_overflow_desktop',
			[
				'label'   => esc_html__( 'Overflow Hidden (Desktop)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
				'separator' => 'before',
				'description' => esc_html__('You can setup over flow hidden option if your section is going our and having unwanted scrollbar.','theplus'),
			]
		);
		$this->add_control(
			'section_overflow_tablet',
			[
				'label'   => esc_html__( 'Overflow Hidden (Tablet)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
			]
		);
		$this->add_control(
			'section_overflow_mobile',
			[
				'label'   => esc_html__( 'Overflow Hidden (Mobile)', 'theplus' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'no',
			]
		);
		$this->end_controls_section();
	}
	 protected function render() {
		$overflow_attr='';
		$settings = $this->get_settings_for_display();	
		$uid_cascading=uniqid("cascading_");
		$uid=uniqid("slide"); $attr=$wrapperClass='';
		
		$overflow_attr .=(!empty($settings["section_overflow_desktop"]) && $settings["section_overflow_desktop"]=='yes') ? ' data-overflow-desktop="yes"' : '';
		$overflow_attr .=(!empty($settings["section_overflow_tablet"]) && $settings["section_overflow_tablet"]=='yes') ? ' data-overflow-tablet="yes"' : '';
		$overflow_attr .=(!empty($settings["section_overflow_mobile"]) && $settings["section_overflow_mobile"]=='yes') ? ' data-overflow-mobile="yes"' : '';
			if(!empty($settings["slide_show"]) && $settings["slide_show"]=='yes'){
				$wrapperClass .=' slide_show_image '.esc_attr($uid);
				$attr .=' data-play="'.esc_attr($settings["slide_change_opt"]).'"';
				$attr .=' data-uid="'.esc_attr($uid).'"';
				$attr .=' data-interval_time="'.esc_attr($settings["interval_time"]).'"';						
			}
				/*--------------cascading image ----------------------------*/
				$cascading_loop=$css_loop=$hover_tilt='';
				$ij=0;
				if(!empty($settings['image_cascading'])) {
						$position='';
						$effects='';
						$animate_speed='';
						$cascading_move_parallax=$move_parallax_attr=$parallax_move='';
						
					foreach($settings['image_cascading'] as $item) {
						
						$visiblity_hide='';
						if(!empty($item['responsive_visible_opt']) && $item['responsive_visible_opt']=='yes'){
							$visiblity_hide .= (($item['desktop_opt']!='yes' && $item['desktop_opt']=='') ? 'hide-desktop ' : '' );							
							$visiblity_hide .= (($item['tablet_opt']!='yes' && $item['tablet_opt']=='') ? 'hide-tablet ' : '' );
							$visiblity_hide .= (($item['mobile_opt']!='yes' && $item['mobile_opt']=='') ? 'hide-mobile ' : '' );
						}
						
						$mask_image='';
						if(!empty($item["mask_image_display"]) && $item["mask_image_display"]=='yes'){
							$mask_image=' creative-mask-media';
						}						
						$image_effect='';
						if(!empty($item['image_effect'])){
							$image_effect=$item['image_effect'];
						}
						$magic_class = $magic_attr = $parallax_scroll = '';
						if (!empty($item['loop_magic_scroll']) && $item['loop_magic_scroll'] == 'yes') {
							
							if(empty($item["loop_scroll_option_popover_toggle"])){
								$scroll_offset=0;
								$scroll_duration=300;
							}else{
								$scroll_offset	 = (isset($item['loop_scroll_option_scroll_offset']) ? $item['loop_scroll_option_scroll_offset'] : 0 );
								$scroll_duration = (isset($item['loop_scroll_option_scroll_duration']) ? $item['loop_scroll_option_scroll_duration'] : 300 );
							}
							if(empty($item["loop_scroll_from_popover_toggle"])){
								$scroll_x_from=0;
								$scroll_y_from=0;
								$scroll_opacity_from=1;
								$scroll_scale_from=1;
								$scroll_rotate_from=0;
							}else{
								$scroll_x_from = (isset($item['loop_scroll_from_scroll_x_from']) ? $item['loop_scroll_from_scroll_x_from'] : 0 );
								$scroll_y_from = (isset($item['loop_scroll_from_scroll_y_from']) ? $item['loop_scroll_from_scroll_y_from'] : 0 );
								$scroll_opacity_from = (isset($item['loop_scroll_from_scroll_opacity_from']) ? $item['loop_scroll_from_scroll_opacity_from'] : 1 );
								$scroll_scale_from 	= (isset($item['loop_scroll_from_scroll_scale_from']) ? $item['loop_scroll_from_scroll_scale_from'] : 1 );
								$scroll_rotate_from = (isset($item['loop_scroll_from_scroll_rotate_from']) ? $item['loop_scroll_from_scroll_rotate_from'] : 0 );
							}
							if($item["loop_scroll_to_popover_toggle"]==''){
								$scroll_x_to=0;
								$scroll_y_to=-50;
								$scroll_opacity_to=1;
								$scroll_scale_to=1;
								$scroll_rotate_to=0;
							}else{
								$scroll_x_to = (isset($item['loop_scroll_to_scroll_x_to']) ? $item['loop_scroll_to_scroll_x_to'] : 0 );
								$scroll_y_to = (isset($item['loop_scroll_to_scroll_y_to']) ? $item['loop_scroll_to_scroll_y_to'] : -50 );
								$scroll_opacity_to = (isset($item['loop_scroll_to_scroll_opacity_to']) ? $item['loop_scroll_to_scroll_opacity_to'] : 1 );
								$scroll_scale_to = (isset($item['loop_scroll_to_scroll_scale_to']) ? $item['loop_scroll_to_scroll_scale_to'] : 1 );
								$scroll_rotate_to = (isset($item['loop_scroll_to_scroll_rotate_to']) ? $item['loop_scroll_to_scroll_rotate_to'] : 0 );
							}
							$magic_attr .= ' data-scroll_type="position" ';
							$magic_attr .= ' data-scroll_offset="' . esc_attr($scroll_offset) . '" ';
							$magic_attr .= ' data-scroll_duration="' . esc_attr($scroll_duration) . '" ';
							
							$magic_attr .= ' data-scroll_x_from="' . esc_attr($scroll_x_from) . '" ';
							$magic_attr .= ' data-scroll_x_to="' . esc_attr($scroll_x_to) . '" ';
							$magic_attr .= ' data-scroll_y_from="' . esc_attr($scroll_y_from) . '" ';
							$magic_attr .= ' data-scroll_y_to="' . esc_attr($scroll_y_to) . '" ';
							$magic_attr .= ' data-scroll_opacity_from="' . esc_attr($scroll_opacity_from) . '" ';
							$magic_attr .= ' data-scroll_opacity_to="' . esc_attr($scroll_opacity_to) . '" ';
							$magic_attr .= ' data-scroll_scale_from="' . esc_attr($scroll_scale_from) . '" ';
							$magic_attr .= ' data-scroll_scale_to="' . esc_attr($scroll_scale_to) . '" ';
							$magic_attr .= ' data-scroll_rotate_from="' . esc_attr($scroll_rotate_from) . '" ';
							$magic_attr .= ' data-scroll_rotate_to="' . esc_attr($scroll_rotate_to) . '" ';
							
							$parallax_scroll .= ' parallax-scroll ';							
							$magic_class .= ' magic-scroll ';
						}
						$_tooltip = '_tooltip' . $ij;
						if( $item['plus_tooltip'] == 'yes' ) {
							
							$this->add_render_attribute( $_tooltip, 'data-tippy', '', true );

if (!empty($item['plus_tooltip_content_type']) && $item['plus_tooltip_content_type']=='normal_desc') {
								$this->add_render_attribute( $_tooltip, 'title', $item['plus_tooltip_content_desc'], true );
							}else if (!empty($item['plus_tooltip_content_type']) && $item['plus_tooltip_content_type']=='content_wysiwyg') {
								$tooltip_content=$item['plus_tooltip_content_wysiwyg'];
								$this->add_render_attribute( $_tooltip, 'title', $tooltip_content, true );
							}
							
							$plus_tooltip_position=(!empty($item["tooltip_opt_plus_tooltip_position"])) ? $item["tooltip_opt_plus_tooltip_position"] : 'top';
							$this->add_render_attribute( $_tooltip, 'data-tippy-placement', $plus_tooltip_position, true );
							
							$tooltip_interactive =(isset($item["tooltip_opt_plus_tooltip_interactive"]) && $item["tooltip_opt_plus_tooltip_interactive"]=='yes') ? 'true' : 'false';
							$this->add_render_attribute( $_tooltip, 'data-tippy-interactive', $tooltip_interactive, true );
							
							$plus_tooltip_theme=(!empty($item["tooltip_opt_plus_tooltip_theme"])) ? $item["tooltip_opt_plus_tooltip_theme"] : 'dark';
							$this->add_render_attribute( $_tooltip, 'data-tippy-theme', $plus_tooltip_theme, true );
							
							
							$tooltip_arrow =($item["tooltip_opt_plus_tooltip_arrow"]!='none' || empty($item["tooltip_opt_plus_tooltip_arrow"])) ? 'true' : 'false';
							$this->add_render_attribute( $_tooltip, 'data-tippy-arrow', $tooltip_arrow , true );
							
							$plus_tooltip_arrow=(!empty($item["tooltip_opt_plus_tooltip_arrow"])) ? $item["tooltip_opt_plus_tooltip_arrow"] : 'sharp';
							$this->add_render_attribute( $_tooltip, 'data-tippy-arrowtype', $plus_tooltip_arrow, true );
							
							$plus_tooltip_animation=(!empty($item["tooltip_opt_plus_tooltip_animation"])) ? $item["tooltip_opt_plus_tooltip_animation"] : 'shift-toward';
							$this->add_render_attribute( $_tooltip, 'data-tippy-animation', $plus_tooltip_animation, true );
							
							$plus_tooltip_x_offset=(!empty($item["tooltip_opt_plus_tooltip_x_offset"])) ? $item["tooltip_opt_plus_tooltip_x_offset"] : 0;
							$plus_tooltip_y_offset=(!empty($item["tooltip_opt_plus_tooltip_y_offset"])) ? $item["tooltip_opt_plus_tooltip_y_offset"] : 0;
							$this->add_render_attribute( $_tooltip, 'data-tippy-offset', $plus_tooltip_x_offset .','. $plus_tooltip_y_offset, true );
							
							$tooltip_duration_in =(!empty($item["tooltip_opt_plus_tooltip_duration_in"])) ? $item["tooltip_opt_plus_tooltip_duration_in"] : 250;
							$tooltip_duration_out =(!empty($item["tooltip_opt_plus_tooltip_duration_out"])) ? $item["tooltip_opt_plus_tooltip_duration_out"] : 200;
							$tooltip_trigger =(!empty($item["tooltip_opt_plus_tooltip_triggger"])) ? $item["tooltip_opt_plus_tooltip_triggger"] : 'mouseenter';
							$tooltip_arrowtype =(!empty($item["tooltip_opt_plus_tooltip_arrow"])) ? $item["tooltip_opt_plus_tooltip_arrow"] : 'sharp';
						}
						$rand_no=rand(1000000, 1500000);
						
						if(!empty($item['hover_parallax']) && $item['hover_parallax']=='yes'){
							$css_loop .='.parallax-hover-'.esc_js($rand_no).'{-webkit-transform:translateZ('.esc_js($item["parallax_translatez"]["size"].$item["parallax_translatez"]["unit"]).') !important;-ms-transform:translateZ('.esc_js($item["parallax_translatez"]["size"].$item["parallax_translatez"]["unit"]).') !important;-moz-transform:translateZ('.esc_js($item["parallax_translatez"]["size"].$item["parallax_translatez"]["unit"]).') !important;-o-transform:translateZ('.esc_js($item["parallax_translatez"]["size"].$item["parallax_translatez"]["unit"]).') !important; transform: translateZ('.esc_js($item["parallax_translatez"]["size"].$item["parallax_translatez"]["unit"]).') !important;}';		
						}
						
						$move_parallax_attr=$parallax_move='';
						if(!empty($item['cascading_move_parallax']) && $item['cascading_move_parallax']=='yes' ){
							$cascading_move_parallax='pt-plus-move-parallax';
							$parallax_move='parallax-move';
							if(!empty($item['cascading_move_speed_x']['size'])){
								$move_parallax_attr .= ' data-move_speed_x="' . esc_attr($item['cascading_move_speed_x']['size']) . '" ';
							}else{
								$move_parallax_attr .= ' data-move_speed_x="0" ';
							}
							if(!empty($item['cascading_move_speed_y']['size'])){
								$move_parallax_attr .= ' data-move_speed_y="' . esc_attr($item['cascading_move_speed_y']['size']) . '" ';
							}else{
								$move_parallax_attr .= ' data-move_speed_y="0" ';
							}
						}
						$reveal_effects=$effect_attr='';
							if(!empty($item['special_effect']) && $item['special_effect']=='yes'){
								$effect_rand_no =uniqid('reveal');
								$effect_attr .=' data-reveal-id="'.esc_attr($effect_rand_no).'" ';
								if(!empty($item['effect_color_1'])){
									$effect_attr .=' data-effect-color-1="'.esc_attr($item['effect_color_1']).'" ';
								}else{
									$effect_attr .=' data-effect-color-1="#313131" ';
								}
								if(!empty($item['effect_color_2'])){
									$effect_attr .=' data-effect-color-2="'.esc_attr($item['effect_color_2']).'" ';
								}else{
									$effect_attr .=' data-effect-color-2="#ff214f" ';
								}
								$reveal_effects=' pt-plus-reveal '.esc_attr($effect_rand_no).' ';
							}
						$target=$nofollow=$urllink='';
						$uimg_id=uniqid("img").esc_attr($ij);
						$uid_loop=uniqid("cascading");
						if($item['select_option']=='image'){
							if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
								$link_class="link-content";
							}else{
								$link_class='not-link-content';	
							}
							if(!empty($item['multiple_image']['id'])){
								$multiple_image=$item['multiple_image']['id'];
								$imgSrc = tp_get_image_rander( $multiple_image,$item['image_size'], [ 'class' => 'parallax_image' ] );
								$content_image =$imgSrc;					
								
								$cascading_loop .= '<div id="'.esc_attr($uid_loop).esc_attr($ij).'" class="cascading-image elementor-repeater-item-' . $item['_id'] . ' '.esc_attr($uimg_id).' '.esc_attr($visiblity_hide).' ' . esc_attr($magic_class) . ' '.esc_attr($parallax_move).'" '.$this->get_render_attribute_string( $_tooltip ).' '.$move_parallax_attr.'>';
									$cascading_loop .= '<div class="cascading-image-inner ' . esc_attr($parallax_scroll) . '" ' . $magic_attr . '>';
										$cic_bg = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['text_content_bg_image']) : '';
										$cascading_loop .= '<div class="cascading-inner-content parallax-hover-'.esc_attr($rand_no).' '.$image_effect.' '.esc_attr($reveal_effects).' '.esc_attr($link_class).' '.esc_attr($mask_image).' '.$cic_bg.'" '.$effect_attr.'>';
											if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
												$data_popup='';
												if($item['link_option']=='popup_link'){
													$data_popup='data-lity=""';
												}
												if(!empty($item['popup_content']['url']) && $item['link_option']=='popup_link'){
													$target = $item['popup_content']['is_external'] ? '' : '';
													$nofollow = $item['popup_content']['nofollow'] ? ' rel="nofollow"' : '';
													$urllink = $item['popup_content']['url'];
												}
												
												if(!empty($item['image_link']['url']) && $item['link_option']=='normal_link'){
													$target = $item['image_link']['is_external'] ? ' target="_blank"' : '';
													$nofollow = $item['image_link']['nofollow'] ? ' rel="nofollow"' : '';
													$urllink = $item['image_link']['url'];
												}
												$cascading_loop .= '<a href="'.esc_url($urllink).'" '.$target.$nofollow.' '.$data_popup.'>';
											}
												$cascading_loop .=$content_image;
											if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
												$cascading_loop .= '</a>';
											}
										$cascading_loop .='</div>';
									$cascading_loop .='</div>';
								$cascading_loop .='</div>';
								
							}	
						}
						if($item['select_option']=='text'){
							//if(!empty($item['text_content'])){
								$text_content=$item['text_content'];
								if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
									$link_class="link-content";
								}else{
									$link_class='not-link-content';	
								}
								$cascading_loop .= '<div id="'.esc_attr($uid_loop).esc_attr($ij).'" class="cascading-text elementor-repeater-item-' . $item['_id'] . ' '.esc_attr($uimg_id).' '.esc_attr($visiblity_hide).' ' . esc_attr($magic_class) . ' '.esc_attr($parallax_move).'" '.$this->get_render_attribute_string( $_tooltip ).' '.$move_parallax_attr.'>';
									$cascading_loop .= '<div class="cascading-image-inner ' . esc_attr($parallax_scroll) . '" ' . $magic_attr . '>';
										$cic_bg1 = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['text_content_bg_image']) : '';
										$cascading_loop .= '<div class="cascading-inner-content parallax-hover-'.esc_attr($rand_no).' '.$image_effect.' '.esc_attr($reveal_effects).' '.esc_attr($link_class).' '.esc_attr($mask_image).' '.$cic_bg1.'" '.$effect_attr.'>';
											if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
												$data_popup='';
												if($item['link_option']=='popup_link'){
													$data_popup='data-lity=""';
												}
												if($item['popup_content']['url']!='' && $item['link_option']=='popup_link'){
													$target = $item['popup_content']['is_external'] ? '' : '';
													$nofollow = $item['popup_content']['nofollow'] ? ' rel="nofollow"' : '';
													$urllink = $item['popup_content']['url'];
												}
												
												if($item['image_link']['url']!='' && $item['link_option']=='normal_link'){
													$target = $item['image_link']['is_external'] ? ' target="_blank"' : '';
													$nofollow = $item['image_link']['nofollow'] ? ' rel="nofollow"' : '';
													$urllink = $item['image_link']['url'];
												}
												$cascading_loop .= '<a href="'.esc_url($urllink).'" '.$target.$nofollow.' '.$data_popup.'>';
											}
												$cascading_loop .=$text_content;
											if($item['link_option']=='normal_link' || $item['link_option']=='popup_link'){
												$cascading_loop .= '</a>';
											}
										$cascading_loop .='</div>';
									$cascading_loop .='</div>';
								$cascading_loop .='</div>';
							//}							
						}
							$inline_tippy_js='';
							if($item['plus_tooltip'] == 'yes'){
								$inline_tippy_js ='jQuery( document ).ready(function() {
								"use strict";
									if(typeof tippy === "function"){
										tippy( "#'.esc_attr($uid_loop).esc_attr($ij).'" , {
											arrowType : "'.esc_attr($tooltip_arrowtype).'",
											duration : ['.esc_attr($tooltip_duration_in).','.esc_attr($tooltip_duration_out).'],
											trigger : "'.esc_attr($tooltip_trigger).'",
											appendTo: document.querySelector("#'.esc_attr($uid_loop).esc_attr($ij).'")
										});
									}
								});';
								$cascading_loop .= wp_print_inline_script_tag($inline_tippy_js);
							}
							$rpos='auto';$bpos='auto';$ypos='auto';$xpos='auto';
								if($item['d_left_auto']=='yes'){
									if(!empty($item['d_pos_xposition']['size']) || $item['d_pos_xposition']['size']=='0'){
										$xpos=$item['d_pos_xposition']['size'].$item['d_pos_xposition']['unit'];
									}
								}
								if($item['d_top_auto']=='yes'){
									if(!empty($item['d_pos_yposition']['size']) || $item['d_pos_yposition']['size']=='0'){
										$ypos=$item['d_pos_yposition']['size'].$item['d_pos_yposition']['unit'];
									}
								}
								if($item['d_bottom_auto']=='yes'){
									if(!empty($item['d_pos_bottomposition']['size']) || $item['d_pos_bottomposition']['size']=='0'){
										$bpos=$item['d_pos_bottomposition']['size'].$item['d_pos_bottomposition']['unit'];
									}
								}
								if($item['d_right_auto']=='yes'){
									if(!empty($item['d_pos_rightposition']['size']) || $item['d_pos_rightposition']['size']=='0'){
										$rpos=$item['d_pos_rightposition']['size'].$item['d_pos_rightposition']['unit'];
									}
								}
								$d_max_width='';
								if($item['d_pos_width']['size']){
									$width=$item['d_pos_width']['size'].$item['d_pos_width']['unit'];
									$d_max_width='max-width:'.esc_attr( $width ).';';
								}
								if($item['select_option']=='image'){
									$css_loop.='.cascading-image.'.esc_attr($uimg_id).'{top:'.esc_attr($ypos).';bottom:'.esc_attr($bpos).';left:'.esc_attr($xpos).';right:'.esc_attr($rpos).';'.$d_max_width.'margin: 0 auto;}';
								}
								if($item['select_option']=='text'){
									$css_loop.='.cascading-text.'.esc_attr($uimg_id).'{top:'.esc_attr($ypos).';bottom:'.esc_attr($bpos).';left:'.esc_attr($xpos).';right:'.esc_attr($rpos).';'.$d_max_width.'margin: 0 auto;}';
								}
							if(!empty($item['t_responsive']) && $item['t_responsive']=='yes'){
								$tablet_xpos='auto';$tablet_ypos='auto';$tablet_bpos='auto';$tablet_rpos='auto';
								if($item['t_left_auto']=='yes'){
									if(!empty($item['t_pos_xposition']['size']) || $item['t_pos_xposition']['size']=='0'){
										$tablet_xpos=$item['t_pos_xposition']['size'].$item['t_pos_xposition']['unit'];
									}
								}
								if($item['t_top_auto']=='yes'){
									if(!empty($item['t_pos_yposition']['size']) || $item['t_pos_yposition']['size']=='0'){
										$tablet_ypos=$item['t_pos_yposition']['size'].$item['t_pos_yposition']['unit'];
									}
								}
								if($item['t_bottom_auto']=='yes'){
									if(!empty($item['t_pos_bottomposition']['size']) || $item['t_pos_bottomposition']['size']=='0'){
										$tablet_bpos=$item['t_pos_bottomposition']['size'].$item['t_pos_bottomposition']['unit'];
									}
								}
								if($item['t_right_auto']=='yes'){
									if(!empty($item['t_pos_rightposition']['size']) || $item['t_pos_rightposition']['size']=='0'){
										$tablet_rpos=$item['t_pos_rightposition']['size'].$item['t_pos_rightposition']['unit'];
									}
								}
								$t_max_width='';
								if($item['t_pos_width']['size']){
									$width=$item['t_pos_width']['size'].$item['t_pos_width']['unit'];
									$t_max_width='max-width:'.esc_attr( $width ).';';
								}
								if($item['select_option']=='image'){
									$css_loop.='@media (min-width:601px) and (max-width:990px){.cascading-image.'.esc_attr($uimg_id).'{top:'.esc_attr($tablet_ypos).';bottom:'.esc_attr($tablet_bpos).';left:'.esc_attr($tablet_xpos).';right:'.esc_attr($tablet_rpos).';'.$t_max_width.'margin: 0 auto;}}';
								}
								if($item['select_option']=='text'){
									$css_loop.='@media (min-width:601px) and (max-width:990px){.cascading-text.'.esc_attr($uimg_id).'{top:'.esc_attr($tablet_ypos).';bottom:'.esc_attr($tablet_bpos).';left:'.esc_attr($tablet_xpos).';right:'.esc_attr($tablet_rpos).';'.$t_max_width.'margin: 0 auto;}}';
								}
							}
							if(!empty($item['m_responsive']) && $item['m_responsive']=='yes'){
								$mobile_xpos='auto';$mobile_ypos='auto';$mobile_bpos='auto';$mobile_rpos='auto';
								if($item['m_left_auto']=='yes'){
									if(!empty($item['m_pos_xposition']['size']) || $item['m_pos_xposition']['size']=='0'){
										$mobile_xpos=$item['m_pos_xposition']['size'].$item['m_pos_xposition']['unit'];
									}
								}
								if($item['m_top_auto']=='yes'){
									if(!empty($item['m_pos_yposition']['size']) || $item['m_pos_yposition']['size']=='0'){
										$mobile_ypos=$item['m_pos_yposition']['size'].$item['m_pos_yposition']['unit'];
									}
								}
								if($item['m_bottom_auto']=='yes'){
									if(!empty($item['m_pos_bottomposition']['size']) || $item['m_pos_bottomposition']['size']=='0'){
										$mobile_bpos=$item['m_pos_bottomposition']['size'].$item['m_pos_bottomposition']['unit'];
									}
								}
								if($item['m_right_auto']=='yes'){
									if(!empty($item['m_pos_rightposition']['size']) || $item['m_pos_rightposition']['size']=='0'){
										$mobile_rpos=$item['m_pos_rightposition']['size'].$item['m_pos_rightposition']['unit'];
									}
								}
								$m_max_width='';
								if($item['m_pos_width']['size']){
									$width=$item['m_pos_width']['size'].$item['m_pos_width']['unit'];
									$m_max_width='max-width:'.esc_attr( $width ).';';
								}
								if($item['select_option']=='image'){
									$css_loop.='@media (max-width:600px){.cascading-image.'.esc_attr($uimg_id).'{top:'.esc_attr($mobile_ypos).';bottom:'.esc_attr(	$mobile_bpos).';left:'.esc_attr($mobile_xpos).';right:'.esc_attr($mobile_rpos).';'.$m_max_width.'margin: 0 auto;}}';
								}
								if($item['select_option']=='text'){
									$css_loop.='@media (max-width:600px){.cascading-text.'.esc_attr($uimg_id).'{top:'.esc_attr($mobile_ypos).';bottom:'.esc_attr(	$mobile_bpos).';left:'.esc_attr($mobile_xpos).';right:'.esc_attr($mobile_rpos).';'.$m_max_width.'margin: 0 auto;}}';
								}
							}
							
						if(!empty($item['hover_parallax']) && $item['hover_parallax']=='yes'){
							$hover_tilt='hover-tilt';
						}
						$ij++;
					}
				}
			/*--------------cascading image ----------------------------*/
			
			
			$output = '<div class="pt_plus_animated_image cascading-block  wpb_single_image '.esc_attr($uid_cascading).' ' . $wrapperClass . ' '.esc_attr($cascading_move_parallax).' '.esc_attr($hover_tilt).'" '.$attr.' '.$overflow_attr.'>';
			$output .= '<div class="cascading-inner-loop ">';
				$output .=$cascading_loop;
				$output .='</div>';
			$output .='</div>';
			$css_loop='<style>'.$css_loop.'</style>';
		echo $output.$css_loop;
	}
    protected function content_template() {
	
    }
}