Manager

Back Back Up Advanced Editor

<?php

//START ELEMENT NAVIGATION
class nd_elements_navigation_element extends \Elementor\Widget_Base {

public function get_name() { return 'navigation'; }
	public function get_title() { return __( 'Navigation', 'nd-elements' ); }
	public function get_icon() { return 'fa fa-bars'; }
	public function get_categories() { return [ 'nd-elements' ]; }

/*START CONTROLS*/
	protected function _register_controls() {

/*Create Tab*/
		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Main Options', 'nd-elements' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

/*START Built navigation array*/
		$nd_elements_menus = get_terms('nav_menu');
	    $nd_elements_all_menus = array();
	    $nd_elements_i = 0;

foreach($nd_elements_menus as $nd_elements_menu){

//nav info
	    	$nd_elements_navigation_name = $nd_elements_menu->name;	
	    	$nd_elements_navigation_id = $nd_elements_menu->term_id;	
	      
			$nd_elements_all_menus[$nd_elements_navigation_id] = $nd_elements_navigation_name;
			$nd_elements_i = $nd_elements_i + 1;
	    
	    } 
	    /*END Built navigation array*/

/*Create Control*/
		$this->add_control(
			'nd_elements_navigation',
			[
				'label' => __( 'Navigation', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => $nd_elements_all_menus,
			]
		);

$this->add_control(
			'navigation_align',
			[
				'label' => __( 'Alignment', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => __( 'Left', 'nd-elements' ),
						'icon' => 'fa fa-align-left',
					],
					'center' => [
						'title' => __( 'Center', 'nd-elements' ),
						'icon' => 'fa fa-align-center',
					],
					'right' => [
						'title' => __( 'Right', 'nd-elements' ),
						'icon' => 'fa fa-align-right',
					],
				],
				'default' => 'center',
				'toggle' => true,
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component > div' => 'text-align: {{VALUE}}',
					'{{WRAPPER}} .nd_elements_open_navigation_sidebar_content' => 'float: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'navigation_between_items',
			[
				'label' => __( 'Space Between Items', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component ul.menu > li a' => 'padding: 0px {{SIZE}}px;',
				],
			]
		);

$this->add_control(
			'navigation_mobile_icon',
			[
				'label' => __( 'Mobile Icon', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'default' => [
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				],
			]
		);

$this->end_controls_section();

$this->start_controls_section(
			'content_section_2',
			[
				'label' => __( 'Dropdown Options', 'nd-elements' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

$this->add_control(
			'navigation_dropdown_width',
			[
				'label' => __( 'Width', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 400,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 200,
				],
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu' => 'width: {{SIZE}}px;',
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu li > ul.sub-menu' => 'margin-left: {{SIZE}}px;',
				],
			]
		);

$this->add_control(
			'navigation_dropdown_top_padding',
			[
				'label' => __( 'Top Space', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu' => 'padding-top: {{SIZE}}px;',
				],
			]
		);

$this->add_control(
			'navigation_item_padding',
			[
				'label' => __( 'Item Padding', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px' ],
				'default' => [
					'top' => 15,
					'right' => 20,
					'bottom' => 15,
					'left' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

$this->end_controls_section();

/*************************START STYLE TAB*************************/

$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Main Style', 'nd-elements' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'navigation_typography',
				'label' => __( 'Typography', 'nd-elements' ),
				'selector' => '{{WRAPPER}} .nd_elements_navigation_component ul.menu > li a',
			]
		);

$this->start_controls_tabs(
			'style_tabs'
		);

$this->start_controls_tab(
			'style_normal_tab',
			[
				'label' => __( 'Normal', 'plugin-name' ),
			]
		);

$this->add_control(
			'navigation_color',
			[
				'label' => __( 'Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component ul.menu > li a' => 'color: {{VALUE}}',
				],
			]
		);

$this->end_controls_tab();

$this->start_controls_tab(
			'style_hover_tab',
			[
				'label' => __( 'Hover', 'plugin-name' ),
			]
		);

$this->add_control(
			'navigation_color_hover',
			[
				'label' => __( 'Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component ul.menu > li a:hover' => 'color: {{VALUE}}',
				],
			]
		);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
			'style_section_2',
			[
				'label' => __( 'Dropdown Style', 'nd-elements' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'navigation_dropdown_typography',
				'label' => __( 'Typography', 'nd-elements' ),
				'selector' => '{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu li a',
			]
		);

$this->add_control(
			'hr',
			[
				'type' => \Elementor\Controls_Manager::DIVIDER,
			]
		);
		
		$this->add_control(
			'navigation_dropdown_border_width',
			[
				'label' => __( 'Border Width', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 10,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1,
				],
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li' => 'border-bottom-width: {{SIZE}}px;',
				],
			]
		);

$this->add_control(
			'navigation_dropdown_border_color',
			[
				'label' => __( 'Border Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li' => 'border-bottom-color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'hr_2',
			[
				'type' => \Elementor\Controls_Manager::DIVIDER,
			]
		);

$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'navigation_dropdown_shadow',
				'label' => __( 'Shadow', 'nd-elements' ),
				'selector' => '{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li',
			]
		);

$this->start_controls_tabs(
			'style_2_dropdown_style'
		);

$this->start_controls_tab(
			'style_2_normal_tab',
			[
				'label' => __( 'Normal', 'plugin-name' ),
			]
		);

$this->add_control(
			'navigation_dropdown_color',
			[
				'label' => __( 'Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu li a' => 'color: {{VALUE}}',
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu li.menu-item-has-children > a:after' => 'border-color: transparent transparent transparent {{VALUE}};',
				],
			]
		);

$this->add_control(
			'navigation_dropdown_bg_color',
			[
				'label' => __( 'Background Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li' => 'background-color: {{VALUE}}',
				],
			]
		);

$this->end_controls_tab();

$this->start_controls_tab(
			'style_2_hover_tab',
			[
				'label' => __( 'Hover', 'plugin-name' ),
			]
		);

$this->add_control(
			'navigation_dropdown_color_hover',
			[
				'label' => __( 'Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu li a:hover' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'navigation_dropdown_bg_color_hover',
			[
				'label' => __( 'Background Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#f9f9f9',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_component div > ul li > ul.sub-menu > li:hover' => 'background-color: {{VALUE}}',
				],
			]
		);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->end_controls_section();

$this->start_controls_section(
			'style_section_3',
			[
				'label' => __( 'Mobile Sidebar', 'nd-elements' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
			'navigation_mobilesidebar_bg',
			[
				'label' => __( 'Background Color', 'nd-elements' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'default' => '#000000',
				'selectors' => [
					'{{WRAPPER}} .nd_elements_navigation_sidebar_content' => 'background-color: {{VALUE}}',
				],
			]
		);

$this->end_controls_section();

/*************************END STYLE TAB*************************/

}

/*START RENDER*/
	protected function render() {

//add script
  		wp_enqueue_script('nd_elements_navigation_js', esc_url( plugins_url('js/navigation.js', __FILE__ )) );

$nd_elements_settings = $this->get_settings_for_display();
		$nd_elements_menu = $nd_elements_settings['nd_elements_navigation'];
		$navigation_mobile_icon = $nd_elements_settings['navigation_mobile_icon']['url'];

$nd_elements_args = array(
			'menu'   => $nd_elements_menu,
			'echo' => false
		);

//check if menus are present
		$nd_elements_menus = get_terms('nav_menu');

if ( empty($nd_elements_menus) ) {

$nd_elements_menu_content = '
			<div class="nd_elements_section">
				<ul class="menu">
					<li>
						<a target="_blank" href="'.get_admin_url().'nav-menus.php">'.__('No menus have been created yet. Create some.', 'nd-elements' ).'</a>
					</li>
				</ul>
			</div>';

}else{
			$nd_elements_menu_content = wp_nav_menu( $nd_elements_args );
		}

//icon
		if ( $navigation_mobile_icon == '' ){
			$navigation_mobile_icon = '<img alt="open-navigation" width="25" class="nd_elements_open_navigation_sidebar_content" src="'.esc_url( plugins_url('img/navigation-open.svg', __FILE__ )).'">';	
		}else{
			$navigation_mobile_icon = '<img alt="open-navigation" width="25" class="nd_elements_open_navigation_sidebar_content" src="'.esc_url($navigation_mobile_icon).'">';		
		}

//prepare the output
		$nd_elements_result = '
		<div class="nd_elements_section">
			<div class="nd_elements_navigation_component">

'.$nd_elements_menu_content.'
				
				'.$navigation_mobile_icon.'
			
			</div>
		</div>

<div class="nd_elements_navigation_sidebar_content">

<div class="nd_elements_navigation_sidebar">
		        '.wp_nav_menu( $nd_elements_args ).'
		    </div>

</div>
		
		';
		
  		$nd_elements_allowed_html = [
		    'div'      => [
				'class' => [],
			],
			'ul'      => [
				'id' => [],
				'class' => [],
			],
			'li'      => [
				'id' => [],
				'class' => [],
			],
			'a'      => [
				'href' => [],
				'class' => [],
				'aria-current' => [],
				'target' => [],
				'title' => [],
			],
			'img'      => [
				'alt' => [],
				'width' => [],
				'class' => [],
				'src' => [],
			],
		];

echo wp_kses( $nd_elements_result, $nd_elements_allowed_html );

}