Ubuntu

start_controls_section( 'section_nav_dots', [ 'label' => __( 'Navigation Dots', 'essential-addons-elementor' ), ] ); $repeater = new \Elementor\Repeater(); $repeater->add_control( 'section_title', [ 'label' => __( 'Section Title', 'essential-addons-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'Section Title', 'essential-addons-elementor' ), ] ); $repeater->add_control( 'section_id', [ 'label' => __( 'Section ID', 'essential-addons-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', ] ); $repeater->add_control( 'dot_icon_new', [ 'label' => __( 'Navigation Dot', 'essential-addons-elementor' ), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'dot_icon', 'default' => [ 'value' => 'fas fa-circle', 'library' => 'fa-solid', ], ] ); $this->add_control( 'nav_dots', [ 'label' => '', 'type' => Controls_Manager::REPEATER, 'default' => [ [ 'section_title' => __( 'Section #1', 'essential-addons-elementor' ), 'section_id' => 'section-1', 'dot_icon' => 'fa fa-circle', ], [ 'section_title' => __( 'Section #2', 'essential-addons-elementor' ), 'section_id' => 'section-2', 'dot_icon' => 'fa fa-circle', ], [ 'section_title' => __( 'Section #3', 'essential-addons-elementor' ), 'section_id' => 'section-3', 'dot_icon' => 'fa fa-circle', ], ], 'fields' => array_values( $repeater->get_controls() ), 'title_field' => '{{{ section_title }}}', ] ); $this->end_controls_section(); /** * Content Tab: Settings */ $this->start_controls_section( 'section_onepage_nav_settings', [ 'label' => __( 'Settings', 'essential-addons-elementor' ), ] ); $this->add_control( 'nav_tooltip', [ 'label' => __( 'Tooltip', 'essential-addons-elementor' ), 'description' => __( 'Show tooltip on hover', 'essential-addons-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_on' => __( 'Yes', 'essential-addons-elementor' ), 'label_off' => __( 'No', 'essential-addons-elementor' ), 'return_value' => 'yes', ] ); $this->add_control( 'tooltip_arrow', [ 'label' => __( 'Tooltip Arrow', 'essential-addons-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'label_on' => __( 'Show', 'essential-addons-elementor' ), 'label_off' => __( 'Hide', 'essential-addons-elementor' ), 'return_value' => 'yes', 'condition' => [ 'nav_tooltip' => 'yes', ], ] ); $this->add_control( 'scroll_wheel', [ 'label' => __( 'Scroll Wheel', 'essential-addons-elementor' ), 'description' => __( 'Use mouse wheel to navigate from one row to another', 'essential-addons-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'off', 'label_on' => __( 'On', 'essential-addons-elementor' ), 'label_off' => __( 'Off', 'essential-addons-elementor' ), 'return_value' => 'on', ] ); $this->add_control( 'scroll_touch', [ 'label' => __( 'Touch Swipe', 'essential-addons-elementor' ), 'description' => __( 'Use touch swipe to navigate from one row to another in mobile devices', 'essential-addons-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'off', 'label_on' => __( 'On', 'essential-addons-elementor' ), 'label_off' => __( 'Off', 'essential-addons-elementor' ), 'return_value' => 'on', 'condition' => [ 'scroll_wheel' => 'on', ], ] ); $this->add_control( 'scroll_keys', [ 'label' => __( 'Scroll Keys', 'essential-addons-elementor' ), 'description' => __( 'Use UP and DOWN arrow keys to navigate from one row to another', 'essential-addons-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'off', 'label_on' => __( 'On', 'essential-addons-elementor' ), 'label_off' => __( 'Off', 'essential-addons-elementor' ), 'return_value' => 'on', ] ); $this->add_control( 'top_offset', [ 'label' => __( 'Row Top Offset', 'essential-addons-elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '0' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 300, 'step' => 1, ], ], 'size_units' => [ 'px' ], ] ); $this->add_control( 'scrolling_speed', [ 'label' => __( 'Scrolling Speed', 'essential-addons-elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => '700', ] ); $this->end_controls_section(); /*-----------------------------------------------------------------------------------*/ /* STYLE TAB /*-----------------------------------------------------------------------------------*/ /** * Style Tab: Navigation Box */ $this->start_controls_section( 'section_nav_box_style', [ 'label' => __( 'Navigation Box', 'essential-addons-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'heading_alignment', [ 'label' => __( 'Alignment', 'essential-addons-elementor' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'top' => [ 'title' => __( 'Top', 'essential-addons-elementor' ), 'icon' => 'eicon-v-align-top', ], 'bottom' => [ 'title' => __( 'Bottom', 'essential-addons-elementor' ), 'icon' => 'eicon-v-align-bottom', ], 'left' => [ 'title' => __( 'Left', 'essential-addons-elementor' ), 'icon' => 'eicon-h-align-left', ], 'right' => [ 'title' => __( 'Right', 'essential-addons-elementor' ), 'icon' => 'eicon-h-align-right', ], ], 'default' => 'right', 'prefix_class' => 'nav-align-', 'frontend_available' => true, 'selectors' => [ '{{WRAPPER}} .eael-caldera-form-heading' => 'text-align: {{VALUE}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'nav_container_background', 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .eael-one-page-nav', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'nav_container_border', 'label' => __( 'Border', 'essential-addons-elementor' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} .eael-one-page-nav' ] ); $this->add_control( 'nav_container_border_radius', [ 'label' => __( 'Border Radius', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'nav_container_margin', [ 'label' => __( 'Margin', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'nav_container_padding', [ 'label' => __( 'Padding', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'nav_container_box_shadow', 'selector' => '{{WRAPPER}} .eael-one-page-nav', 'separator' => 'before', ] ); $this->end_controls_section(); /** * Style Tab: Navigation Dots */ $this->start_controls_section( 'section_dots_style', [ 'label' => __( 'Navigation Dots', 'essential-addons-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_responsive_control( 'dots_size', [ 'label' => __( 'Size', 'essential-addons-elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '10' ], 'range' => [ 'px' => [ 'min' => 5, 'max' => 60, 'step' => 1, ], ], 'size_units' => [ 'px' ], 'selectors' => [ '{{WRAPPER}} .eael-nav-dot' => 'font-size: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'dots_spacing', [ 'label' => __( 'Spacing', 'essential-addons-elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => '10' ], 'range' => [ 'px' => [ 'min' => 2, 'max' => 30, 'step' => 1, ], ], 'size_units' => [ 'px' ], 'selectors' => [ '{{WRAPPER}}.nav-align-right .eael-one-page-nav-item, {{WRAPPER}}.nav-align-left .eael-one-page-nav-item' => 'margin-bottom: {{SIZE}}{{UNIT}};', '{{WRAPPER}}.nav-align-top .eael-one-page-nav-item, {{WRAPPER}}.nav-align-bottom .eael-one-page-nav-item' => 'margin-right: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'dots_padding', [ 'label' => __( 'Padding', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'dots_box_shadow', 'selector' => '{{WRAPPER}} .eael-nav-dot-wrap', 'separator' => 'before', ] ); $this->start_controls_tabs( 'tabs_dots_style' ); $this->start_controls_tab( 'tab_dots_normal', [ 'label' => __( 'Normal', 'essential-addons-elementor' ), ] ); $this->add_control( 'dots_color_normal', [ 'label' => __( 'Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-nav-dot' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'dots_bg_color_normal', [ 'label' => __( 'Background Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-wrap' => 'background-color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'dots_border', 'label' => __( 'Border', 'essential-addons-elementor' ), 'placeholder' => '1px', 'default' => '1px', 'selector' => '{{WRAPPER}} .eael-nav-dot-wrap' ] ); $this->add_control( 'dots_border_radius', [ 'label' => __( 'Border Radius', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_dots_hover', [ 'label' => __( 'Hover', 'essential-addons-elementor' ), ] ); $this->add_control( 'dots_color_hover', [ 'label' => __( 'Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item .eael-nav-dot-wrap:hover .eael-nav-dot' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'dots_bg_color_hover', [ 'label' => __( 'Background Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item .eael-nav-dot-wrap:hover' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'dots_border_color_hover', [ 'label' => __( 'Border Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item .eael-nav-dot-wrap:hover' => 'border-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_dots_active', [ 'label' => __( 'Active', 'essential-addons-elementor' ), ] ); $this->add_control( 'dots_color_active', [ 'label' => __( 'Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item.active .eael-nav-dot' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'dots_bg_color_active', [ 'label' => __( 'Background Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item.active .eael-nav-dot-wrap' => 'background-color: {{VALUE}}', ], ] ); $this->add_control( 'dots_border_color_active', [ 'label' => __( 'Border Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-one-page-nav-item.active .eael-nav-dot-wrap' => 'border-color: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); /** * Style Tab: Tooltip */ $this->start_controls_section( 'section_tooltips_style', [ 'label' => __( 'Tooltip', 'essential-addons-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'nav_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_bg_color', [ 'label' => __( 'Background Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-tooltip-content' => 'background-color: {{VALUE}}', '{{WRAPPER}} .eael-nav-dot-tooltip' => 'color: {{VALUE}}', ], 'condition' => [ 'nav_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_color', [ 'label' => __( 'Text Color', 'essential-addons-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-tooltip-content' => 'color: {{VALUE}}', ], 'condition' => [ 'nav_tooltip' => 'yes', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'tooltip_typography', 'label' => __( 'Typography', 'essential-addons-elementor' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_4, 'selector' => '{{WRAPPER}} .eael-nav-dot-tooltip', 'condition' => [ 'nav_tooltip' => 'yes', ], ] ); $this->add_responsive_control( 'tooltip_padding', [ 'label' => __( 'Padding', 'essential-addons-elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%' ], 'selectors' => [ '{{WRAPPER}} .eael-nav-dot-tooltip-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings(); $this->add_render_attribute( 'onepage-nav-container', 'class', 'eael-one-page-nav-container' ); $this->add_render_attribute( 'onepage-nav', 'class', 'eael-one-page-nav' ); $this->add_render_attribute( 'onepage-nav', 'id', 'eael-one-page-nav-'.$this->get_id() ); $this->add_render_attribute( 'onepage-nav', 'data-section-id', 'eael-one-page-nav-'.$this->get_id() ); $this->add_render_attribute( 'onepage-nav', 'data-top-offset', $settings['top_offset']['size'] ); $this->add_render_attribute( 'onepage-nav', 'data-scroll-speed', $settings['scrolling_speed'] ); $this->add_render_attribute( 'onepage-nav', 'data-scroll-wheel', $settings['scroll_wheel'] ); $this->add_render_attribute( 'onepage-nav', 'data-scroll-touch', $settings['scroll_touch'] ); $this->add_render_attribute( 'onepage-nav', 'data-scroll-keys', $settings['scroll_keys'] ); $this->add_render_attribute( 'tooltip', 'class', 'eael-nav-dot-tooltip' ); if ( $settings['tooltip_arrow'] == 'yes' ) { $this->add_render_attribute( 'tooltip', 'class', 'eael-tooltip-arrow' ); } ?>

get_render_attribute_string( 'onepage-nav-container' ); ?>>

%1$s
%1$s