Bạn đã chán với việc hiển thị các thông báo flash như thế này ?
Và muốn chuyển đổi sang hiển thị thế này:
Vậy thì gem toastr-rails là dành cho bạn !
1. Giới thiệu chung
toastr là một thư viện Javascript được phát triển dựa trên Jquery và được xây dựng để phục vụ cho việc hiển thị thông báo một cách đẹp đẽ hơn và có thể customize được.
Ngoài gem toastr-rails được sử dụng trong Rails thì ta cũng có thể tìm thấy toast trên thư viện Bootstrap 4, tuy nhiên gem này được xây dựng để hỗ trợ tốt hơn cho Rails.
Phiên bản hiện tại của gem toastr-rails là 2.0.1.
Các bạn có thể xem qua demo của gem này tại đây: https://codeseven.github.io/toastr/demo.html
2. Ví dụ sử dụng
1. Cài đặt Jquery trên Rails
Thêm
1 2 | gem <span class="token string">'jquery-rails'</span> |
vào Gemfile.
Thêm
1 2 3 | <span class="token comment">//= require jquery</span> <span class="token comment">//= require jquery_ujs</span> |
vào application.js. Nếu đang sử dụng Rails 5.1+ thì chỉ cần thêm dòng //= require jquery vào file này là được.
2. Cài đặt gem toastr-rails
Thêm
1 2 | gem <span class="token string">'toastr-rails'</span> |
vào Gemfile.
Thêm
1 2 | <span class="token comment">//= require toastr</span> |
vào application.js.
Và
1 2 | *= require toastr |
vào application.css.
3. Tạo helper
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token comment"># app/helpers/application_helper.rb</span> <span class="token keyword">def</span> custom_bootstrap_flash flash_messages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> flash<span class="token punctuation">.</span><span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span>type<span class="token punctuation">,</span> message<span class="token operator">|</span> type <span class="token operator">=</span> <span class="token string">'success'</span> <span class="token keyword">if</span> type <span class="token operator">==</span> <span class="token string">'notice'</span> type <span class="token operator">=</span> <span class="token string">'error'</span> <span class="token keyword">if</span> type <span class="token operator">==</span> <span class="token string">'alert'</span> text <span class="token operator">=</span> <span class="token string">"<script>toastr.<span class="token interpolation"><span class="token delimiter tag">#{</span>type<span class="token delimiter tag">}</span></span>('<span class="token interpolation"><span class="token delimiter tag">#{</span>message<span class="token delimiter tag">}</span></span>');</script>"</span> flash_messages <span class="token operator"><</span><span class="token operator"><</span> text<span class="token punctuation">.</span>html_safe <span class="token keyword">if</span> message <span class="token keyword">end</span> flash_messages<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">"n"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>html_safe <span class="token keyword">end</span> |
Và thêm dòng sau đây vào layout, ngay dưới js include tag
1 2 3 | <%= javascript_include_tag "application" %> <%= custom_bootstrap_flash %> |
4. Sử dụng
Sau khi có helper kia thì việc sử dụng toast trên controller không khác gì việc sử dụng flash, ta chỉ cần sử dụng đơn giản như sau:
1 2 | flash<span class="token punctuation">[</span><span class="token symbol">:success</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"Đăng nhập thành công"</span> |
Còn nếu như sử dụng trong file JS thì gem toastr-rails đã có hỗ trợ sẵn các hàm sau:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Display an info toast with no title</span> toastr<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'Are you the 6 fingered man?'</span><span class="token punctuation">)</span> <span class="token comment">// Display a warning toast, with no title</span> toastr<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'My name is Inigo Montoya. You Killed my father, prepare to die!'</span><span class="token punctuation">)</span> <span class="token comment">// Display a success toast, with a title</span> toastr<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'Have fun storming the castle!'</span><span class="token punctuation">,</span> <span class="token string">'Miracle Max Says'</span><span class="token punctuation">)</span> <span class="token comment">// Display an error toast, with a title</span> toastr<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'I do not think that word means what you tink it means.'</span><span class="token punctuation">,</span> <span class="token string">'Inconceivable!'</span><span class="token punctuation">)</span> |
5. Customize
Ngoài việc hiển thị, ta còn có thể thay đổi một vài thông số cho toastr. Ta thay đổi các thông số này bằng cách chỉnh sửa object toastr.options trong file js (ở ví dụ sau đây là file application.js nhưng bạn cũng có thể thay đổi tùy theo yêu cầu trên ứng dụng của bạn)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token comment">// application.js</span> toastr<span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// thay đổi nội dung hiển thị trên nút close, vd như "Đóng"</span> <span class="token string">"closeButton"</span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// thay đổi vị trí của notification</span> <span class="token string">"positionClass"</span><span class="token punctuation">:</span> <span class="token string">"toast-top-right"</span><span class="token punctuation">,</span> <span class="token comment">// Các thông báo có hiển thị cùng 1 lúc hay khi cái sau xuất hiện sẽ ẩn cái trước</span> <span class="token string">"preventDuplicates"</span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// action khi click vào thông báo</span> <span class="token string">"onclick"</span><span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// thời gian, hiệu ứng hiển thị và ẩn</span> <span class="token string">"showDuration"</span><span class="token punctuation">:</span> <span class="token string">"300"</span><span class="token punctuation">,</span> <span class="token string">"hideDuration"</span><span class="token punctuation">:</span> <span class="token string">"1000"</span><span class="token punctuation">,</span> <span class="token string">"timeOut"</span><span class="token punctuation">:</span> <span class="token string">"5000"</span><span class="token punctuation">,</span> <span class="token string">"extendedTimeOut"</span><span class="token punctuation">:</span> <span class="token string">"1000"</span><span class="token punctuation">,</span> <span class="token string">"showEasing"</span><span class="token punctuation">:</span> <span class="token string">"swing"</span><span class="token punctuation">,</span> <span class="token string">"hideEasing"</span><span class="token punctuation">:</span> <span class="token string">"linear"</span><span class="token punctuation">,</span> <span class="token string">"showMethod"</span><span class="token punctuation">:</span> <span class="token string">"fadeIn"</span><span class="token punctuation">,</span> <span class="token string">"hideMethod"</span><span class="token punctuation">:</span> <span class="token string">"fadeOut"</span> <span class="token punctuation">}</span> |