Merge pull request #148 from opf/feature/rails3_refactor_more_functions_menu

Feature/rails3 refactor more functions menu

app/assets/javascripts/action_menu.js

@@ -0,0 +1,64 @@
+/*
+  The action menu is a menu that usually belongs to an OpenProject entity (like an Issue, WikiPage, Meeting, ..).
+  Most likely it looks like this:
+    <ul class="action_menu_main">
+      <li><a>Menu item text</a></li>
+      <li><a>Menu item text</a></li>
+      <li class="drop-down">
+        <a class="icon icon-more" href="javascript:">More functions</a>
+        <ul style="display:none;" class="action_menu_more">
+          <li><a>Menu item text</a></li>
+        </ul>
+      </li>
+    </ul>
+  The following code is responsible to open and close the "more functions" submenu.
+*/
+
+jQuery(function ($) {
+  var animationSpeed = 100; // ms
+
+  function menu_top_position(menu) {
+    // if an h2 tag follows the submenu should unfold out at the border
+    var menu_start_position;
+    if (menu.next().get(0) != undefined && (menu.next().get(0).tagName == 'H2')){
+      menu_start_position = menu.next().innerHeight() + menu.next().position().top;
+    }
+    else if(menu.next().hasClass("wiki-content") && menu.next().children().next().first().get(0) != undefined && menu.next().children().next().first().get(0).tagName == 'H1'){
+      var wiki_heading = menu.next().children().next().first();
+      menu_start_position = wiki_heading.innerHeight() + wiki_heading.position().top;
+    }
+    return menu_start_position;
+  };
+
+  function close_menu(event) {
+    var menu = $(event.data.menu);
+    menu.find(" > li.drop-down.open").removeClass("open").find("> ul").slideUp(animationSpeed);
+    // no need to watch for clicks, when the menu is already closed
+    $('html').off('click', close_menu);
+  };
+
+  function open_menu(menu) {
+    var drop_down = menu.find(" > li.drop-down")
+    // do not open a menu, which is already open
+    if ( !drop_down.hasClass('open') ) {
+      drop_down.find('> ul').slideDown(animationSpeed, function(){
+        drop_down.find('li > a:first').focus();
+        // when clicking on something, which is not the menu, close the menu
+        $('html').on('click', {menu: menu.get(0)}, close_menu);
+      });
+      drop_down.addClass('open');
+    };
+  };
+
+  // open the given submenu when clicking on it
+  function install_menu_logic(menu) {
+    menu.find(" > li.drop-down").click(function(event) {
+      $(this).find("ul.action_menu_more").css({ top: menu_top_position(menu) });
+      open_menu(menu);
+    });
+  };
+
+  $('.action_menu_main').each(function(idx, menu){
+    install_menu_logic($(menu));
+  });
+});

app/assets/javascripts/application.js

@@ -21,6 +21,7 @@
 //= require controls
 //= require i18n/translations
 //= require select2
+//= require action_menu
 //= require openproject
 //= require breadcrumb
 //= require findDomElement
@@ -752,7 +753,6 @@ jQuery(document).ready(function($) {
   };
 
 
-
 	// open and close the main-menu sub-menus
 	$("#main-menu li:has(ul) > a").not("ul ul a")
 		.append("<span class='toggler'></span>")
@@ -803,7 +803,6 @@ jQuery(document).ready(function($) {
           return false;
           });
         $("#account-nav").onClickDropDown();
-        $(".action_menu_main").onClickDropDown();
 
 	// deal with potentially problematic super-long titles
 	$(".title-bar h2").css({paddingRight: $(".title-bar-actions").outerWidth() + 15 });

app/assets/javascripts/context_menu.js

@@ -1,40 +1,5 @@
 /* redMine - project management software
    Copyright (C) 2006-2008  Jean-Philippe Lang */
-
-jQuery(document).ready(function($) {
-  $.fn.onClickDropDown = function(){
-    var that = this;
-    $('html').click(function() {
-      that.find(" > li.drop-down.open").removeClass("open").find("> ul").mySlide();
-      that.removeClass("hover");
-    });
-
-    // Do not close the login window when using it
-    that.find("li li").click(function(event){
-      $(document).trigger(event); // pass click-event to rails ujs-handler
-      event.stopPropagation();
-    });
-
-    this.find(" > li.drop-down").click(function(event) {
-      // if an h2 tag follows the submenu should unfold out at the border
-      var menu_start_position;
-      if (that.next().get(0) != undefined && (that.next().get(0).tagName == 'H2')){
-        menu_start_position = that.next().innerHeight() + that.next().position().top;
-        that.find("ul.action_menu_more").css({ top: menu_start_position });
-      }
-      else if(that.next().hasClass("wiki-content") && that.next().children().next().first().get(0) != undefined && that.next().children().next().first().get(0).tagName == 'H1'){
-        var wiki_heading = that.next().children().next().first();
-        menu_start_position = wiki_heading.innerHeight() + wiki_heading.position().top;
-        that.find("ul.action_menu_more").css({ top: menu_start_position });
-      }
-
-      $(this).toggleSubmenu(that);
-      $(document).trigger(event); // pass click-event to rails ujs-handler
-      return false;
-    });
-  };
-});
-
 var observingContextMenuClick;
 
 ContextMenu = Class.create();
@@ -48,11 +13,11 @@ ContextMenu.prototype = {
 		Event.observe(document, 'contextmenu', this.RightClick.bindAsEventListener(this));
 		observingContextMenuClick = true;
 	}
-	
+
 	this.unselectAll();
 	this.lastSelected = null;
 	},
-  
+
 	RightClick: function(e) {
 		this.hideMenu();
 		// do not show the context menu on links

app/helpers/application_helper.rb

@@ -1101,7 +1101,7 @@ module ApplicationHelper
       });
     })
     unless User.current.pref.warn_on_leaving_unsaved == '0'
-      tags += javascript_tag("Event.observe(window, 'load', function(){ new WarnLeavingUnsaved('#{escape_javascript( l(:text_warn_on_leaving_unsaved) )}'); });")
+      tags += javascript_tag("jQuery(function(){ new WarnLeavingUnsaved('#{escape_javascript( l(:text_warn_on_leaving_unsaved) )}'); });")
     end
 
     if User.current.impaired? and accessibility_js_enabled?

app/views/layouts/base.html.erb

@@ -48,7 +48,7 @@
         <%= full_breadcrumb %>
       </h1>
     </div>
-    <%= javascript_tag('jQuery("div#breadcrumb ul.breadcrumb").adjustBreadcrumbToWindowSize()') %>
+    <%= javascript_tag('jQuery(function($) { $("div#breadcrumb ul.breadcrumb").adjustBreadcrumbToWindowSize(); });') %>
   </div>
 
   <% main_menu = render_main_menu(@project) %>