RoughSwal

RoughSwalはRailsのControllerからアラート代わりにSweetAlertを簡単に呼び出すために書かれました。

def create
    User.create!(user_params)
rescue ActiveRecord::RecordInvalid => e
    swal{ error '不正な値が含まれています', '項目を確認の上、再度送信してください' }
    @user = e.record
end

するとHTML下部に

<script>swal({"type":"error","不正な値が含まれています":"Error","text":"項目を確認の上、再度送信してください"});</script>

と挿入される。

Instration

gem 'rough_swal'

$ bundle install

SweetAlertのインストールは各自でやっていく。

Usage

ショートカット

パラメーターは手動で設定可能ですが、まず単純な起動のショートカットとして以下の呼び出しがあります。

swal { success 'Success', 'success text' }
# <script>swal({"type":"success","title":"Success","text":"success text"});</script>

swal { info 'Info', 'info text' }
# <script>swal({"type":"info","title":"Info","text":"info text"});</script>

swal { warning 'Warning', 'warning text' }
# <script>swal({"type":"warning","title":"Warning","text":"warning text"});</script>

swal { error 'Error', 'error text' }
# <script>swal({"type":"error","title":"Error","text":"error text"});</script>

パラメータを設定して起動

こんな感じで。

swal{
  title 'タイトル'
  text 'テキスト'
  type :info
  confirm_button_color '#000'
  function 'function(){ alert("raw alert") }'
}

パラメーター名はこんな感じで。

PARAMETERS = [
    :title,
    :text,
    :type,
    :allow_escape_key,
    :custom_class,
    :allow_outside_click,
    :show_cancel_button,
    :show_confirm_button,
    :confirm_button_text,
    :confirm_button_color,
    :cancel_button_text,
    :close_on_confirm,
    :close_on_cancel,
    :image_url,
    :image_size,
    :timer,
    :html,
    :animation,
    :input_type,
    :input_placeholder,
    :input_value,
    :function,
]

プリセット

よく使うアラートはプリセットとして登録可能です。

RoughSwal.configure do
  preset(:timer_alert) {
    type 'error'
    timer 2000
    allow_outside_click true
  }
end

swal { timer_alert '失敗', '失敗したみたいです' }
# <script>swal({"type":"error","timer":2000,"allowOutsideClick":true,"title":"失敗","text":"失敗したみたいです"});</script>

デフォルト値

サイトには共通のカラーなどがあるでしょうから、それを前もって設定することもできます。

RoughSwal.configure do
  default {
    confirm_button_text '良し'
    confirm_button_color '#04c'
    cancel_button_text '悪し'
  }
end

swal {
  warning 'いいですか？', 'この構えでいいですか？'
  show_confirm_button true
}
# <script>swal({"confirmButtonText":"良し","confirmButtonColor":"#04c","cancelButtonText":"悪し","type":"warning","title":"いいですか？","text":"この構えでいいですか？","showCancelButton":true});</script>