start_controls_section( 'boka_slider_section_id', [ 'label' => __( 'Setting', 'boka' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'heading_alignment', [ 'label' => __( 'Text Alignment', 'boka' ), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'boka' ), 'icon' => 'fa fa-align-left', ], 'center' => [ 'title' => __( 'Center', 'boka' ), 'icon' => 'fa fa-align-center', ], 'right' => [ 'title' => __( 'Right', 'boka' ), 'icon' => 'fa fa-align-right', ], ], 'default' => 'center', 'toggle' => true, ] ); $repeater->add_control( 'text_position', [ 'label' => __( 'Text Position', 'boka' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => '0 auto', 'options' => array( 'auto auto auto 0' => __( 'Text Left', 'boka' ), '0 auto' => __( 'Text Center', 'boka' ), 'auto 0 auto auto' => __( 'Text Right', 'boka' ), ) ] ); $repeater->add_control( 'CameraSlider_image', [ 'label' => __( 'Slide Image', 'boka' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src(), ] ] ); $repeater->add_control( 'CameraSlider_title_color', [ 'label' => __( 'Title Color', 'boka' ), 'type' => \Elementor\Controls_Manager::COLOR, 'scheme' => [ 'type' => \Elementor\Scheme_Color::get_type(), 'value' => \Elementor\Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .camera-slider-inner h1' => 'color: {{VALUE}}', ], ] ); $repeater->add_control( 'title_animation', [ 'label' => __( 'Title Animation', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'slideInUp', 'boka' ), 'description' => __( 'Take an Animation code and put in field', 'boka' ) ] ); $repeater->add_control( 'CameraSlider_title', [ 'label' => __( 'Title', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXT ] ); $repeater->add_control( 'CameraSlider_subtitle_color', [ 'label' => __( 'Content Color', 'boka' ), 'type' => \Elementor\Controls_Manager::COLOR, 'scheme' => [ 'type' => \Elementor\Scheme_Color::get_type(), 'value' => \Elementor\Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .camera-slider-inner p' => 'color: {{VALUE}}', ], ] ); $repeater->add_control( 'content_animation', [ 'label' => __( 'Content Animation', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'slideInUp', 'boka' ), 'description' => __( 'Take an Animation code and put in field', 'boka' ) ] ); $repeater->add_control( 'CameraSlider_subtitle', [ 'label' => __( 'Content', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXTAREA ] ); $repeater->add_control( 'color', [ 'label' => __( 'Button Text Color', 'boka' ), 'type' => \Elementor\Controls_Manager::COLOR, 'scheme' => [ 'type' => \Elementor\Scheme_Color::get_type(), 'value' => \Elementor\Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .camera-slider-inner .btn' => 'color: {{VALUE}}', ], ] ); $repeater->add_control( 'bgColor', [ 'label' => __( 'Button BG Color', 'boka' ), 'type' => \Elementor\Controls_Manager::COLOR, 'scheme' => [ 'type' => \Elementor\Scheme_Color::get_type(), 'value' => \Elementor\Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .camera-slider-inner .btn' => 'color: {{VALUE}}', ], ] ); $repeater->add_control( 'btn_animation', [ 'label' => __( 'Button Animation', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXT, 'default' => __( 'slideInUp', 'boka' ), 'description' => __( 'Take an Animation code and put in field', 'boka' ) ] ); $repeater->add_control( 'CameraSlider_button_text', [ 'label' => __( 'Button Text', 'boka' ), 'type' => \Elementor\Controls_Manager::TEXT ] ); $repeater->add_control( 'CameraSlider_button_url', [ 'label' => __( 'Button URL', 'boka' ), 'type' => \Elementor\Controls_Manager::URL, 'placeholder' => __( 'https://your-link.com', 'boka' ), 'show_external' => true, 'default' => [ 'url' => '#', 'is_external' => true, 'nofollow' => true, ], ] ); $this->add_control( 'list', [ 'label' => __( 'SLIDER ITEMS', 'boka' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'CameraSlider_title' => __( 'Slider Header', 'boka' ) ] ], 'title_field' => '{{{ CameraSlider_title }}}', ] ); $this->add_control( 'slider_settings_divider', [ 'label' => __( 'SETTINGS', 'boka' ), 'type' => \Elementor\Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'height', [ 'label' => __( 'Slider Height', 'boka' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ '%' ], 'range' => [ '%' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => 50, ], 'selectors' => [ '{{WRAPPER}} .boka-camera-slider' => 'height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'loader', [ 'type' => \Elementor\Controls_Manager::SELECT, 'label' => __( 'Loader', 'boka' ), 'default' => __( 'bar' , 'boka' ), 'options' => array( 'none' => __( 'none', 'boka' ), 'bar' => __( 'bar', 'boka' ), 'pie' => __( 'pie', 'boka' ), ), 'label_block' => true, ] ); $this->add_control( 'barPosition', [ 'type' => \Elementor\Controls_Manager::SELECT, 'label' => __( 'Bar Position', 'boka' ), 'default' => __( 'bottom' , 'boka' ), 'options' => array( 'left' => __( 'left', 'boka' ), 'right' => __( 'right', 'boka' ), 'top' => __( 'top', 'boka' ), 'bottom' => __( 'bottom', 'boka' ), ), 'label_block' => true, ] ); $this->end_controls_section(); } /** * Render oEmbed widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); ?>

<# if ( settings.list.length ) { #>
<# _.each( settings.list, function( item ) { #> <# var image = { id: item.CameraSlider_image.id, url: item.CameraSlider_image.url, size: item.thumbnail_size, dimension: item.thumbnail_custom_dimension, model: view.getEditModel() }; var image_url = elementor.imagesManager.getImageUrl( image ); #>
<# if ( item.CameraSlider_title ) { #>

{{ item.CameraSlider_title }}

<# } #> <# if ( item.CameraSlider_subtitle ) { #>

{{ item.CameraSlider_subtitle }}

<# } #> <# if ( item.CameraSlider_button_text ) { #> <# var target = item.CameraSlider_button_url.is_external ? ' target="_blank"' : ''; var nofollow = item.CameraSlider_button_url.nofollow ? ' rel="nofollow"' : ''; #>
{{ item.CameraSlider_button_text }}
<# } #>
<# }); #>
<# } #> widgets_manager->register_widget_type( new Boka_Main_Slider() );