diff --git a/static/javascript/mobileview.js b/static/javascript/mobileview.js index e0d657055ff2ac46b0bcdbab6e56d5eaeb4c3977..d55342aa844a206d930989c8bb995065ddef9261 100644 --- a/static/javascript/mobileview.js +++ b/static/javascript/mobileview.js @@ -25,8 +25,10 @@ $(document).ready(function() { var size; var displayType; var mobileInitializeBool = true; - var clickOnMainNav = false; - var clickOnNavIcon = false; + var clickOnHeaderNav = false; + var clickOnHeaderIcon = false; + var clickOnFooterNav = false; + var clickOnFooterIcon = false; // Run once on page load. Used to determine initial screen size. if (mobileInitializeBool) { @@ -93,21 +95,36 @@ $(document).ready(function() { // Detect if click occured on Nav Icon. $(".mobile-nav-icon-wrapper").on("click", function(e) { - clickOnNavIcon = true; - console.log("clickOnNavIcon Value: " + clickOnNavIcon + " Nav Clicked"); + clickOnHeaderIcon = true; + console.log("clickOnNavIcon Value: " + clickOnHeaderIcon + " Nav Clicked"); }); // Detect if click occured on Main Menu. - $(".nav-wrapper").on("click", function(e) { - clickOnMainNav = true; - console.log("clickOnMainNav Value: " + clickOnMainNav + " Menu Clicked"); + $("#header-nav .nav-main-menu").on("click", function(e) { + clickOnHeaderNav = true; + console.log("clickOnMainNav Value: " + clickOnHeaderNav + " Menu Clicked"); + }); + + + // Detect if click occured on Footer Icon. + $("footer .sitemap-toggle").on("click", function(e) { + clickOnFooterIcon = true; + console.log("clickOnFooterIcon Value: " + clickOnFooterIcon + " FooterNav Clicked"); + }); + + + // Detect if click occured on Footer Menu. + $("footer .nav-wrapper").on("click", function(e) { + clickOnFooterNav = true; + console.log("clickOnFooterNav Value: " + clickOnFooterNav + " FooterMenu Clicked"); }); // Detect if click occured. Runs toggle menus function on every click. - $(window).click(function(e) { - ToggleMainMenus(); + $(document).on("click", function(e) { + ToggleHeaderMenus(); + ToggleFooterMenus(); }); @@ -115,62 +132,67 @@ $(document).ready(function() { *Menu Toggling Functions* ***************/ - function ToggleMainMenus () { + function ToggleHeaderMenus () { - // Check if Menu or Nav Icon has been clicked. - if ((clickOnMainNav) == true || (clickOnNavIcon) == true) { - // Check if Nav Icon has been clicked. - if ((clickOnNavIcon) == true) { - // If menu is currently visible. + // Check if menu or icon has been clicked. + if ((clickOnHeaderNav) == true || (clickOnHeaderIcon) == true) { + //console.log("clickOnFooterIcon Value: " + clickOnFooterIcon + " FooterNav Clicked"); + //console.log("clickOnFooterNav Value: " + clickOnFooterNav + " FooterMenu Clicked"); + // Check if HeaderIcon has been clicked. + if ((clickOnHeaderIcon) == true) { + // If Menu is currently visible. if ($("#header-nav .nav-wrapper").hasClass("display-flex")) { - console.log("Closing Menu."); + console.log("Closing Header Menu."); $("#header-nav .nav-wrapper").addClass("display-none").removeClass("display-flex"); } else { - console.log("Opening Menu."); + console.log("Opening Header Menu."); $("#header-nav .nav-wrapper").addClass("display-flex").removeClass("display-none"); } - } + } } else { // Menu has not been clicked on. Closing if open. - console.log("Closing Menu."); + console.log("Closing Header Menu."); $("#header-nav .nav-wrapper").addClass("display-none").removeClass("display-flex"); } - // Default to false once processing has occured. - clickonMainNav = false; - clickOnNavIcon = false; - + // Default vars to false once processing has occured. + clickOnHeaderNav = false; + clickOnHeaderIcon = false; } /************************* *****Togggle SiteMap Window***** *************************/ - // Show/hide menu on icon click. - $("footer .sitemap-toggle").on("click", function() { - - // Toggle if menu is selected. - if ($(this).hasClass("selected")) { - $(this).removeClass("selected"); - } else { - ($(this).addClass("selected")); - } - - ToggleSiteMapMenus(); - }); - - function ToggleSiteMapMenus () { - // Check menu toggle and display accordingly. - if ($("footer .sitemap-toggle").hasClass("selected")) { - $("footer .nav-wrapper").addClass("display-flex").removeClass("display-none"); + function ToggleFooterMenus () { + + // Check if menu or icon has been clicked. + if ((clickOnFooterNav) == true || (clickOnFooterIcon) == true) { + // Check if FooterIcon has been clicked. + if ((clickOnFooterIcon) == true) { + // If Menu is currently visible. + if ($("footer .nav-wrapper").hasClass("display-flex")) { + console.log("Closing Footer Menu."); + $("footer .nav-wrapper").addClass("display-none").removeClass("display-flex"); + } else { + console.log("Opening Footer Menu."); + $("footer .nav-wrapper").addClass("display-flex").removeClass("display-none"); + } + } } else { + // Menu has not been clicked on. Closing if open. + console.log("Closing Footer Menu."); $("footer .nav-wrapper").addClass("display-none").removeClass("display-flex"); } + + // Default vars to false once processing has occured. + clickOnFooterNav = false; + clickOnFooterIcon = false; } /************************* - *****Togggle Main Nav Submenus***** + *****Togggle Header Submenus***** *************************/ // Show submenus on user click of associated main menu item. @@ -185,10 +207,10 @@ $(document).ready(function() { $(this).addClass("selected").siblings(".selected").removeClass("selected"); } - ToggleSubMenus(); + ToggleHeaderSubMenus(); }); - function ToggleSubMenus () { + function ToggleHeaderSubMenus () { // Go through each main nav and test for selected. Display submenus accordingly. $("#header-nav .vert-nav .nav-link").each(function() { if ($(this).hasClass("selected")) { @@ -201,7 +223,7 @@ $(document).ready(function() { /************************* - *****Togggle SiteMap Submenus***** + *****Togggle Footer Submenus***** *************************/ // Show submenus on user click of associated main menu item. @@ -216,10 +238,10 @@ $(document).ready(function() { $(this).addClass("selected").siblings(".selected").removeClass("selected"); } - ToggleSiteMapSubMenus(); + ToggleFooterSubMenus(); }); - function ToggleSiteMapSubMenus () { + function ToggleFooterSubMenus () { // Go through each main nav and test for selected. Display submenus accordingly. $("footer .nav-wrapper .nav-link").each(function() { if ($(this).hasClass("selected")) { @@ -249,8 +271,8 @@ $(document).ready(function() { // Hide tourn dates $(".nav-tourn-dates").hide(); - ToggleMainMenus(); - ToggleSubMenus(); + ToggleHeaderMenus(); + ToggleHeaderSubMenus(); } // Change settings if window is changed to desktop (> 1000px) size.