doabit / semantic-ui-sass

Semantic UI, converted to Sass and ready to drop into Rails & Compass.
MIT License
1.15k stars 190 forks source link

semantic_flash can't dismiss when click the close icon #110

Closed imtinge closed 7 years ago

imtinge commented 7 years ago

I have used the flash helper <%= semantic_flash %> but when the message flashes, I can't dismiss the message with clicking the close icon. only when I wrote below code after the main content in my view file, message can dismiss.

$('.message .close')
  .on('click', function() {
    $(this)
      .closest('.message')
      .transition('fade')
    ;
  })
;

I think this way is ugly. is there any other methods ? or could you please add this script to the helper?

doabit commented 7 years ago

@imtinge Sorry, Semantic UI only support this way, https://semantic-ui.com/collections/message.html

imtinge commented 7 years ago
module SemanticFlashesHelper
  ALERT_TYPES = [:error, :info, :success, :warning]

  def semantic_flashes
    output = ''
    flash.each do |type, message|
      next if message.blank?
      type = :success if type.to_sym == :notice
      type = :error   if type.to_sym == :alert
      next unless ALERT_TYPES.include?(type.to_sym)
      output += flashes_container(type, message)
    end

    raw(output)
  end

  def flashes_container(type, message)
    content_tag(:div, class: "ui #{type} message") do
      concat content_tag(:i, '', class: "close icon") 
      concat message
      concat javascript_tag <<-EOF
        $('.message .close')
          .on('click', function() {
            $(this)
              .closest('.message')
              .transition('fade')
            ;
          })
        ;
      EOF
    end
  end
end

I have modified the helper like above, add the javascript_tag with it, now can simply dismiss the message by click the close icon.

ayushkamadji commented 7 years ago

It's because of turbolinks. You can add a script for this in your app/assets/javascripts folder.

# app/assets/javascripts/close_icon.coffee

ready = ->
  $('.message .close').on('click', 
    -> $(this).closest('.message').hide() # You can use .transition('fade') here instead of hide()
  )

$(document).ready(ready)
$(document).on('page:load', ready)
imtinge commented 7 years ago

Thank you @ayushkamadji, I am a complete beginner to Rails and js