856 lines
22 KiB
PHP
856 lines
22 KiB
PHP
|
<?php
|
||
|
namespace Elementor;
|
||
|
|
||
|
use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
|
||
|
use Elementor\Modules\DynamicTags\Module as TagsModule;
|
||
|
|
||
|
if ( ! defined( 'ABSPATH' ) ) {
|
||
|
exit; // Exit if accessed directly.
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Elementor background control.
|
||
|
*
|
||
|
* A base control for creating background control. Displays input fields to define
|
||
|
* the background color, background image, background gradient or background video.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
*/
|
||
|
class Group_Control_Background extends Group_Control_Base {
|
||
|
|
||
|
/**
|
||
|
* Fields.
|
||
|
*
|
||
|
* Holds all the background control fields.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access protected
|
||
|
* @static
|
||
|
*
|
||
|
* @var array Background control fields.
|
||
|
*/
|
||
|
protected static $fields;
|
||
|
|
||
|
/**
|
||
|
* Background Types.
|
||
|
*
|
||
|
* Holds all the available background types.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access private
|
||
|
* @static
|
||
|
*
|
||
|
* @var array
|
||
|
*/
|
||
|
private static $background_types;
|
||
|
|
||
|
/**
|
||
|
* Get background control type.
|
||
|
*
|
||
|
* Retrieve the control type, in this case `background`.
|
||
|
*
|
||
|
* @since 1.0.0
|
||
|
* @access public
|
||
|
* @static
|
||
|
*
|
||
|
* @return string Control type.
|
||
|
*/
|
||
|
public static function get_type() {
|
||
|
return 'background';
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get background control types.
|
||
|
*
|
||
|
* Retrieve available background types.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access public
|
||
|
* @static
|
||
|
*
|
||
|
* @return array Available background types.
|
||
|
*/
|
||
|
public static function get_background_types() {
|
||
|
if ( null === self::$background_types ) {
|
||
|
self::$background_types = self::get_default_background_types();
|
||
|
}
|
||
|
|
||
|
return self::$background_types;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get Default background types.
|
||
|
*
|
||
|
* Retrieve background control initial types.
|
||
|
*
|
||
|
* @since 2.0.0
|
||
|
* @access private
|
||
|
* @static
|
||
|
*
|
||
|
* @return array Default background types.
|
||
|
*/
|
||
|
private static function get_default_background_types() {
|
||
|
return [
|
||
|
'classic' => [
|
||
|
'title' => esc_html__( 'Classic', 'elementor' ),
|
||
|
'icon' => 'eicon-paint-brush',
|
||
|
],
|
||
|
'gradient' => [
|
||
|
'title' => esc_html__( 'Gradient', 'elementor' ),
|
||
|
'icon' => 'eicon-barcode',
|
||
|
],
|
||
|
'video' => [
|
||
|
'title' => esc_html__( 'Video', 'elementor' ),
|
||
|
'icon' => 'eicon-video-camera',
|
||
|
],
|
||
|
'slideshow' => [
|
||
|
'title' => esc_html__( 'Slideshow', 'elementor' ),
|
||
|
'icon' => 'eicon-slideshow',
|
||
|
],
|
||
|
];
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Init fields.
|
||
|
*
|
||
|
* Initialize background control fields.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access public
|
||
|
*
|
||
|
* @return array Control fields.
|
||
|
*/
|
||
|
public function init_fields() {
|
||
|
$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
|
||
|
|
||
|
$location_device_args = [];
|
||
|
$location_device_defaults = [
|
||
|
'default' => [
|
||
|
'unit' => '%',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$angel_device_args = [];
|
||
|
$angel_device_defaults = [
|
||
|
'default' => [
|
||
|
'unit' => 'deg',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$position_device_args = [];
|
||
|
$position_device_defaults = [
|
||
|
'default' => 'center center',
|
||
|
];
|
||
|
|
||
|
foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
|
||
|
$location_device_args[ $breakpoint_name ] = $location_device_defaults;
|
||
|
$angel_device_args[ $breakpoint_name ] = $angel_device_defaults;
|
||
|
$position_device_args[ $breakpoint_name ] = $position_device_defaults;
|
||
|
}
|
||
|
|
||
|
$fields = [];
|
||
|
|
||
|
$fields['background'] = [
|
||
|
'label' => esc_html__( 'Background Type', 'elementor' ),
|
||
|
'type' => Controls_Manager::CHOOSE,
|
||
|
'render_type' => 'ui',
|
||
|
];
|
||
|
|
||
|
$fields['gradient_notice'] = [
|
||
|
'type' => Controls_Manager::ALERT,
|
||
|
'alert_type' => 'warning',
|
||
|
'content' => esc_html__( 'Set locations and angle for each breakpoint to ensure the gradient adapts to different screen sizes.', 'elementor' ),
|
||
|
'render_type' => 'ui',
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['color'] = [
|
||
|
'label' => esc_html__( 'Color', 'elementor' ),
|
||
|
'type' => Controls_Manager::COLOR,
|
||
|
'default' => '',
|
||
|
'title' => esc_html__( 'Background Color', 'elementor' ),
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-color: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic', 'gradient', 'video' ],
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['color_stop'] = [
|
||
|
'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'size_units' => [ '%', 'custom' ],
|
||
|
'default' => [
|
||
|
'unit' => '%',
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'device_args' => $location_device_args,
|
||
|
'responsive' => true,
|
||
|
'render_type' => 'ui',
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['color_b'] = [
|
||
|
'label' => esc_html__( 'Second Color', 'elementor' ),
|
||
|
'type' => Controls_Manager::COLOR,
|
||
|
'default' => '#f2295b',
|
||
|
'render_type' => 'ui',
|
||
|
'control_type' => 'content',
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['color_b_stop'] = [
|
||
|
'label' => esc_html_x( 'Location', 'Background Control', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'size_units' => [ '%', 'custom' ],
|
||
|
'default' => [
|
||
|
'unit' => '%',
|
||
|
'size' => 100,
|
||
|
],
|
||
|
'device_args' => $location_device_args,
|
||
|
'responsive' => true,
|
||
|
'render_type' => 'ui',
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['gradient_type'] = [
|
||
|
'label' => esc_html_x( 'Type', 'Background Control', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'options' => [
|
||
|
'linear' => esc_html__( 'Linear', 'elementor' ),
|
||
|
'radial' => esc_html__( 'Radial', 'elementor' ),
|
||
|
],
|
||
|
'default' => 'linear',
|
||
|
'render_type' => 'ui',
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['gradient_angle'] = [
|
||
|
'label' => esc_html__( 'Angle', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
|
||
|
'default' => [
|
||
|
'unit' => 'deg',
|
||
|
'size' => 180,
|
||
|
],
|
||
|
'device_args' => $angel_device_args,
|
||
|
'responsive' => true,
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-color: transparent; background-image: linear-gradient({{SIZE}}{{UNIT}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
'gradient_type' => 'linear',
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['gradient_position'] = [
|
||
|
'label' => esc_html__( 'Position', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'options' => [
|
||
|
'center center' => esc_html__( 'Center Center', 'elementor' ),
|
||
|
'center left' => esc_html__( 'Center Left', 'elementor' ),
|
||
|
'center right' => esc_html__( 'Center Right', 'elementor' ),
|
||
|
'top center' => esc_html__( 'Top Center', 'elementor' ),
|
||
|
'top left' => esc_html__( 'Top Left', 'elementor' ),
|
||
|
'top right' => esc_html__( 'Top Right', 'elementor' ),
|
||
|
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
|
||
|
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
|
||
|
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
|
||
|
],
|
||
|
'default' => 'center center',
|
||
|
'device_args' => $position_device_args,
|
||
|
'responsive' => true,
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-color: transparent; background-image: radial-gradient(at {{VALUE}}, {{color.VALUE}} {{color_stop.SIZE}}{{color_stop.UNIT}}, {{color_b.VALUE}} {{color_b_stop.SIZE}}{{color_b_stop.UNIT}})',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'gradient' ],
|
||
|
'gradient_type' => 'radial',
|
||
|
],
|
||
|
'of_type' => 'gradient',
|
||
|
];
|
||
|
|
||
|
$fields['image'] = [
|
||
|
'label' => esc_html__( 'Image', 'elementor' ),
|
||
|
'type' => Controls_Manager::MEDIA,
|
||
|
'ai' => [
|
||
|
'category' => 'background',
|
||
|
],
|
||
|
'dynamic' => [
|
||
|
'active' => true,
|
||
|
],
|
||
|
'responsive' => true,
|
||
|
'title' => esc_html__( 'Background Image', 'elementor' ),
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-image: url("{{URL}}");',
|
||
|
],
|
||
|
'has_sizes' => true,
|
||
|
'render_type' => 'template',
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['position'] = [
|
||
|
'label' => esc_html__( 'Position', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => '',
|
||
|
'separator' => 'before',
|
||
|
'responsive' => true,
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'center center' => esc_html__( 'Center Center', 'elementor' ),
|
||
|
'center left' => esc_html__( 'Center Left', 'elementor' ),
|
||
|
'center right' => esc_html__( 'Center Right', 'elementor' ),
|
||
|
'top center' => esc_html__( 'Top Center', 'elementor' ),
|
||
|
'top left' => esc_html__( 'Top Left', 'elementor' ),
|
||
|
'top right' => esc_html__( 'Top Right', 'elementor' ),
|
||
|
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
|
||
|
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
|
||
|
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
|
||
|
'initial' => esc_html__( 'Custom', 'elementor' ),
|
||
|
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-position: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['xpos'] = [
|
||
|
'label' => esc_html__( 'X Position', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'responsive' => true,
|
||
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
||
|
'default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'tablet_default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'mobile_default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'range' => [
|
||
|
'px' => [
|
||
|
'min' => -800,
|
||
|
'max' => 800,
|
||
|
],
|
||
|
'em' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
'%' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
'vw' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-position: {{SIZE}}{{UNIT}} {{ypos.SIZE}}{{ypos.UNIT}}',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'position' => [ 'initial' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
'required' => true,
|
||
|
];
|
||
|
|
||
|
$fields['ypos'] = [
|
||
|
'label' => esc_html__( 'Y Position', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'responsive' => true,
|
||
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
|
||
|
'default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'tablet_default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'mobile_default' => [
|
||
|
'size' => 0,
|
||
|
],
|
||
|
'range' => [
|
||
|
'px' => [
|
||
|
'min' => -800,
|
||
|
'max' => 800,
|
||
|
],
|
||
|
'em' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
'%' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
'vh' => [
|
||
|
'min' => -100,
|
||
|
'max' => 100,
|
||
|
],
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-position: {{xpos.SIZE}}{{xpos.UNIT}} {{SIZE}}{{UNIT}}',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'position' => [ 'initial' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
'required' => true,
|
||
|
];
|
||
|
|
||
|
$fields['attachment'] = [
|
||
|
'label' => esc_html_x( 'Attachment', 'Background Control', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => '',
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'scroll' => esc_html_x( 'Scroll', 'Background Control', 'elementor' ),
|
||
|
'fixed' => esc_html_x( 'Fixed', 'Background Control', 'elementor' ),
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'(desktop+){{SELECTOR}}' => 'background-attachment: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['attachment_alert'] = [
|
||
|
'type' => Controls_Manager::RAW_HTML,
|
||
|
'content_classes' => 'elementor-control-field-description',
|
||
|
'raw' => esc_html__( 'Note: Attachment Fixed works only on desktop.', 'elementor' ),
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'image[url]!' => '',
|
||
|
'attachment' => 'fixed',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['repeat'] = [
|
||
|
'label' => esc_html_x( 'Repeat', 'Background Control', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => '',
|
||
|
'responsive' => true,
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
|
||
|
'repeat' => esc_html__( 'Repeat', 'elementor' ),
|
||
|
'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
|
||
|
'repeat-y' => esc_html__( 'Repeat-y', 'elementor' ),
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-repeat: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['size'] = [
|
||
|
'label' => esc_html__( 'Display Size', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'responsive' => true,
|
||
|
'default' => '',
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'auto' => esc_html__( 'Auto', 'elementor' ),
|
||
|
'cover' => esc_html__( 'Cover', 'elementor' ),
|
||
|
'contain' => esc_html__( 'Contain', 'elementor' ),
|
||
|
'initial' => esc_html__( 'Custom', 'elementor' ),
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-size: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['bg_width'] = [
|
||
|
'label' => esc_html__( 'Width', 'elementor' ),
|
||
|
'type' => Controls_Manager::SLIDER,
|
||
|
'responsive' => true,
|
||
|
'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
|
||
|
'range' => [
|
||
|
'px' => [
|
||
|
'max' => 1000,
|
||
|
],
|
||
|
],
|
||
|
'default' => [
|
||
|
'size' => 100,
|
||
|
'unit' => '%',
|
||
|
],
|
||
|
'required' => true,
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background-size: {{SIZE}}{{UNIT}} auto',
|
||
|
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'classic' ],
|
||
|
'size' => [ 'initial' ],
|
||
|
'image[url]!' => '',
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['video_link'] = [
|
||
|
'label' => esc_html__( 'Video Link', 'elementor' ),
|
||
|
'type' => Controls_Manager::TEXT,
|
||
|
'placeholder' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
|
||
|
'description' => esc_html__( 'YouTube/Vimeo link, or link to video file (mp4 is recommended).', 'elementor' ),
|
||
|
'label_block' => true,
|
||
|
'default' => '',
|
||
|
'dynamic' => [
|
||
|
'active' => true,
|
||
|
'categories' => [
|
||
|
TagsModule::POST_META_CATEGORY,
|
||
|
TagsModule::URL_CATEGORY,
|
||
|
],
|
||
|
],
|
||
|
'ai' => [
|
||
|
'active' => false,
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['video_start'] = [
|
||
|
'label' => esc_html__( 'Start Time', 'elementor' ),
|
||
|
'type' => Controls_Manager::NUMBER,
|
||
|
'description' => esc_html__( 'Specify a start time (in seconds)', 'elementor' ),
|
||
|
'placeholder' => 10,
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['video_end'] = [
|
||
|
'label' => esc_html__( 'End Time', 'elementor' ),
|
||
|
'type' => Controls_Manager::NUMBER,
|
||
|
'description' => esc_html__( 'Specify an end time (in seconds)', 'elementor' ),
|
||
|
'placeholder' => 70,
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['play_once'] = [
|
||
|
'label' => esc_html__( 'Play Once', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['play_on_mobile'] = [
|
||
|
'label' => esc_html__( 'Play On Mobile', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
// This control was added to handle a bug with the Youtube Embed API. The bug: If there is a video with Privacy
|
||
|
// Mode on, and at the same time the page contains another video WITHOUT privacy mode on, one of the videos
|
||
|
// will not run properly. This added control allows users to align all their videos to one host (either
|
||
|
// youtube.com or youtube-nocookie.com, depending on whether the user wants privacy mode on or not).
|
||
|
$fields['privacy_mode'] = [
|
||
|
'label' => esc_html__( 'Privacy Mode', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['video_fallback'] = [
|
||
|
'label' => esc_html__( 'Background Fallback', 'elementor' ),
|
||
|
'description' => esc_html__( 'This cover image will replace the background video in case that the video could not be loaded.', 'elementor' ),
|
||
|
'type' => Controls_Manager::MEDIA,
|
||
|
'dynamic' => [
|
||
|
'active' => true,
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'video' ],
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{SELECTOR}}' => 'background: url("{{URL}}") 50% 50%; background-size: cover;',
|
||
|
],
|
||
|
'of_type' => 'video',
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_gallery'] = [
|
||
|
'label' => esc_html__( 'Images', 'elementor' ),
|
||
|
'type' => Controls_Manager::GALLERY,
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'show_label' => false,
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_loop'] = [
|
||
|
'label' => esc_html__( 'Infinite Loop', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'default' => 'yes',
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_slide_duration'] = [
|
||
|
'label' => esc_html__( 'Duration', 'elementor' ) . ' (ms)',
|
||
|
'type' => Controls_Manager::NUMBER,
|
||
|
'default' => 5000,
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_slide_transition'] = [
|
||
|
'label' => esc_html__( 'Transition', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => 'fade',
|
||
|
'options' => [
|
||
|
'fade' => 'Fade',
|
||
|
'slide_right' => 'Slide Right',
|
||
|
'slide_left' => 'Slide Left',
|
||
|
'slide_up' => 'Slide Up',
|
||
|
'slide_down' => 'Slide Down',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_transition_duration'] = [
|
||
|
'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (ms)',
|
||
|
'type' => Controls_Manager::NUMBER,
|
||
|
'default' => 500,
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_background_size'] = [
|
||
|
'label' => esc_html__( 'Background Size', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'responsive' => true,
|
||
|
'default' => '',
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'auto' => esc_html__( 'Auto', 'elementor' ),
|
||
|
'cover' => esc_html__( 'Cover', 'elementor' ),
|
||
|
'contain' => esc_html__( 'Contain', 'elementor' ),
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-size: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_background_position'] = [
|
||
|
'label' => esc_html__( 'Background Position', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => '',
|
||
|
'responsive' => true,
|
||
|
'options' => [
|
||
|
'' => esc_html__( 'Default', 'elementor' ),
|
||
|
'center center' => esc_html__( 'Center Center', 'elementor' ),
|
||
|
'center left' => esc_html__( 'Center Left', 'elementor' ),
|
||
|
'center right' => esc_html__( 'Center Right', 'elementor' ),
|
||
|
'top center' => esc_html__( 'Top Center', 'elementor' ),
|
||
|
'top left' => esc_html__( 'Top Left', 'elementor' ),
|
||
|
'top right' => esc_html__( 'Top Right', 'elementor' ),
|
||
|
'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
|
||
|
'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
|
||
|
'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
|
||
|
],
|
||
|
'selectors' => [
|
||
|
'{{WRAPPER}} .elementor-background-slideshow__slide__image' => 'background-position: {{VALUE}};',
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_lazyload'] = [
|
||
|
'label' => esc_html__( 'Lazyload', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'separator' => 'before',
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_ken_burns'] = [
|
||
|
'label' => esc_html__( 'Ken Burns Effect', 'elementor' ),
|
||
|
'type' => Controls_Manager::SWITCHER,
|
||
|
'separator' => 'before',
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
],
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
$fields['slideshow_ken_burns_zoom_direction'] = [
|
||
|
'label' => esc_html__( 'Direction', 'elementor' ),
|
||
|
'type' => Controls_Manager::SELECT,
|
||
|
'default' => 'in',
|
||
|
'options' => [
|
||
|
'in' => esc_html__( 'In', 'elementor' ),
|
||
|
'out' => esc_html__( 'Out', 'elementor' ),
|
||
|
],
|
||
|
'condition' => [
|
||
|
'background' => [ 'slideshow' ],
|
||
|
'slideshow_ken_burns!' => '',
|
||
|
],
|
||
|
'of_type' => 'slideshow',
|
||
|
'frontend_available' => true,
|
||
|
];
|
||
|
|
||
|
return $fields;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get child default args.
|
||
|
*
|
||
|
* Retrieve the default arguments for all the child controls for a specific group
|
||
|
* control.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access protected
|
||
|
*
|
||
|
* @return array Default arguments for all the child controls.
|
||
|
*/
|
||
|
protected function get_child_default_args() {
|
||
|
return [
|
||
|
'types' => [ 'classic', 'gradient' ],
|
||
|
'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background), {{WRAPPER}} > .elementor-motion-effects-container > .elementor-motion-effects-layer',
|
||
|
];
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Filter fields.
|
||
|
*
|
||
|
* Filter which controls to display, using `include`, `exclude`, `condition`
|
||
|
* and `of_type` arguments.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access protected
|
||
|
*
|
||
|
* @return array Control fields.
|
||
|
*/
|
||
|
protected function filter_fields() {
|
||
|
$fields = parent::filter_fields();
|
||
|
|
||
|
$args = $this->get_args();
|
||
|
|
||
|
foreach ( $fields as &$field ) {
|
||
|
if ( isset( $field['of_type'] ) && ! in_array( $field['of_type'], $args['types'] ) ) {
|
||
|
unset( $field );
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return $fields;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Prepare fields.
|
||
|
*
|
||
|
* Process background control fields before adding them to `add_control()`.
|
||
|
*
|
||
|
* @since 1.2.2
|
||
|
* @access protected
|
||
|
*
|
||
|
* @param array $fields Background control fields.
|
||
|
*
|
||
|
* @return array Processed fields.
|
||
|
*/
|
||
|
protected function prepare_fields( $fields ) {
|
||
|
$args = $this->get_args();
|
||
|
|
||
|
$background_types = self::get_background_types();
|
||
|
|
||
|
$choose_types = [];
|
||
|
|
||
|
foreach ( $args['types'] as $type ) {
|
||
|
if ( isset( $background_types[ $type ] ) ) {
|
||
|
$choose_types[ $type ] = $background_types[ $type ];
|
||
|
}
|
||
|
}
|
||
|
|
||
|
$fields['background']['options'] = $choose_types;
|
||
|
|
||
|
return parent::prepare_fields( $fields );
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Get default options.
|
||
|
*
|
||
|
* Retrieve the default options of the background control. Used to return the
|
||
|
* default options while initializing the background control.
|
||
|
*
|
||
|
* @since 1.9.0
|
||
|
* @access protected
|
||
|
*
|
||
|
* @return array Default background control options.
|
||
|
*/
|
||
|
protected function get_default_options() {
|
||
|
return [
|
||
|
'popover' => false,
|
||
|
];
|
||
|
}
|
||
|
}
|