1436 lines
46 KiB
PHP
1436 lines
46 KiB
PHP
<?php
|
|
/**
|
|
* Creative Elements - live Theme & Page Builder
|
|
*
|
|
* @author WebshopWorks, Elementor
|
|
* @copyright 2019-2022 WebshopWorks.com & Elementor.com
|
|
* @license https://www.gnu.org/licenses/gpl-3.0.html
|
|
*/
|
|
|
|
namespace CE;
|
|
|
|
defined('_PS_VERSION_') or die;
|
|
|
|
/**
|
|
* Elementor common widget.
|
|
*
|
|
* Elementor base widget that gives you all the advanced options of the basic
|
|
* widget.
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
class WidgetCommon extends WidgetBase
|
|
{
|
|
/**
|
|
* Get widget name.
|
|
*
|
|
* Retrieve common widget name.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Widget name.
|
|
*/
|
|
public function getName()
|
|
{
|
|
return 'common';
|
|
}
|
|
|
|
/**
|
|
* Show in panel.
|
|
*
|
|
* Whether to show the common widget in the panel or not.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return bool Whether to show the widget in the panel.
|
|
*/
|
|
public function showInPanel()
|
|
{
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Register common widget controls.
|
|
*
|
|
* Adds different input fields to allow the user to change and customize the widget settings.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
* @codingStandardsIgnoreStart Generic.Files.LineLength
|
|
*/
|
|
protected function _registerControls()
|
|
{
|
|
$this->startControlsSection(
|
|
'_section_style',
|
|
[
|
|
'label' => __('Layout'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_title',
|
|
[
|
|
'label' => __('Title'),
|
|
'type' => ControlsManager::HIDDEN,
|
|
'render_type' => 'none',
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_margin',
|
|
[
|
|
'label' => __('Margin'),
|
|
'type' => ControlsManager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_padding',
|
|
[
|
|
'label' => __('Padding'),
|
|
'type' => ControlsManager::DIMENSIONS,
|
|
'size_units' => ['px', 'em', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_element_width',
|
|
[
|
|
'label' => __('Width'),
|
|
'type' => ControlsManager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => __('Default'),
|
|
'inherit' => __('Full Width') . ' (100%)',
|
|
'auto' => __('Inline') . ' (auto)',
|
|
'initial' => __('Custom'),
|
|
'calc' => __('Calculate'),
|
|
],
|
|
'selectors_dictionary' => [
|
|
'inherit' => '100%',
|
|
'calc' => 'initial',
|
|
],
|
|
'prefix_class' => 'elementor-widget%s__width-',
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_element_custom_width',
|
|
[
|
|
'label' => __('Custom Width'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'_element_width' => 'initial',
|
|
],
|
|
'device_args' => [
|
|
ControlsStack::RESPONSIVE_TABLET => [
|
|
'condition' => [
|
|
'_element_width_tablet' => 'initial',
|
|
],
|
|
],
|
|
ControlsStack::RESPONSIVE_MOBILE => [
|
|
'condition' => [
|
|
'_element_width_mobile' => 'initial',
|
|
],
|
|
],
|
|
],
|
|
'size_units' => ['px', '%', 'vw'],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_element_calc_width',
|
|
[
|
|
'label' => 'Calc',
|
|
'type' => ControlsManager::TEXT,
|
|
'placeholder' => __('e.g:') . ' 100% - 20px',
|
|
'condition' => [
|
|
'_element_width' => 'calc',
|
|
],
|
|
'device_args' => [
|
|
ControlsStack::RESPONSIVE_TABLET => [
|
|
'condition' => [
|
|
'_element_width_tablet' => 'calc',
|
|
],
|
|
],
|
|
ControlsStack::RESPONSIVE_MOBILE => [
|
|
'condition' => [
|
|
'_element_width_mobile' => 'calc',
|
|
],
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'width: calc({{VALUE}}); max-width: calc({{VALUE}})',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_element_min_width',
|
|
[
|
|
'label' => __('Min Width'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
'_element_width' => 'calc',
|
|
],
|
|
'device_args' => [
|
|
ControlsStack::RESPONSIVE_TABLET => [
|
|
'condition' => [
|
|
'_element_width_tablet' => 'calc',
|
|
],
|
|
],
|
|
ControlsStack::RESPONSIVE_MOBILE => [
|
|
'condition' => [
|
|
'_element_width_mobile' => 'calc',
|
|
],
|
|
],
|
|
],
|
|
'size_units' => ['px', '%', 'vw'],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'min-width: {{SIZE}}{{UNIT}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_element_vertical_align',
|
|
[
|
|
'label' => __('Vertical Align'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'options' => [
|
|
'flex-start' => [
|
|
'title' => __('Start'),
|
|
'icon' => 'eicon-v-align-top',
|
|
],
|
|
'center' => [
|
|
'title' => __('Center'),
|
|
'icon' => 'eicon-v-align-middle',
|
|
],
|
|
'flex-end' => [
|
|
'title' => __('End'),
|
|
'icon' => 'eicon-v-align-bottom',
|
|
],
|
|
],
|
|
'condition' => [
|
|
'_element_width!' => '',
|
|
'_position' => '',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'align-self: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_flex_order',
|
|
[
|
|
'label' => __('Order'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'options' => [
|
|
'start' => [
|
|
'title' => __('Start'),
|
|
'icon' => 'eicon-v-align-top',
|
|
],
|
|
'end' => [
|
|
'title' => __('End'),
|
|
'icon' => 'eicon-v-align-bottom',
|
|
],
|
|
'custom' => [
|
|
'title' => __('Custom'),
|
|
'icon' => 'eicon-ellipsis-v',
|
|
],
|
|
],
|
|
'selectors_dictionary' => [
|
|
'start' => '-99999',
|
|
'end' => '99999',
|
|
'custom' => '',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'order: {{VALUE}};',
|
|
],
|
|
'condition' => [
|
|
'_position' => '',
|
|
],
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_flex_order_custom',
|
|
[
|
|
'label' => __('Custom Order'),
|
|
'type' => ControlsManager::NUMBER,
|
|
'condition' => [
|
|
'_position' => '',
|
|
'_flex_order' => 'custom',
|
|
],
|
|
'device_args' => [
|
|
ControlsStack::RESPONSIVE_TABLET => [
|
|
'condition' => [
|
|
'_position' => '',
|
|
'_flex_order_tablet' => 'custom',
|
|
],
|
|
],
|
|
ControlsStack::RESPONSIVE_MOBILE => [
|
|
'condition' => [
|
|
'_position' => '',
|
|
'_flex_order_mobile' => 'custom',
|
|
],
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'order: {{VALUE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$warning = __('Custom positioning is not considered best practice for responsive web design and should not be used too frequently.');
|
|
|
|
$this->addControl(
|
|
'_position_description',
|
|
[
|
|
'raw' => '<strong>' . __('Please note!') . '</strong> ' . $warning,
|
|
'type' => ControlsManager::RAW_HTML,
|
|
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
|
|
'render_type' => 'ui',
|
|
'condition' => [
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_position',
|
|
[
|
|
'label' => __('Position'),
|
|
'type' => ControlsManager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'' => __('Default'),
|
|
'absolute' => __('Absolute'),
|
|
'fixed' => __('Fixed'),
|
|
],
|
|
'prefix_class' => 'elementor-',
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$start = is_rtl() ? __('Right') : __('Left');
|
|
$end = !is_rtl() ? __('Right') : __('Left');
|
|
|
|
$this->addControl(
|
|
'_offset_orientation_h',
|
|
[
|
|
'label' => __('Horizontal Orientation'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'toggle' => false,
|
|
'default' => 'start',
|
|
'options' => [
|
|
'start' => [
|
|
'title' => $start,
|
|
'icon' => 'eicon-h-align-left',
|
|
],
|
|
'end' => [
|
|
'title' => $end,
|
|
'icon' => 'eicon-h-align-right',
|
|
],
|
|
],
|
|
'classes' => 'elementor-control-start-end',
|
|
'render_type' => 'ui',
|
|
'condition' => [
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_offset_x',
|
|
[
|
|
'label' => __('Offset'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vw' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vh' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => '0',
|
|
],
|
|
'size_units' => ['px', '%', 'vw', 'vh'],
|
|
'selectors' => [
|
|
'body:not(.lang-rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
|
|
'body.lang-rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
'_offset_orientation_h!' => 'end',
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_offset_x_end',
|
|
[
|
|
'label' => __('Offset'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vw' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vh' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
],
|
|
'default' => [
|
|
'size' => '0',
|
|
],
|
|
'size_units' => ['px', '%', 'vw', 'vh'],
|
|
'selectors' => [
|
|
'body:not(.lang-rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
|
|
'body.lang-rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
'_offset_orientation_h' => 'end',
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_offset_orientation_v',
|
|
[
|
|
'label' => __('Vertical Orientation'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'toggle' => false,
|
|
'default' => 'start',
|
|
'options' => [
|
|
'start' => [
|
|
'title' => __('Top'),
|
|
'icon' => 'eicon-v-align-top',
|
|
],
|
|
'end' => [
|
|
'title' => __('Bottom'),
|
|
'icon' => 'eicon-v-align-bottom',
|
|
],
|
|
],
|
|
'render_type' => 'ui',
|
|
'condition' => [
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_offset_y',
|
|
[
|
|
'label' => __('Offset'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vh' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vw' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
],
|
|
'size_units' => ['px', '%', 'vh', 'vw'],
|
|
'default' => [
|
|
'size' => '0',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
'_offset_orientation_v!' => 'end',
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_offset_y_end',
|
|
[
|
|
'label' => __('Offset'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
'step' => 1,
|
|
],
|
|
'%' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vh' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
'vw' => [
|
|
'min' => -200,
|
|
'max' => 200,
|
|
],
|
|
],
|
|
'size_units' => ['px', '%', 'vh', 'vw'],
|
|
'default' => [
|
|
'size' => '0',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
|
|
],
|
|
'condition' => [
|
|
'_offset_orientation_v' => 'end',
|
|
'_position!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_z_index',
|
|
[
|
|
'label' => __('Z-Index'),
|
|
'type' => ControlsManager::NUMBER,
|
|
'min' => 0,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => 'z-index: {{VALUE}};',
|
|
],
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_element_id',
|
|
[
|
|
'label' => __('CSS ID'),
|
|
'type' => ControlsManager::TEXT,
|
|
'dynamic' => [
|
|
// 'active' => true,
|
|
],
|
|
'default' => '',
|
|
'title' => __('Add your custom id WITHOUT the Pound key. e.g: my-id'),
|
|
'label_block' => false,
|
|
'style_transfer' => false,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_css_classes',
|
|
[
|
|
'label' => __('CSS Classes'),
|
|
'type' => ControlsManager::TEXT,
|
|
'dynamic' => [
|
|
// 'active' => true,
|
|
],
|
|
'prefix_class' => '',
|
|
'title' => __('Add your custom class WITHOUT the dot. e.g: my-class'),
|
|
]
|
|
);
|
|
|
|
$this->endControlsSection();
|
|
|
|
$this->startControlsSection(
|
|
'section_effects',
|
|
[
|
|
'label' => __('Motion Effects'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_animation',
|
|
[
|
|
'label' => __('Entrance Animation'),
|
|
'type' => ControlsManager::ANIMATION,
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'animation_duration',
|
|
[
|
|
'label' => __('Animation Duration'),
|
|
'type' => ControlsManager::SELECT,
|
|
'default' => '',
|
|
'options' => [
|
|
'slow' => __('Slow'),
|
|
'' => __('Normal'),
|
|
'fast' => __('Fast'),
|
|
],
|
|
'prefix_class' => 'animated-',
|
|
'condition' => [
|
|
'_animation!' => ['', 'none'],
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_animation_delay',
|
|
[
|
|
'label' => __('Animation Delay') . ' (ms)',
|
|
'type' => ControlsManager::NUMBER,
|
|
'default' => '',
|
|
'min' => 0,
|
|
'step' => 100,
|
|
'condition' => [
|
|
'_animation!' => ['', 'none'],
|
|
],
|
|
'render_type' => 'none',
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->endControlsSection();
|
|
|
|
$this->registerTransformSection();
|
|
|
|
$this->startControlsSection(
|
|
'_section_background',
|
|
[
|
|
'label' => __('Background'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->startControlsTabs('_tabs_background');
|
|
|
|
$this->startControlsTab(
|
|
'_tab_background_normal',
|
|
[
|
|
'label' => __('Normal'),
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBackground::getType(),
|
|
[
|
|
'name' => '_background',
|
|
'selector' => '{{WRAPPER}} > .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->endControlsTab();
|
|
|
|
$this->startControlsTab(
|
|
'_tab_background_hover',
|
|
[
|
|
'label' => __('Hover'),
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBackground::getType(),
|
|
[
|
|
'name' => '_background_hover',
|
|
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_background_hover_transition',
|
|
[
|
|
'label' => __('Transition Duration'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-widget-container' => '--e-background-transition-duration: {{SIZE}}s',
|
|
],
|
|
'separator' => 'before',
|
|
]
|
|
);
|
|
|
|
$this->endControlsTab();
|
|
|
|
$this->endControlsTabs();
|
|
|
|
$this->endControlsSection();
|
|
|
|
$this->startControlsSection(
|
|
'_section_border',
|
|
[
|
|
'label' => __('Border'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->startControlsTabs('_tabs_border');
|
|
|
|
$this->startControlsTab(
|
|
'_tab_border_normal',
|
|
[
|
|
'label' => __('Normal'),
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBorder::getType(),
|
|
[
|
|
'name' => '_border',
|
|
'selector' => '{{WRAPPER}} > .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_border_radius',
|
|
[
|
|
'label' => __('Border Radius'),
|
|
'type' => ControlsManager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBoxShadow::getType(),
|
|
[
|
|
'name' => '_box_shadow',
|
|
'selector' => '{{WRAPPER}} > .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->endControlsTab();
|
|
|
|
$this->startControlsTab(
|
|
'_tab_border_hover',
|
|
[
|
|
'label' => __('Hover'),
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBorder::getType(),
|
|
[
|
|
'name' => '_border_hover',
|
|
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
'_border_radius_hover',
|
|
[
|
|
'label' => __('Border Radius'),
|
|
'type' => ControlsManager::DIMENSIONS,
|
|
'size_units' => ['px', '%'],
|
|
'selectors' => [
|
|
'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addGroupControl(
|
|
GroupControlBoxShadow::getType(),
|
|
[
|
|
'name' => '_box_shadow_hover',
|
|
'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_border_hover_transition',
|
|
[
|
|
'label' => __('Transition Duration'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'separator' => 'before',
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 3,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .elementor-widget-container' => '--e-border-transition-duration: {{SIZE}}s',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->endControlsTab();
|
|
|
|
$this->endControlsTabs();
|
|
|
|
$this->endControlsSection();
|
|
|
|
$this->startControlsSection(
|
|
'_section_responsive',
|
|
[
|
|
'label' => __('Responsive'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'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.'),
|
|
'type' => ControlsManager::RAW_HTML,
|
|
'content_classes' => 'elementor-descriptor',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'hide_desktop',
|
|
[
|
|
'label' => __('Hide On Desktop'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => 'Hide',
|
|
'label_off' => 'Show',
|
|
'return_value' => 'hidden-desktop',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'hide_tablet',
|
|
[
|
|
'label' => __('Hide On Tablet'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => 'Hide',
|
|
'label_off' => 'Show',
|
|
'return_value' => 'hidden-tablet',
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'hide_mobile',
|
|
[
|
|
'label' => __('Hide On Mobile'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'default' => '',
|
|
'prefix_class' => 'elementor-',
|
|
'label_on' => 'Hide',
|
|
'label_off' => 'Show',
|
|
'return_value' => 'hidden-phone',
|
|
]
|
|
);
|
|
|
|
$this->endControlsSection();
|
|
|
|
Plugin::$instance->controls_manager->addCustomCssControls($this);
|
|
}
|
|
|
|
private function registerTransformSection()
|
|
{
|
|
$this->startControlsSection(
|
|
'_section_transform',
|
|
[
|
|
'label' => __('Transform'),
|
|
'tab' => ControlsManager::TAB_ADVANCED,
|
|
]
|
|
);
|
|
|
|
$this->startControlsTabs('_tabs_positioning');
|
|
|
|
$transform_prefix_class = 'e-';
|
|
$transform_return_value = 'transform';
|
|
$transform_selectors = [
|
|
'' => '.elementor-element-{{ID}} > .elementor-widget-container',
|
|
'_hover' => '{{HOVER}}',
|
|
];
|
|
|
|
foreach ($transform_selectors as $tab => $selector) {
|
|
$this->startControlsTab(
|
|
"_tab_positioning$tab",
|
|
[
|
|
'label' => __(!$tab ? 'Normal' : 'Hover'),
|
|
]
|
|
);
|
|
|
|
if ('_hover' === $tab) {
|
|
$this->addControl(
|
|
'_transform_trigger_hover',
|
|
[
|
|
'label' => __('Trigger by'),
|
|
'type' => ControlsManager::SELECT,
|
|
'options' => [
|
|
'' => __('Widget'),
|
|
'column' => __('Column'),
|
|
'section' => __('Section'),
|
|
],
|
|
]
|
|
);
|
|
}
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_opacity$tab",
|
|
[
|
|
'label' => __('Opacity'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 1,
|
|
'step' => 0.01,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
$selector => 'opacity: {{SIZE}};',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
"_transform_rotate_popover$tab",
|
|
[
|
|
'label' => __('Rotate'),
|
|
'type' => ControlsManager::POPOVER_TOGGLE,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'return_value' => $transform_return_value,
|
|
]
|
|
);
|
|
|
|
$this->startPopover();
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_rotateZ_effect$tab",
|
|
[
|
|
'label' => __('Rotate'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -360,
|
|
'max' => 360,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-rotateZ: {{SIZE}}deg',
|
|
],
|
|
'condition' => [
|
|
"_transform_rotate_popover$tab!" => '',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
"_transform_rotate_3d$tab",
|
|
[
|
|
'label' => __('3D Rotate'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'selectors' => [
|
|
$selector => '--e-transform-rotateX: 1deg; --e-transform-perspective: 20px;',
|
|
],
|
|
'condition' => [
|
|
"_transform_rotate_popover$tab!" => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_rotateX_effect$tab",
|
|
[
|
|
'label' => __('Rotate X'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -360,
|
|
'max' => 360,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_rotate_3d$tab!" => '',
|
|
"_transform_rotate_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-rotateX: {{SIZE}}deg;',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_rotateY_effect$tab",
|
|
[
|
|
'label' => __('Rotate Y'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -360,
|
|
'max' => 360,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_rotate_3d$tab!" => '',
|
|
"_transform_rotate_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-rotateY: {{SIZE}}deg;',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_perspective_effect$tab",
|
|
[
|
|
'label' => __('Perspective'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 1000,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_rotate_popover$tab!" => '',
|
|
"_transform_rotate_3d$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-perspective: {{SIZE}}px',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->endPopover();
|
|
|
|
$this->addControl(
|
|
"_transform_translate_popover$tab",
|
|
[
|
|
'label' => __('Offset'),
|
|
'type' => ControlsManager::POPOVER_TOGGLE,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'return_value' => $transform_return_value,
|
|
]
|
|
);
|
|
|
|
$this->startPopover();
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_translateX_effect$tab",
|
|
[
|
|
'label' => __('Offset X'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'size_units' => ['%', 'px'],
|
|
'range' => [
|
|
'%' => [
|
|
'min' => -100,
|
|
'max' => 100,
|
|
],
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_translate_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-translateX: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_translateY_effect$tab",
|
|
[
|
|
'label' => __('Offset Y'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'size_units' => ['%', 'px'],
|
|
'range' => [
|
|
'%' => [
|
|
'min' => -100,
|
|
'max' => 100,
|
|
],
|
|
'px' => [
|
|
'min' => -1000,
|
|
'max' => 1000,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_translate_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-translateY: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->endPopover();
|
|
|
|
$this->addControl(
|
|
"_transform_scale_popover$tab",
|
|
[
|
|
'label' => __('Scale'),
|
|
'type' => ControlsManager::POPOVER_TOGGLE,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'return_value' => $transform_return_value,
|
|
]
|
|
);
|
|
|
|
$this->startPopover();
|
|
|
|
$this->addControl(
|
|
"_transform_keep_proportions$tab",
|
|
[
|
|
'label' => __('Keep Proportions'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'default' => 'yes',
|
|
'render_type' => 'ui',
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_scale_effect$tab",
|
|
[
|
|
'label' => __('Scale'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 2,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_scale_popover$tab!" => '',
|
|
"_transform_keep_proportions$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-scale: {{SIZE}};',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_scaleX_effect$tab",
|
|
[
|
|
'label' => __('Scale X'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 2,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_scale_popover$tab!" => '',
|
|
"_transform_keep_proportions$tab" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-scaleX: {{SIZE}};',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_scaleY_effect$tab",
|
|
[
|
|
'label' => __('Scale Y'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 0,
|
|
'max' => 2,
|
|
'step' => 0.1,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_scale_popover$tab!" => '',
|
|
"_transform_keep_proportions$tab" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-scaleY: {{SIZE}};',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->endPopover();
|
|
|
|
$this->addControl(
|
|
"_transform_skew_popover$tab",
|
|
[
|
|
'label' => __('Skew'),
|
|
'type' => ControlsManager::POPOVER_TOGGLE,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'return_value' => $transform_return_value,
|
|
]
|
|
);
|
|
|
|
$this->startPopover();
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_skewX_effect$tab",
|
|
[
|
|
'label' => __('Skew X'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -360,
|
|
'max' => 360,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_skew_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-skewX: {{SIZE}}deg;',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addResponsiveControl(
|
|
"_transform_skewY_effect$tab",
|
|
[
|
|
'label' => __('Skew Y'),
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => -360,
|
|
'max' => 360,
|
|
],
|
|
],
|
|
'condition' => [
|
|
"_transform_skew_popover$tab!" => '',
|
|
],
|
|
'selectors' => [
|
|
$selector => '--e-transform-skewY: {{SIZE}}deg;',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->endPopover();
|
|
|
|
$this->addControl(
|
|
"_transform_flipX_effect$tab",
|
|
[
|
|
'label' => __('Flip Horizontal'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'return_value' => $transform_return_value,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'selectors' => [
|
|
$selector => '--e-transform-flipX: -1',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
"_transform_flipY_effect$tab",
|
|
[
|
|
'label' => __('Flip Vertical'),
|
|
'type' => ControlsManager::SWITCHER,
|
|
'return_value' => $transform_return_value,
|
|
'prefix_class' => $transform_prefix_class,
|
|
'selectors' => [
|
|
$selector => '--e-transform-flipY: -1',
|
|
],
|
|
'frontend_available' => true,
|
|
]
|
|
);
|
|
|
|
if ('_hover' === $tab) {
|
|
$this->addControl(
|
|
'_transform_transition_hover',
|
|
[
|
|
'label' => __('Transition Duration') . ' (ms)',
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 100,
|
|
'max' => 10000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-widget-container' => '--e-transform-transition-duration: {{SIZE}}ms',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->addControl(
|
|
'_transform_transition_delay_hover',
|
|
[
|
|
'label' => __('Transition Delay') . ' (ms)',
|
|
'type' => ControlsManager::SLIDER,
|
|
'range' => [
|
|
'px' => [
|
|
'max' => 5000,
|
|
'step' => 10,
|
|
],
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} > .elementor-widget-container' => '--e-transform-transition-delay: {{SIZE}}ms',
|
|
],
|
|
]
|
|
);
|
|
}
|
|
|
|
${"transform_origin_conditions$tab"} = [
|
|
[
|
|
'name' => "_transform_scale_popover$tab",
|
|
'operator' => '!=',
|
|
'value' => '',
|
|
],
|
|
[
|
|
'name' => "_transform_rotate_popover$tab",
|
|
'operator' => '!=',
|
|
'value' => '',
|
|
],
|
|
[
|
|
'name' => "_transform_flipX_effect$tab",
|
|
'operator' => '!=',
|
|
'value' => '',
|
|
],
|
|
[
|
|
'name' => "_transform_flipY_effect$tab",
|
|
'operator' => '!=',
|
|
'value' => '',
|
|
],
|
|
];
|
|
|
|
$this->endControlsTab();
|
|
|
|
$transform_return_value .= '-hover';
|
|
}
|
|
|
|
$this->endControlsTabs();
|
|
|
|
$transform_origin_conditions = [
|
|
'relation' => 'or',
|
|
'terms' => array_merge($transform_origin_conditions, $transform_origin_conditions_hover),
|
|
];
|
|
|
|
// Will override motion effect transform-origin
|
|
$this->addResponsiveControl(
|
|
'motion_fx_transform_x_anchor_point',
|
|
[
|
|
'label' => __('X Anchor Point'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'options' => [
|
|
'left' => [
|
|
'title' => __('Left'),
|
|
'icon' => 'eicon-h-align-left',
|
|
],
|
|
'center' => [
|
|
'title' => __('Center'),
|
|
'icon' => 'eicon-h-align-center',
|
|
],
|
|
'right' => [
|
|
'title' => __('Right'),
|
|
'icon' => 'eicon-h-align-right',
|
|
],
|
|
],
|
|
'conditions' => $transform_origin_conditions,
|
|
'separator' => 'before',
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--e-transform-origin-x: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
// Will override motion effect transform-origin
|
|
$this->addResponsiveControl(
|
|
'motion_fx_transform_y_anchor_point',
|
|
[
|
|
'label' => __('Y Anchor Point'),
|
|
'type' => ControlsManager::CHOOSE,
|
|
'label_block' => false,
|
|
'options' => [
|
|
'top' => [
|
|
'title' => __('Top'),
|
|
'icon' => 'eicon-v-align-top',
|
|
],
|
|
'center' => [
|
|
'title' => __('Center'),
|
|
'icon' => 'eicon-v-align-middle',
|
|
],
|
|
'bottom' => [
|
|
'title' => __('Bottom'),
|
|
'icon' => 'eicon-v-align-bottom',
|
|
],
|
|
],
|
|
'conditions' => $transform_origin_conditions,
|
|
'selectors' => [
|
|
'{{WRAPPER}}' => '--e-transform-origin-y: {{VALUE}}',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->endControlsSection();
|
|
}
|
|
}
|