diff --git a/static/javascript/mobileview.js b/static/javascript/mobileview.js index 922b2320da3a3b2d3cacd2683e6311999eb27252..e0d657055ff2ac46b0bcdbab6e56d5eaeb4c3977 100644 --- a/static/javascript/mobileview.js +++ b/static/javascript/mobileview.js @@ -25,6 +25,8 @@ $(document).ready(function() { var size; var displayType; var mobileInitializeBool = true; + var clickOnMainNav = false; + var clickOnNavIcon = false; // Run once on page load. Used to determine initial screen size. if (mobileInitializeBool) { @@ -37,7 +39,7 @@ $(document).ready(function() { } $("footer .nav-wrapper .nav-sublink a").addClass("round-top-extra round-bottom-extra"); - mobileInitializeBool = false; + mobileInitializeBool = true; } @@ -74,6 +76,7 @@ $(document).ready(function() { $(this).children(".mobile-nav-icon-bars-red").addClass("display-block").removeClass("display-none"); }); + $(".mobile-nav-icon-wrapper").mouseleave(function() { $(this).children(".mobile-nav-icon-bars").addClass("display-block").removeClass("display-none"); $(this).children(".mobile-nav-icon-bars-red").addClass("display-none").removeClass("display-block"); @@ -81,32 +84,64 @@ $(document).ready(function() { /************************* - *****Togggle Main Nav Window***** + *****Togggle Nav Window Display***** *************************/ - - // Show/hide menu on icon click. - $(".mobile-nav-icon-wrapper").on("click", function() { - - // Toggle if menu is selected. - if ($(this).hasClass("selected")) { - $(this).removeClass("selected"); - } else { - ($(this).addClass("selected")); - } - + + /*************** + *Click Dection* + ***************/ + + // Detect if click occured on Nav Icon. + $(".mobile-nav-icon-wrapper").on("click", function(e) { + clickOnNavIcon = true; + console.log("clickOnNavIcon Value: " + clickOnNavIcon + " Nav Clicked"); + }); + + + // Detect if click occured on Main Menu. + $(".nav-wrapper").on("click", function(e) { + clickOnMainNav = true; + console.log("clickOnMainNav Value: " + clickOnMainNav + " Menu Clicked"); + }); + + + // Detect if click occured. Runs toggle menus function on every click. + $(window).click(function(e) { ToggleMainMenus(); }); - + + + /*************** + *Menu Toggling Functions* + ***************/ + function ToggleMainMenus () { - // Check menu toggle and display accordingly. - if ($(".mobile-nav-icon-wrapper").hasClass("selected")) { - $("#header-nav .nav-wrapper").addClass("display-flex").removeClass("display-none"); + + // 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. + if ($("#header-nav .nav-wrapper").hasClass("display-flex")) { + console.log("Closing Menu."); + $("#header-nav .nav-wrapper").addClass("display-none").removeClass("display-flex"); + } else { + console.log("Opening 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."); $("#header-nav .nav-wrapper").addClass("display-none").removeClass("display-flex"); } + + // Default to false once processing has occured. + clickonMainNav = false; + clickOnNavIcon = false; + } - /************************* *****Togggle SiteMap Window***** *************************/