Skip to content

Commit

Permalink
Change class css naming conventions to follow the new jQuery UI guide…
Browse files Browse the repository at this point in the history 
…lines

Add ui-state-active and level-specific menu css classes
  • Loading branch information
@obrie
obrie committed Apr 13, 2009
1 parent 4f26170 commit af926c7
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 85 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.rdoc
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
20 changes: 10 additions & 10 deletions README.rdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions lib/menu_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:[email protected]"><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:[email protected]"><span>Contact</span></a></li>
# </ul>
# </li>
# </ul>
Expand Down
10 changes: 8 additions & 2 deletions lib/menu_helper/menu.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down
12 changes: 6 additions & 6 deletions lib/menu_helper/menu_bar.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
#
Expand Down
14 changes: 7 additions & 7 deletions test/helpers/menu_helper_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
46 changes: 23 additions & 23 deletions test/unit/menu_bar_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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')
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit af926c7

Please sign in to comment.