Change class css naming conventions to follow the new jQuery UI guide…

…lines Add ui-state-active and level-specific menu css classes
pluginaweek · Apr 13, 2009 · af926c7 · af926c7
1 parent 4f26170
commit af926c7
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 85 deletions.
diff --git a/CHANGELOG.rdoc b/CHANGELOG.rdoc
@@ -1,5 +1,8 @@
 == master
 
+* Add ui-state-active and level-specific menu css classes
+* Change class css naming conventions to follow the new jQuery UI guidelines
+
 == 0.2.0 / 2008-12-14
 
 * Remove the PluginAWeek namespace

diff --git a/README.rdoc b/README.rdoc
@@ -62,18 +62,18 @@ _menu_bar.html.erb:
   %>
 
 Output (formatted for sanity):
-  <ul class="menubar menubar-1">
-    <li><a href="http://example.com/"><span>Home</span></a></li>
-    <li><a href="http://example.com/products"><span>Products</span></a></li>
-    <li><a href="http://example.com/services"><span>Services</span></a></li>
-    <li class="menubar-selected"><a href="http://example.com/about_us"><span>About Us</span></a>
-      <ul class="menubar menubar-2 menubar-selected">
-        <li><a href="http://example.com/about_us"><span>Overview</span></a></li>
-        <li class="menubar-selected"><a href="http://example.com/about_us/who_we_are"><span>Who We Are</span></a></li>
-        <li class="menubar-last"><a href="http://example.com/about_us/contact"><span>Contact Us</span></a></li>
+  <ul class="ui-menubar ui-menubar-1">
+    <li class="ui-menubar-menu ui-menubar-menu-1"><a href="http://example.com/"><span>Home</span></a></li>
+    <li class="ui-menubar-menu ui-menubar-menu-1"><a href="http://example.com/products"><span>Products</span></a></li>
+    <li class="ui-menubar-menu ui-menubar-menu-1"><a href="http://example.com/services"><span>Services</span></a></li>
+    <li class="ui-menubar-menu ui-menubar-menu-1 ui-state-active ui-menubar-selected"><a href="http://example.com/about_us"><span>About Us</span></a>
+      <ul class="ui-menubar ui-menubar-2 ui-state-active ui-menubar-selected">
+        <li class="ui-menubar-menu ui-menubar-menu-2"><a href="http://example.com/about_us"><span>Overview</span></a></li>
+        <li class="ui-menubar-menu ui-menubar-menu-2 ui-state-active ui-menubar-selected"><a href="http://example.com/about_us/who_we_are"><span>Who We Are</span></a></li>
+        <li class="ui-menubar-menu ui-menubar-menu-2 ui-menubar-last"><a href="http://example.com/about_us/contact"><span>Contact Us</span></a></li>
       </ul>
     </li>
-    <li class="ir menubar-last"><a href="http://www.google.com"><span>Search!</span></a></li>
+    <li class="ir ui-menubar-menu ui-menubar-menu-1 ui-menubar-last"><a href="http://www.google.com"><span>Search!</span></a></li>
   </ul>
 
 === Caveat Emptor

diff --git a/lib/menu_helper.rb b/lib/menu_helper.rb
@@ -32,13 +32,13 @@ module MenuHelper
   # 
   # ...generates the following html if +about_us+ is selected...
   # 
-  #   <ul id="nav" class="pretty menubar menubar-1">
-  #     <li id="nav-home"><a href="/"><span>Home</span></a></li>
-  #     <li id="nav-about_us" class="menubar-selected"><a href="/about_us"><span>About Us</span></a>
-  #       <ul class="menubar menubar-2" class="menubar-selected">
-  #         <li id="nav-about_us-who_we_are"><a href="/about_us/who_we_are"><span>Who We Are</span></a></li>
-  #         <li id="nav-about_us-what_we_do"><a href="/about_us/what_we_do"><span>What We Do</span></a></li>
-  #         <li id="nav-about_us-contact"><a href="mailto:contact@us.com"><span>Contact</span></a></li>
+  #   <ul id="nav" class="pretty ui-menubar ui-menubar-1">
+  #     <li id="nav-home" class="ui-menubar-menu ui-menubar-menu-1"><a href="/"><span>Home</span></a></li>
+  #     <li id="nav-about_us" class="ui-menubar-menu ui-menubar-menu-1 ui-state-active ui-menubar-selected"><a href="/about_us"><span>About Us</span></a>
+  #       <ul class="ui-menubar ui-menubar-2 ui-state-active ui-menubar-selected">
+  #         <li id="nav-about_us-who_we_are" class="ui-menubar-menu ui-menubar-menu-2"><a href="/about_us/who_we_are"><span>Who We Are</span></a></li>
+  #         <li id="nav-about_us-what_we_do" class="ui-menubar-menu ui-menubar-menu-2"><a href="/about_us/what_we_do"><span>What We Do</span></a></li>
+  #         <li id="nav-about_us-contact" class="ui-menubar-menu ui-menubar-menu-2"><a href="mailto:contact@us.com"><span>Contact</span></a></li>
   #       </ul>
   #     </li>
   #   </ul>

diff --git a/lib/menu_helper/menu.rb b/lib/menu_helper/menu.rb
@@ -3,13 +3,17 @@ module MenuHelper
   class Menu < HtmlElement
     include ActionView::Helpers::UrlHelper
 
+    # The css class to apply for each menu
+    cattr_accessor :menu_class
+    @@menu_class = 'ui-menubar-menu'
+
     # The css class to apply when a menu is selected
     cattr_accessor :selected_class
-    @@selected_class = 'menubar-selected'
+    @@selected_class = 'ui-state-active ui-menubar-selected'
 
     # The css class for the last menu in the menu bar
     cattr_accessor :last_class
-    @@last_class = 'menubar-last'
+    @@last_class = 'ui-menubar-last'
 
     # The unique name assigned to this menu
     attr_reader :name
@@ -24,6 +28,7 @@ class Menu < HtmlElement
     # Add shortcuts to the menu bar configuration
     delegate  :request_controller,
               :parent_menu,
+              :level,
               :auto_set_ids?,
               :attach_active_submenus?,
                 :to => :parent_menu_bar
@@ -59,6 +64,7 @@ def initialize(parent_menu_bar, name, content = nil, url_options = {}, html_opti
       # Set up default html options
       id_prefix = parent_menu_bar[:id] || parent_menu && parent_menu[:id]
       self[:id] ||= "#{id_prefix}-#{@name}" if auto_set_ids? && id_prefix
+      self[:class] = "#{self[:class]} #{menu_class} #{menu_class}-#{level}".strip
 
       # Create the menu bar for sub-menus in case any are generated.  Use the
       # same configuration as the parent menu bar.

diff --git a/lib/menu_helper/menu_bar.rb b/lib/menu_helper/menu_bar.rb
@@ -4,11 +4,11 @@ module MenuHelper
   class MenuBar < HtmlElement
     # The css class to apply for all menu bars
     cattr_accessor :menu_bar_class
-    @@menu_bar_class = 'menubar'
+    @@menu_bar_class = 'ui-menubar'
 
     # The css class to apply when a sub-menu bar is selected
     cattr_accessor :selected_class
-    @@selected_class = 'menubar-selected'
+    @@selected_class = 'ui-state-active ui-menubar-selected'
 
     # The request context in which this menu bar is being rendered
     attr_reader :request_controller
@@ -159,10 +159,10 @@ def selected?
     # version of the menu's id.  Examples of menus which customize the
     # content and/or html attributes are below:
     # 
-    #   home.menu :contact                                          # => <li id="contact"><a href="/contact">Contact</a></li>
-    #   home.menu :contact, 'Contact Us'                            # => <li id="contact"><a href="/contact">Contact Us</a></li>
-    #   home.menu :contact, {}, :class => 'pretty'                  # => <li id="contact" class="pretty"><a href="/contact">Contact</a></li>
-    #   home.menu :contact, 'Get in touch!', {}, :class => 'pretty' # => <li id="contact" class="pretty"><a href="/contact">Contact Us</a></li>
+    #   home.menu :contact                                          # => <li id="contact" class="ui-menubar-menu ui-menubar-menu-1"><a href="/contact">Contact</a></li>
+    #   home.menu :contact, 'Contact Us'                            # => <li id="contact" class="ui-menubar-menu ui-menubar-menu-1"><a href="/contact">Contact Us</a></li>
+    #   home.menu :contact, {}, :class => 'pretty'                  # => <li id="contact" class="pretty ui-menubar-menu ui-menubar-menu-1"><a href="/contact">Contact</a></li>
+    #   home.menu :contact, 'Get in touch!', {}, :class => 'pretty' # => <li id="contact" class="pretty ui-menubar-menu ui-menubar-menu-1"><a href="/contact">Get in touch!</a></li>
     # 
     # == Sub-menus
     # 

diff --git a/test/helpers/menu_helper_test.rb b/test/helpers/menu_helper_test.rb
@@ -14,15 +14,15 @@ def test_should_build_menu_bar
     end
 
     expected = <<-eos
-<ul class="pretty menubar menubar-1">
-  <li><a href="http://test.host/home"><span>Home</span></a>
-    <ul class="menubar menubar-2">
-      <li><a href="http://test.host/home/browse"><span>Browse</span></a></li>
-      <li class="menubar-last"><a href="http://test.host/home/search"><span>Search</span></a></li>
+<ul class="pretty ui-menubar ui-menubar-1">
+  <li class="ui-menubar-menu ui-menubar-menu-1"><a href="http://test.host/home"><span>Home</span></a>
+    <ul class="ui-menubar ui-menubar-2">
+      <li class="ui-menubar-menu ui-menubar-menu-2"><a href="http://test.host/home/browse"><span>Browse</span></a></li>
+      <li class="ui-menubar-menu ui-menubar-menu-2 ui-menubar-last"><a href="http://test.host/home/search"><span>Search</span></a></li>
     </ul>
   </li>
-  <li class="menubar-selected"><a href="http://test.host/contact"><span>Contact Us</span></a></li>
-  <li class="menubar-last"><a href="http://test.host/about_us"><span>About Us</span></a></li>
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-state-active ui-menubar-selected"><a href="http://test.host/contact"><span>Contact Us</span></a></li>
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-menubar-last"><a href="http://test.host/about_us"><span>About Us</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), menu_bar_html

diff --git a/test/unit/menu_bar_test.rb b/test/unit/menu_bar_test.rb
@@ -49,15 +49,15 @@ def test_should_not_be_selected
   end
 
   def test_should_set_css_classes
-    assert_equal 'menubar menubar-1', @menu_bar[:class]
+    assert_equal 'ui-menubar ui-menubar-1', @menu_bar[:class]
   end
 
   def test_should_allow_css_classes_to_be_customized
     @original_menu_bar_class = MenuHelper::MenuBar.menu_bar_class
-    MenuHelper::MenuBar.menu_bar_class = 'menus'
+    MenuHelper::MenuBar.menu_bar_class = 'ui-menus'
 
     menu_bar = MenuHelper::MenuBar.new(@controller)
-    assert_equal 'menus menus-1', menu_bar[:class]
+    assert_equal 'ui-menus ui-menus-1', menu_bar[:class]
   ensure
     MenuHelper::MenuBar.menu_bar_class = @original_menu_bar_class
   end
@@ -89,7 +89,7 @@ def test_should_accept_block
 
   def test_should_not_modify_html_options_after_building_hml
     @menu_bar.html
-    assert_equal 'menubar menubar-1', @menu_bar[:class]
+    assert_equal 'ui-menubar ui-menubar-1', @menu_bar[:class]
   end
 
   def test_should_allow_menus_to_be_created
@@ -118,7 +118,7 @@ def test_should_not_be_selected
   end
 
   def test_should_not_render_menus
-    assert_equal '<ul class="menubar menubar-1"></ul>', @menu_bar.html
+    assert_equal '<ul class="ui-menubar ui-menubar-1"></ul>', @menu_bar.html
   end
 end
 
@@ -130,7 +130,7 @@ def setup
   end
 
   def test_should_render_with_custom_options
-    assert_equal '<ul class="pretty menubar menubar-1" id="menus"></ul>', @menu_bar.html
+    assert_equal '<ul class="pretty ui-menubar ui-menubar-1" id="menus"></ul>', @menu_bar.html
   end
 end
 
@@ -158,9 +158,9 @@ def setup
 
   def test_should_render_menus
     expected = <<-eos
-<ul class="menubar menubar-1" id="menus">
-  <li id="menus-home"><a href="http://test.host/home"><span>Home</span></a></li>
-  <li class="menubar-last" id="menus-about_us"><a href="http://test.host/about_us"><span>About</span></a></li>
+<ul class="ui-menubar ui-menubar-1" id="menus">
+  <li class="ui-menubar-menu ui-menubar-menu-1" id="menus-home"><a href="http://test.host/home"><span>Home</span></a></li>
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-menubar-last" id="menus-about_us"><a href="http://test.host/about_us"><span>About</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @menu_bar.html
@@ -182,8 +182,8 @@ def test_should_not_be_selected
 
   def test_should_not_include_selected_css_class_in_html
     expected = <<-eos
-<ul class="menubar menubar-1">
-  <li class="menubar-selected menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
+<ul class="ui-menubar ui-menubar-1">
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-state-active ui-menubar-selected ui-menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @menu_bar.html
@@ -201,8 +201,8 @@ def setup
 
   def test_should_not_set_default_id_for_menus
     expected = <<-eos
-<ul class="menubar menubar-1" id="menus">
-  <li class="menubar-last"><a href="http://test.host/home"><span>Home</span></a></li>
+<ul class="ui-menubar ui-menubar-1" id="menus">
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-menubar-last"><a href="http://test.host/home"><span>Home</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @menu_bar.html
@@ -222,10 +222,10 @@ def setup
 
   def test_should_render_sub_menu_bars
     expected = <<-eos
-<ul class="menubar menubar-1">
-  <li class="menubar-last"><a href="http://test.host/home"><span>Home</span></a>
-    <ul class="menubar menubar-2">
-      <li class="menubar-last"><a href="http://test.host/about_us"><span>About Us</span></a></li>
+<ul class="ui-menubar ui-menubar-1">
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-menubar-last"><a href="http://test.host/home"><span>Home</span></a>
+    <ul class="ui-menubar ui-menubar-2">
+      <li class="ui-menubar-menu ui-menubar-menu-2 ui-menubar-last"><a href="http://test.host/about_us"><span>About Us</span></a></li>
     </ul>
   </li>
 </ul>
@@ -251,8 +251,8 @@ def setup
 
   def test_should_not_render_sub_menu_bars
     expected = <<-eos
-<ul class="menubar menubar-1">
-  <li class="menubar-selected menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
+<ul class="ui-menubar ui-menubar-1">
+  <li class="ui-menubar-menu ui-menubar-menu-1 ui-state-active ui-menubar-selected ui-menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @menu_bar.html
@@ -263,8 +263,8 @@ def test_should_store_a_menu_bar_in_content_variable
     @menu_bar.html
 
     expected = <<-eos
-<ul class="menubar menubar-2">
-  <li class="menubar-last"><a href="http://test.host/contact/investors"><span>Investors</span></a></li>
+<ul class="ui-menubar ui-menubar-2">
+  <li class="ui-menubar-menu ui-menubar-menu-2 ui-menubar-last"><a href="http://test.host/contact/investors"><span>Investors</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @controller.instance_variable_get('@content_for_menu_bar_level_2')
@@ -306,8 +306,8 @@ def test_should_be_selected
 
   def test_should_include_selected_css_class_in_html
     expected = <<-eos
-<ul class="menubar menubar-2 menubar-selected">
-  <li class="menubar-selected menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
+<ul class="ui-menubar ui-menubar-2 ui-state-active ui-menubar-selected">
+  <li class="ui-menubar-menu ui-menubar-menu-2 ui-state-active ui-menubar-selected ui-menubar-last"><a href="http://test.host/contact"><span>Contact</span></a></li>
 </ul>
 eos
     assert_equal expected.gsub(/\n\s*/, ''), @menu_bar.html