Last Updated: June 13, 2018
·
1.175K
· mois3x

A foundation5 split button helper for ruby

Just paste in ApplicationHelper

def button_split(text, link, options = {})
   options_default = { drop_id: "1", size: :tiny, type: :secondary}
   options.reverse_merge!(options_default)
   options[:class] = options[:class].to_s + " #{options[:size].to_s} #{options[:type].to_s} button split"
   drop_id = options[:drop_id] || "1"
   first_link = link_to(link, options) do
     concat text
     concat content_tag(:span, "", data: { dropdown: "drop-#{drop_id}"}) 
   end
   content_tag(:br)
   links = first_link
   links << content_tag(:ul, class: "f-dropdown", id: "drop-#{drop_id}",data: {"dropdown-content" =>""}) do
     if block_given?
       x = Array.new
       links_for_li = yield(x)
       links_for_li.collect { |link| concat content_tag(:li, link)}
     end
   end
   links
 end

And use it in your views

First two params are text and url of first link, optionally you can pass through a hash {} options for the link like :method :remote etc. The size of the button and type, can be passed with :typeor :size.
Finally you pass a block with argument and add the others links

In this example i'm using SLIM

= button_split 'Show', requirement, size: :tiny do |x|
                - x << link_to('Approve', approve_requirement_path(requirement), method: :post,
                  data: { confirm: 'Are you sure?' })     
                - x << link_to('Edit', edit_requirement_path(requirement))                    
                - x << link_to('Delete', requirement, method: :delete,
                  data: { 'confirm' => 'Are you sure?' })

And if there are more than one, you should pass a custom id in options to avoid any bug { drop_id: index } (no elegant yet but necessary) any refactoring are welcome.

2 Responses
Add your response

I just noticed that if you have many instances of this helper in the same page. it will concat all the sublinks together.

over 1 year ago ·

Oh thank you @seuros for point out that bug, i found that is the id of ul tag must match with data-dropdown of span. So, when there are many of these buttons only show the links of first one.

So ive made a refactoring no elegant though, passing a custom id in case when u have more than one.

over 1 year ago ·