Merge pull request #12 from choctaw-nation:kjroelke/issue-5

Rework Navwalker

.gitignore

@@ -34,7 +34,8 @@ auth.json
 /.vscode/*
 .wpe-*
 local-xdebuginfo.php
-/_wpeprivate
+/_wpeprivate/
+/_wpeprivate/*.sql
 
 
 # WP-Content

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "choctaw-landing",
-	"version": "1.0.0",
+	"version": "1.2.2",
 	"description": "A custom wp theme for choctaw-landing",
 	"main": "wp-content/themes/choctaw-landing/src/index.js",
 	"scripts": {
@@ -26,15 +26,14 @@
 		"@fortawesome/free-regular-svg-icons": "^6.4.2",
 		"@fortawesome/free-solid-svg-icons": "^6.4.2",
 		"@popperjs/core": "^2.11.8",
-		"@wordpress/scripts": "^26.12.0",
+		"@wordpress/scripts": "^26.15.0",
 		"bootstrap": "^5.3.2",
 		"bootstrap-icons": "^1.11.1",
 		"daterangepicker": "^3.1.0",
-		"jquery": "^3.7.1",
 		"moment": "^2.29.4",
 		"swiper": "^10.3.1"
 	},
 	"devDependencies": {
 		"eslint-config-react-app": "^7.0.1"
 	}
-}
+}

wp-content/themes/choctaw-landing/dist/global.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'e662054d0c382f5d643d');
+<?php return array('dependencies' => array(), 'version' => '3e4a693f666c1567e96c');

wp-content/themes/choctaw-landing/dist/global.js

@@ -1 +0,0 @@
-!function(){"use strict";new class{constructor(e){this.screenWidthForHamburger=e,this.checkIsMobile(),window.addEventListener("resize",this.handleResize.bind(this)),this.init()}init(){this.navbarIsHamburger||(this.getTheMegaMenuAnchors(),this.handleClicks())}checkIsMobile(){this.windowWidth=window.innerWidth,this.navbarIsHamburger=this.windowWidth<this.screenWidthForHamburger}handleResize(){this.windowWidth=window.innerWidth,this.checkIsMobile(),this.init()}getTheMegaMenuAnchors(){const e=document.querySelectorAll("#bootscore-navbar > .mega-menu > a");0!==e.length?this.megaMenuAnchors=e:console.warn("Couldn't grab top-level anchors from the nav!")}handleClicks(){this.megaMenuAnchors.forEach((e=>{e.addEventListener("click",(e=>{e.target?window.location.href=e.target.href:console.warn("Couldn't get the href from the target!")}))}))}}(1200)}();

wp-content/themes/choctaw-landing/functions.php

@@ -8,6 +8,7 @@
 
 // Include Bootscore Functions
 require_once __DIR__ . '/inc/bootscore/theme-functions.php';
+require_once __DIR__ . '/inc/playground-acf-fields.php';
 
 /** Loads CNO Theme Functionality */
 function cno_theme_includes() {

wp-content/themes/choctaw-landing/header.php

@@ -41,26 +41,24 @@
 					<div class="<?php echo bootscore_container_class(); ?>">
 						<!-- Navbar Brand -->
 						<a class="navbar-brand sm p-3" href="<?php echo esc_url( home_url() ); ?>"><img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/img/logo/logo.svg"
-								 alt="logo" class="logo sm"></a>
+								alt="logo" class="logo sm"></a>
 
 						<!-- Offcanvas Navbar -->
 						<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-navbar">
-							<div class="offcanvas-header pb-0">
+							<div class="offcanvas-header">
 								<ul class="navbar-nav ">
 									<li class="menu-item menu-item-type-custom menu-item-object-custom nav-item nav-item-18"><a href="/" class="nav-link ">Home</a></li>
 								</ul>
 								<a href="#" class="btn btn-mobile-nav" data-bs-dismiss="offcanvas" aria-label="Close">x</a>
 							</div>
 							<div class="offcanvas-body pt-0">
-
-								<!-- Bootstrap 5 Nav Walker Main Menu -->
 								<?php
 								wp_nav_menu(
 									array(
 										'theme_location' => 'main-menu',
 										'container'      => false,
 										'menu_class'     => 'navbar-nav ms-auto',
-										'menu_id'        => 'bootscore-navbar',
+										'menu_id'        => 'cno-navbar',
 										'fallback_cb'    => '__return_false',
 										'depth'          => 3,
 										'walker'         => new CNO_Mega_Menu(),
@@ -69,7 +67,6 @@
 								?>
 							</div>
 						</div>
-
 						<div class="header-actions d-flex align-items-center">
 							<!-- Navbar Toggler -->
 							<button class="btn btn-diamond d-xl-none ms-1 ms-md-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-navbar"

wp-content/themes/choctaw-landing/inc/acf-classes/class-mega-menu-content.php

@@ -17,13 +17,26 @@ protected function init_props( array $acf ) {
 		if ( $acf['image'] ) {
 			$this->set_the_image( $acf['image'] );
 		}
-		$this->featured_event = isset( $acf['featured_event'] ) ? $acf['featured_event'] : null;
+
+		$this->featured_event = $this->set_featured_event( $acf );
 		$this->has_cta        = isset( $acf['has_cta'] ) ? $acf['has_cta'] : null;
 		if ( $this->has_cta ) {
 			$this->cta = $acf['cta_link'];
 		}
 	}
 
+	/** Handles Conditions to set the Featured Event Property
+	 *
+	 * @param array $acf the ACF Fields
+	 */
+	private function set_featured_event( array $acf ) {
+		if ( isset( $acf['use_featured_event'] ) && $acf['use_featured_event'] ) {
+			$this->featured_event = isset( $acf['featured_event'] ) ? $acf['featured_event'] : null;
+		} else {
+			$this->featured_event = null;
+		}
+	}
+
 	/** Generates the Content */
 	public function get_the_content(): string {
 		$markup = '';

wp-content/themes/choctaw-landing/inc/class-cno-mega-menu.php

@@ -27,6 +27,11 @@ class CNO_Mega_Menu extends CNO_Navwalker {
 	 */
 	protected int $children_count;
 
+	/** Whether Current Item in Navwalker is Top Level or not
+	 *
+	 * @var bool $is_top_level
+	 */
+	private bool $is_top_level;
 
 	/**
 	 * The Opening Level
@@ -50,6 +55,33 @@ public function start_lvl( &$output, $depth = 0, $args = \null ) {
 		$output      .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr( implode( ' ', $dropdown_menu_class ) ) . " depth_$depth\"" . $grid . ">\n";
 	}
 
+	/**
+	 * Starts the Element Output (inside the `li`)
+	 *
+	 * @param string   $output       Used to append additional content (passed by reference).
+	 * @param WP_Post  $data_object  Menu item data object.
+	 * @param int      $depth        Depth of menu item. Used for padding.
+	 * @param stdClass $args         An object of wp_nav_menu() arguments.
+	 * @param int      $id           Optional. ID of the current menu item. Default 0.
+	 */
+	public function start_el( &$output, $data_object, $depth = 0, $args = \null, $id = 0 ) {
+		$this->current_item = $data_object;
+		$this->depth        = $depth;
+		$this->args         = $args;
+		$this->id           = $id;
+		$this->is_top_level = $this->has_children && 0 === $this->depth;
+
+		$output .= $this->get_the_li_element();
+		if ( $this->is_top_level ) {
+			$output .= "<div class='btn-group'>";
+		}
+		$output .= $this->get_the_anchor_element();
+		// if is title, add split-toggle dropdown button that only displays on mobile
+		if ( $this->is_top_level ) {
+			$output .= '<button type="button" class="btn dropdown-toggle dropdown-toggle-split d-xl-none" data-bs-toggle="dropdown" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg><span class="visually-hidden">Toggle Dropdown</span></button>';
+		}
+	}
+
 
 	/** Generate the Opening `li` tag
 	 *
@@ -92,7 +124,7 @@ function ( $o ) {
 	protected function set_the_li_classes(): string {
 		$classes   = empty( $this->current_item->classes ) ? array() : (array) $this->current_item->classes;
 		$classes[] = ( $this->has_children ) ? 'dropdown ' : '';
-		$classes[] = ( $this->has_children && 0 === $this->depth ) ? 'mega-menu position-static ' : '';
+		$classes[] = ( $this->is_top_level ) ? 'mega-menu position-static' : '';
 		$classes[] = ( $this->current_item->current || $this->current_item->current_item_ancestor ) ? 'active' : '';
 		$classes[] = 'nav-item';
 		$classes[] = 'nav-item-' . $this->current_item->ID;
@@ -106,26 +138,43 @@ protected function set_the_li_classes(): string {
 		return $class_names;
 	}
 
+	/**
+	 * Generates the intial `<a></a>` tag
+	 *
+	 * @return string the anchor
+	 */
+	protected function get_the_anchor_element(): string {
+		$attributes = $this->get_the_attributes();
+
+		$title = apply_filters( 'the_title', $this->current_item->title, $this->current_item->ID );
+		$title = apply_filters( 'nav_menu_item_title', $title, $this->current_item, $this->args, $this->depth );
+
+		$item_output  = $this->args->before;
+		$item_output .= "<a {$attributes}>";
+		$item_output .= $this->args->link_before . $title . $this->args->link_after;
+		$item_output .= '</a>';
+		$item_output .= $this->args->after;
+		$item_output  = apply_filters( 'walker_nav_menu_start_el', $item_output, $this->current_item, $this->depth, $this->args );
+		return $item_output;
+	}
+
 	/** Builds the anchor attributes */
 	protected function get_the_attributes(): string {
 		$active_class = ( $this->current_item->current || $this->current_item->current_item_ancestor || in_array( 'current_page_parent', $this->current_item->classes, true ) || in_array( 'current-post-ancestor', $this->current_item->classes, true ) ) ? 'active' : '';
-		$attributes   = array(
+
+		$attributes = array(
 			'title'  => $this->current_item->attr_title,
 			'target' => $this->current_item->target,
 			'rel'    => $this->current_item->xfn,
 			'href'   => $this->current_item->url,
 			'class'  => $active_class,
 		);
 
-		if ( $this->has_children ) {
-			$attributes['data-toggle'] = 'dropdown';
-			$attributes['class']      .= ' dropdown-toggle';
-			$is_mega_menu_title        = 0 !== $this->depth && '0' !== $this->current_item->menu_item_parent;
+		if ( $this->has_children && ! $this->is_top_level ) {
+			$attributes['class'] .= ' mega-menu__title';
+		}
 
-			if ( $is_mega_menu_title ) {
-				$attributes['class'] .= ' mega-menu__title';
-			}
-		} else {
+		if ( ! $this->has_children ) {
 			$attributes['class'] .= ' dropdown-item';
 		}
 
@@ -167,6 +216,9 @@ public function end_lvl( &$output, $depth = 0, $args = null ) {
 			$output .= $mega_menu_content;
 			$output .= '</li>';
 		}
+		if ( $this->is_top_level ) {
+			$output .= '</div>';
+		}
 
 		$output .= "{$indent}</ul>{$n}";
 	}