From 612f2f98e4227c8ed00ab983b52aff501534d75a Mon Sep 17 00:00:00 2001
From: Eric Davis <edavis@littlestreamsoftware.com>
Date: Fri, 9 Dec 2011 14:57:50 -0800
Subject: [PATCH] [#692] Fix and simplify the top menu open/closing

* Remove bunch of extra code from choosen
* Fix awkward indention
* Add admin menu items to the Modules menu
* Turn off bold on menu item hover, was causing jumping in width
* Fix color on opened top menus
* Fix a bunch of edge cases in the menu clicks.
* Remove gross 'html' binding in favor of a one time only one
---
 app/views/layouts/base.rhtml       |  13 ++--
 public/javascripts/application.js  | 112 +++++++++++++----------------
 public/stylesheets/application.css |   7 +-
 3 files changed, 63 insertions(+), 69 deletions(-)

diff --git a/app/views/layouts/base.rhtml b/app/views/layouts/base.rhtml
index 15318605..9b87f82f 100644
--- a/app/views/layouts/base.rhtml
+++ b/app/views/layouts/base.rhtml
@@ -67,20 +67,25 @@
             <% more_top_menu_items.each do |item| %>
             <%= render_menu_node(item) %>
             <% end %>
+            <%# TODO: Extract to helper %>
+            <% if User.current.admin? %>
+              <% menu_items_for(:admin_menu) do |item| -%>
+                <li><%= link_to h(item.caption), item.url, item.html_options %></li>
+              <% end -%>
+            <% end %>
           </ul>
         </li>
         <li>
           <%= render_menu_node(help_menu_item) %>
           <% unless User.current.logged? %>
-            <li>
+            <li id="login-menu" class="drop-down last-child">
               <%= link_to l(:label_login), {:controller => 'account', :action => 'login'}, :class => 'login' %>
-              <!-- IE7 Fix - extra div needed for slideToggle animation -->
-              <div id="nav-login">
+              <div id="nav-login" style="display:none;">
                 <%= render :partial => 'account/login' %>
               </div>
             </li>
           <% else %>
-            <li class="drop-down">
+            <li class="drop-down last-child">
             <%= link_to_user(User.current) %>
             <ul style="display:none;">
             <% menu_items_for(:account_menu) do |item| %>
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index b9da702f..c5c1bd7e 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -469,32 +469,6 @@ jQuery.viewportHeight = function() {
 jQuery(document).ready(function($) {
 
 
-	// show/hide header search box
-	$("#account a.search").live('click', function() {
-		var searchWidth = $("#account-nav").width();
-
-		$(this).toggleClass("open");
-		$("#nav-search").width(searchWidth).slideToggle(animationRate, function(){
-			$("#nav-search-box").select();
-		});
-
-		return false;
-	});
-
-        // show/hide login box
-	$("#account a.login").click(function() {
-		$(this).parent().toggleClass("open");
-                // Focus the username field if the login field has opened
-                $("#nav-login").slideToggle(animRate, function () {
-                    if ($(this).parent().hasClass("open")) {
-                      $("input#username").focus()
-                    }
-                  });
-                $("#account .drop-down.open").toggleClass("open").find("ul").mySlide();
-          
-		return false;
-	});
-        
 	// file table thumbnails
 	$("table a.has-thumb").hover(function() {
 		$(this).removeAttr("title").toggleClass("active");
@@ -560,35 +534,53 @@ jQuery(document).ready(function($) {
 		return false;
 	});
 
-        jQuery("#account-nav > li").hover(function() {
-          if ($("#account-nav").hasClass("hover") && ($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
-                //Close all other open menus
-                //Used to work around the rendering bug  TODO: fix
-                jQuery("input#username-pulldown").blur();
-                $("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
-                $(this).slideAndFocus();
-                return false;
-            }
-        },
-        function(){
-          return false;
-          });
-	jQuery("#account-nav > li.drop-down").click(function() {
-          if (($("#account-nav > li.drop-down.open").get(0) !== $(this).get(0))){
-                $("#account-nav > li.drop-down.open").toggleClass("open").find("> ul").mySlide();
-          }
-                $(this).slideAndFocus();
-                $("#account-nav").toggleClass("hover");
+  // Toggle a top menu item open or closed, showing or hiding its submenu
+  function toggleTopMenu(menuItem) {
+    menuItem.toggleClass("open").find('ul').mySlide();
+  };
 
-	$("#account .drop-down:has(ul) > a").click(function() {
-                //Close all other open menus
-                $("#account .drop-down.open:has(ul)").not($(this).parent()).toggleClass("open").find("ul").mySlide();
-                //Close login pull down when open
-                $("li.open div#nav-login").parent().toggleClass("open").find("div#nav-login").slideToggle(animRate);
-                //Toggle clicked menu item
-                $(this).parent().toggleClass("open").find("ul").mySlide();
-                return false;
-        });
+  // Handle a single click event on the page to close an open menu item
+  
+  function handleClickEventOnPageToCloseOpenMenu(openMenuItem) {
+    $('html').one("click", function(htmlEvent) {
+      if (openMenuItem.has(htmlEvent.target).length > 0) {
+        // Clicked on the open menu, let it bubble up
+      } else {
+        // Clicked elsewhere, close menu
+        toggleTopMenu(openMenuItem);
+      }
+    });
+  };
+
+  // Click on the menu header with a dropdown menu
+  $('#account-nav .drop-down').live('click', function(event) {
+    var menuItem = $(this);
+
+    toggleTopMenu(menuItem);
+
+    if (menuItem.hasClass('open')) {
+      handleClickEventOnPageToCloseOpenMenu(menuItem);
+    }
+    return false;
+  });
+
+  // Click on an actual item
+  $('#account-nav .drop-down ul a').live('click', function(event) {
+    event.stopPropagation();
+  });
+
+  // show/hide login box
+  $("#account-nav a.login").click(function() {
+    $(this).parent().toggleClass("open");
+    // Focus the username field if the login field has opened
+    $("#nav-login").slideToggle(animationRate, function () {
+      if ($(this).parent().hasClass("open")) {
+        $("input#username").focus()
+      }
+    });
+    
+    return false;
+  });
 
 	// deal with potentially problematic super-long titles
 	$(".title-bar h2").css({paddingRight: $(".title-bar-actions").outerWidth() + 15 });
@@ -612,12 +604,8 @@ jQuery(document).ready(function($) {
 			}
 		});
 
-        $('html').click(function() {
-          $("#header .drop-down.open").toggleClass("open").find("> ul").mySlide();
-          $("#account-nav.hover").toggleClass("hover");
-         });
-        // Do not close the login window when using it
-        $('#nav-login-content').click(function(event){
-             event.stopPropagation();
-         });
+  // Do not close the login window when using it
+  $('#nav-login-content').click(function(event){
+    event.stopPropagation();
+  });
 });
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index b9a5702e..7e3e35fa 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1212,7 +1212,6 @@ a:hover {
 	border-bottom-left-radius:5px;
 	border-bottom-right-radius:5px;
         background-color:#7F7F7F;
-        font-weight:bold;
         color:#FFFFFF;
 }
 
@@ -1233,6 +1232,7 @@ li a.help:hover {
   background-image:url(../images/icon_help_grey.png);
 }
 #header li.drop-down.open > a {
+  color: #6A0406;
 	background:#FFFFFF url(../images/arrow-down-grey.png) no-repeat right center;
 	padding-right:35px;
 }
@@ -1333,8 +1333,9 @@ input:-moz-placeholder {
 	width:94%;
 }
 #nav-login-content {
-        position: relative;
-        position-top:44px;
+        position: absolute;
+        top:44px;
+   right: 0px;
         float: right;
 	background: white;
 	border:1px solid #194E60;