trAvis - MANAGER
Edit File: tp_circle_menu.php
<?php /* Widget Name: Circle Menu Description: Circle Menu Author: Theplus Author URI: https://posimyth.com */ namespace TheplusAddons\Widgets; use Elementor\Widget_Base; use Elementor\Controls_Manager; use Elementor\Utils; use Elementor\Core\Schemes\Color; use Elementor\Group_Control_Typography; use Elementor\Group_Control_Border; use Elementor\Group_Control_Background; use Elementor\Group_Control_Box_Shadow; use Elementor\Core\Schemes\Typography; use Elementor\Group_Control_Image_Size; use TheplusAddons\Theplus_Element_Load; if (!defined('ABSPATH')) exit; // Exit if accessed directly class ThePlus_Circle_Menu extends Widget_Base { public function get_name() { return 'tp-circle-menu'; } public function get_title() { return esc_html__('Circle Menu', 'theplus'); } public function get_icon() { return 'fa fa-circle-o-notch theplus_backend_icon'; } public function get_categories() { return array('plus-creatives'); } protected function _register_controls() { $this->start_controls_section( 'content_section', [ 'label' => esc_html__( 'Circle Menu', 'theplus' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'icon_layout_open', [ 'label' => esc_html__( 'Icon Layout', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'circle', 'options' => [ 'circle' => esc_html__( 'Circle', 'theplus' ), 'straight' => esc_html__( 'Straight', 'theplus' ), ], ] ); $this->add_control( 'icon_layout_straight_style', [ 'label' => esc_html__( 'Menu Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'style-1', 'options' => [ 'style-1' => esc_html__( 'Style 1', 'theplus' ), 'style-2' => esc_html__( 'Style 2', 'theplus' ), ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], ], ] ); $this->add_control( 'icon_direction', [ 'label' => esc_html__( 'Icon Direction', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'bottom-right', 'options' => [ 'top' => esc_html__( 'Top', 'theplus' ), 'right' => esc_html__( 'Right', 'theplus' ), 'bottom' => esc_html__( 'Bottom', 'theplus' ), 'left' => esc_html__( 'Left', 'theplus' ), 'top-right' => esc_html__( 'Top Right', 'theplus' ), 'top-left' => esc_html__( 'Top Left', 'theplus' ), 'bottom-right' => esc_html__( 'Bottom Right', 'theplus' ), 'bottom-left' => esc_html__( 'Bottom Left', 'theplus' ), 'top-half' => esc_html__( 'Top Half', 'theplus' ), 'right-half' => esc_html__( 'Right Half', 'theplus' ), 'bottom-half' => esc_html__( 'Bottom Half', 'theplus' ), 'left-half' => esc_html__( 'Left Half', 'theplus' ), 'full' => esc_html__( 'Full', 'theplus' ), 'none' => esc_html__( 'None', 'theplus' ), ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'layout_straight_menu_direction', [ 'label' => esc_html__( 'Menu Direction', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'right', 'options' => [ 'top' => esc_html__( 'Top', 'theplus' ), 'right' => esc_html__( 'Right', 'theplus' ), 'bottom' => esc_html__( 'Bottom', 'theplus' ), 'left' => esc_html__( 'Left', 'theplus' ), ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], ], ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'tooltip_menu_title', [ 'label' => esc_html__( 'Tooltip Title', 'theplus' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], ] ); $repeater->add_control( 'loop_image_icon', [ 'label' => esc_html__( 'Select Icon', 'theplus' ), 'type' => Controls_Manager::SELECT, 'description' => esc_html__('You can select Icon, Custom Image using this option.','theplus'), 'default' => 'icon', 'options' => [ '' => esc_html__( 'None', 'theplus' ), 'icon' => esc_html__( 'Icon', 'theplus' ), 'image' => esc_html__( 'Image', 'theplus' ), ], ] ); $repeater->add_control( 'loop_select_image', [ 'label' => esc_html__( 'Use Image As icon', 'theplus' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => '', ], 'media_type' => 'image', 'condition' => [ 'loop_image_icon' => 'image', ], ] ); $repeater->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'loop_select_image_thumbnail', 'default' => 'full', 'separator' => 'none', 'separator' => 'after', 'condition' => [ 'loop_image_icon' => 'image', ], ] ); $repeater->add_control( 'loop_icon_style', [ 'label' => esc_html__( 'Icon Font', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'font_awesome', 'options' => [ 'font_awesome' => esc_html__( 'Font Awesome', 'theplus' ), 'font_awesome_5' => esc_html__( 'Font Awesome 5', 'theplus' ), 'icon_mind' => esc_html__( 'Icons Mind', 'theplus' ), ], 'condition' => [ 'loop_image_icon' => 'icon', ], ] ); $repeater->add_control( 'loop_icon_fontawesome', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::ICON, 'default' => 'fa fa-bank', 'condition' => [ 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome', ], ] ); $repeater->add_control( 'loop_icon_fontawesome_5', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-plus', 'library' => 'solid', ], 'condition' => [ 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome_5', ], ] ); $repeater->add_control( 'loop_icons_mind', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::SELECT2, 'default' => '', 'label_block' => true, 'options' => theplus_icons_mind(), 'condition' => [ 'loop_image_icon' => 'icon', 'loop_icon_style' => 'icon_mind', ], ] ); $repeater->add_control( 'loop_icon_link_type', [ 'label' => esc_html__( 'Select Link Type', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'url', 'options' => [ 'url' => esc_html__( 'URL', 'theplus' ), 'email' => esc_html__( 'Email', 'theplus' ), 'phone' => esc_html__( 'Phone', 'theplus' ), 'nolink' => esc_html__( 'No Link', 'theplus' ), ], 'separator' => 'before', ] ); $repeater->add_control( 'icons_url', [ 'label' => esc_html__( 'Url', 'theplus' ), 'type' => Controls_Manager::URL, 'show_external' => true, 'default' => [ 'url' => '#', 'is_external' => false, 'nofollow' => false, ], 'dynamic' => [ 'active' => true, ], 'condition' => [ 'loop_icon_link_type' => 'url', ], ] ); $repeater->add_control( 'email', [ 'label' => esc_html__( 'Email', 'theplus' ), 'type' => \Elementor\Controls_Manager::TEXT, 'placeholder' => esc_html__( 'Enter Email', 'theplus' ), 'dynamic' => [ 'active' => true, ], 'condition' => [ 'loop_icon_link_type' => 'email', ], ] ); $repeater->add_control( 'phone', [ 'label' => esc_html__( 'Phone', 'theplus' ), 'type' => \Elementor\Controls_Manager::TEXT, 'placeholder' => esc_html__( 'Enter Phone', 'theplus' ), 'dynamic' => [ 'active' => true, ], 'condition' => [ 'loop_icon_link_type' => 'phone', ], ] ); $repeater->start_controls_tabs( 'tabs_title_style' ); $repeater->start_controls_tab( 'tab_title_normal', [ 'label' => esc_html__( 'Normal', 'theplus' ), ] ); $repeater->add_control( 'icon_color', [ 'label' => esc_html__( 'Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}} .menu-tooltip-title' => 'color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon svg,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}} .menu-tooltip-title svg' => 'fill: {{VALUE}}', ], ] ); $repeater->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_background', 'label' => esc_html__( 'Background', 'theplus' ), 'types' => [ 'classic', 'gradient'], 'render_type' => 'ui', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}} .menu-tooltip-title', ] ); $repeater->add_control( 'icon_border_color', [ 'label' => esc_html__( 'Border Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}} .menu-tooltip-title' => 'border-color: {{VALUE}}', ], ] ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'tab_title_hover', [ 'label' => esc_html__( 'Hover', 'theplus' ), ] ); $repeater->add_control( 'icon_hover_color', [ 'label' => esc_html__( 'Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu_icon,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu-tooltip-title' => 'color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu_icon svg,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu-tooltip-title svg' => 'fill: {{VALUE}}', ], ] ); $repeater->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_hover_background', 'label' => esc_html__( 'Background', 'theplus' ), 'types' => [ 'classic', 'gradient'], 'render_type' => 'ui', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon:hover,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu-tooltip-title', ] ); $repeater->add_control( 'icon_border_hover_color', [ 'label' => esc_html__( 'Border Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu_icon,{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu.menu-style-2 .plus-circle-menu-list{{CURRENT_ITEM}}:hover .menu-tooltip-title' => 'border-color: {{VALUE}}', ], ] ); $repeater->end_controls_tab(); $repeater->end_controls_tabs(); $repeater->add_control( 'tooltip_default_hover', [ 'label' => esc_html__( 'Tooltip Visibility', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Default', 'theplus' ), 'label_off' => esc_html__( 'Hover', 'theplus' ), 'default' => 'no', ] ); $repeater->add_control( 'tooltip_text_rotate', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Tooltip Text Rotate', 'theplus'), 'size_units' => ['deg'], 'range' => [ 'deg' => [ 'min' => 0, 'max' => 360, 'step' => 1, ], ], 'default' => [ 'unit' => 'deg', 'size' => 0, ], 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon .menu-tooltip-title' => 'transform: translateY(-50%) rotate({{SIZE}}{{UNIT}})', ], ] ); $repeater->add_control( 'tooltip_text_top', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Tooltip Text Top', 'theplus'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => -300, 'max' => 300, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 0, ], 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon .menu-tooltip-title' => 'top:{{SIZE}}{{UNIT}}', ], ] ); $repeater->add_control( 'tooltip_text_left', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Tooltip Text Left', 'theplus'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => -300, 'max' => 300, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 0, ], 'render_type' => 'ui', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list{{CURRENT_ITEM}} .menu_icon .menu-tooltip-title' => 'left:{{SIZE}}{{UNIT}}', ], ] ); $repeater->add_control( 'tooltip_text_arrow', [ 'label' => esc_html__( 'Arrow Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'arrow-left', 'options' => [ 'arrow-left' => esc_html__( 'Left', 'theplus' ), 'arrow-right' => esc_html__( 'Right', 'theplus' ), 'arrow-top' => esc_html__( 'Top', 'theplus' ), 'arrow-bottom' => esc_html__( 'Bottom', 'theplus' ), 'arrow-none' => esc_html__( 'None', 'theplus' ), ], ] ); $this->add_control( 'circle_menu_list', [ 'label' => esc_html__( 'Menu List', 'theplus' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'tooltip_menu_title' => esc_html__( 'Facebook', 'theplus' ), 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome', 'loop_icon_fontawesome' => 'fa fa-facebook', ], [ 'tooltip_menu_title' => esc_html__( 'Twitter', 'theplus' ), 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome', 'loop_icon_fontawesome' => 'fa fa-twitter', ], [ 'tooltip_menu_title' => esc_html__( 'Instagram', 'theplus' ), 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome', 'loop_icon_fontawesome' => 'fa fa-instagram', ], [ 'tooltip_menu_title' => esc_html__( 'Linkedin', 'theplus' ), 'loop_image_icon' => 'icon', 'loop_icon_style' => 'font_awesome', 'loop_icon_fontawesome' => 'fa fa-linkedin', ], ], 'title_field' => '{{{ loop_image_icon }}}', ] ); $this->end_controls_section(); /* Circle Menu List*/ /* Toggle Icon */ $this->start_controls_section( 'icon_toggle', [ 'label' => esc_html__( 'Toggle Icon', 'theplus' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'loop_image_main_icon', [ 'label' => esc_html__( 'Select Icon', 'theplus' ), 'type' => Controls_Manager::SELECT, 'description' => esc_html__('You can select Icon, Custom Image using this option.','theplus'), 'default' => 'icon', 'options' => [ '' => esc_html__( 'None', 'theplus' ), 'icon' => esc_html__( 'Icon', 'theplus' ), 'image' => esc_html__( 'Image', 'theplus' ), ], ] ); $this->add_control( 'loop_max_main_width', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__('Max Width Svg', 'theplus'), 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 2, ], ], 'default' => [ 'unit' => 'px', 'size' => 100, ], 'render_type' => 'ui', 'condition' => [ 'loop_image_main_icon' => 'svg', 'loop_svg_main_icon' => ['img'], ], ] ); $this->add_control( 'loop_select_main_image', [ 'label' => esc_html__( 'Use Image As icon', 'theplus' ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => '', ], 'media_type' => 'image', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'loop_image_main_icon' => 'image', ], ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'loop_select_main_image_thumbnail', 'default' => 'full', 'separator' => 'none', 'separator' => 'after', 'condition' => [ 'loop_image_main_icon' => 'image', ], ] ); $this->add_control( 'loop_icon_main_style', [ 'label' => esc_html__( 'Icon Font', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'font_awesome', 'options' => [ 'font_awesome' => esc_html__( 'Font Awesome', 'theplus' ), 'font_awesome_5' => esc_html__( 'Font Awesome 5', 'theplus' ), 'icon_mind' => esc_html__( 'Icons Mind', 'theplus' ), ], 'condition' => [ 'loop_image_main_icon' => 'icon', ], ] ); $this->add_control( 'loop_icon_main_fontawesome', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::ICON, 'default' => 'fa fa-home', 'condition' => [ 'loop_image_main_icon' => 'icon', 'loop_icon_main_style' => 'font_awesome', ], ] ); $this->add_control( 'loop_icon_main_fontawesome_5', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'fas fa-plus', 'library' => 'solid', ], 'condition' => [ 'loop_image_main_icon' => 'icon', 'loop_icon_main_style' => 'font_awesome_5', ], ] ); $this->add_control( 'loop_icons_main_mind', [ 'label' => esc_html__( 'Icon Library', 'theplus' ), 'type' => Controls_Manager::SELECT2, 'default' => '', 'label_block' => true, 'options' => theplus_icons_mind(), 'condition' => [ 'loop_image_main_icon' => 'icon', 'loop_icon_main_style' => 'icon_mind', ], ] ); $this->add_control( 'toggle_open_icon_style', [ 'label' => esc_html__( 'Menu Open Icon Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'style-1', 'options' => [ 'style-1' => esc_html__( 'Style 1', 'theplus' ), 'style-2' => esc_html__( 'Style 2', 'theplus' ), 'style-3' => esc_html__( 'style 3', 'theplus' ), ], 'separator' => 'before', ] ); $this->end_controls_section(); /* Toggle Icon */ /* Icon Position*/ $this->start_controls_section( 'icon_position_section', [ 'label' => esc_html__( 'Icon Position', 'theplus' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'main_icon_position', [ 'label' => esc_html__( 'Position', 'theplus' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'absolute', 'options' => [ 'absolute' => esc_html__( 'Absolute', 'theplus' ), 'fixed' => esc_html__( 'Fixed', 'theplus' ), ], ] ); $this->start_controls_tabs( 'circle_icon_position' ); /*desktop start*/ $this->start_controls_tab( 'normal', [ 'label' => esc_html__( 'Desktop', 'theplus' ), ] ); $this->add_control( 'd_left_auto', [ 'label' => esc_html__( 'Left (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), ] ); $this->add_control( 'd_pos_xposition', [ 'label' => esc_html__( 'Left', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => 20, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 'd_left_auto' => [ 'yes' ], ], ] ); $this->add_control( 'd_right_auto',[ 'label' => esc_html__( 'Right (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), ] ); $this->add_control( 'd_pos_rightposition',[ 'label' => esc_html__( 'Right', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => 20, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 'd_right_auto' => [ 'yes' ], ], ] ); $this->add_control( 'd_top_auto', [ 'label' => esc_html__( 'Top (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), ] ); $this->add_control( 'd_pos_yposition', [ 'label' => esc_html__( 'Top', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => 0, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 'd_top_auto' => [ 'yes' ], ], ] ); $this->add_control( 'd_bottom_auto', [ 'label' => esc_html__( 'Bottom (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), ] ); $this->add_control( 'd_pos_bottomposition', [ 'label' => esc_html__( 'Bottom', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => 0, ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 'd_bottom_auto' => [ 'yes' ], ], ] ); $this->end_controls_tab(); /*desktop end*/ /*tablet start*/ $this->start_controls_tab( 'tablet', [ 'label' => esc_html__( 'Tablet', 'theplus' ), ] ); $this->add_control( 't_responsive', [ 'label' => esc_html__( 'Responsive Values', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( 'Yes', 'theplus' ), 'label_off' => esc_html__( 'No', 'theplus' ), ] ); $this->add_control( 't_left_auto', [ 'label' => esc_html__( 'Left (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 't_responsive' => [ 'yes' ], ], ] ); $this->add_control( 't_pos_xposition', [ 'label' => esc_html__( 'Left', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 't_responsive' => [ 'yes' ], 't_left_auto' => [ 'yes' ], ], ] ); $this->add_control( 't_right_auto',[ 'label' => esc_html__( 'Right (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 't_responsive' => [ 'yes' ], ], ] ); $this->add_control( 't_pos_rightposition',[ 'label' => esc_html__( 'Right', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 't_responsive' => [ 'yes' ], 't_right_auto' => [ 'yes' ], ], ] ); $this->add_control( 't_top_auto', [ 'label' => esc_html__( 'Top (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 't_responsive' => [ 'yes' ], ], ] ); $this->add_control( 't_pos_yposition', [ 'label' => esc_html__( 'Top', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 't_responsive' => [ 'yes' ], 't_top_auto' => [ 'yes' ], ], ] ); $this->add_control( 't_bottom_auto', [ 'label' => esc_html__( 'Bottom (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 't_responsive' => [ 'yes' ], ], ] ); $this->add_control( 't_pos_bottomposition', [ 'label' => esc_html__( 'Bottom', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'separator' => 'after', 'condition' => [ 't_responsive' => [ 'yes' ], 't_bottom_auto' => [ 'yes' ], ], ] ); $this->end_controls_tab(); /*tablet end*/ /*mobile start*/ $this->start_controls_tab( 'mobile', [ 'label' => esc_html__( 'Mobile', 'theplus' ), ] ); $this->add_control( 'm_responsive', [ 'label' => esc_html__( 'Responsive Values', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( 'Yes', 'theplus' ), 'label_off' => esc_html__( 'No', 'theplus' ), ] ); $this->add_control( 'm_left_auto', [ 'label' => esc_html__( 'Left (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 'm_responsive' => [ 'yes' ], ], ] ); $this->add_control( 'm_pos_xposition', [ 'label' => esc_html__( 'Left', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'condition' => [ 'm_responsive' => [ 'yes' ], 'm_left_auto' => [ 'yes' ], ], ] ); $this->add_control( 'm_right_auto',[ 'label' => esc_html__( 'Right (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 'm_responsive' => [ 'yes' ], ], ] ); $this->add_control( 'm_pos_rightposition',[ 'label' => esc_html__( 'Right', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'condition' => [ 'm_responsive' => [ 'yes' ], 'm_right_auto' => [ 'yes' ], ], ] ); $this->add_control( 'm_top_auto', [ 'label' => esc_html__( 'Top (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 'm_responsive' => [ 'yes' ], ], ] ); $this->add_control( 'm_pos_yposition', [ 'label' => esc_html__( 'Top', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'condition' => [ 'm_responsive' => [ 'yes' ], 'm_top_auto' => [ 'yes' ], ], ] ); $this->add_control( 'm_bottom_auto', [ 'label' => esc_html__( 'Bottom (Auto / %)', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( '%', 'theplus' ), 'label_off' => esc_html__( 'Auto', 'theplus' ), 'condition' => [ 'm_responsive' => [ 'yes' ], ], ] ); $this->add_control( 'm_pos_bottomposition', [ 'label' => esc_html__( 'Bottom', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => '%', 'size' => '', ], 'range' => [ '%' => [ 'min' => -100, 'max' => 100, 'step' => 1, ], ], 'condition' => [ 'm_responsive' => [ 'yes' ], 'm_bottom_auto' => [ 'yes' ], ], ] ); $this->end_controls_tab(); /*mobile end*/ $this->end_controls_tabs(); $this->end_controls_section(); /* Icon Position*/ /* Extra Options*/ $this->start_controls_section( 'extra_option_section', [ 'label' => esc_html__( 'Extra Options', 'theplus' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'angle_start', [ 'label' => esc_html__( 'Angle Start', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 360, 'step' => 5, ], ], 'default' => [ 'unit' => 'px', 'size' => 0, ], 'condition' => [ 'icon_direction' => [ 'none' ], 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'angle_end', [ 'label' => esc_html__( 'Angle End', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 360, 'step' => 5, ], ], 'default' => [ 'unit' => 'px', 'size' => 90, ], 'condition' => [ 'icon_direction' => [ 'none' ], 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_responsive_control( 'circle_radius', [ 'label' => esc_html__( 'Circle Radius', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 360, 'step' => 5, ], ], 'devices' => [ 'desktop', 'tablet', 'mobile' ], 'default' => [ 'unit' => 'px', 'size' => 150, ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'icon_delay', [ 'label' => esc_html__( 'Icon Delay', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 7000, 'step' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => 1000, ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'icon_speed', [ 'label' => esc_html__( 'Menu Open Speed', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 10000, 'step' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => 500, ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'icon_step_in', [ 'label' => esc_html__( 'Icon Step In', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => -500, 'max' => 500, 'step' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => -20, ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'icon_step_out', [ 'label' => esc_html__( 'Icon Step Out', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => -500, 'max' => 500, 'step' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => 20, ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->add_control( 'layout_straight_menu_gap', [ 'label' => esc_html__( 'Menu Between Gap', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'unit' => 'px', 'size' => 15, ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 200, 'step' => 1, ], ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], ], ] ); $this->add_control( 'layout_straight_menu_transition_duration', [ 'label' => esc_html__( 'Menu Open Speed', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'ms' ], 'range' => [ 'ms' => [ 'min' => 0, 'max' => 10000, 'step' => 50, ], ], 'default' => [ 'unit' => 'ms', 'size' => 1000, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu .plus-circle-menu-list:not(.plus-circle-main-menu-list)' => 'transition-duration:{{SIZE}}{{UNIT}}', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], ], ] ); $this->add_control( 'icon_transition', [ 'label' => esc_html__( 'Icon Transition', 'theplus' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'ease', 'options' => [ 'ease' => esc_html__( 'Ease', 'theplus' ), 'linear' => esc_html__( 'Linear', 'theplus' ), 'ease-in' => esc_html__( 'Ease In', 'theplus' ), 'ease-out' => esc_html__( 'Ease Out', 'theplus' ), 'ease-in-out' => esc_html__( 'Ease In Out', 'theplus' ), 'cubic-bezier(n,n,n,n)' => esc_html__( 'Cubic Bezier', 'theplus' ), ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper.layout-straight .plus-circle-menu .plus-circle-menu-list:not(.plus-circle-main-menu-list)' => 'transition-timing-function:{{VALUE}}', ], ] ); $this->add_control( 'icon_trigger', [ 'label' => esc_html__( 'Icon Trigger', 'theplus' ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'hover', 'options' => [ 'hover' => esc_html__( 'Hover', 'theplus' ), 'click' => esc_html__( 'Click', 'theplus' ), ], 'condition' => [ 'icon_layout_open' => [ 'circle' ], ], ] ); $this->end_controls_section(); /* extra options*/ /*Style tag*/ /* Icon Style*/ $this->start_controls_section( 'section_title_styling', [ 'label' => esc_html__('Icon Style', 'theplus'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'repeater_icon_size', [ 'label' => esc_html__( 'Icon Size', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 20, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon svg' => 'width: {{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'repeater_circle_width', [ 'label' => esc_html__( 'Icon Width', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 200, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:not(.plus-circle-main-menu-list)' => 'width: calc({{SIZE}}{{UNIT}} - 5px ) !important;height: calc({{SIZE}}{{UNIT}} - 5px) !important;line-height: calc({{SIZE}}{{UNIT}} - 5px) !important;', ], ] ); $this->add_responsive_control( 'repeater_icon_image_width', [ 'label' => esc_html__( 'Image Width', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 300, 'step' => 5, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 90, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon img' => 'width: {{SIZE}}{{UNIT}};, height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'repeater_icon_border', [ 'label' => esc_html__( 'Icon Border', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'theplus' ), 'label_off' => esc_html__( 'Hide', 'theplus' ), 'default' => 'no', ] ); $this->add_control( 'icon_border_radius_style', [ 'label' => esc_html__( 'Border Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'solid', 'options' => theplus_get_border_style(), 'condition' => [ 'repeater_icon_border' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon' => 'border-style: {{VALUE}};', ], ] ); $this->add_responsive_control( 'repeater_icon_border_width', [ 'label' => esc_html__( 'Border Width', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'repeater_icon_border' => 'yes', ], ] ); $this->start_controls_tabs( 'tabs_icon_border_style' ); $this->start_controls_tab( 'tab_icon_border_normal', [ 'label' => esc_html__( 'Normal', 'theplus' ), 'condition' => [ 'repeater_icon_border' => 'yes', ], ] ); $this->add_control( 'icon_border_color', [ 'label' => esc_html__( 'Border Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon' => 'border-color: {{VALUE}};', ], 'condition' => [ 'repeater_icon_border' => 'yes', ], ] ); $this->add_responsive_control( 'icon_border_radius', [ 'label' => esc_html__( 'Border Radius', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'icon_box_shadow', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu_icon', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_icon_border_hover', [ 'label' => esc_html__( 'Hover', 'theplus' ), 'condition' => [ 'repeater_icon_border' => 'yes', ], ] ); $this->add_control( 'icon_border_hover_color', [ 'label' => esc_html__( 'Border Hover Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#252525', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu_icon' => 'border-color: {{VALUE}};', ], 'condition' => [ 'repeater_icon_border' => 'yes', ], ] ); $this->add_responsive_control( 'icon_border_hover_radius', [ 'label' => esc_html__( 'Border Radius', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu_icon img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'icon_box_shadow_hover', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu_icon', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); /*Toggle Icon Style*/ $this->start_controls_section( 'section_toggle_styling', [ 'label' => esc_html__('Toggle Icon Style', 'theplus'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'toggle_size', [ 'label' => esc_html__( 'Icon Size', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 15, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon img' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'toggle_icon_width', [ 'label' => esc_html__( 'Toggle Icon Width', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 40, ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};line-height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'toggle_image_width', [ 'label' => esc_html__( 'Image Width', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', '%' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 5, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon img' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'circle_menu_border_option', [ 'label' => esc_html__( 'Circle Menu Border', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( 'Yes', 'theplus' ), 'label_off' => esc_html__( 'No', 'theplus' ), ] ); $this->add_control( 'toggle_icon_border_style', [ 'label' => esc_html__( 'Border Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'solid', 'options' => theplus_get_border_style(), 'condition' => [ 'repeater_icon_border' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon' => 'border-style: {{VALUE}};', ], 'condition' => [ 'circle_menu_border_option' => [ 'yes' ], ], ] ); $this->add_responsive_control( 'toggle_icon_border_width', [ 'label' => esc_html__( 'Icon Border Width', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'circle_menu_border_option' => [ 'yes' ], ], ] ); $this->start_controls_tabs( 'toggle_icon_main_style' ); $this->start_controls_tab( 'toggle_icon_main_normal', [ 'label' => esc_html__( 'Normal', 'theplus' ), ] ); $this->add_control( 'icon_color', [ 'label' => esc_html__( 'Icon Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list a.main_menu_icon' => 'color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list a.main_menu_icon svg' => 'fill: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3 a.main_menu_icon .close-toggle-icon,{{WRAPPER}} .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3 a.main_menu_icon .close-toggle-icon:before' => 'background-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_background', 'label' => esc_html__( 'Background', 'theplus' ), 'types' => [ 'classic', 'gradient'], 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list a.main_menu_icon', ] ); $this->add_control( 'toggle_icon_border_color', [ 'label' => esc_html__( 'Border Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list a.main_menu_icon' => 'border-color: {{VALUE}}', ], 'condition' => [ 'circle_menu_border_option' => [ 'yes' ], ], ] ); $this->add_responsive_control( 'toggle_icon_border_radius_normal', [ 'label' => esc_html__( 'Border Radius', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'toggle_icon_box_shadow_normal', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .main_menu_icon', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'toggle_icon_main_hover', [ 'label' => esc_html__( 'Hover', 'theplus' ), ] ); $this->add_control( 'icon_hover_color', [ 'label' => esc_html__( 'Icon Hover Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover a.main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon' => 'color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover a.main_menu_icon svg,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon svg' => 'fill: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3:hover a.main_menu_icon .close-toggle-icon,{{WRAPPER}} .plus-circle-menu-wrapper .plus-circle-main-menu-list.style-3:hover a.main_menu_icon .close-toggle-icon:before' => 'background-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_hover_background', 'label' => esc_html__( 'Background', 'theplus' ), 'types' => [ 'classic', 'gradient'], 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover a.main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon', ] ); $this->add_control( 'icon_hover_border', [ 'label' => esc_html__( 'Icon Hover Border', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover a.main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon' => 'border-color: {{VALUE}}', ], 'condition' => [ 'circle_menu_border_option' => [ 'yes' ], ], ] ); $this->add_responsive_control( 'toggle_icon_border_radius_hover', [ 'label' => esc_html__( 'Border Radius', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .main_menu_icon img,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'toggle_icon_box_shadow_hover', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .main_menu_icon,{{WRAPPER}} .plus-circle-menu-inner-wrapper .circleMenu-open .plus-circle-menu-list a.main_menu_icon', ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); /*Toggle Icon Style*/ $this->start_controls_section( 'icon_tooltip_text_style', [ 'label' => esc_html__( 'Tooltip Text', 'theplus' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'tooltip_text_typography', 'label' => esc_html__( 'Typography', 'theplus' ), 'scheme' => Typography::TYPOGRAPHY_3, 'selector' => '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list .menu-tooltip-title', ] ); $this->add_control( 'straight_text_padding', [ 'label' => esc_html__( 'Padding', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu-tooltip-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'straight_text_border_option', [ 'label' => esc_html__( 'Circle Menu Border', 'theplus' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'no', 'label_on' => esc_html__( 'Yes', 'theplus' ), 'label_off' => esc_html__( 'No', 'theplus' ), 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'straight_text_border_style', [ 'label' => esc_html__( 'Border Style', 'theplus' ), 'type' => Controls_Manager::SELECT, 'default' => 'solid', 'options' => theplus_get_border_style(), 'condition' => [ 'repeater_icon_border' => 'yes', ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu-tooltip-title' => 'border-style: {{VALUE}};', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', 'straight_text_border_option' => [ 'yes' ], ], ] ); $this->add_responsive_control( 'straight_text_border_width', [ 'label' => esc_html__( 'Border Width', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu-tooltip-title' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', 'straight_text_border_option' => [ 'yes' ], ], ] ); $this->start_controls_tabs( 'tabs_straight_text_style' ); $this->start_controls_tab( 'tab_straight_text_normal', [ 'label' => esc_html__( 'Normal', 'theplus' ), 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'tooltip_text_color', [ 'label' => esc_html__( 'Text Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list .menu-tooltip-title' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'straight_text_border', [ 'label' => esc_html__( 'Border Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list .menu-tooltip-title' => 'border-color: {{VALUE}}', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'tooltip_text_normal_bgcolor', [ 'label' => esc_html__( 'Background Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#000', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list .menu-tooltip-title' => 'background-color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-bottom .menu-tooltip-title:before' => 'border-top-color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-top .menu-tooltip-title:before' => 'border-bottom-color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-left .menu-tooltip-title:before' => 'border-right-color: {{VALUE}}', '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list.arrow-right .menu-tooltip-title:before' => 'border-left-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'tooltip_text_shadow', 'selector' => '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list .menu-tooltip-title', ] ); $this->end_controls_tab(); $this->start_controls_tab( 'straight_text_hover', [ 'label' => esc_html__( 'Hover', 'theplus' ), 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'straight_text_hover_color', [ 'label' => esc_html__( 'Hover Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list:hover .menu-tooltip-title' => 'color: {{VALUE}}', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'straight_text_hover_border', [ 'label' => esc_html__( 'Hover Border', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu-tooltip-title' => 'border-color: {{VALUE}}', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_responsive_control( 'straight_text_border_radius_hover', [ 'label' => esc_html__( 'Border Radius', 'theplus' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu-tooltip-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_control( 'straight_text_hover_bgcolor', [ 'label' => esc_html__( 'Background Hover Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'default' => '#000', 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-wrapper li.plus-circle-menu-list:hover .menu-tooltip-title' => 'background-color: {{VALUE}}', ], 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'straight_text_shadow_hover', 'selector' => '{{WRAPPER}} .plus-circle-menu-inner-wrapper .plus-circle-menu-list:hover .menu-tooltip-title', 'condition' => [ 'icon_layout_open' => [ 'straight' ], 'icon_layout_straight_style' => 'style-2', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->add_control( 'tooltip_display_desktop', [ 'label' => esc_html__( 'Visibility Desktop', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Hide', 'theplus' ), 'label_off' => esc_html__( 'Show', 'theplus' ), 'default' => 'no', ] ); $this->add_control( 'tooltip_display_tablet', [ 'label' => esc_html__( 'Visibility Tablet', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Hide', 'theplus' ), 'label_off' => esc_html__( 'Show', 'theplus' ), 'default' => 'no', ] ); $this->add_control( 'tooltip_display_mobile', [ 'label' => esc_html__( 'Visibility Mobile', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Hide', 'theplus' ), 'label_off' => esc_html__( 'Show', 'theplus' ), 'default' => 'no', ] ); $this->end_controls_section(); /*Tooltip Text*/ /*Extra Option Style*/ $this->start_controls_section( 'extra_option_style_section', [ 'label' => esc_html__( 'Extra Options', 'theplus' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'show_scroll_window_offset', [ 'label' => esc_html__( 'Show Menu Scroll Offset', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'theplus' ), 'label_off' => esc_html__( 'Hide', 'theplus' ), 'default' => 'no', ] ); $this->add_control( 'scroll_top_offset_value', [ 'label' => esc_html__( 'Scroll Top Offset Value', 'theplus' ), 'type' => Controls_Manager::SLIDER, 'size_units' => 'px', 'range' => [ 'px' => [ 'min' => 0, 'max' => 5000, 'step' => 2, ], ], 'default' => [ 'unit' => 'px', 'size' => 100, ], 'condition' => [ 'show_scroll_window_offset' => 'yes', ], ] ); $this->add_control( 'show_bg_overlay_color', [ 'label' => esc_html__( 'Overlay Color', 'theplus' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Show', 'theplus' ), 'label_off' => esc_html__( 'Hide', 'theplus' ), 'default' => 'no', 'separator' => 'before', ] ); $this->add_control( 'show_bg_overlay_color_value', [ 'label' => esc_html__( 'Color', 'theplus' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .plus-circle-menu-inner-wrapper .show-bg-overlay.activebg' => 'background: {{VALUE}}', ], 'condition' => [ 'show_bg_overlay_color' => 'yes', ], ] ); $this->end_controls_section(); /*Extra Option Style*/ /*--On Scroll View Animation ---*/ include THEPLUS_PATH. 'modules/widgets/theplus-widget-animation.php'; } protected function render() { $settings = $this->get_settings_for_display(); $icon_direction = $settings['icon_direction']; $icon_layout_open = $settings['icon_layout_open']; $show_scroll_window_offset = ($settings['show_scroll_window_offset']=='yes') ? 'scroll-view' : ''; $scroll_top_offset_value = ($settings['show_scroll_window_offset']=='yes') ? 'data-scroll-view="'.esc_attr($settings['scroll_top_offset_value']["size"]).'"' : ''; $show_bg_overlay_color = ($settings['show_bg_overlay_color']=='yes') ? 'show-bg-overlay' : ''; $show_bg_overlay_color_value = ($settings['show_bg_overlay_color']=='yes') ? 'data-overlay-color="'.esc_attr($settings['show_bg_overlay_color_value']).'"' : ''; $icon_layout_straight_style = ($settings['icon_layout_open']=='straight') ? 'menu-'.esc_attr($settings['icon_layout_straight_style']) : ''; $layout_straight_menu_direction = ($settings['icon_layout_open']=='straight') ? 'menu-direction-'.esc_attr($settings['layout_straight_menu_direction']) : ''; $tooltip_display_desktop = ($settings["tooltip_display_desktop"]=='yes') ? 'tooltip_desktop_hide' : ''; $tooltip_display_tablet = ($settings["tooltip_display_tablet"]=='yes') ? 'tooltip_tablet_hide' : ''; $tooltip_display_mobile = ($settings["tooltip_display_mobile"]=='yes') ? 'tooltip_mobile_hide' : ''; if($icon_layout_open == 'circle'){ $circle_radius = !empty($settings['circle_radius']['size']) ? $settings['circle_radius']['size'] : 150; $circle_radius_tablet = !empty($settings['circle_radius_tablet']['size']) ? $settings['circle_radius_tablet']['size'] : 150; $circle_radius_mobile = !empty($settings['circle_radius_mobile']['size']) ? $settings['circle_radius_mobile']['size'] : 150; $icon_delay = $settings['icon_delay']['size']; $icon_speed = $settings['icon_speed']['size']; $icon_step_in = $settings['icon_step_in']['size']; $icon_step_out = $settings['icon_step_out']['size']; } $icon_transition = $settings['icon_transition']; $icon_trigger = $settings['icon_trigger']; $loop_image_main_icon = $settings['loop_image_main_icon']; $loop_icon_main_style = $settings['loop_icon_main_style']; $loop_icon_main_fontawesome = $settings['loop_icon_main_fontawesome']; $loop_icons_main_mind = $settings['loop_icons_main_mind']; $main_icon_position = $settings['main_icon_position']; $toggle_open_icon_style = $settings['toggle_open_icon_style']; if($icon_layout_open=='circle'){ if($icon_direction =='none'){ $angle_start = $settings['angle_start']['size']; $angle_end = $settings['angle_end']['size']; }else{ $angle_start = 0; $angle_end = 0; } } if($main_icon_position == 'absolute'){ $position_class = 'circle_menu_position_abs'; }else if($main_icon_position == 'fixed'){ $position_class = 'circle_menu_position_fix'; } /*--On Scroll View Animation ---*/ include THEPLUS_PATH. 'modules/widgets/theplus-widget-animation-attr.php'; $main_toggle_click=''; $uid=uniqid("circle_menu"); $circle_menu ='<div class="plus-circle-menu-wrapper '.esc_attr($uid).' layout-'.esc_attr($icon_layout_open).' '.esc_attr($show_scroll_window_offset).' '.esc_attr($animated_class).' " '.$animation_attr.' data-uid='.esc_attr($uid).' '.$scroll_top_offset_value.' '.$show_bg_overlay_color_value.'>'; $circle_menu .='<div class="plus-circle-menu-inner-wrapper ">'; if(!empty($settings['show_bg_overlay_color']) && $settings['show_bg_overlay_color']=='yes'){ $circle_menu .='<div id="show-bg-overlay" class="show-bg-overlay"></div>'; } $circle_menu .='<ul class="plus-circle-menu circleMenu-closed '.$position_class.' '.esc_attr($layout_straight_menu_direction).' '.esc_attr($icon_layout_straight_style).' '.esc_attr($tooltip_display_desktop).' '.esc_attr($tooltip_display_tablet).' '.esc_attr($tooltip_display_mobile).'">'; $main_toggle_click .= '<li class="plus-circle-main-menu-list plus-circle-menu-list '.esc_attr($toggle_open_icon_style).'">'; if(!empty($loop_icon_main_style) && $loop_image_main_icon == 'icon' && $loop_icon_main_style=='font_awesome'){ $icons_main='<i class="fa '.$loop_icon_main_fontawesome.' toggle-icon-wrap" ></i>'; }else if(!empty($loop_icon_main_style) && $loop_image_main_icon == 'icon' && $loop_icon_main_style=='icon_mind'){ $icons_main='<i class="'.$loop_icons_main_mind.' toggle-icon-wrap" ></i>'; }else if(!empty($loop_icon_main_style) && $loop_image_main_icon == 'icon' && $loop_icon_main_style=='font_awesome_5'){ $loop_icon_main_fontawesome_5 = $settings['loop_icon_main_fontawesome_5']; ob_start(); \Elementor\Icons_Manager::render_icon( $loop_icon_main_fontawesome_5, [ 'aria-hidden' => 'true' ]); $icons_main = ob_get_contents(); ob_end_clean(); }else if(!empty($settings["loop_select_main_image"]["url"]) && $loop_image_main_icon == 'image'){ $loop_select_main_image=$settings["loop_select_main_image"]["id"]; $loop_select_main_image_Src = tp_get_image_rander( $loop_select_main_image,$settings['loop_select_main_image_thumbnail_size'], [ 'class' => 'toggle-icon-wrap' ] ); $icons_main= $loop_select_main_image_Src; }else{ $icons_main=''; } $close_toggle=''; if($toggle_open_icon_style=='style-3'){ $close_toggle='<span class="close-toggle-icon"></span>'; } $icon_bg2 = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($settings['icon_background_image'],$settings['icon_hover_background_image']) : ''; $main_toggle_click .= '<a class="main_menu_icon '.$icon_bg2.'" style="cursor:pointer;">'.$icons_main.$close_toggle.'</a>'; $main_toggle_click .= '</li>'; $circle_menu .=$main_toggle_click; $ij=2; if ( $settings['circle_menu_list'] ) { foreach ( $settings['circle_menu_list'] as $item ) { $arrow_text=$item['tooltip_text_arrow']; $tooltip_default_hover = ($item["tooltip_default_hover"]=='yes') ? 'tooltip-default-show' : ''; $target =$nofollow =''; if(!empty($item['loop_icon_link_type']) && $item['loop_icon_link_type']=='email'){ $icon_url='mailto:'.$item['email']; }else if(!empty($item['loop_icon_link_type']) && $item['loop_icon_link_type']=='phone'){ $icon_url='tel:'.$item['phone']; }else if(!empty($item['icons_url']['url'])){ $target = $item['icons_url']['is_external'] ? ' target="_blank"' : ''; $nofollow = $item['icons_url']['nofollow'] ? ' rel="nofollow"' : ''; $icon_url=$item['icons_url']['url']; }else{ $target = ' target="_blank"'; $nofollow = ' rel="nofollow"'; $icon_url='#'; } if(!empty($item['loop_icon_link_type']) && $item['loop_icon_link_type'] != 'nolink'){ $nolink=' href="'.esc_url($icon_url).'" '.$target.' '.$nofollow; }else{ $nolink=''; } $circle_menu .= '<li class="plus-circle-menu-list elementor-repeater-item-' . $item['_id'] . ' '.esc_attr($arrow_text).' '.esc_attr($tooltip_default_hover).'">'; if(!empty($item['loop_image_icon'])){ $tooltip_title=''; if(!empty($item["tooltip_menu_title"])){ $icon_bg1 = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['icon_background_image'],$item['icon_hover_background_image']) : ''; $tooltip_title = '<span class="menu-tooltip-title '.$icon_bg1.'">'.$item["tooltip_menu_title"].'</span>'; } if(isset($item['loop_image_icon']) && $item['loop_image_icon'] == 'image'){ $loop_imgSrc=''; if(!empty($item["loop_select_image"]["url"])){ $loop_select_image=$item["loop_select_image"]["id"]; $loop_imgSrc = tp_get_image_rander( $loop_select_image,$item['loop_select_image_thumbnail_size'], [ 'class' => 'img' ] ); } $icon_bg = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['icon_background_image'],$item['icon_hover_background_image']) : ''; if($icon_layout_open=='straight' && $icon_layout_straight_style=='menu-style-2'){ $circle_menu .='<a '.$nolink.' class="menu_icon '.$icon_bg.'" >'.$tooltip_title.'</a>'; }else{ $circle_menu .='<a '.$nolink.' class="menu_icon '.$icon_bg.'">'.$loop_imgSrc.$tooltip_title.'</a>'; } }else if(isset($item['loop_image_icon']) && $item['loop_image_icon'] == 'icon'){ if(!empty($item["loop_icon_style"]) && $item["loop_icon_style"]=='font_awesome'){ $icons=$item["loop_icon_fontawesome"]; }else if(!empty($item["loop_icon_style"]) && $item["loop_icon_style"]=='icon_mind'){ $icons=$item["loop_icons_mind"]; }else if(!empty($item["loop_icon_style"]) && $item["loop_icon_style"]=='font_awesome_5'){ ob_start(); \Elementor\Icons_Manager::render_icon( $item['loop_icon_fontawesome_5'], [ 'aria-hidden' => 'true' ]); $icons = ob_get_contents(); ob_end_clean(); }else{ $icons=''; } if($icon_layout_open=='straight' && $icon_layout_straight_style=='menu-style-2'){ $circle_menu .='<a '.$nolink.' class="menu_icon" >'.$tooltip_title.'</a>'; }else{ $icon_bg4 = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['icon_background_image'],$item['icon_hover_background_image']) : ''; if(!empty($item["loop_icon_style"]) && $item["loop_icon_style"]=='font_awesome_5'){ $circle_menu .= '<a '.$nolink.' class="menu_icon '.$icon_bg4 .'" ><span>'.$icons.'</span>'.$tooltip_title.'</a>'; }else{ $circle_menu .= '<a '.$nolink.' class="menu_icon '.$icon_bg4 .'" ><i class=" '.esc_attr($icons).' " ></i>'.$tooltip_title.'</a>'; } } } } $circle_menu .= '</li>'; $ij++; } } $circle_menu .='</ul>'; $circle_menu .='</div>'; $circle_menu .='</div>'; $circle_menu_js=''; if($icon_layout_open=='circle'){ $circle_menu_js ='jQuery(document).ready(function(i){ jQuery(".'.esc_attr($uid).' .plus-circle-menu").circleMenu({ direction: "'.esc_attr($icon_direction).'", angle:{start:'.esc_attr($angle_start).', end:'.esc_attr($angle_end).'}, circle_radius: '.esc_attr($circle_radius).', circle_radius_tablet: '.esc_attr($circle_radius_tablet).', circle_radius_mobile: '.esc_attr($circle_radius_mobile).', delay:'.esc_attr($icon_delay).', item_diameter:0, speed: '.esc_attr($icon_speed).', step_in: '.esc_attr($icon_step_in).', step_out: '.esc_attr($icon_step_out).', transition_function: "'.esc_attr($icon_transition).'", trigger: "'.esc_attr($icon_trigger).'" }); });'; $circle_menu .= wp_print_inline_script_tag($circle_menu_js); } $circle_menu .='<style>'; $rpos='auto';$bpos='auto';$ypos='auto';$xpos='auto'; if($settings['d_left_auto']=='yes'){ if(!empty($settings['d_pos_xposition']['size']) || $settings['d_pos_xposition']['size']=='0'){ $xpos=$settings['d_pos_xposition']['size'].$settings['d_pos_xposition']['unit']; } } if($settings['d_top_auto']=='yes'){ if(!empty($settings['d_pos_yposition']['size']) || $settings['d_pos_yposition']['size']=='0'){ $ypos=$settings['d_pos_yposition']['size'].$settings['d_pos_yposition']['unit']; } } if($settings['d_bottom_auto']=='yes'){ if(!empty($settings['d_pos_bottomposition']['size']) || $settings['d_pos_bottomposition']['size']=='0'){ $bpos=$settings['d_pos_bottomposition']['size'].$settings['d_pos_bottomposition']['unit']; } } if($settings['d_right_auto']=='yes'){ if(!empty($settings['d_pos_rightposition']['size']) || $settings['d_pos_rightposition']['size']=='0'){ $rpos=$settings['d_pos_rightposition']['size'].$settings['d_pos_rightposition']['unit']; } } $circle_menu.='.'.esc_attr($uid).' .plus-circle-menu{margin: 0 auto !important;margin-top:'.esc_attr($ypos).' !important;bottom:'.esc_attr($bpos).';left:'.esc_attr($xpos).';right:'.esc_attr($rpos).';}'; if(!empty($rpos) && $rpos=='0%' && !empty($xpos) && $xpos=='0%'){ $circle_menu.='.'.esc_attr($uid).'.layout-circle .plus-circle-menu{left: calc('.esc_attr($xpos).' - '.intval($settings["toggle_icon_width"]["size"]).$settings["toggle_icon_width"]["unit"].' );}'; } if(!empty($ypos) && $ypos=='auto'){ $circle_menu.='.'.esc_attr($uid).' .plus-circle-menu{top: auto;}'; } if(!empty($settings['t_responsive']) && $settings['t_responsive']=='yes'){ $tablet_xpos='auto';$tablet_ypos='auto';$tablet_bpos='auto';$tablet_rpos='auto'; if($settings['t_left_auto']=='yes'){ if(!empty($settings['t_pos_xposition']['size']) || $settings['t_pos_xposition']['size']=='0'){ $tablet_xpos=$settings['t_pos_xposition']['size'].$settings['t_pos_xposition']['unit']; } } if($settings['t_top_auto']=='yes'){ if(!empty($settings['t_pos_yposition']['size']) || $settings['t_pos_yposition']['size']=='0'){ $tablet_ypos=$settings['t_pos_yposition']['size'].$settings['t_pos_yposition']['unit']; } } if($settings['t_bottom_auto']=='yes'){ if(!empty($settings['t_pos_bottomposition']['size']) || $settings['t_pos_bottomposition']['size']=='0'){ $tablet_bpos=$settings['t_pos_bottomposition']['size'].$settings['t_pos_bottomposition']['unit']; } } if($settings['t_right_auto']=='yes'){ if(!empty($settings['t_pos_rightposition']['size']) || $settings['t_pos_rightposition']['size']=='0'){ $tablet_rpos=$settings['t_pos_rightposition']['size'].$settings['t_pos_rightposition']['unit']; } } $circle_menu.='@media (min-width:601px) and (max-width:990px){.'.esc_attr($uid).' .plus-circle-menu{margin: 0 auto !important;margin-top:'.esc_attr($tablet_ypos).' !important;bottom:'.esc_attr($tablet_bpos).';left:'.esc_attr($tablet_xpos).';right:'.esc_attr($tablet_rpos).';}'; if(!empty($tablet_rpos) && $tablet_rpos=='0%' && !empty($tablet_xpos) && $tablet_xpos=='0%'){ $circle_menu.='.'.esc_attr($uid).'.layout-circle .plus-circle-menu{left: calc('.esc_attr($tablet_xpos).' - '.intval($settings["toggle_icon_width"]["size"]).$settings["toggle_icon_width"]["unit"].' );}'; } if(!empty($tablet_ypos) && $tablet_ypos=='auto'){ $circle_menu.='.'.esc_attr($uid).' .plus-circle-menu{top: auto;}'; } $circle_menu.='}'; } if(!empty($settings['m_responsive']) && $settings['m_responsive']=='yes'){ $mobile_xpos='auto';$mobile_ypos='auto';$mobile_bpos='auto';$mobile_rpos='auto'; if($settings['m_left_auto']=='yes'){ if(!empty($settings['m_pos_xposition']['size']) || $settings['m_pos_xposition']['size']=='0'){ $mobile_xpos=$settings['m_pos_xposition']['size'].$settings['m_pos_xposition']['unit']; } } if($settings['m_top_auto']=='yes'){ if(!empty($settings['m_pos_yposition']['size']) || $settings['m_pos_yposition']['size']=='0'){ $mobile_ypos=$settings['m_pos_yposition']['size'].$settings['m_pos_yposition']['unit']; } } if($settings['m_bottom_auto']=='yes'){ if(!empty($settings['m_pos_bottomposition']['size']) || $settings['m_pos_bottomposition']['size']=='0'){ $mobile_bpos=$settings['m_pos_bottomposition']['size'].$settings['m_pos_bottomposition']['unit']; } } if($settings['m_right_auto']=='yes'){ if(!empty($settings['m_pos_rightposition']['size']) || $settings['m_pos_rightposition']['size']=='0'){ $mobile_rpos=$settings['m_pos_rightposition']['size'].$settings['m_pos_rightposition']['unit']; } } $circle_menu.='@media (max-width:600px){.'.esc_attr($uid).' .plus-circle-menu{margin: 0 auto !important; margin-top:'.esc_attr($mobile_ypos).' !important;bottom:'.esc_attr($mobile_bpos).';left:'.esc_attr($mobile_xpos).';right:'.esc_attr($mobile_rpos).';}'; if(!empty($mobile_rpos) && $mobile_rpos=='0%' && !empty($mobile_xpos) && $mobile_xpos=='0%'){ $circle_menu.='.'.esc_attr($uid).'.layout-circle .plus-circle-menu{left: calc('.esc_attr($mobile_xpos).' - '.intval($settings["toggle_icon_width"]["size"]).$settings["toggle_icon_width"]["unit"].' );}'; } if(!empty($mobile_ypos) && $mobile_ypos=='auto'){ $circle_menu.='.'.esc_attr($uid).' .plus-circle-menu{top: auto;}'; } $circle_menu.='}'; } if($icon_layout_open=='straight'){ $value=0; $i=2; if($ij>1){ while($i < $ij){ if( $settings['layout_straight_menu_direction'] == 'right'){ $value = $settings["layout_straight_menu_gap"]["size"] + $value + $settings["toggle_icon_width"]["size"]; $circle_menu .= '.'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-right .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'), .'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-right .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'){ left: '.esc_attr($value).'px; }'; } if( $settings['layout_straight_menu_direction'] == 'bottom'){ $value = $settings["layout_straight_menu_gap"]["size"] + $value; $circle_menu .= '.'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-bottom .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'), .'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-bottom .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'){ top: '.esc_attr($value).'px; }'; } if( $settings['layout_straight_menu_direction'] == 'left'){ $value = $settings["layout_straight_menu_gap"]["size"] + $value; $circle_menu .= '.'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-left .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'), .'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-left .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'){ right: '.esc_attr($value).'px; }'; } if( $settings['layout_straight_menu_direction'] == 'top'){ $value = $settings["layout_straight_menu_gap"]["size"] + $value; $circle_menu .= '.'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-top .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'), .'.esc_attr($uid).'.plus-circle-menu-wrapper.layout-straight .plus-circle-menu.circleMenu-open.menu-direction-top .plus-circle-menu-list:not(.plus-circle-main-menu-list):nth-child('.esc_attr($i).'){ bottom: '.esc_attr($value).'px; }'; } $i++; } } } $circle_menu .='</style>'; echo $circle_menu; } protected function content_template() { } }