1

自分のニーズに合ったソースをたくさん見つけることができなかったので、仲間のハッカーが切り刻んで少し良くするためにこれを投稿したいと思いました. このヘルパーの目標は、メッセージのリストまたは単一のメッセージの両方を渡すことができるようにすることでした。これにより、モデルに保存するときにアクティブなレコードの失敗をすべて追加したり、アプリケーションの任意の場所に一般的なメッセージを追加したりできました。また、複数のレイアウトにはrwz/nestiveを使用し、テンプレートにはSlim-langを使用しています。

列数を渡すことができるフラッシュ メッセージ パーシャルから始めましょう。

- if flash.present?
  div[class="row"]
    div[class="large-#{column_count} columns"]
      = display_flash_messages(flash)

次のように呼び出すことができます：

= render partial: 'partials/flash_message', locals: { column_count: '12'}

ヘルパー コードは次のとおりです。メッセージの前に fontawesome アイコンも埋め込んでいることに注意してください。

module FlashHelper

  DEFAULT_KEY_MATCHING = {
    alert: {
      type: 'alert',
      i_class: 'fa fa-exclamation-triangle'
    },
    notice: {
      type: 'success',
      i_class: 'fa fa-check'
    },
    info: {
      type: 'standard',
      i_class: 'fa fa-check'
    },
    secondary: {
      type: 'secondary',
      i_class: 'fa fa-check'
    },
    success: {
      type: 'success',
      i_class: 'fa fa-ban'
    },
    error: {
      type: 'alert',
      i_class: 'fa fa-exclamation-triangle'
    }
  }

  def display_flash_messages(flash)
    html_output = ''
    flash.each do |type, message|
      key = DEFAULT_KEY_MATCHING[type.to_sym]
      alert_wrapper_class = ('alert-box-multiple-wrapper' if message.is_a? Array) || 'alert-box-single-wrapper'
      html_output +=
      content_tag(:div, class: "alert-box #{key[:type]}", data: { alert: '' } ) do 
        if message.is_a? Array
          html_output_nested =
          content_tag(:ul, class: 'alert-box-list') do
            message.to_a.map do |list_message|
              content_tag(:li, list_message.humanize + '.', class: 'alert-box-li-item')
            end.reduce(:<<)
          end
        else
          html_output_nested = content_tag(:span, message.humanize + '.', class: 'alert-box-span-item')
        end
        html_output_nested = content_tag( :div, html_output_nested, class: "#{alert_wrapper_class}" )
        html_output_nested = content_tag(:i, nil, class: "#{key[:i_class]}") + html_output_nested
        html_output_nested += link_to('&times;'.html_safe, '#', class: 'close')
        html_output_nested
      end
    end
    raw(html_output)
  end
end

関連する SASS:

div.alert-box {
  .close {
    color: $app-color-code-5;
    @include opacity();
  }
  i {
    font-size: 1.3em;
    padding: 9px 6px 4px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0.5rem;
    color: $app-color-code-5;
    margin-top: -0.6875rem;
  }
  div.alert-box-single-wrapper {
    margin-left: 25px;
    .alert-box-span-item {
      font-size: 1em;
    }
  }
  div.alert-box-multiple-wrapper {
    ul {
      margin-left: 3.7rem;
      list-style-type: disc;
      margin-bottom: 0;
    }
    .alert-box-li-item {
      font-size: 1em;
    }
  }
}

私のデバイス設定では、以下を使用できるようになりました。はい、デフォルトのデバイス構成を上書きします:

if resource_saved
  ....
else
  # merge the ar errors together with devise
  if resource.errors.messages.values.flatten.length > 0
    flash[:error] = resource.errors.messages.values.flatten
  end
  # remove passwords from the view layer
  clean_up_passwords resource
  respond_with resource
end

最終的に、このセットアップは 2 つの異なる html のセットを構築します。

<div class="alert-box alert data-alert">
  <i class="fa fa-exclamation-triangle"></i>
  <div class="alert-box-multiple-wrapper">
    <ul class="alert-box-list">
      <li class="alert-box-item">The error message.</li>
    </ul>
  </div>
  <a class="close" href="#">×</a>
</div>

<div class="alert-box alert data-alert">
  <i class="fa fa-exclamation-triangle"></i>
  <div class="alert-box-single-wrapper">
    <span class="alert-box-span-item">The error message.</span>
  </div>
  <a class="close" href="#">×</a>
</div>

さて、これはすべて機能しますが、他の人がこの問題にどのように取り組んだのか疑問に思っています.

4

0 に答える 0