/home/skemvmse/www/wp-content/plugins/ultimate-elementor/modules/offcanvas/widgets/offcanvas.php
<?php
/**
* UAEL Off - Canvas.
*
* @package UAEL
*/
namespace UltimateElementor\Modules\Offcanvas\Widgets;
// Elementor Classes.
use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
// UltimateElementor Classes.
use UltimateElementor\Base\Common_Widget;
use UltimateElementor\Classes\UAEL_Helper;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Class Offcanvas.
*/
class Offcanvas extends Common_Widget {
/**
* Retrieve Off - Canvas Widget name.
*
* @since 1.11.0
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return parent::get_widget_slug( 'Offcanvas' );
}
/**
* Retrieve Offcanvas Widget title.
*
* @since 1.11.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return parent::get_widget_title( 'Offcanvas' );
}
/**
* Retrieve OffCanvas Widget icon.
*
* @since 1.11.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return parent::get_widget_icon( 'Offcanvas' );
}
/**
* Retrieve Widget Keywords.
*
* @since 1.11.0
* @access public
*
* @return string Widget keywords.
*/
public function get_keywords() {
return parent::get_widget_keywords( 'Offcanvas' );
}
/**
* Retrieve the list of scripts the offcanvas widget depended on.
*
* Used to set scripts dependencies required to run the widget.
*
* @since 1.11.0
* @access public
*
* @return array Widget scripts dependencies.
*/
public function get_script_depends() {
return array( 'uael-offcanvas' );
}
/**
* Retrieve the menu index.
*
* Used to get index of menu index.
*
* @since 1.27.2
* @access protected
*
* @return string menu index.
*/
protected function get_menu_index() {
return $this->menu_index++;
}
/**
* Menu index.
*
* @access protected
* @var $menu_index
*/
protected $menu_index = 1;
/**
* Register canvas controls.
*
* @since 1.29.2
* @access protected
*/
protected function register_controls() {
$this->register_general_content_controls();
$this->register_menu_content_controls();
$this->register_display_offcanvas_controls();
$this->register_display_content_controls();
$this->register_close_controls();
$this->register_helpful_information();
$this->register_offcanvas_style_controls();
$this->register_menu_style_controls();
$this->register_content_style_controls();
$this->register_button_style_controls();
$this->register_icon_style_controls();
$this->register_close_icon_style_controls();
}
/**
* Register Off - Canvas Content Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_general_content_controls() {
$this->start_controls_section(
'content',
array(
'label' => __( 'Content', 'uael' ),
)
);
$this->add_control(
'preview_offcanvas',
array(
'label' => __( 'Preview', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'return_value' => 'yes',
'label_off' => __( 'No', 'uael' ),
'label_on' => __( 'Yes', 'uael' ),
)
);
$this->add_control(
'content_type',
array(
'label' => __( 'Content Type', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'content',
'options' => $this->get_content_type(),
)
);
$menus = $this->get_menus_list();
if ( ! empty( $menus ) ) {
$this->add_control(
'menu',
array(
'label' => __( 'Menu', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => $menus,
'default' => array_keys( $menus )[0],
'save_default' => true,
/* translators: %s admin link */
'description' => sprintf( __( 'Go to the <a href="%s" target="_blank">Menus screen</a> to manage your menus.', 'uael' ), admin_url( 'nav-menus.php' ) ),
'condition' => array(
'content_type' => 'menu',
),
)
);
} else {
$this->add_control(
'menu',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %s admin link */
'raw' => sprintf( __( '<strong>There are no menus in your site.</strong><br>Go to the <a href="%s" target="_blank">Menus screen</a> to create one.', 'uael' ), admin_url( 'nav-menus.php?action=edit&menu=0' ) ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
'condition' => array(
'content_type' => 'menu',
),
)
);
}
$this->add_control(
'ct_content',
array(
'label' => __( 'Description', 'uael' ),
'type' => Controls_Manager::WYSIWYG,
'default' => __( 'Enter content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uael' ),
'rows' => 10,
'show_label' => false,
'dynamic' => array(
'active' => true,
),
'condition' => array(
'content_type' => 'content',
),
)
);
$this->add_control(
'ct_saved_rows',
array(
'label' => __( 'Select Section', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'section' ),
'default' => '-1',
'condition' => array(
'content_type' => 'saved_rows',
),
)
);
$this->add_control(
'ct_saved_container',
array(
'label' => __( 'Select container', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'container' ),
'default' => '-1',
'condition' => array(
'content_type' => 'saved_container',
),
)
);
$this->add_control(
'ct_page_templates',
array(
'label' => __( 'Select Page', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'page' ),
'default' => '-1',
'condition' => array(
'content_type' => 'saved_page_templates',
),
)
);
$this->add_control(
'ct_saved_modules',
array(
'label' => __( 'Select Widget', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => UAEL_Helper::get_saved_data( 'widget' ),
'default' => '-1',
'condition' => array(
'content_type' => 'saved_modules',
),
)
);
$this->end_controls_section();
}
/**
* Register menu content type controls.
*
* @since 1.27.2
* @access protected
*/
protected function register_menu_content_controls() {
$this->start_controls_section(
'menu_content_type',
array(
'label' => __( 'Menu', 'uael' ),
'condition' => array(
'content_type' => array( 'menu' ),
),
)
);
$this->add_control(
'wrap_the_submenu',
array(
'label' => __( 'Hide Submenu Item', 'uael' ),
'description' => __( 'Enable this option to hide/wrap submenu under respective parent menu item.', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'label_off' => __( 'No', 'uael' ),
'label_on' => __( 'Yes', 'uael' ),
'prefix_class' => 'uael-offcanvas-wrap-submenu-',
'condition' => array(
'content_type' => array( 'menu' ),
),
'render_type' => 'template',
)
);
$this->add_control(
'submenu_icon',
array(
'label' => __( 'Submenu Trigger Icon', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'arrow',
'options' => array(
'arrow' => __( 'Arrow', 'uael' ),
'plus' => __( 'Plus Sign', 'uael' ),
'classic' => __( 'Classic', 'uael' ),
),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
'prefix_class' => 'uael-offcanvas-submenu-icon-',
)
);
$this->add_control(
'link_redirect',
array(
'label' => __( 'Action On Menu Click', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'child',
'options' => array(
'child' => __( 'Open Submenu', 'uael' ),
'self_link' => __( 'Redirect To Self Link', 'uael' ),
),
'prefix_class' => 'uael-off-canvas-link-redirect-',
'condition' => array(
'content_type' => array( 'menu' ),
'wrap_the_submenu' => 'yes',
),
)
);
$this->end_controls_section();
}
/**
* Register Off - Canvas Title Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_display_content_controls() {
$this->start_controls_section(
'offcanvas',
array(
'label' => __( 'Display Settings', 'uael' ),
)
);
$this->add_control(
'offcanvas_on',
array(
'label' => __( 'Display On', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'button',
'options' => array(
'button' => __( 'Button', 'uael' ),
'icon' => __( 'Icon', 'uael' ),
'custom' => __( 'Custom Class', 'uael' ),
'custom_id' => __( 'Custom ID', 'uael' ),
),
)
);
$this->add_control(
'btn_text',
array(
'label' => __( 'Button Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Click Me', 'uael' ),
'placeholder' => __( 'Click Me', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
if ( UAEL_Helper::is_elementor_updated() ) {
$this->add_control(
'new_icon',
array(
'label' => __( 'Icon', 'uael' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'icon',
'default' => array(
'value' => 'fa fa-home',
'library' => 'fa-solid',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
} else {
$this->add_control(
'icon',
array(
'label' => __( 'Icon', 'uael' ),
'type' => Controls_Manager::ICON,
'default' => 'fa fa-home',
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
}
$this->add_control(
'icon_size',
array(
'label' => __( 'Size (px)', 'uael' ),
'type' => Controls_Manager::SLIDER,
'default' => array(
'size' => 60,
),
'range' => array(
'px' => array(
'max' => 500,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action .uael-offcanvas-icon-bg i,
{{WRAPPER}} .uael-offcanvas-action .uael-offcanvas-icon-bg svg' => 'font-size: {{SIZE}}px; width: {{SIZE}}px; height: {{SIZE}}px; line-height: {{SIZE}}px;',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_control(
'uael_display_position',
array(
'label' => __( 'Position', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'inline',
'options' => array(
'inline' => __( 'Inline', 'uael' ),
'floating' => __( 'Floating', 'uael' ),
),
'condition' => array(
'offcanvas_on' => array( 'button', 'icon' ),
),
'prefix_class' => 'uael-offcanvas-trigger-align-',
'render_type' => 'template',
)
);
// If uael_display_position is Inline.
$this->add_responsive_control(
'uael_display_inline_button_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
'justify' => array(
'title' => __( 'Justified', 'uael' ),
'icon' => 'fa fa-align-justify',
),
),
'default' => 'left',
'condition' => array(
'uael_display_position' => 'inline',
'offcanvas_on' => 'button',
),
'toggle' => false,
'frontend_available' => true,
)
);
// If uael_display_position is Floating.
$this->add_control(
'uael_display_floating_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'left',
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'toggle' => false,
'label_block' => false,
'condition' => array(
'offcanvas_on' => array( 'button', 'icon' ),
'uael_display_position' => 'floating',
),
)
);
$this->add_responsive_control(
'uael_display_floating_on_window_position',
array(
'label' => __( 'Vertical Floating Position', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => '%',
'default' => array(
'size' => '50',
'unit' => '%',
),
'tablet_default' => array(
'size' => '50',
'unit' => '%',
),
'mobile_default' => array(
'size' => '50',
'unit' => '%',
),
'range' => array(
'%' => array(
'min' => 0,
'max' => 100,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap .uael-button-wrapper .uael-offcanvas-action-alignment-left,
{{WRAPPER}} .uael-offcanvas-action-wrap .uael-offcanvas-icon-wrap .uael-offcanvas-action-alignment-left,
{{WRAPPER}} .uael-offcanvas-action-wrap .uael-button-wrapper .uael-offcanvas-action-alignment-right,
{{WRAPPER}} .uael-offcanvas-action-wrap .uael-offcanvas-icon-wrap .uael-offcanvas-action-alignment-right' => 'top: {{SIZE}}{{UNIT}}; transform: translateY( -{{SIZE}}{{UNIT}} );',
),
'condition' => array(
'uael_display_position' => 'floating',
'offcanvas_on' => array( 'button', 'icon' ),
),
)
);
$this->add_responsive_control(
'uael_display_floating_on_window_horizontal_position',
array(
'label' => __( 'Horizontal Floating Position', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => '%',
'default' => array(
'size' => '0',
'unit' => '%',
),
'tablet_default' => array(
'size' => '0',
'unit' => '%',
),
'mobile_default' => array(
'size' => '0',
'unit' => '%',
),
'range' => array(
'%' => array(
'min' => 0,
'max' => 50,
),
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap .uael-button-wrapper .uael-offcanvas-action-alignment-left,
{{WRAPPER}} .uael-offcanvas-action-wrap .uael-offcanvas-icon-wrap .uael-offcanvas-action-alignment-left'
=> 'left: {{SIZE}}{{UNIT}}; transform: translateX( {{SIZE}}{{UNIT}} );',
'{{WRAPPER}} .uael-offcanvas-action-wrap .uael-button-wrapper .uael-offcanvas-action-alignment-right,
{{WRAPPER}} .uael-offcanvas-action-wrap .uael-offcanvas-icon-wrap .uael-offcanvas-action-alignment-right' => 'right: {{SIZE}}{{UNIT}}; transform: translateX( {{SIZE}}{{UNIT}} );',
),
'condition' => array(
'uael_display_position' => 'floating',
'offcanvas_on' => array( 'button', 'icon' ),
),
)
);
$this->add_control(
'btn_size',
array(
'label' => __( 'Size', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'sm',
'options' => array(
'xs' => __( 'Extra Small', 'uael' ),
'sm' => __( 'Small', 'uael' ),
'md' => __( 'Medium', 'uael' ),
'lg' => __( 'Large', 'uael' ),
'xl' => __( 'Extra Large', 'uael' ),
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
if ( UAEL_Helper::is_elementor_updated() ) {
$this->add_control(
'new_offcanvas_button_icon',
array(
'label' => __( 'Select Icon', 'uael' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'offcanvas_button_icon',
'condition' => array(
'offcanvas_on' => 'button',
),
'render_type' => 'template',
)
);
} else {
$this->add_control(
'offcanvas_button_icon',
array(
'label' => __( 'Select Icon', 'uael' ),
'type' => Controls_Manager::ICON,
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
}
$this->add_control(
'offcanvas_button_icon_position',
array(
'label' => __( 'Icon Position', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'right',
'label_block' => false,
'options' => array(
'right' => __( 'After Text', 'uael' ),
'left' => __( 'Before Text', 'uael' ),
),
'conditions' => array(
'relation' => 'and',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'offcanvas_button_icon' ),
'operator' => '!=',
'value' => '',
),
array(
'name' => 'offcanvas_on',
'operator' => '==',
'value' => 'button',
),
),
),
)
);
$this->add_control(
'offcanvas_icon_spacing',
array(
'label' => __( 'Icon Spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 0,
'max' => 50,
),
),
'default' => array(
'size' => '5',
'unit' => 'px',
),
'conditions' => array(
'relation' => 'and',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'offcanvas_button_icon' ),
'operator' => '!=',
'value' => '',
),
array(
'name' => 'offcanvas_on',
'operator' => '==',
'value' => 'button',
),
),
),
'selectors' => array(
'{{WRAPPER}} .elementor-button .elementor-align-icon-right, {{WRAPPER}} .uael-infobox-link-icon-after' => 'margin-left: {{SIZE}}{{UNIT}};',
'{{WRAPPER}} .elementor-button .elementor-align-icon-left, {{WRAPPER}} .uael-infobox-link-icon-before' => 'margin-right: {{SIZE}}{{UNIT}};',
),
)
);
$this->add_control(
'offcanvas_custom',
array(
'label' => __( 'Class', 'uael' ),
'type' => Controls_Manager::TEXT,
'description' => __( 'Add your custom class without the dot. e.g: my-class', 'uael' ),
'condition' => array(
'offcanvas_on' => 'custom',
),
)
);
$this->add_control(
'offcanvas_custom_id',
array(
'label' => __( 'Custom ID', 'uael' ),
'type' => Controls_Manager::TEXT,
'description' => __( 'Add your custom id without the # key. e.g: my-id', 'uael' ),
'condition' => array(
'offcanvas_on' => 'custom_id',
),
)
);
$this->add_control(
'offcanvas_trigger_zindex',
array(
'label' => __( 'Z-Index', 'uael' ),
'description' => __( 'Adjust the z-index of the floating trigger if it is not visibile on the page. Defaults is set to 999', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => '999',
'min' => 0,
'step' => 1,
'condition' => array(
'offcanvas_on' => array( 'button', 'icon' ),
'uael_display_position' => 'floating',
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-trigger' => 'z-index: {{SIZE}};',
),
)
);
$this->add_responsive_control(
'all_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'default' => 'left',
'condition' => array(
'offcanvas_on' => 'icon',
'uael_display_position' => 'inline',
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap' => 'text-align: {{VALUE}};',
),
'toggle' => false,
)
);
$this->end_controls_section();
}
/**
* Register Off - Canvas Close button.
*
* @since 1.11.0
* @access protected
*/
protected function register_close_controls() {
$this->start_controls_section(
'section_close',
array(
'label' => __( 'Close Button', 'uael' ),
)
);
if ( UAEL_Helper::is_elementor_updated() ) {
$this->add_control(
'new_close_icon',
array(
'label' => __( 'Select Close Icon', 'uael' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'close_icon',
'default' => array(
'value' => 'fas fa-times',
'library' => 'fa-solid',
),
'render_type' => 'template',
)
);
} else {
$this->add_control(
'close_icon',
array(
'label' => __( 'Select Close Icon', 'uael' ),
'type' => Controls_Manager::ICON,
'default' => 'fa fa-close',
)
);
}
$this->add_control(
'close_inside_icon_position',
array(
'label' => __( 'Icon Alignment', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'right-top',
'options' => array(
'left-top' => __( 'Left Top', 'uael' ),
'right-top' => __( 'Right Top', 'uael' ),
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->add_responsive_control(
'close_icon_size',
array(
'label' => __( 'Size', 'uael' ),
'type' => Controls_Manager::SLIDER,
'default' => array(
'size' => 14,
),
'range' => array(
'px' => array(
'max' => 60,
),
),
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-close .uael-offcanvas-close-icon, .uaoffcanvas-{{ID}} .uael-offcanvas-close .uael-offcanvas-close-icon svg' => 'height: calc( {{SIZE}}px + 5px ); width: calc( {{SIZE}}px + 5px ); font-size: calc( {{SIZE}}px + 5px ); line-height: calc( {{SIZE}}px + 5px );',
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->add_control(
'esc_keypress',
array(
'label' => __( 'Close on ESC Keypress', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'return_value' => 'yes',
'label_off' => __( 'No', 'uael' ),
'label_on' => __( 'Yes', 'uael' ),
)
);
$this->add_control(
'overlay_click',
array(
'label' => __( 'Close on Overlay Click', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'default' => 'no',
'return_value' => 'yes',
'label_off' => __( 'No', 'uael' ),
'label_on' => __( 'Yes', 'uael' ),
)
);
$this->end_controls_section();
}
/**
* Register off-canvas button Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_button_style_controls() {
$this->start_controls_section(
'section_button_style',
array(
'label' => __( 'Button', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'btn_html_message',
array(
'type' => Controls_Manager::RAW_HTML,
'raw' => sprintf( '<p style="font-size: 11px;font-style: italic;line-height: 1.4;color: #a4afb7;">%s</p>', __( 'To see these changes please turn off the preview setting from Content Tab.', 'uael' ) ),
'condition' => array(
'preview_offcanvas' => 'yes',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'btn_typography',
'label' => __( 'Typography', 'uael' ),
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_ACCENT,
),
'selector' => '{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button',
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_responsive_control(
'btn_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', 'em', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->start_controls_tabs( 'tabs_button_style' );
$this->start_controls_tab(
'tab_button_normal',
array(
'label' => __( 'Normal', 'uael' ),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'button_text_color',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button' => 'color: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'btn_background_color',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button' => 'background-color: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
)
);
$this->add_group_control(
Group_Control_Border::get_type(),
array(
'name' => 'btn_border',
'label' => __( 'Border', 'uael' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button',
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'btn_border_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
array(
'name' => 'button_box_shadow',
'selector' => '{{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button',
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_button_hover',
array(
'label' => __( 'Hover', 'uael' ),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'btn_hover_color',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button:hover, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button:hover' => 'color: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->add_control(
'btn_hover_bg_color',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button:hover, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button:hover' => 'background-color: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
)
);
$this->add_control(
'button_hover_border_color',
array(
'label' => __( 'Border Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'condition' => array(
'border_border!' => '',
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action-wrap a.elementor-button:hover, {{WRAPPER}} .uael-offcanvas-action-wrap .elementor-button:hover' => 'border-color: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'button',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register off-canvas Icon Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_icon_style_controls() {
$this->start_controls_section(
'section_offcanvas_icon_display_style',
array(
'label' => __( 'Icon', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_responsive_control(
'offcanvas_icon_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', 'em', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-icon-bg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->start_controls_tabs( 'icon_style' );
$this->start_controls_tab(
'icon_normal',
array(
'label' => __( 'Normal', 'uael' ),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_control(
'icon_color_normal',
array(
'label' => __( 'Icon Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action i' => 'color: {{VALUE}};',
'{{WRAPPER}} .uael-offcanvas-action svg' => 'fill: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_control(
'icon_background_color_normal',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-icon-bg' => 'background: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'icon_hover',
array(
'label' => __( 'Hover', 'uael' ),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_control(
'icon_color_hover',
array(
'label' => __( 'Icon Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-action i:hover' => 'color: {{VALUE}};',
'{{WRAPPER}} .uael-offcanvas-action svg:hover' => 'fill: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->add_control(
'icon_background_color_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-icon-bg:hover' => 'background: {{VALUE}};',
),
'condition' => array(
'offcanvas_on' => 'icon',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register off-canvas CLose Icon Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_close_icon_style_controls() {
$this->start_controls_section(
'section_close_icon_style',
array(
'label' => __( 'Close Icon', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->add_control(
'close_icon_color_normal',
array(
'label' => __( 'Icon Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => '#000000',
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-close .uael-offcanvas-close-icon i' => 'color: {{VALUE}};',
'.uaoffcanvas-{{ID}} .uael-offcanvas-close .uael-offcanvas-close-icon svg' => 'fill: {{VALUE}};',
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->add_control(
'close_icon_color_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => 'rgba(0,0,0,.3)',
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-close' => 'background-color: {{VALUE}};',
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->add_responsive_control(
'close_icon_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', 'em', '%' ),
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-close-icon-wrapper .uael-offcanvas-close' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => UAEL_Helper::get_new_icon_name( 'close_icon' ),
'operator' => '!=',
'value' => '',
),
),
),
)
);
$this->end_controls_section();
}
/**
* Register offcanvas Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_offcanvas_style_controls() {
$this->start_controls_section(
'section_offcanvas_style',
array(
'label' => __( 'Off - Canvas', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'offcanvas_bg_color',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas' => 'background-color: {{VALUE}};',
),
)
);
$this->add_responsive_control(
'offcanvas_spacing',
array(
'label' => __( 'Content Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', 'em', '%' ),
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->end_controls_section();
}
/**
* Register Menu Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_menu_style_controls() {
$this->start_controls_section(
'section_menu_style',
array(
'label' => __( 'Menu', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->add_control(
'menu_heading',
array(
'label' => __( 'Menu Item', 'uael' ),
'type' => Controls_Manager::HEADING,
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'menu_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
),
'selector' => '{{WRAPPER}} .uael-offcanvas-menu',
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->add_responsive_control(
'menu_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'default' => array(
'top' => '5',
'bottom' => '5',
'left' => '20',
'right' => '20',
'unit' => 'px',
'isLinked' => false,
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .menu-item a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->start_controls_tabs( 'tabs_style_menu_item' );
$this->start_controls_tab(
'tab_menu_item_normal',
array(
'label' => __( 'Normal', 'uael' ),
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->add_control(
'menu_item_color',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .menu-item a' => 'color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_menu_item_hover',
array(
'label' => __( 'Hover', 'uael' ),
)
);
$this->add_control(
'menu_item_color_hover',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .menu-item a:hover' => 'color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->add_control(
'menu_item_bgcolor_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .menu-item a:hover' => 'background-color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->add_control(
'submenu_heading',
array(
'label' => __( 'Submenu Item', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'submenu_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
),
'selector' => '{{WRAPPER}} .uael-offcanvas-menu .sub-menu',
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->add_responsive_control(
'submenu_padding',
array(
'label' => __( 'Padding', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'default' => array(
'top' => '5',
'bottom' => '5',
'left' => '20',
'right' => '20',
'unit' => 'px',
'isLinked' => false,
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .sub-menu a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->start_controls_tabs( 'tabs_style_submenu_item' );
$this->start_controls_tab(
'tab_submenu_item_normal',
array(
'label' => __( 'Normal', 'uael' ),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->add_control(
'submenu_item_color',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'default' => '',
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .sub-menu a' => 'color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->end_controls_tab();
$this->start_controls_tab(
'tab_submenu_item_hover',
array(
'label' => __( 'Hover', 'uael' ),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->add_control(
'submenu_item_color_hover',
array(
'label' => __( 'Text Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_ACCENT,
),
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .sub-menu a:hover' => 'color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->add_control(
'submenu_item_bgcolor_hover',
array(
'label' => __( 'Background Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .uael-offcanvas-menu .sub-menu a:hover' => 'background-color: {{VALUE}}',
),
'condition' => array(
'content_type' => 'menu',
'wrap_the_submenu' => 'yes',
),
)
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
}
/**
* Register offcanvas Content Style Controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_content_style_controls() {
$this->start_controls_section(
'section_content_style',
array(
'label' => __( 'Content', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'condition' => array(
'content_type' => 'content',
),
)
);
$this->add_control(
'content_text_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-content' => 'color: {{VALUE}};',
'{{WRAPPER}} .uael-offcanvas-content' => 'color: {{VALUE}};',
),
'condition' => array(
'content_type' => 'content',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'content_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_TEXT,
),
'selector' => '.uaoffcanvas-{{ID}} .uael-offcanvas-content .uael-text-editor',
'separator' => 'before',
'condition' => array(
'content_type' => 'content',
),
)
);
$this->add_group_control(
Group_Control_Border::get_type(),
array(
'name' => 'content_border',
'label' => __( 'Content Border', 'uael' ),
'placeholder' => '1px',
'default' => '1px',
'selector' => '{{WRAPPER}} .uaoffcanvas-{{ID}} .uael-offcanvas .uael-offcanvas-content',
'condition' => array(
'content_type' => 'content',
),
)
);
$this->add_control(
'content_border_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .uaoffcanvas-{{ID}} .uael-offcanvas .uael-offcanvas-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
'condition' => array(
'content_type' => 'content',
),
)
);
$this->end_controls_section();
}
/**
* Register Off-Canvas controls.
*
* @since 1.11.0
* @access protected
*/
protected function register_display_offcanvas_controls() {
$this->start_controls_section(
'section_offcanvas_controls',
array(
'label' => __( 'Off - Canvas', 'uael' ),
)
);
$this->add_responsive_control(
'offcanvas_width',
array(
'label' => __( 'Width (px)', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px' ),
'default' => array(
'size' => '300',
'unit' => 'px',
),
'tablet_default' => array(
'size' => '250',
'unit' => 'px',
),
'mobile_default' => array(
'size' => '200',
'unit' => 'px',
),
'range' => array(
'px' => array(
'min' => 0,
'max' => 2000,
),
),
'selectors' => array(
'{{WRAPPER}} .uaoffcanvas-{{ID}} .uael-offcanvas' => 'width: {{SIZE}}px;',
'{{WRAPPER}} .uaoffcanvas-{{ID}}.uael-offcanvas-parent-wrapper .position-at-left' => 'left: -{{SIZE}}px;',
'{{WRAPPER}} .uaoffcanvas-{{ID}}.uael-offcanvas-parent-wrapper .position-at-right' => 'right: -{{SIZE}}px;',
),
)
);
$this->add_control(
'offcanvas_position',
array(
'label' => __( 'Position', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'at-left',
'options' => array(
'at-left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'at-right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'label_block' => false,
'toggle' => false,
)
);
$this->add_control(
'offcanvas_type',
array(
'label' => __( 'Appear Effect', 'uael' ),
'type' => Controls_Manager::SELECT,
'default' => 'normal',
'label_block' => false,
'options' => array(
'normal' => __( 'Slide', 'uael' ),
'push' => __( 'Push', 'uael' ),
),
'render_type' => 'template',
)
);
$this->add_control(
'page_overlay',
array(
'label' => __( 'Overlay Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'default' => 'rgba(0,0,0,0.75)',
'selectors' => array(
'.uaoffcanvas-{{ID}} .uael-offcanvas-overlay' => 'background: {{VALUE}};',
),
'render_type' => 'template',
)
);
$this->end_controls_section();
}
/**
* Register Off-Canvas helpful information.
*
* @since 1.11.0
* @access protected
*/
protected function register_helpful_information() {
if ( parent::is_internal_links() ) {
$this->start_controls_section(
'section_helpful_info',
array(
'label' => __( 'Helpful Information', 'uael' ),
)
);
$this->add_control(
'help_doc_1',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s Getting started article » %2$s', 'uael' ), '<a href=' . UAEL_DOMAIN . 'docs/off-canvas-widget/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin" target="_blank" rel="noopener">', '</a>' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->add_control(
'help_doc_2',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s Trigger Off-Canvas from any Elementor Widget » %2$s', 'uael' ), '<a href=' . UAEL_DOMAIN . 'docs/off-canvas-widget/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin" target="_blank" rel="noopener">', '</a>' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->add_control(
'help_doc_3',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s How to Design an Off-Canvas menu for Elementor? » %2$s', 'uael' ), '<a href=' . UAEL_DOMAIN . 'docs/design-off-canvas-menu-for-elementor/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin" target="_blank" rel="noopener">', '</a>' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->add_control(
'help_doc_4',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s How to Trigger Off-Canvas on the Click of a Menu Element? » %2$s', 'uael' ), '<a href=' . UAEL_DOMAIN . 'docs/off-canvas-widget/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin" target="_blank" rel="noopener">', '</a>' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->end_controls_section();
}
}
/**
* Render content type list.
*
* @since 1.11.0
* @return array Array of content type
* @access public
*/
public function get_content_type() {
$content_type = array(
'content' => __( 'Content', 'uael' ),
'menu' => __( 'Menu', 'uael' ),
'saved_rows' => __( 'Saved Section', 'uael' ),
'saved_container' => __( 'Saved container', 'uael' ),
'saved_page_templates' => __( 'Saved Page', 'uael' ),
);
if ( defined( 'ELEMENTOR_PRO_VERSION' ) ) {
$content_type['saved_modules'] = __( 'Saved Widget', 'uael' );
}
return $content_type;
}
/**
* Get available menus list
*
* @since 1.11.0
* @return array Array of menu
* @access public
*/
public function get_menus_list() {
$menus = wp_get_nav_menus();
$options = array();
foreach ( $menus as $menu ) {
$options[ $menu->slug ] = $menu->name;
}
return $options;
}
/**
* Render Menu HTML.
*
* @since 1.11.0
* @param array $settings The settings array.
* @param int $node_id The node id.
* @return string menu HTML
* @access public
*/
public function get_menu_html( $settings, $node_id ) {
$menus = $this->get_menus_list();
if ( ! empty( $menus ) ) {
$args = array(
'echo' => false,
'menu' => $settings['menu'],
'menu_class' => 'uael-offcanvas-menu',
'fallback_cb' => '__return_empty_string',
'container' => '',
);
if ( 'yes' === $settings['wrap_the_submenu'] ) {
$menu_toggle_array = array(
'menu_id' => 'menu-' . $this->get_menu_index() . '-' . $this->get_id(),
'walker' => new Menu_Walker(),
);
$args = array_merge( $args, $menu_toggle_array );
}
$menu_html = wp_nav_menu( $args );
return $menu_html;
}
}
/**
* Render Off - Canvas widget classes names.
*
* @since 1.11.0
* @param array $settings The settings array.
* @param int $node_id The node id.
* @return string Concatenated string of classes
* @access public
*/
public function get_offcanvas_content( $settings, $node_id ) {
$content_type = $settings['content_type'];
$dynamic_settings = $this->get_settings_for_display();
$output_html;
switch ( $content_type ) {
case 'content':
global $wp_embed;
$output_html = '<div class="uael-text-editor elementor-inline-editing" data-elementor-setting-key="ct_content" data-elementor-inline-editing-toolbar="advanced">' . wpautop( $wp_embed->autoembed( $dynamic_settings['ct_content'] ) ) . '</div>';
break;
case 'menu':
$menu_content = $this->get_menu_html( $settings, $node_id );
$output_html = $menu_content;
break;
case 'saved_rows':
$output_html = \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $settings['ct_saved_rows'] );
break;
case 'saved_container':
$output_html = \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $settings['ct_saved_container'] );
break;
case 'saved_modules':
$output_html = \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $settings['ct_saved_modules'] );
break;
case 'saved_page_templates':
$output_html = \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $settings['ct_page_templates'] );
break;
default:
break;
}
return $output_html;
}
/**
* Render Button.
*
* @since 1.11.0
* @param int $node_id The node id.
* @param array $settings The settings array.
* @access public
*/
public function render_button( $node_id, $settings ) {
$this->add_render_attribute( 'wrapper', 'class', 'uael-button-wrapper elementor-button-wrapper' );
$this->add_render_attribute( 'button', 'href', 'javascript:void(0);' );
$this->add_render_attribute( 'button', 'class', 'uael-offcanvas-trigger elementor-button-link elementor-button elementor-clickable' );
if ( ! empty( $settings['btn_size'] ) ) {
$this->add_render_attribute( 'button', 'class', 'elementor-size-' . $settings['btn_size'] );
}
$position = '';
if ( 'button' === $settings['offcanvas_on'] ) {
if ( 'floating' === $settings['uael_display_position'] ) {
$position = ' uael-offcanvas-action-alignment-' . $settings['uael_display_floating_align'];
$this->add_render_attribute( 'button', 'class', '' . $position . '' );
} else {
if ( ! empty( $settings['uael_display_inline_button_align'] ) ) {
$this->add_render_attribute( 'wrapper', 'class', 'elementor-align-' . $settings['uael_display_inline_button_align'] );
$this->add_render_attribute( 'wrapper', 'class', 'elementor-tablet-align-' . $settings['uael_display_inline_button_align_tablet'] );
$this->add_render_attribute( 'wrapper', 'class', 'elementor-mobile-align-' . $settings['uael_display_inline_button_align_mobile'] );
}
}
}
?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'wrapper' ) ); ?>>
<a <?php echo wp_kses_post( $this->get_render_attribute_string( 'button' ) ); ?> data-offcanvas="<?php echo esc_attr( $node_id ); ?>">
<?php $this->render_button_text(); ?>
</a>
</div>
<?php
}
/**
* Render close icon.
*
* @since 1.11.0
* @param string $node_id The node id.
* @param array $settings The settings array.
* @access protected
*/
protected function render_close_icon( $node_id, $settings ) {
$close_position = '';
$close_position = 'uael-offcanvas-close-icon-position-' . $settings['close_inside_icon_position'];
$this->add_render_attribute( 'close-wrapper', 'class', 'uael-offcanvas-close-icon-wrapper elementor-icon-wrapper elementor-clickable' );
$this->add_render_attribute( 'close-wrapper', 'class', $close_position );
$this->add_render_attribute(
'close-icon',
'class',
'uael-offcanvas-close elementor-icon-link elementor-clickable '
);
if ( UAEL_Helper::is_elementor_updated() ) {
if ( ! isset( $settings['close_icon'] ) && ! \Elementor\Icons_Manager::is_migration_allowed() ) {
// add old default.
$settings['close_icon'] = 'fa fa-close';
}
$has_icon = ! empty( $settings['close_icon'] );
if ( ! $has_icon && ! empty( $settings['new_close_icon']['value'] ) ) {
$has_icon = true;
}
$close_migrated = isset( $settings['__fa4_migrated']['new_close_icon'] );
$close_is_new = ! isset( $settings['close_icon'] ) && \Elementor\Icons_Manager::is_migration_allowed();
if ( $has_icon ) {
?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'close-wrapper' ) ); ?>>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'close-icon' ) ); ?>>
<span class="uael-offcanvas-close-icon">
<?php if ( $close_migrated || $close_is_new ) { ?>
<?php \Elementor\Icons_Manager::render_icon( $settings['new_close_icon'], array( 'aria-hidden' => 'true' ) ); ?>
<?php } elseif ( ! empty( $settings['close_icon'] ) ) { ?>
<i class="<?php echo esc_attr( $settings['close_icon'] ); ?>"></i>
<?php } ?>
</span>
</span>
</div>
<?php
}
} elseif ( ! empty( $settings['close_icon'] ) ) {
?>
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'close-wrapper' ) ); ?>>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'close-icon' ) ); ?>>
<span class="uael-offcanvas-close-icon">
<i class="<?php echo esc_attr( $settings['close_icon'] ); ?>"></i>
</span>
</span>
</div>
<?php
}
}
/**
* Render button text.
*
* @since 1.11.0
* @access protected
*/
protected function render_button_text() {
$settings = $this->get_settings();
$this->add_render_attribute( 'content-wrapper', 'class', 'elementor-button-content-wrapper' );
$this->add_render_attribute(
'btn-text',
array(
'class' => 'elementor-button-text elementor-inline-editing',
'data-elementor-setting-key' => 'btn_text',
'data-elementor-inline-editing-toolbar' => 'none',
)
);
$this->add_render_attribute(
'icon-align',
array(
'class' => 'elementor-button-icon elementor-align-icon-' . $settings['offcanvas_button_icon_position'],
)
);
?>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'content-wrapper' ) ); ?>>
<?php if ( UAEL_Helper::is_elementor_updated() ) { ?>
<?php if ( ! empty( $settings['offcanvas_button_icon'] ) || ! empty( $settings['new_offcanvas_button_icon'] ) ) { ?>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon-align' ) ); ?>>
<?php
$button_icon_migrated = isset( $settings['__fa4_migrated']['new_offcanvas_button_icon'] );
$button_icon_is_new = ! isset( $settings['offcanvas_button_icon'] );
if ( $button_icon_is_new || $button_icon_migrated ) {
\Elementor\Icons_Manager::render_icon( $settings['new_offcanvas_button_icon'], array( 'aria-hidden' => 'true' ) );
} elseif ( ! empty( $settings['offcanvas_button_icon'] ) ) {
?>
<i class="<?php echo esc_attr( $settings['offcanvas_button_icon'] ); ?>" aria-hidden="true"></i>
<?php } ?>
</span>
<?php } ?>
<?php } elseif ( ! empty( $settings['offcanvas_button_icon'] ) ) { ?>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon-align' ) ); ?>>
<i class="<?php echo esc_attr( $settings['offcanvas_button_icon'] ); ?>" aria-hidden="true"></i>
</span>
<?php } ?>
<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'btn-text' ) ); ?>><?php echo wp_kses_post( $this->get_settings_for_display( 'btn_text' ) ); ?></span>
</span>
<?php
}
/**
* Render action HTML.
*
* @since 1.11.0
* @access protected
*/
protected function render_action_html() {
$settings = $this->get_settings();
$id = $this->get_id();
$is_editor = \Elementor\Plugin::instance()->editor->is_edit_mode();
if ( 'button' === $settings['offcanvas_on'] ) {
$this->render_button( $id, $settings );
if ( ( 'floating' === $settings['uael_display_position'] ) && $is_editor ) {
?>
<div class="uael-builder-msg" style="text-align: center;">
<h5><?php esc_attr_e( 'Off - Canvas - ID ', 'uael' ); ?><?php echo esc_attr( $id ); ?></h5>
<p><?php esc_attr_e( 'Click here to edit the "Off- Canvas" settings. This text will not be visible on frontend.', 'uael' ); ?></p>
</div>
<?php
}
} elseif ( (
'custom' === $settings['offcanvas_on'] ||
'custom_id' === $settings['offcanvas_on'] ) &&
$is_editor
) {
?>
<div class="uael-builder-msg" style="text-align: center;">
<h5><?php esc_attr_e( 'Off - Canvas - ID ', 'uael' ); ?><?php echo esc_attr( $id ); ?></h5>
<p><?php esc_attr_e( 'Click here to edit the "Off- Canvas" settings. This text will not be visible on frontend.', 'uael' ); ?></p>
</div>
<?php
} else {
$inner_html = '';
$position = '';
$this->add_render_attribute(
'action-wrap',
'class',
array(
'uael-offcanvas-action',
'elementor-clickable',
'uael-offcanvas-trigger',
)
);
$this->add_render_attribute( 'action-wrap', 'data-offcanvas', $id );
switch ( $settings['offcanvas_on'] ) {
case 'icon':
$this->add_render_attribute( 'action-wrap', 'class', 'uael-offcanvas-icon-wrap' );
if ( 'floating' === $settings['uael_display_position'] ) {
$position = ' uael-offcanvas-action-alignment-' . $settings['uael_display_floating_align'];
}
if ( ( 'floating' === $settings['uael_display_position'] ) && $is_editor ) {
?>
<div class="uael-builder-msg" style="text-align: center;">
<h5><?php esc_attr_e( 'Off - Canvas - ID ', 'uael' ); ?><?php echo esc_attr( $id ); ?></h5>
<p><?php esc_attr_e( 'Click here to edit the "Off- Canvas" settings. This text will not be visible on frontend.', 'uael' ); ?></p>
</div>
<?php
}
if ( UAEL_Helper::is_elementor_updated() ) {
$icon_migrated = isset( $settings['__fa4_migrated']['new_icon'] );
$icon_is_new = ! isset( $settings['icon'] );
if ( $icon_migrated || $icon_is_new ) {
ob_start();
\Elementor\Icons_Manager::render_icon( $settings['new_icon'], array( 'aria-hidden' => 'true' ) );
$inner_html = ob_get_clean();
} elseif ( ! empty( $settings['icon'] ) ) {
$inner_html = '<i class="' . $settings['icon'] . '" aria-hidden="true"></i>';
}
} elseif ( ! empty( $settings['icon'] ) ) {
$inner_html = '<i class="' . $settings['icon'] . '" aria-hidden="true"></i>';
}
break;
}
?>
<div tabindex="0" <?php echo wp_kses_post( $this->get_render_attribute_string( 'action-wrap' ) ); ?>><span class="uael-offcanvas-icon-bg uael-offcanvas-icon <?php echo esc_attr( $position ); ?>"><?php echo $inner_html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></span></div>
<?php
}
}
/**
* Close Render action HTML.
*
* @since 1.11.0
* @access protected
*/
protected function close_render_action_html() {
$settings = $this->get_settings_for_display();
$id = $this->get_id();
$is_editor = \Elementor\Plugin::instance()->editor->is_edit_mode();
if ( ! empty( $settings['close_icon'] ) || ! empty( $settings['new_close_icon'] ) ) {
$this->render_close_icon( $id, $settings );
}
}
/**
* Get Data Attributes.
*
* @since 1.11.0
* @param array $settings The settings array.
* @return string Data Attributes
* @access public
*/
public function get_parent_wrapper_attributes( $settings ) {
$id = $this->get_id();
$this->add_render_attribute(
'parent-wrapper',
array(
'id' => $id . '-overlay',
'data-trigger-on' => $settings['offcanvas_on'],
'data-close-on-overlay' => $settings['overlay_click'],
'data-close-on-esc' => $settings['esc_keypress'],
'data-content' => $settings['content_type'],
'data-device' => ( false !== ( stripos( $_SERVER['HTTP_USER_AGENT'], 'iPhone' ) ) ? 'true' : 'false' ),
'data-custom' => $settings['offcanvas_custom'],
'data-custom-id' => $settings['offcanvas_custom_id'],
'data-canvas-width' => $settings['offcanvas_width']['size'],
'data-wrap-menu-item' => $settings['wrap_the_submenu'],
)
);
$this->add_render_attribute(
'parent-wrapper',
'class',
array(
'uael-offcanvas-parent-wrapper',
'uael-module-content',
'uaoffcanvas-' . $id,
)
);
return $this->get_render_attribute_string( 'parent-wrapper' );
}
/**
* Render offcanvas output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.11.0
* @access protected
*/
protected function render() {
$settings = $this->get_settings();
$node_id = $this->get_id();
$is_editor = \Elementor\Plugin::instance()->editor->is_edit_mode();
$class = ( $is_editor && 'yes' === $settings['preview_offcanvas'] ) ? 'uael-show-preview' : '';
$shadowclass = ( '' !== $settings['page_overlay'] ) ? 'uael-offcanvas-shadow-inset' : 'uael-offcanvas-shadow-normal';
// To Disable scroll when overlay is added to the page add the condition of page_overlay option to $scrollclass.
$scrollclass = 'uael-offcanvas-scroll-disable';
$editor_mode_class = ( $is_editor ) ? 'uael-editor-mode' : '';
$this->add_inline_editing_attributes( 'btn_text', 'none' );
$this->add_inline_editing_attributes( 'ct_content', 'advanced' );
$this->add_render_attribute( 'inner-wrapper', 'id', 'offcanvas-' . $node_id );
$this->add_render_attribute(
'inner-wrapper',
'class',
array(
'uael-offcanvas',
'uael-custom-offcanvas',
$class,
$editor_mode_class,
'uael-offcanvas-type-' . $settings['offcanvas_type'],
$scrollclass,
$shadowclass,
)
);
$this->add_render_attribute( 'inner-wrapper', 'class', 'position-' . $settings['offcanvas_position'] );
?>
<div <?php echo wp_kses_post( $this->get_parent_wrapper_attributes( $settings ) ); ?> >
<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'inner-wrapper' ) ); ?>>
<div class="uael-offcanvas-content">
<div class="uael-offcanvas-action-wrap">
<?php echo wp_kses_post( $this->close_render_action_html() ); ?>
</div>
<div class="uael-offcanvas-text uael-offcanvas-content-data">
<?php echo do_shortcode( $this->get_offcanvas_content( $settings, $node_id ) ); ?>
</div>
</div>
</div>
<div class="uael-offcanvas-overlay elementor-clickable"></div>
</div>
<div class="uael-offcanvas-action-wrap">
<?php echo wp_kses_post( $this->render_action_html() ); ?>
</div>
<?php
}
/**
* Render offcanvas output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 1.22.1
* @access protected
*/
protected function content_template() {
}
}