Rails way to make a horizontal menu - ruby-on-rails

I want to ask you about best rails way to create a menu.
I should to make a horizontal menu. Every page belongs to the specific item of this menu and this item should has id="current" when user opens on this page.
<ul>
<li id="current">Home</li>
<li>About us</li>
</ul>
As I understand I should to create a special helper which will create this html markup and use this helper with special parameter on every view of every page. Maybe there is a better rails way to do this?
PS. Update
My solution:
class ApplicationController < ActionController::Base
protect_from_forgery
before_filter :open_most_important
protected
def open_most_important
#menu = {
:cases => { :name => 'Cases', :link => '/cases'},
:groups => { :name => 'Groups', :link => '/groups' },
:projects => { :name => 'Projects', :link => '/projects' },
:settings => { :name => 'Settings', :link => '/settings' },
:about => { :name => 'About us', :link => '/about' }}
#current_menu_item = :cases
end
The fragment of the layout application.html.erb:
<div id="menu">
<ul>
<% #menu.each do |item, value| -%>
<% if #current_menu_item == item -%>
<li id="current"><%= value[:name] %></li>
<% else -%>
<li><%= value[:name] %></li>
<% end -%>
<% end -%>
</ul>
</div>
After I need to set #current_menu_item for every controller in the before_filter

If I understand correctly you want this menu to appear on every page. If that is the case you can just add it to your layout. If you don't understand layouts read up on them at Ruby on Rails Guides http://guides.rubyonrails.org/getting_started.html#customizing-the-layout

This is how I tend to do it:
<%= menu_item("Home", root_path) {
controller.controller_name == "pages" &&
controller.action_name = "home" } %>
<%= menu_item("About us", page_path("about") {
controller.controller_name == "pages" &&
controller.action_name == "about" } %>
The helper:
def menu_item(name, url, options = {})
if yield
options["id"] = "current"
end
link_to name, url, options
end
The "id" will be "current" if the block passed to menu_item returns true.

The way I handle it is to put this in a navigation partial:
<%= nav_link "All Users", users_path, active_tabs.include?('all_users') %>
<%= nav_link "Add User", new_user_path, active_tabs.include?('add_user') %>
And then this helper at the top of each view:
<%= nav 'nav_partials/users_tabs', 'all_users' %> # one view
<%= nav 'nav_partials/users_tabs', 'add_user' %> # another view
And the helpers:
def nav_link(title, path, active, options = {})
if active
options[:class] ? options[:class] += " active" : options[:class] = "active"
end
link_to(title, path, options)
end
def nav(partial, *active_tabs)
partial = "#{params[:controller]}/nav_partials/#{partial}" unless partial.chars.first == '/'
render :partial => partial, :locals => { :active_tabs => active_tabs }
end
To me, it is elegant, even though there are some things that could be a bit better (like the file path thing in the nav helper, as well as referencing params in the helper). But it works very nicely, and it's very flexible.

Related

How build a breadcrumbs in rails 4

Seriously, I have no idea where to start. How do I implement a helper breadcrums without using gems?
I tried some gems, but I preffer make a simple helpe. Exist someone or some tutorial? I not found this =/
Thanks!
My solution:
navigation_helper.rb
module NavigationHelper
def ensure_navigation
#navigation ||= [ { :title => 'Home', :url => '/' } ]
end
def navigation_add(title, url)
ensure_navigation << { :title => title, :url => url }
end
def render_navigation
render :partial => 'navigation', :locals => { :nav => ensure_navigation }
end
end
_navigation.html.erb
<ol class="breadcrumb">
<% nav.each do |n| %>
<% unless n.equal? nav.last %>
<li><%= link_to n[:title], n[:url] %></li>
<% else %>
<li><%= n[:title] %></li>
<% end %>
<% end %>
</ol>
application.html.erb
<%= render_navigation %>
And any view:
<% content_for :title, 'My Page Title' %>
<% navigation_add #something.anything, '#' %>
You cant do this.
In your application_helper:
def breadcrumb(&block)
content_tag :ol, { :class => "breadcrumb", :itemprop => "breadcrumb" } do
block.call
end
end
def breadcrumb_item(name = nil, url = nil, html_options = {}, &block)
if name or block
html_options[:class] = "#{html_options[:class]} active" unless url
content_tag :li, html_options do
if block
block.call name, url
else
url ? link_to(name, url) : name
end
end
end
end
Now in views you paste this: (I used index_path and #user.name) - you can paste this code on show view as an example
<%= breadcrumb do %>
<%= breadcrumb_item "index", index_path %>
<%= breadcrumb_item #user.name %>
<% end %>
Now when you need some breadcrumb you can just call this trunck above and change the path and the instance variables #your_variable
I further worked on Elton Santos's solution and decided breadcrumbs should be automatic like history. So I modified some code:
In my application.html.erb
<%= render_navigation %>
In my views, I was already using:
<% content_for :heading do 'User Detail' end %>
So, my navigation_helper.rb look like:
module NavigationHelper
def navigation_add(title, url)
nav_list = session['navigation'].present? ? session['navigation'] : []
nav_list << { 'title' => title, 'url' => url }
# 1. Take last 3 items only (-1 is last, not -0)
nav_list = nav_list[-3..-1] if nav_list.length > 3
# 2. Now, if first is pointing root, remove it
nav_list.shift if nav_list[0]['url'] == '/'
# 3. If last one is same as its predecessor, remove it
nav_list.pop if nav_list.length > 1 && (nav_list[-1]['url'] == nav_list[-2]['url'])
session['navigation'] = nav_list
end
def render_navigation
render partial: 'shared/navigation', locals: { nav_list: session['navigation'] }
end
end
and finally, _navigation.html.erb:
<ol class="breadcrumb">
<li><%= link_to '/' do %>
<i class="fa fa-home"></i> Home <% end %>
</li>
<i class="fa fa-angle-double-right" style="color: #ccc; padding: 0 5px;"></i>
<% nav_list.each_with_index do |nav, i| %>
<% if i != nav_list.length-1 %>
<li><%= link_to nav['title'], nav['url'] %></li>
<% else %>
<li class="active"><%= nav['title'] %></li>
<% end %>
<% end %>
</ol>
So, what's going up here is; I save every page title in session and build breadcrumbs from that. I keep recent three entries only along with hard-coded one for Home and remove duplicate entries when they are not apart.

Refactor a method to find records by status

I currently use .find_by_status(params[:status]) on my #tasks to find tasks that aren't closed or a sticky. (either 4,5).
def self.find_by_status(status)
status = status.to_i
if status == 0 then
status = 1
else
status = status
end
if status == 1 || !status then
Task.where(["STATUS NOT IN (4,5)"])
else
Task.where(:status => status)
end
end
I also copied this for my tickets model too, to find only open tickets on the home page.
It's also accompanied by this
<% status_active = 1 %>
<% Task.new.statuses.each do |status| %>
<li class="<%= if (params[:status].to_i || status_active) == status[0] then "active" end %>">
<%= link_to status[1], :controller => params[:controller], :action => params[:action], :params => { :status => status[0] } %>
</li>
I'm new to rails and I'm really struggling on refactoring this. I would probably prefer making those links into a drop down select filter, but that also I struggle with.
Any help is appreciated!
This snippet:
def self.find_by_status(status)
if status.to_i.zero?
Task.where(["STATUS NOT IN (4,5)"])
else
Task.where(:status => status.to_i)
end
end
Is identical to your above code (There is no way that status can be false after you have cast it to_i).
You can clean the view code down to:
<% Task.new.statuses.each do |status| %>
<li class="<%= 'active' if (params[:status].to_i || Task::STATUS_ACTIVE) == status[0] %>">
<%= link_to status[1], :controller => params[:controller], :action => params[:action], :params => { :status => status[0] } %>
</li>
<% end %>
I suggest adding STATUS_ACTIVE as a constant in your model instead of coding it into the view.
Also, the fact that you are specifying controllers and actions via param is strange but without knowing more about your use-case I cannot troubleshoot that.

How do I implement a show all comments feature in ruby on rails?

I'm implementing show/hide feature for users comments.
Discussed here: https://stackoverflow.com/a/10174194/439688
My aim was to:
1. Limit the default shown comments to 2.
2. Have a span with text that states the number of total comments for that particular micropost and when clicked by a user have it expand and show all comments for that micropost. I would be using Jquery/Ajax to hide, show, prepend etc.
The first change was to limit the amount of comments shown to the user and I achieved this by creating a method in my helper called "comments" and here I pass in the id of the micropost the comment belongs to.
def get_comments(micropost_id)
Comment.limit(2).order("created_at DESC").where(:micropost_id => micropost_id)
end
Now the each loop that loops through each comment will only show the 2 most recent comments.
<<% #microposts.each do |m| %>
<% if m.poster_id.nil? %>
<div class="postHolder">
<nav class="micropostOptions">
<ul class="postMenu">
<li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete", :remote => true %>
</li>
<li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
<li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
<li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
<li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
</ul>
</nav>
<%= link_to image_tag(default_photo_for_current_user, :class => "poster_photo"), current_users_username %>
<div class="post_content">
<div class="post_container">
<div class="mainUserNameFontStyle"><%= link_to current_users_username.capitalize, current_users_username %> - <div class="post_time"> <%= time_ago_in_words(m.created_at) %> ago.</div>
</div>
<%= simple_format h(m.content) %> </div>
<div class="commentsCount">
<%= content_tag :span, pluralize(m.comments.count, 'comment'), :class => "view_all_comments" if m.comments.any? %>
</div>
<% if m.comments.any? %>
<% comments(m.id).each do |comment| %>
<div class="comment_container">
<%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
<div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%= simple_format h(comment.content) %> </div>
</div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>
</div>
<% end %>
<% end %>
<% if logged_in? %>
<%= form_for #comment, :remote => true do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :micropost_id, :value => m.id %>
<%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>
<div class="commentButtons">
<%= f.submit 'Post it', :class => "commentButton", :disable_with => "Post it" %>
<div class="cancelButton"> Cancel </div>
</div>
<% end %>
<% end %>
</div>
</div>
From here this is where it gets confusing for me. I got slightly further using link_to but then decided I'd prefer not to have the url to the comments count show in the browser status bar. This is why I switched to using span.. but now it's not quite easy to do what I wish to do as I can't use the link_to/remote => true now.
How do I make it so when a user clicks the comment count span an ajax call is made pointing to:
def load_comments
#load_comments = Comment.where(:micropost_id => params[:id])
respond_to do |format|
format.js { render :load_comments }
end
end
I thought about putting a click function in users.js but how would I pass the params of the micropost that is in the each loop in the code above into users.js? I don't think it's possible.
All my comment posting is done via ajax but because I used forms for these it was so much easier for me to just add remote => true and create some js templates and do something on success of ajax post.
Not sure if I'm even going about this the right way. I'd appreciate some help/advice from more experienced rails programmers.
Kind regards
Rails partial
#Display all the comments based on local passed to this partial
# Initially pass limit as 2(or whatever you want). then on click of span pass limit as nil. then you can check if limit is nil you can query the model without limit specifier.
<% #comments = Comment.custom_find(#your_params) %>
<% #comments.each do |comment| %>
<%= comment.title %>
<% end %>
javascript/jquery
function load_all_comments(id)
{
new Ajax.Updater('show_comments',
'<%=url_for(:controller => "your_controller", :action => "your_action")%>', {
parameters: {'id':id },
method: 'get',
onSuccess: function(request){
div_comments = document.getElementById("partial_comments_list");
div_comments.innerHTML = request.responseText;
}
});
} // you can call this js function on span click. use jquery if you want.
Controller:
Then inside your_action of your_controller, dont forget to render the partial
render :partial => "show_comments", :layout => false
Edit:
you can even pass locals to your partial
render :partial => "show_comments", :locals => {:post => #post}
Using this every time your partial view will get updated, on the basis of locals you pass.
of course this is just an example not a complete code/solution.
There may be better ways. but this worked fine for me.
Another option is to just output all of the comments and hide the ones you don't want to show first. <div class="hidden_comments" style="display:none;"> a comment </div>
Then just have some javascript to show them when the span is clicked?
<script type="text/javascript">
$("#span_id").click(function() {
$('.hidden_comments').show();
});
</script>
This works great if you do not don't have a ton of comments.
If you really want to do it your way, I have done it before but it gets messy.
Put this in your application.js
$('.comment_span').live('click', function () {
$.get(this.data_url, null, update_row, 'json');
return false;
});
Your span would look like this:
<span class="comment_span" data_url="http://website.com/resource/more_comments">
show all comments
</span>
This example returns the data as json, so I used the update_row function to update replace the comments data.
function update_row(data, status) {
$("#comments-table").append(data.html);
};
Here is what my controller looked like:
def more_comments
#comments = Comments.all
if #comments
respond_to do |format|
format.js {
render :json => {
:html => render_to_string(:partial => "comments"),
}.to_json
}
end
end
end
You should do this via your index action.
Pass a param to it to determine if you want to show all comments or just the current set (I'd use will_paginate to handle this.
Haven't looked too deep into your code as I'm on my phone right now, but something like this:
class CommentsController < ApplicationController
def index
If params[:show_all] == "true"
#comments = Comment.all
else
#comments = Comment.where(foo: bar).paginate(per_page: 2, page: params[:page])
end
end
Then you have it respond to JavaScript and send the page param with your Ajax request

Does this rails code belong in Application Controller?

I have some code (that is working), but I just want to make sure I am putting it in the right place per rails conventions/best practices. The purpose of the code, is to generate a set of subheading navigation links if '#facility' is defined (which could be done in one of several controllers). Right now, I have the following bits of code spread out as identified below.
My issue: this doesn't feel right, particularly the bit of logic at the beginning of the html template. I will also want to define a few other similar helpers to define these subhead links based on different models. Should this logic (of setting #subhead_links) be in the application controller? As a method in each model (so I would set #subhead_links = #facility.subhead_links)?
I've looked some for answers, but this type of philosophical question isn't as readily google-able as an error code.
in application helper
# build subhead
def subhead_links(facility)
links = [
{ :label => "Configure Facility", :path => facility_path(facility) },
{ :label => "Waitlists", :path => waitlist_tiers_path(:id => facility.id) },
{ :label => "Applications", :path => sponsors_path(:id => facility.id) }
return links
end
in a partial included in application.html.erb template
<% if #facility %>
<% #subhead_links = subhead_links(#facility) %>
<% end %>
<% if #subhead_links %>
<nav class="subnav">
<ul>
<% #subhead_links.each do |link| %>
<li><%= link_to link[:label], link[:path] %></li>
<% end %>
</ul>
</nav>
<% end %>
in various other controllers...
#facility = Facility.find(params[:id])
I never rely on instance variables in partials and try to put as much logic as possible in helpers.
Here this would result in the following:
application_layout:
<%= render_subhead_links(#facility) %>
application_helper:
def render_subhead_links(facility)
if facility
links = [
{ :label => "Configure Facility", :path => facility_path(facility) },
{ :label => "Waitlists", :path => waitlist_tiers_path(:id => facility.id) },
{ :label => "Applications", :path => sponsors_path(:id => facility.id) }
render :partial_name, :links => links
end
end
partial:
<nav class="subnav">
<ul>
<% links.each do |link| %>
<li><%= link_to link[:label], link[:path] %></li>
<% end %>
</ul>
</nav>

Highlight tab in menu

I have a menu which is a ul
Home | Calendar | Settings
I want to highlight (via a css class) the selected tab in the menu.
Some links (Home and Calendar) also have subselections
Home | *Calendar* | Settings
-------------------------
Add event | Edit event
Ofcourse when edit event is selected, Calendar should still be highlighted.
how can I best approach this using rails and css?
Thanks
The simplest way would be to check which controller is being used. I made up controller names, so of course you would replace 'home', 'calendar', and 'settings' with the correct names.
<ul>
<li class="<%= "highlighted" if params[:controller] == "home" %>">Home</li>
<li class="<%= "highlighted" if params[:controller] == "calendar" %>">Calendar</li>
<li class="<%= "highlighted" if params[:controller] == "settings" %>">Settings</li>
</ul>
In your helper file:
def is_active?(page_name)
"active" if params[:action] == page_name
end
In the template file:
link_to 'Home', '/', :class => is_active?("index")
link_to 'About', '/about', :class => is_active?("about")
link_to 'contact', '/contact', :class => is_active?("contact")
I found this on: http://juliocapote.com/post/52081481/highlight-link-based-on-current-page-in-rails
I settled on this solution which I like a lot:
In the helper
def active_if(options)
if params.merge(options) == params
'nav-active'
end
end
And in the view define what makes the route unique:
<%= link_to 'Home', root_path, class: active_if(action: 'home') %>
<%= link_to 'Aricles', articles_path, class: active_if(controller: 'articles') %>
I have the same problem and end up creating helper.
basicly it replace the link_to url helper so it wrap the link with li and add class "menu_selected" if the current controller matches the link controller
usage sample
<%= menu_link_to "Home", home_path %>
def menu_link_to(*args, &block)
url = args[1]
mapping = ActionController::Routing::Routes.recognize_path(url)
class_property = "menu_selected" if mapping[:controller] == controller.controller_path
content_tag :li, :class => class_property do
link_to *args, &block
end
end
Update to #ahmy's answer for Rails 3.2:
def menu_list_item(*args, &block)
url = args[1]
mapping = Rails.application.routes.recognize_path(url)
li_class = 'active' if mapping[:controller] == controller.controller_path
content_tag :li, :class => li_class do
link_to *args, &block
end
end
i.e. Rails.application.routes.recognize_path instead of ActionController::Routing::Routes.recognize_path.

Resources