added the depth option to nav tag

This commit is contained in:
Dirk Kelly 2011-01-24 17:00:02 +08:00
parent 456521bbed
commit f512b417f5
2 changed files with 41 additions and 10 deletions

View File

@ -4,11 +4,13 @@ module Locomotive
# Display the children pages of the site, current page or the parent page. If not precised, nav is applied on the current page.
# The html output is based on the ul/li tags.
#
# Passing through depth will control how many nested children are output
#
# Usage:
#
# {% nav site %} => <ul class="nav"><li class="on"><a href="/features">Features</a></li></ul>
#
# {% nav site, no_wrapper: true, exclude: 'contact|about', id: 'main-nav' }
# {% nav site, no_wrapper: true, depth: 1, exclude: 'contact|about', id: 'main-nav' }
#
class Nav < ::Liquid::Tag
@ -17,9 +19,9 @@ module Locomotive
def initialize(tag_name, markup, tokens, context)
if markup =~ Syntax
@source = ($1 || 'page').gsub(/"|'/, '')
@options = { :id => 'nav' }
@options = { :id => 'nav', :depth => 1 }
markup.scan(::Liquid::TagAttributes) { |key, value| @options[key.to_sym] = value.gsub(/"|'/, '') }
@options[:exclude] = Regexp.new(@options[:exclude]) if @options[:exclude]
else
raise ::Liquid::SyntaxError.new("Syntax Error in 'nav' - Valid syntax: nav <page|site> <options>")
@ -38,7 +40,7 @@ module Locomotive
css << 'first' if index == 0
css << 'last' if index == entries.size - 1
children_output << render_entry_link(p, css.join(' '))
children_output << render_entry_link(p,css.join(' '),1)
end
output = children_output.join("\n")
@ -76,17 +78,37 @@ module Locomotive
end
end
def render_entry_link(page, css)
def render_entry_link(page,css,depth)
selected = @current_page.fullpath =~ /^#{page.fullpath}/ ? ' on' : ''
icon = @options[:icon] ? '<span></span>' : ''
label = %{#{icon if @options[:icon] != 'after' }#{page.title}#{icon if @options[:icon] == 'after' }}
%{
<li id="#{page.slug.dasherize}" class="link#{selected} #{css}">
<a href="/#{page.fullpath}">#{label}</a>
</li>
}.strip
output = %{<li id="#{page.slug.dasherize}" class="link#{selected} #{css}">}
output << %{<a href="/#{page.fullpath}">#{label}</a>}
output << render_entry_children(page,depth.succ) if (depth.succ <= @options[:depth].to_i)
output << %{</li>}
output.strip
end
def render_entry_children(page,depth)
output = %{}
children = page.children
if children.present?
output = %{<ul id="#{@options[:id]}-#{page.slug.dasherize}">}
children.each do |c, page|
css = []
css << 'first' if children.first == c
css << 'last' if children.last == c
output << render_entry_link(c,css.join(' '),depth)
end
output << %{</ul>}
end
output
end
::Liquid::Template.register_tag('nav', Nav)

View File

@ -40,6 +40,15 @@ describe Locomotive::Liquid::Tags::Nav do
output = render_nav 'parent', { :page => page }
output.should == '<ul id="nav"><li id="sub-child-1" class="link on first"><a href="/child_2/sub_child_1">Child #2.1</a></li><li id="sub-child-2" class="link last"><a href="/child_2/sub_child_2">Child #2.2</a></li></ul>'
end
it 'renders children to depth' do
output = render_nav('site', {}, 'depth: 2')
output.should match /<ul id="nav">/
output.should match /<li id="child-1" class="link first">/
output.should match /<\/a><ul id="nav-child-2">/
output.should match /<li id="sub-child-1" class="link first">/
output.should match /<\/a><\/li><\/ul><\/li><\/ul>/
end
it 'adds an icon before the link' do
render_nav('site', {}, 'icon: true').should match /<li id="child-1" class="link first"><a href="\/child_1"><span><\/span>Child #1<\/a>/