<?php /** * Custom Menu Widget. * * @package OceanWP WordPress theme */ // Exit if accessed directly if ( ! defined( 'ABSPATH' ) ) { exit; } if ( ! class_exists( 'Ocean_Extra_Custom_Menu_Widget' ) ) { class Ocean_Extra_Custom_Menu_Widget extends WP_Widget { /** * Register widget with WordPress. * * @since 1.0.0 */ public function __construct() { parent::__construct( 'ocean_custom_menu', esc_html__( '» Custom Menu', 'ocean-extra' ), array( 'classname' => 'widget-oceanwp-custom-menu custom-menu-widget', 'description' => esc_html__( 'Displays custom menu.', 'ocean-extra' ), 'customize_selective_refresh' => true, ) ); } /** * Front-end display of widget. * * @see WP_Widget::widget() * @since 1.0.0 * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ public function widget( $args, $instance ) { $title = isset( $instance['title'] ) ? apply_filters( 'widget_title', $instance['title'] ) : ''; $nav_menu = ! empty( $instance['nav_menu'] ) ? wp_get_nav_menu_object( $instance['nav_menu'] ) : false; $position = isset( $instance['position'] ) ? $instance['position'] : 'left'; $dropdown = isset( $instance['dropdown'] ) ? $instance['dropdown'] : 'hover'; $target = isset( $instance['target'] ) ? $instance['target'] : 'icon'; $nav_padding = isset( $instance['nav_padding'] ) ? $instance['nav_padding'] : ''; $nav_link_color = isset( $instance['nav_link_color'] ) ? $instance['nav_link_color'] : ''; $nav_link_hover_color = isset( $instance['nav_link_hover_color'] ) ? $instance['nav_link_hover_color'] : ''; $font_size = isset( $instance['font_size'] ) ? $instance['font_size'] : ''; $line_height = isset( $instance['line_height'] ) ? $instance['line_height'] : ''; $letter_spacing = isset( $instance['letter_spacing'] ) ? $instance['letter_spacing'] : ''; $text_transform = isset( $instance['text_transform'] ) ? $instance['text_transform'] : ''; if ( ! $nav_menu ) { return; } // Before widget WP hook echo $args['before_widget']; // Style if ( $nav_padding && '8px 0' != $nav_padding || $nav_link_color && '#555' != $nav_link_color || $nav_link_hover_color && '#333' != $nav_link_hover_color || $font_size && '13' != $font_size || $line_height && '20' != $line_height || $letter_spacing && '0.6' != $letter_spacing || $text_transform && 'default' != $text_transform ) { echo '<style type="text/css">'; if ( $nav_padding && '8px 0' != $nav_padding || $nav_link_color && '#555' != $nav_link_color || $font_size && '13' != $font_size || $line_height && '20' != $line_height || $letter_spacing && '0.6' != $letter_spacing || $text_transform && 'default' != $text_transform ) { echo '.' . esc_attr( $this->id ) . ' > ul > li > a, .custom-menu-widget .' . esc_attr( $this->id ) . ' .dropdown-menu .sub-menu li a.menu-link{'; if ( $nav_padding && '8px 0' != $nav_padding ) { echo 'padding:' . esc_attr( $nav_padding ) . ';'; } if ( $nav_link_color && '#555' != $nav_link_color ) { echo 'color:' . esc_attr( $nav_link_color ) . ';'; } if ( $font_size && '13' != $font_size ) { echo 'font-size:' . esc_attr( $font_size ) . 'px;'; } if ( $line_height && '20' != $line_height ) { echo 'line-height:' . esc_attr( $line_height ) . 'px;'; } if ( $letter_spacing && '0.6' != $letter_spacing ) { echo 'letter-spacing:' . esc_attr( $letter_spacing ) . 'px;'; } if ( $text_transform && 'default' != $text_transform ) { echo 'text-transform:' . esc_attr( $text_transform ) . ';'; } echo '}'; echo '.custom-menu-widget .' . esc_attr( $this->id ) . '.oceanwp-custom-menu > ul.click-menu .open-this{'; if ( $nav_link_color && '#555' != $nav_link_color ) { echo 'color:' . esc_attr( $nav_link_color ) . ';'; } if ( $font_size && '13' != $font_size ) { echo 'font-size:' . esc_attr( $font_size ) . 'px;'; } echo '}'; } if ( $nav_link_hover_color && '#333' != $nav_link_hover_color ) { echo '.' . esc_attr( $this->id ) . ' > ul > li > a:hover, .custom-menu-widget .' . esc_attr( $this->id ) . ' .dropdown-menu .sub-menu li a.menu-link:hover{'; echo 'color:' . esc_attr( $nav_link_hover_color ) . ';'; echo '}'; echo '.custom-menu-widget .' . esc_attr( $this->id ) . '.oceanwp-custom-menu > ul.click-menu .open-this:hover{'; echo 'color:' . esc_attr( $nav_link_hover_color ) . ';'; echo '}'; } echo '</style>'; } // Show widget title if ( $title ) { echo $args['before_title'] . esc_html( $title ) . $args['after_title']; } // Menu classes $menu_classes = array( 'dropdown-menu' ); // Dropdown if ( 'hover' == $dropdown ) { $menu_classes[] = 'sf-menu'; } else if ( 'click' == $dropdown ) { $menu_classes[] = 'click-menu'; } $menu_classes = implode( ' ', $menu_classes ); $nav_menu_args = array( 'menu' => $nav_menu, 'fallback_cb' => false, 'container' => false, 'menu_class' => $menu_classes, 'walker' => new Ocean_Extra_Nav_Walker(), ); // Add classes $classes = array( 'oceanwp-custom-menu', 'clr' ); $classes[] = esc_attr( $this->id ); $classes[] = esc_attr( $position ); $classes[] = 'dropdown-' . esc_attr( $dropdown ); if ( 'click' == $dropdown ) { $classes[] = 'click-' . esc_attr( $target ); } $classes = implode( ' ', $classes ); echo '<div class="'. esc_attr( $classes ) .'">'; wp_nav_menu( $nav_menu_args ); echo '</div>'; // After widget WP hook echo $args['after_widget']; if ( 'click' == $dropdown ) { ?> <script type="text/javascript"> ( function( $ ) { $( '.<?php echo esc_attr( $this->id ); ?>.oceanwp-custom-menu.dropdown-click ul.dropdown-menu' ).each( function() { var IconDown = '<i class="fa fa-angle-down"></i>', linkHeight = $( this ).find( 'li.menu-item-has-children > a' ).outerHeight(), target; $( this ).find( 'li.menu-item-has-children > a' ).prepend( '<div class="open-this">'+ IconDown +'</div>' ); $( this ).find( 'li.menu-item-has-children > a .open-this' ).css( { 'line-height' : linkHeight +'px', } ); // Target if ( $( this ).parent().hasClass( 'click-link' ) ) { target = $( this ).find( 'li.menu-item-has-children > a' ); } else { target = $( this ).find( '.open-this' ); } target.on( 'click', function() { // Target if ( $( this ).closest( '.<?php echo esc_attr( $this->id ); ?>.oceanwp-custom-menu.dropdown-click' ).hasClass( 'click-link' ) ) { var parent = $( this ).parent(), IconDown = $( this ).find( '.open-this' ).parent().parent(), IconUp = $( this ).find( '.open-this' ).parent().parent(); } else { var parent = $( this ).parent().parent(), IconDown = $( this ).parent().parent(), IconUp = $( this ).parent().parent(); } if ( parent.hasClass( 'opened' ) ) { IconDown.removeClass( 'opened' ).find( '> ul' ).slideUp( 200 ); } else { IconUp.addClass( 'opened' ).find( '> ul' ).slideDown( 200 ); } // Return false return false; } ); } ); } )( jQuery ); </script> <?php } } /** * Updates the widget control options for the particular instance of the widget. * * @since 1.0.0 */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = ! empty( $new_instance['title'] ) ? strip_tags( $new_instance['title'] ) : ''; $instance['nav_menu'] = ! empty( $new_instance['nav_menu'] ) ? strip_tags( $new_instance['nav_menu'] ) : ''; $instance['position'] = strip_tags( $new_instance['position'] ); $instance['dropdown'] = strip_tags( $new_instance['dropdown'] ); $instance['target'] = strip_tags( $new_instance['target'] ); $instance['nav_padding'] = strip_tags( $new_instance['nav_padding'] ); $instance['nav_link_color'] = sanitize_hex_color( $new_instance['nav_link_color'] ); $instance['nav_link_hover_color'] = sanitize_hex_color( $new_instance['nav_link_hover_color'] ); $instance['font_size'] = strip_tags( $new_instance['font_size'] ); $instance['line_height'] = strip_tags( $new_instance['line_height'] ); $instance['letter_spacing'] = strip_tags( $new_instance['letter_spacing'] ); $instance['text_transform'] = strip_tags( $new_instance['text_transform'] ); return $instance; } /** * Back-end widget form. * * @see WP_Widget::form() * @since 1.0.0 * * @param array $instance Previously saved values from database. */ public function form( $instance ) { global $wp_customize; $instance = wp_parse_args( ( array ) $instance, array( 'title' => '', 'nav_menu' => '', 'position' => 'left', 'dropdown' => 'hover', 'target' => 'icon', 'nav_padding' => '', 'nav_link_color' => '#555', 'nav_link_hover_color' => '#333', 'font_size' => '13', 'line_height' => '20', 'letter_spacing' => '0.6', 'text_transform' => 'default', ) ); // Get menus $menus = wp_get_nav_menus(); $nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : ''; // If no menus exists, direct the user to go and create some. ?> <p class="nav-menu-widget-no-menus-message" <?php if ( ! empty( $menus ) ) { echo ' style="display:none" '; } ?>> <?php if ( $wp_customize instanceof WP_Customize_Manager ) { $url = 'javascript: wp.customize.panel( "nav_menus" ).focus();'; } else { $url = admin_url( 'nav-menus.php' ); } ?> <?php echo sprintf( esc_html__( 'No menus have been created yet. <a href="%s">Create some</a>.', 'ocean-extra' ), esc_attr( $url ) ); ?> </p> <div class="nav-menu-widget-form-controls" <?php if ( empty( $menus ) ) { echo ' style="display:none" '; } ?>> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title', 'ocean-extra' ); ?>:</label> <input class="widefat" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'nav_menu' ) ); ?>"><?php esc_html_e( 'Select Menu:', 'ocean-extra' ); ?></label> <select class="widget-select widefat" id="<?php echo esc_attr( $this->get_field_id( 'nav_menu' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'nav_menu' ) ); ?>"> <option value="0"><?php esc_html_e( '— Select —', 'ocean-extra' ); ?></option> <?php foreach ( $menus as $menu ) : ?> <option value="<?php echo esc_attr( $menu->term_id ); ?>" <?php selected( $instance['nav_menu'], $menu->term_id ); ?>> <?php echo esc_html( $menu->name ); ?> </option> <?php endforeach; ?> </select> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id('position') ); ?>"><?php esc_html_e( 'Position:', 'ocean-extra' ); ?></label> <select class="widget-select widefat" name="<?php echo esc_attr( $this->get_field_name('position') ); ?>" id="<?php echo esc_attr( $this->get_field_id('position') ); ?>"> <option value="left" <?php selected( $instance['position'], 'left' ) ?>><?php esc_html_e( 'Left', 'ocean-extra' ); ?></option> <option value="right" <?php selected( $instance['position'], 'right' ) ?>><?php esc_html_e( 'Right', 'ocean-extra' ); ?></option> <option value="center" <?php selected( $instance['position'], 'center' ) ?>><?php esc_html_e( 'Center', 'ocean-extra' ); ?></option> </select> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id('dropdown') ); ?>"><?php esc_html_e( 'Dropdown Style:', 'ocean-extra' ); ?></label> <select class="widget-select widefat" name="<?php echo esc_attr( $this->get_field_name('dropdown') ); ?>" id="<?php echo esc_attr( $this->get_field_id('dropdown') ); ?>"> <option value="hover" <?php selected( $instance['dropdown'], 'hover' ) ?>><?php esc_html_e( 'Hover', 'ocean-extra' ); ?></option> <option value="click" <?php selected( $instance['dropdown'], 'click' ) ?>><?php esc_html_e( 'Click', 'ocean-extra' ); ?></option> </select> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id('target') ); ?>"><?php esc_html_e( 'Target:', 'ocean-extra' ); ?></label> <select class="widget-select widefat" name="<?php echo esc_attr( $this->get_field_name('target') ); ?>" id="<?php echo esc_attr( $this->get_field_id('target') ); ?>"> <option value="icon" <?php selected( $instance['target'], 'icon' ) ?>><?php esc_html_e( 'Icon', 'ocean-extra' ); ?></option> <option value="link" <?php selected( $instance['target'], 'link' ) ?>><?php esc_html_e( 'Link', 'ocean-extra' ); ?></option> </select> <small><?php esc_html_e( 'If the Click dropdown style is selected', 'ocean-extra' ); ?></small> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'nav_padding' ) ); ?>"><?php esc_html_e( 'Menu Padding:', 'ocean-extra' ); ?></label> <input class="widefat" type="text" id="<?php echo esc_attr( $this->get_field_id( 'nav_padding' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'nav_padding' ) ); ?>" value="<?php echo esc_attr( $instance['nav_padding'] ); ?>" /> <small style="color: #777;"><?php esc_html_e( 'top left bottom right, eg: 15px 8px 15px 25px', 'ocean-extra' ); ?></small> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'nav_link_color' ) ); ?>"><?php esc_html_e( 'Menu Link Color:', 'ocean-extra' ); ?></label> <input class="color-picker" type="text" id="<?php echo esc_attr( $this->get_field_id( 'nav_link_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'nav_link_color' ) ); ?>" value="<?php echo esc_attr( $instance['nav_link_color'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'nav_link_hover_color' ) ); ?>"><?php esc_html_e( 'Menu Link Hover Color:', 'ocean-extra' ); ?></label> <input class="color-picker" type="text" id="<?php echo esc_attr( $this->get_field_id( 'nav_link_hover_color' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'nav_link_hover_color' ) ); ?>" value="<?php echo esc_attr( $instance['nav_link_hover_color'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'font_size' ) ); ?>"><?php esc_html_e( 'Font Size (px):', 'ocean-extra' ); ?></label> <input class="widefat" type="number" min="5" max="50" step="1" id="<?php echo esc_attr( $this->get_field_id( 'font_size' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'font_size' ) ); ?>" value="<?php echo esc_attr( $instance['font_size'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'line_height' ) ); ?>"><?php esc_html_e( 'Line Height (px):', 'ocean-extra' ); ?></label> <input class="widefat" type="number" min="5" max="200" step="1" id="<?php echo esc_attr( $this->get_field_id( 'line_height' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'line_height' ) ); ?>" value="<?php echo esc_attr( $instance['line_height'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'letter_spacing' ) ); ?>"><?php esc_html_e( 'Letter Spacing (px):', 'ocean-extra' ); ?></label> <input class="widefat" type="number" min="0" max="5" step="0.1" id="<?php echo esc_attr( $this->get_field_id( 'letter_spacing' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'letter_spacing' ) ); ?>" value="<?php echo esc_attr( $instance['letter_spacing'] ); ?>" /> </p> <p> <label for="<?php echo esc_attr( $this->get_field_id('text_transform') ); ?>"><?php esc_html_e( 'Text Transform:', 'ocean-extra' ); ?></label> <select class="widget-select widefat" name="<?php echo esc_attr( $this->get_field_name('text_transform') ); ?>" id="<?php echo esc_attr( $this->get_field_id('position') ); ?>"> <option value="default" <?php selected( $instance['text_transform'], 'default' ) ?>><?php esc_html_e( 'Default', 'ocean-extra' ); ?></option> <option value="capitalize" <?php selected( $instance['text_transform'], 'capitalize' ) ?>><?php esc_html_e( 'Capitalize', 'ocean-extra' ); ?></option> <option value="lowercase" <?php selected( $instance['text_transform'], 'lowercase' ) ?>><?php esc_html_e( 'Lowercase', 'ocean-extra' ); ?></option> <option value="uppercase" <?php selected( $instance['text_transform'], 'uppercase' ) ?>><?php esc_html_e( 'Uppercase', 'ocean-extra' ); ?></option> </select> </p> </div> <?php } } } register_widget( 'Ocean_Extra_Custom_Menu_Widget' );