You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1443 lines
33 KiB
1443 lines
33 KiB
<?php
|
|
namespace Elementor;
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly.
|
|
}
|
|
|
|
/**
|
|
* Elementor section element class.
|
|
*
|
|
* Elementor repeater handler class is responsible for initializing the section
|
|
* element.
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
class Element_Section extends Element_Base {
|
|
|
|
/**
|
|
* Section edit tools.
|
|
*
|
|
* Holds the section edit tools.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
* @static
|
|
*
|
|
* @var array Section edit tools.
|
|
*/
|
|
protected static $_edit_tools;
|
|
|
|
/**
|
|
* Section predefined columns presets.
|
|
*
|
|
* Holds the predefined columns width for each columns count available by
|
|
* default by Elementor. Default is an empty array.
|
|
*
|
|
* Note that when the user creates a section he can define custom sizes for
|
|
* the columns. But Elementor sets default values for predefined columns.
|
|
*
|
|
* For example two columns 50% width each one, or three columns 33.33% each
|
|
* one. This property hold the data for those preset values.
|
|
*
|
|
* @since 1.0.0
|
|
* @access private
|
|
* @static
|
|
*
|
|
* @var array Section presets.
|
|
*/
|
|
private static $presets = [];
|
|
|
|
/**
|
|
* Get default edit tools.
|
|
*
|
|
* Retrieve the section default edit tools. Used to set initial tools.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
* @static
|
|
*
|
|
* @return array Default section edit tools.
|
|
*/
|
|
protected static function get_default_edit_tools() {
|
|
$section_label = __( 'Section', 'elementor' );
|
|
|
|
return [
|
|
'duplicate' => [
|
|
'title' => sprintf( __( 'Duplicate %s', 'elementor' ), $section_label ),
|
|
'icon' => 'clone',
|
|
],
|
|
'add' => [
|
|
'title' => sprintf( __( 'Add %s', 'elementor' ), $section_label ),
|
|
'icon' => 'plus',
|
|
],
|
|
'save' => [
|
|
'title' => sprintf( __( 'Save %s', 'elementor' ), $section_label ),
|
|
'icon' => 'save',
|
|
],
|
|
'remove' => [
|
|
'title' => sprintf( __( 'Remove %s', 'elementor' ), $section_label ),
|
|
'icon' => 'close',
|
|
],
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Get section name.
|
|
*
|
|
* Retrieve the section name.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Section name.
|
|
*/
|
|
public function get_name() {
|
|
return 'section';
|
|
}
|
|
|
|
/**
|
|
* Get section title.
|
|
*
|
|
* Retrieve the section title.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Section title.
|
|
*/
|
|
public function get_title() {
|
|
return __( 'Section', 'elementor' );
|
|
}
|
|
|
|
/**
|
|
* Get section icon.
|
|
*
|
|
* Retrieve the section icon.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Section icon.
|
|
*/
|
|
public function get_icon() {
|
|
return 'eicon-columns';
|
|
}
|
|
|
|
/**
|
|
* Get presets.
|
|
*
|
|
* Retrieve a specific preset columns for a given columns count, or a list
|
|
* of all the preset if no parameters passed.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
* @static
|
|
*
|
|
* @param int $columns_count Optional. Columns count. Default is null.
|
|
* @param int $preset_index Optional. Preset index. Default is null.
|
|
*
|
|
* @return array Section presets.
|
|
*/
|
|
public static function get_presets( $columns_count = null, $preset_index = null ) {
|
|
if ( ! self::$presets ) {
|
|
self::init_presets();
|
|
}
|
|
|
|
$presets = self::$presets;
|
|
|
|
if ( null !== $columns_count ) {
|
|
$presets = $presets[ $columns_count ];
|
|
}
|
|
|
|
if ( null !== $preset_index ) {
|
|
$presets = $presets[ $preset_index ];
|
|
}
|
|
|
|
return $presets;
|
|
}
|
|
|
|
/**
|
|
* Initialize presets.
|
|
*
|
|
* Initializing the section peresets and set the number of columents the
|
|
* section can have by default. For example a columnt can have two columns
|
|
* 50% width each one, or three columns 33.33% each one.
|
|
*
|
|
* Note that Elementor sections have default section presets but the user
|
|
* can set custom number of columens and define custom sizes for each column.
|
|
|
|
* @since 1.0.0
|
|
* @access public
|
|
* @static
|
|
*/
|
|
public static function init_presets() {
|
|
$additional_presets = [
|
|
2 => [
|
|
[
|
|
'preset' => [ 33, 66 ],
|
|
],
|
|
[
|
|
'preset' => [ 66, 33 ],
|
|
],
|
|
],
|
|
3 => [
|
|
[
|
|
'preset' => [ 25, 25, 50 ],
|
|
],
|
|
[
|
|
'preset' => [ 50, 25, 25 ],
|
|
],
|
|
[
|
|
'preset' => [ 25, 50, 25 ],
|
|
],
|
|
[
|
|
'preset' => [ 16, 66, 16 ],
|
|
],
|
|
],
|
|
];
|
|
|
|
foreach ( range( 1, 10 ) as $columns_count ) {
|
|
self::$presets[ $columns_count ] = [
|
|
[
|
|
'preset' => [],
|
|
],
|
|
];
|
|
|
|
$preset_unit = floor( 1 / $columns_count * 100 );
|
|
|
|
for ( $i = 0; $i < $columns_count; $i++ ) {
|
|
self::$presets[ $columns_count ][0]['preset'][] = $preset_unit;
|
|
}
|
|
|
|
if ( ! empty( $additional_presets[ $columns_count ] ) ) {
|
|
self::$presets[ $columns_count ] = array_merge( self::$presets[ $columns_count ], $additional_presets[ $columns_count ] );
|
|
}
|
|
|
|
foreach ( self::$presets[ $columns_count ] as $preset_index => & $preset ) {
|
|
$preset['key'] = $columns_count . $preset_index;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get initial config.
|
|
*
|
|
* Retrieve the current section initial configuration.
|
|
*
|
|
* Adds more configuration on top of the controls list, the tabs assignet to
|
|
* the control, element name, type, icon and more. This method also adds
|
|
* section presets.
|
|
*
|
|
* @since 1.0.10
|
|
* @access protected
|
|
*
|
|
* @return array The initial config.
|
|
*/
|
|
protected function _get_initial_config() {
|
|
$config = parent::_get_initial_config();
|
|
|
|
$config['presets'] = self::get_presets();
|
|
|
|
return $config;
|
|
}
|
|
|
|
/**
|
|
* Register section controls.
|
|
*
|
|
* Used to add new controls to the section element.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
*/
|
|
protected function _register_controls() {
|
|
|
|
$this->start_controls_section(
|
|
'section_layout',
|
|
[
|
|
'label' => __( 'Layout', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_LAYOUT,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'stretch_section',
|
|
[
|
|
'label' => __( 'Stretch Section', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'return_value' => 'section-stretched',
|
|
'prefix_class' => 'elementor-',
|
|
'render_type' => 'template',
|
|
'hide_in_inner' => true,
|
|
'description' => __( 'Stretch the section to the full width of the page using JS.', 'elementor' ) . sprintf( ' <a href="%s" target="_blank">%s</a>', 'https://go.elementor.com/stretch-section/', __( 'Learn more.', 'elementor' ) ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'layout',
|
|
[
|
|
'label' => __( 'Content Width', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'boxed',
|
|
'options' => [
|
|
'boxed' => __( 'Boxed', 'elementor' ),
|
|
'full_width' => __( 'Full Width', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'elementor-section-',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'content_width',
|
|
[
|
|
'label' => __( 'Content Width', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 500,
|
|
'max' => 1600,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-container' => 'max-width: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'layout' => [ 'boxed' ],
|
|
],
|
|
'show_label' => false,
|
|
'separator' => 'none',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'gap',
|
|
[
|
|
'label' => __( 'Columns Gap', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'default',
|
|
'options' => [
|
|
'default' => __( 'Default', 'elementor' ),
|
|
'no' => __( 'No Gap', 'elementor' ),
|
|
'narrow' => __( 'Narrow', 'elementor' ),
|
|
'extended' => __( 'Extended', 'elementor' ),
|
|
'wide' => __( 'Wide', 'elementor' ),
|
|
'wider' => __( 'Wider', 'elementor' ),
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'height',
|
|
[
|
|
'label' => __( 'Height', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'default',
|
|
'options' => [
|
|
'default' => __( 'Default', 'elementor' ),
|
|
'full' => __( 'Fit To Screen', 'elementor' ),
|
|
'min-height' => __( 'Min Height', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'elementor-section-height-',
|
|
'hide_in_inner' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'custom_height',
|
|
[
|
|
'label' => __( 'Minimum Height', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 400,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 1440,
|
|
],
|
|
'vh' => [
|
|
'min' => 0,
|
|
'max' => 100,
|
|
],
|
|
],
|
|
'size_units' => [ 'px', 'vh' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'height' => [ 'min-height' ],
|
|
],
|
|
'hide_in_inner' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'height_inner',
|
|
[
|
|
'label' => __( 'Height', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'default',
|
|
'options' => [
|
|
'default' => __( 'Default', 'elementor' ),
|
|
'min-height' => __( 'Min Height', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'elementor-section-height-',
|
|
'hide_in_top' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'custom_height_inner',
|
|
[
|
|
'label' => __( 'Minimum Height', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 400,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 1440,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-container' => 'min-height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'height_inner' => [ 'min-height' ],
|
|
],
|
|
'hide_in_top' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'column_position',
|
|
[
|
|
'label' => __( 'Column Position', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => 'middle',
|
|
'options' => [
|
|
'stretch' => __( 'Stretch', 'elementor' ),
|
|
'top' => __( 'Top', 'elementor' ),
|
|
'middle' => __( 'Middle', 'elementor' ),
|
|
'bottom' => __( 'Bottom', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'elementor-section-items-',
|
|
'condition' => [
|
|
'height' => [ 'full', 'min-height' ],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'content_position',
|
|
[
|
|
'label' => __( 'Content Position', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => __( 'Default', 'elementor' ),
|
|
'top' => __( 'Top', 'elementor' ),
|
|
'middle' => __( 'Middle', 'elementor' ),
|
|
'bottom' => __( 'Bottom', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'elementor-section-content-',
|
|
]
|
|
);
|
|
|
|
$possible_tags = [
|
|
'section',
|
|
'header',
|
|
'footer',
|
|
'aside',
|
|
'article',
|
|
'nav',
|
|
'div',
|
|
];
|
|
|
|
$options = [
|
|
'' => __( 'Default', 'elementor' ),
|
|
] + array_combine( $possible_tags, $possible_tags );
|
|
|
|
$this->add_control(
|
|
'html_tag',
|
|
[
|
|
'label' => __( 'HTML Tag', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $options,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'structure',
|
|
[
|
|
'label' => __( 'Structure', 'elementor' ),
|
|
'type' => Controls_Manager::STRUCTURE,
|
|
'default' => '10',
|
|
'render_type' => 'none',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section background
|
|
$this->start_controls_section(
|
|
'section_background',
|
|
[
|
|
'label' => __( 'Background', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tabs_background' );
|
|
|
|
$this->start_controls_tab(
|
|
'tab_background_normal',
|
|
[
|
|
'label' => __( 'Normal', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'background',
|
|
'types' => [ 'classic', 'gradient', 'video' ],
|
|
'fields_options' => [
|
|
'background' => [
|
|
'frontend_available' => true,
|
|
],
|
|
'video_link' => [
|
|
'frontend_available' => true,
|
|
],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab(
|
|
'tab_background_hover',
|
|
[
|
|
'label' => __( 'Hover', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'background_hover',
|
|
'selector' => '{{WRAPPER}}:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'background_hover_transition',
|
|
[
|
|
'label' => __( 'Transition Duration', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 0.3,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'render_type' => 'ui',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Background Overlay
|
|
$this->start_controls_section(
|
|
'section_background_overlay',
|
|
[
|
|
'label' => __( 'Background Overlay', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
'condition' => [
|
|
'background_background' => [ 'classic', 'gradient', 'video' ],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tabs_background_overlay' );
|
|
|
|
$this->start_controls_tab(
|
|
'tab_background_overlay_normal',
|
|
[
|
|
'label' => __( 'Normal', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'background_overlay',
|
|
'selector' => '{{WRAPPER}} > .elementor-background-overlay',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'background_overlay_opacity',
|
|
[
|
|
'label' => __( 'Opacity (%)', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => .5,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-background-overlay' => 'opacity: {{SIZE}};',
|
|
],
|
|
'condition' => [
|
|
'background_overlay_background' => [ 'classic', 'gradient' ],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab(
|
|
'tab_background_overlay_hover',
|
|
[
|
|
'label' => __( 'Hover', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Background::get_type(),
|
|
[
|
|
'name' => 'background_overlay_hover',
|
|
'selector' => '{{WRAPPER}}:hover > .elementor-background-overlay',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'background_overlay_hover_opacity',
|
|
[
|
|
'label' => __( 'Opacity (%)', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => .5,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}:hover > .elementor-background-overlay' => 'opacity: {{SIZE}};',
|
|
],
|
|
'condition' => [
|
|
'background_overlay_hover_background' => [ 'classic', 'gradient' ],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'background_overlay_hover_transition',
|
|
[
|
|
'label' => __( 'Transition Duration', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 0.3,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'render_type' => 'ui',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section border
|
|
$this->start_controls_section(
|
|
'section_border',
|
|
[
|
|
'label' => __( 'Border', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tabs_border' );
|
|
|
|
$this->start_controls_tab(
|
|
'tab_border_normal',
|
|
[
|
|
'label' => __( 'Normal', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'border',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'border_radius',
|
|
[
|
|
'label' => __( 'Border Radius', 'elementor' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}, {{WRAPPER}} > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'box_shadow',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->start_controls_tab(
|
|
'tab_border_hover',
|
|
[
|
|
'label' => __( 'Hover', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Border::get_type(),
|
|
[
|
|
'name' => 'border_hover',
|
|
'selector' => '{{WRAPPER}}:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'border_radius_hover',
|
|
[
|
|
'label' => __( 'Border Radius', 'elementor' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}:hover, {{WRAPPER}}:hover > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_group_control(
|
|
Group_Control_Box_Shadow::get_type(),
|
|
[
|
|
'name' => 'box_shadow_hover',
|
|
'selector' => '{{WRAPPER}}:hover',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'border_hover_transition',
|
|
[
|
|
'label' => __( 'Transition Duration', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'default' => [
|
|
'size' => 0.3,
|
|
],
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
|
|
'{{WRAPPER}} > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}s, border-radius {{SIZE}}s, opacity {{background_overlay_hover_transition.SIZE}}s',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section Shape Divider
|
|
$this->start_controls_section(
|
|
'section_shape_divider',
|
|
[
|
|
'label' => __( 'Shape Divider', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
$this->start_controls_tabs( 'tabs_shape_dividers' );
|
|
|
|
$shapes_options = [
|
|
'' => __( 'None', 'elementor' ),
|
|
];
|
|
|
|
foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
|
|
$shapes_options[ $shape_name ] = $shape_props['title'];
|
|
}
|
|
|
|
foreach ( [
|
|
'top' => __( 'Top', 'elementor' ),
|
|
'bottom' => __( 'Bottom', 'elementor' ),
|
|
] as $side => $side_label ) {
|
|
$base_control_key = "shape_divider_$side";
|
|
|
|
$this->start_controls_tab(
|
|
"tab_$base_control_key",
|
|
[
|
|
'label' => $side_label,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
$base_control_key,
|
|
[
|
|
'label' => __( 'Type', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'options' => $shapes_options,
|
|
'render_type' => 'none',
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
$base_control_key . '_color',
|
|
[
|
|
'label' => __( 'Color', 'elementor' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'condition' => [
|
|
"shape_divider_$side!" => '',
|
|
],
|
|
'selectors' => [
|
|
"{{WRAPPER}} > .elementor-shape-$side .elementor-shape-fill" => 'fill: {{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
$base_control_key . '_width',
|
|
[
|
|
'label' => __( 'Width', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'units' => [ '%' ],
|
|
'default' => [
|
|
'unit' => '%',
|
|
],
|
|
'tablet_default' => [
|
|
'unit' => '%',
|
|
],
|
|
'mobile_default' => [
|
|
'unit' => '%',
|
|
],
|
|
'range' => [
|
|
'%' => [
|
|
'min' => 100,
|
|
'max' => 300,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
|
|
],
|
|
'selectors' => [
|
|
"{{WRAPPER}} > .elementor-shape-$side svg" => 'width: calc({{SIZE}}{{UNIT}} + 1.3px)',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
$base_control_key . '_height',
|
|
[
|
|
'label' => __( 'Height', 'elementor' ),
|
|
'type' => Controls_Manager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 500,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"shape_divider_$side!" => '',
|
|
],
|
|
'selectors' => [
|
|
"{{WRAPPER}} > .elementor-shape-$side svg" => 'height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
$base_control_key . '_flip',
|
|
[
|
|
'label' => __( 'Flip', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'condition' => [
|
|
"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_flip' ) ),
|
|
],
|
|
'selectors' => [
|
|
"{{WRAPPER}} > .elementor-shape-$side .elementor-shape-fill" => 'transform: rotateY(180deg)',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
$base_control_key . '_negative',
|
|
[
|
|
'label' => __( 'Invert', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'frontend_available' => true,
|
|
'condition' => [
|
|
"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_negative' ) ),
|
|
],
|
|
'render_type' => 'none',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
$base_control_key . '_above_content',
|
|
[
|
|
'label' => __( 'Bring to Front', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'selectors' => [
|
|
"{{WRAPPER}} > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
|
|
],
|
|
'condition' => [
|
|
"shape_divider_$side!" => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_tab();
|
|
}
|
|
|
|
$this->end_controls_tabs();
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section Typography
|
|
$this->start_controls_section(
|
|
'section_typo',
|
|
[
|
|
'label' => __( 'Typography', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_STYLE,
|
|
]
|
|
);
|
|
|
|
if ( in_array( Scheme_Color::get_type(), Schemes_Manager::get_enabled_schemes() ) ) {
|
|
$this->add_control(
|
|
'colors_warning',
|
|
[
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'raw' => __( 'Note: The following colors won\'t work if Default Colors are enabled.', 'elementor' ),
|
|
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
|
|
]
|
|
);
|
|
}
|
|
|
|
$this->add_control(
|
|
'heading_color',
|
|
[
|
|
'label' => __( 'Heading Color', 'elementor' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};',
|
|
],
|
|
'separator' => 'none',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'color_text',
|
|
[
|
|
'label' => __( 'Text Color', 'elementor' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'color_link',
|
|
[
|
|
'label' => __( 'Link Color', 'elementor' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} a' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'color_link_hover',
|
|
[
|
|
'label' => __( 'Link Hover Color', 'elementor' ),
|
|
'type' => Controls_Manager::COLOR,
|
|
'default' => '',
|
|
'selectors' => [
|
|
'{{WRAPPER}} a:hover' => 'color: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'text_align',
|
|
[
|
|
'label' => __( 'Text Align', 'elementor' ),
|
|
'type' => Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'left' => [
|
|
'title' => __( 'Left', 'elementor' ),
|
|
'icon' => 'fa fa-align-left',
|
|
],
|
|
'center' => [
|
|
'title' => __( 'Center', 'elementor' ),
|
|
'icon' => 'fa fa-align-center',
|
|
],
|
|
'right' => [
|
|
'title' => __( 'Right', 'elementor' ),
|
|
'icon' => 'fa fa-align-right',
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-container' => 'text-align: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section Advanced
|
|
$this->start_controls_section(
|
|
'section_advanced',
|
|
[
|
|
'label' => __( 'Element Style', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'margin',
|
|
[
|
|
'label' => __( 'Margin', 'elementor' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', '%' ],
|
|
'allowed_dimensions' => 'vertical',
|
|
'placeholder' => [
|
|
'top' => '',
|
|
'right' => 'auto',
|
|
'bottom' => '',
|
|
'left' => 'auto',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'margin-top: {{TOP}}{{UNIT}}; margin-bottom: {{BOTTOM}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'padding',
|
|
[
|
|
'label' => __( 'Padding', 'elementor' ),
|
|
'type' => Controls_Manager::DIMENSIONS,
|
|
'size_units' => [ 'px', 'em', '%' ],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'z_index',
|
|
[
|
|
'label' => __( 'Z-Index', 'elementor' ),
|
|
'type' => Controls_Manager::NUMBER,
|
|
'min' => 0,
|
|
'placeholder' => 0,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'z-index: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'animation',
|
|
[
|
|
'label' => __( 'Entrance Animation', 'elementor' ),
|
|
'type' => Controls_Manager::ANIMATION,
|
|
'default' => '',
|
|
'prefix_class' => 'animated ',
|
|
'label_block' => true,
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'animation_duration',
|
|
[
|
|
'label' => __( 'Animation Duration', 'elementor' ),
|
|
'type' => Controls_Manager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'slow' => __( 'Slow', 'elementor' ),
|
|
'' => __( 'Normal', 'elementor' ),
|
|
'fast' => __( 'Fast', 'elementor' ),
|
|
],
|
|
'prefix_class' => 'animated-',
|
|
'condition' => [
|
|
'animation!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'animation_delay',
|
|
[
|
|
'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
|
|
'type' => Controls_Manager::NUMBER,
|
|
'default' => '',
|
|
'min' => 0,
|
|
'step' => 100,
|
|
'condition' => [
|
|
'animation!' => '',
|
|
],
|
|
'render_type' => 'none',
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'_element_id',
|
|
[
|
|
'label' => __( 'CSS ID', 'elementor' ),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => '',
|
|
'label_block' => true,
|
|
'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'css_classes',
|
|
[
|
|
'label' => __( 'CSS Classes', 'elementor' ),
|
|
'type' => Controls_Manager::TEXT,
|
|
'default' => '',
|
|
'prefix_class' => '',
|
|
'label_block' => true,
|
|
'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
// Section Responsive
|
|
$this->start_controls_section(
|
|
'_section_responsive',
|
|
[
|
|
'label' => __( 'Responsive', 'elementor' ),
|
|
'tab' => Controls_Manager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'reverse_order_mobile',
|
|
[
|
|
'label' => __( 'Reverse Columns', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'return_value' => 'reverse-mobile',
|
|
'description' => __( 'Reverse column order - When on mobile, the column order is reversed, so the last column appears on top and vice versa.', 'elementor' ),
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'heading_visibility',
|
|
[
|
|
'label' => __( 'Visibility', 'elementor' ),
|
|
'type' => Controls_Manager::HEADING,
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'responsive_description',
|
|
[
|
|
'raw' => __( 'Attention: The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you\'re in editing mode in Elementor.', 'elementor' ),
|
|
'type' => Controls_Manager::RAW_HTML,
|
|
'content_classes' => 'elementor-descriptor',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'hide_desktop',
|
|
[
|
|
'label' => __( 'Hide On Desktop', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => __( 'Hide', 'elementor' ),
|
|
'label_off' => __( 'Show', 'elementor' ),
|
|
'return_value' => 'hidden-desktop',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'hide_tablet',
|
|
[
|
|
'label' => __( 'Hide On Tablet', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => __( 'Hide', 'elementor' ),
|
|
'label_off' => __( 'Show', 'elementor' ),
|
|
'return_value' => 'hidden-tablet',
|
|
]
|
|
);
|
|
|
|
$this->add_control(
|
|
'hide_mobile',
|
|
[
|
|
'label' => __( 'Hide On Mobile', 'elementor' ),
|
|
'type' => Controls_Manager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => __( 'Hide', 'elementor' ),
|
|
'label_off' => __( 'Show', 'elementor' ),
|
|
'return_value' => 'hidden-phone',
|
|
]
|
|
);
|
|
|
|
$this->end_controls_section();
|
|
|
|
Plugin::$instance->controls_manager->add_custom_css_controls( $this );
|
|
}
|
|
|
|
/**
|
|
* Render section edit tools.
|
|
*
|
|
* Used to generate the edit tools HTML.
|
|
*
|
|
* @since 1.8.0
|
|
* @access protected
|
|
*/
|
|
protected function render_edit_tools() {
|
|
?>
|
|
<div class="elementor-element-overlay">
|
|
<ul class="elementor-editor-element-settings elementor-editor-section-settings">
|
|
<li class="elementor-editor-element-setting elementor-editor-element-trigger elementor-active" title="<?php printf( __( 'Edit %s', 'elementor' ), __( 'Section', 'elementor' ) ); ?>">
|
|
<i class="eicon-section" aria-hidden="true"></i>
|
|
<span class="elementor-screen-only"><?php printf( __( 'Edit %s', 'elementor' ), __( 'Section', 'elementor' ) ); ?></span>
|
|
</li>
|
|
<?php foreach ( Element_Section::get_edit_tools() as $edit_tool_name => $edit_tool ) : ?>
|
|
<?php if ( 'add' === $edit_tool_name ) : ?>
|
|
<# if ( ! isInner ) { #>
|
|
<?php endif; ?>
|
|
<li class="elementor-editor-element-setting elementor-editor-element-<?php echo $edit_tool_name; ?>" title="<?php echo $edit_tool['title']; ?>">
|
|
<i class="eicon-<?php echo $edit_tool['icon']; ?>" aria-hidden="true"></i>
|
|
<span class="elementor-screen-only"><?php echo $edit_tool['title']; ?></span>
|
|
</li>
|
|
<?php if ( 'add' === $edit_tool_name ) : ?>
|
|
<# } #>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* Render section output in the editor.
|
|
*
|
|
* Used to generate the live preview, using a Backbone JavaScript template.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
*/
|
|
protected function _content_template() {
|
|
?>
|
|
<div class="elementor-background-video-container elementor-hidden-phone">
|
|
<div class="elementor-background-video-embed"></div>
|
|
<video class="elementor-background-video-hosted" autoplay loop muted></video>
|
|
</div>
|
|
<div class="elementor-background-video-fallback"></div>
|
|
<div class="elementor-background-overlay"></div>
|
|
<div class="elementor-shape elementor-shape-top"></div>
|
|
<div class="elementor-shape elementor-shape-bottom"></div>
|
|
<div class="elementor-container elementor-column-gap-{{ settings.gap }}">
|
|
<div class="elementor-row"></div>
|
|
</div>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* Before section rendering.
|
|
*
|
|
* Used to add stuff before the section element.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*/
|
|
public function before_render() {
|
|
$settings = $this->get_settings();
|
|
?>
|
|
<<?php echo $this->get_html_tag() . ' ' . $this->get_render_attribute_string( '_wrapper' ); ?>>
|
|
<?php
|
|
if ( 'video' === $settings['background_background'] ) :
|
|
if ( $settings['background_video_link'] ) :
|
|
$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
|
|
?>
|
|
<div class="elementor-background-video-container elementor-hidden-phone">
|
|
<?php if ( $video_properties ) : ?>
|
|
<div class="elementor-background-video-embed"></div>
|
|
<?php else : ?>
|
|
<video class="elementor-background-video-hosted elementor-html5-video" autoplay loop muted></video>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php
|
|
endif;
|
|
endif;
|
|
|
|
$has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ] ) ||
|
|
in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ] );
|
|
|
|
if ( $has_background_overlay ) :
|
|
?>
|
|
<div class="elementor-background-overlay"></div>
|
|
<?php
|
|
endif;
|
|
|
|
if ( $settings['shape_divider_top'] ) {
|
|
$this->print_shape_divider( 'top' );
|
|
}
|
|
|
|
if ( $settings['shape_divider_bottom'] ) {
|
|
$this->print_shape_divider( 'bottom' );
|
|
}
|
|
?>
|
|
<div class="elementor-container elementor-column-gap-<?php echo esc_attr( $settings['gap'] ); ?>">
|
|
<div class="elementor-row">
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* After section rendering.
|
|
*
|
|
* Used to add stuff after the section element.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*/
|
|
public function after_render() {
|
|
?>
|
|
</div>
|
|
</div>
|
|
</<?php echo $this->get_html_tag(); ?>>
|
|
<?php
|
|
}
|
|
|
|
/**
|
|
* Add section render attributes.
|
|
*
|
|
* Used to add render attributes to the section element.
|
|
*
|
|
* @since 1.3.0
|
|
* @access protected
|
|
*/
|
|
protected function _add_render_attributes() {
|
|
parent::_add_render_attributes();
|
|
|
|
$section_type = $this->get_data( 'isInner' ) ? 'inner' : 'top';
|
|
|
|
$this->add_render_attribute(
|
|
'_wrapper', 'class', [
|
|
'elementor-section',
|
|
'elementor-' . $section_type . '-section',
|
|
]
|
|
);
|
|
|
|
$this->add_render_attribute( '_wrapper', 'data-element_type', $this->get_name() );
|
|
}
|
|
|
|
/**
|
|
* Get default child type.
|
|
*
|
|
* Retrieve the section child type based on element data.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
*
|
|
* @param array $element_data Element ID.
|
|
*
|
|
* @return Element_Base Section default child type.
|
|
*/
|
|
protected function _get_default_child_type( array $element_data ) {
|
|
return Plugin::$instance->elements_manager->get_element_types( 'column' );
|
|
}
|
|
|
|
/**
|
|
* Get HTML tag.
|
|
*
|
|
* Retrieve the section element HTML tag.
|
|
*
|
|
* @since 1.5.3
|
|
* @access private
|
|
*
|
|
* @return string Section HTML tag.
|
|
*/
|
|
private function get_html_tag() {
|
|
$html_tag = $this->get_settings( 'html_tag' );
|
|
|
|
if ( empty( $html_tag ) ) {
|
|
$html_tag = 'section';
|
|
}
|
|
|
|
return $html_tag;
|
|
}
|
|
|
|
/**
|
|
* Print section shape divider.
|
|
*
|
|
* Used to generate the shape dividers HTML.
|
|
*
|
|
* @since 1.3.0
|
|
* @access private
|
|
*
|
|
* @param string $side Shape divider side, used to set the shape key.
|
|
*/
|
|
private function print_shape_divider( $side ) {
|
|
$settings = $this->get_active_settings();
|
|
$base_setting_key = "shape_divider_$side";
|
|
$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
|
|
?>
|
|
<div class="elementor-shape elementor-shape-<?php echo $side; ?>" data-negative="<?php echo var_export( $negative ); ?>">
|
|
<?php include Shapes::get_shape_path( $settings[ $base_setting_key ], ! empty( $settings[ $base_setting_key . '_negative' ] ) ); ?>
|
|
</div>
|
|
<?php
|
|
}
|
|
}
|