Fire.app Feature Tutorial

Getting Current Page Path and Understanding Its Usage (Advanced)

In this step, we'll add some highlight effect on the link corresponding to the current page in the main menu. We offer a simple way for beginners and for intermediates we include a more detailed explaination.

For Beginners

You can use this helper to add "active" class to the corresponding links. Please add the new file view_helpers.rb in the project folder. The content of this file is shown below:

module ViewHelpers
  def new_link_to(name, href, options={})
    if href == request.path
      options[:class] ||=''
      options[:class] += "active"
    end
    link_to name, href, options
  end
end

When using the helper new_link_to, we need to pass two arguments. The first one is the content we want to wrap with the <a> tag. The second one is the url which the `href` attribute needs. For example, if we want to use this helper to add an <a> tag link to /index.html and with the text Home, it should look like this:

<%= new_link_to("Home","/index.html") %>

This helper detects if the current page path is the same as the link url. When the current page is not /index.html, the output result is:

<a href="/index.html">Home</a>

If the current page is /index.html, the output result is:

<a href="/index.html" class="active">Home</a>

In this project, we must change the content of _main_menu.html.erb to:

<div class="main-menu">
    <ul>
        <li>
            <%= new_link_to('<span class="icons-home">Home</span>',"/index.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-features">Features</span>',"/features/index.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-documents">Documents</span>',"/documents.html") %>
        </li>
        <li>
            <%= new_link_to('<span class="icons-screenshots">Screenshots</span>',"/screenshots.html") %>
        </li>
    </ul>
</div>

In CSS, we already defined the style for main menu links which have "active" class. After changing the content of _main_menu.html.erb, you'll immediately see the effect in your browser.

Note: In the code above, we use a whole span tag with class like <span class="icons-home">Home</span> as the first argument for new_link_to. Because this argument has double quotes " inside, we need to use single quotes ' to wrap them to avoid an error.

For Intermediates

Actually we need to use request.path to get current page path and achieve our goal with if conditionals. Let's see this version's _main_menu.html.erb which uses `if` conditionals instead of the helper, it's easier for understanding the mechanism:

<div class="main-menu">
    <ul>
        <li>
            <a href="/index.html" <%= 'class="active"' if request.path == "/index.html" || request.path == "/" %>>
                <span class="icons-home">Home</span>
            </a>
        </li>
        <li>
            <a href="/features/index.html" <%= 'class="active"' if request.path =~ /^\/features\// %>>
                <span class="icons-features">Features</span>
            </a>
        </li>
        <li>
            <a href="/documents.html" <%= 'class="active"' if request.path == "/documents.html" %>>
                <span class="icons-documents">Documents</span>
            </a>
        </li>
        <li>
            <a href="/screenshots.html" <%= 'class="active"' if request.path == "/screenshots.html" %>>
                <span class="icons-screenshots">Screenshots</span>
            </a>
        </li>
    </ul>
</div>

After finding request.path, we can see that the helper we've seen previously uses request.path too.

module ViewHelpers
  def new_link_to(name, href, options={})
    if href == request.path
      options[:class] ||=''
      options[:class] += "active"
    end
    link_to name, href, options
  end
end

To learn more about custom helpers, please see Template Helper.