RubyDoc.info: File: README – Documentation for rails-sweetalert2-confirm (0.9.0)

Rails SweetAlert2 Confirmations

An awesome SweetAlert2 replacement for Rails’ confirmation dialogs.

See SweetAlert2 in action!

Installation

```ruby # Gemfile

gem ‘rails-sweetalert2-confirm’ gem ‘rails-assets-sweetalert2’, source ‘https://rails-assets.org’ ```

```javascript // app/assets/javascripts/application.js

//= require sweetalert2 //= require sweetalert2-rails-confirm ```

```css /* app/assets/stylesheets/application.css

*= require sweetalert2 */ ```

Requirements

Rails 4+

Previous versions may be supported but are untested, use at your own risk!

Usage

Basic Setup ___ Simply implement the link_to with a data: { confirm: 'message' } as you normally would ruby link_to('Another page', another_page_path, data: { confirm: 'Are you sure you want to leave this page?' })

Remote Setup ___ Simply implement the link_to with a data: { confirm: 'message' } and remote: true as you normally would ruby link_to('Another page', another_page_path, remote: true, data: { confirm: 'Are you sure you want to leave this page?' })

Setting Default SweetAlert2 Options ___ You can define the default sweet alert options globally by creating a js object named sweetAlertConfirmDefaults.

javascript var sweetAlertConfirmDefaults = { title: 'Are you sure?', type: 'warning', showCancelButton: true, confirmButtonText: "I'm sure" confirmButtonClass: 'btn btn-danger' cancelButtonClass: 'btn btn-default', }; | Argument | ——————— | ——————– | ———– | | sweetSelector | remote | afterComfirm | afterDismiss | title | text | html | type | customClass | animation | allowOutsideClick | allowEscapeKey | showConfirmButton | showCancelButton | confirmButtonText | cancelButtonText | confirmButtonColor | cancelButtonColor | confirmButtonClass | cancelButtonClass | buttonsStyling | reverseButtons | showCloseButton | showLoaderOnConfirm | preConfirm | imageUrl | imageWidth | imageHeight | imageClass | timer | width | padding | background | input | inputPlaceholder | inputValue | inputOptions | inputAutoTrim | inputValidator | inputClass | onOpen | onClose N/A | Default value | Description | | "[data-swal]" | The selector that railsSweetAlert2Confirm will look for to hijack the confirms. This needs to be set before you import rails_sweetalert2_confirm.js | | false | Submit the link_to or form via rails’ default remote implementation | | N/A | Define a function to run after the user clicks the confirm button | | N/A | Define a function to run after the user dismisses the modal. Passes dismiss function(dismiss) in as a param, value of dismiss can be 'cancel', 'overlay', 'close', 'timer' | | N/A | The title of the modal. It can either be added to the object under the key “title” or passed as the first parameter of the function. | | N/A | A description for the modal. It can either be added to the object under the key “text” or passed as the second parameter of the function. | | N/A | A HTML description for the modal. If text and html parameters are provided in the same time, “text” will be used. | | N/A | The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key type or passed as the third parameter of the function. | | N/A | A custom CSS class for the modal. | | true | If set to false, modal CSS animation will be disabled. | | true | If set to false, the user can’t dismiss the modal by clicking outside it. | | true | If set to false, the user can’t dismiss the modal by pressing the Escape key. | | true | If set to false, a “Confirm”-button will not be shown. It can be useful when you’re using html parameter for custom HTML description. | | false | If set to true, a “Cancel”-button will be shown, which the user can click on to dismiss the modal. | | "OK" | Use this to change the text on the “Confirm”-button. | | "Cancel" | Use this to change the text on the “Cancel”-button. | | "#3085d6" | Use this to change the background color of the “Confirm”-button (must be a HEX value). | | "#aaa" | Use this to change the background color of the “Cancel”-button (must be a HEX value). | | N/A | A custom CSS class for the “Confirm”-button. | | N/A | A custom CSS class for the “Cancel”-button. | | true | Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false. | | false | Set to true if you want to invert default buttons positions. | | false | Set to true to show close button in top right corner of the modal. | | false | Set to true to disable buttons and show that something is loading. Useful for AJAX requests. | | N/A | Function to execute before confirm, should return Promise, see usage example. | | N/A | Add a customized icon for the modal. Should contain a string with the path or URL to the image. | | N/A | If imageUrl is set, you can specify imageWidth to describes image width in px. | | N/A | Custom image height in px. | | N/A | A custom CSS class for the customized icon. | | N/A | Auto close timer of the modal. Set in ms (milliseconds). | | 500 | Modal window width, including paddings (box-sizing: border-box). | | 20 | Modal window padding. | | "#fff" | Modal window background (CSS background property). | | N/A | Input field type, can be "text", "email", "password", "textarea", "select", "radio", "checkbox" and "file". | | N/A | Input field placeholder. | | N/A | Input field initial value. | | N/A | If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values. | | true | Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming. | | N/A | Validator for input field, should return Promise, see usage example. | | N/A | A custom CSS class for the input field. | | N/A | Function to run when modal opens, provides modal DOM element as first param. | | N/A | Function to run when modal closes, provides modal DOM element as first param. | means that the value isn’t submitted unless defined

Please refer to the SweetAlert2 Documentation for the correct values

NOTE: If you would like to assign a different sweetSelector then please create the sweetAlertConfirmDefaults object before you import rails_sweetalert2_confirm.js ```javascript // rails_sweetalert2_confirm_defaults.js var sweetAlertConfirmDefaults = { sweetSelector: “.sweetalert2_confirm” }

// application.js //= require sweetalert2 //= require rails_sweetalert2confirm_defaults //= require rails_sweetalert2_confirm ``` Setting SweetAlert2 Options Per Link __ You can define the default sweet alert options per link_to (or submit/button tag) by defining them on data: { swal: {} } as a json object. These will override the default options

ruby link_to( 'Custom page', custom_page_path, data: { confirm: 'Is this what you want?', swal: { text: "I'm a subtitle", type: 'question', confirm_button_class: 'btn btn-default' } } ) | Argument | Default value | Description | | ——————— | ——————– | ———– | | remote | false | Submit the link_to or form via rails’ default remote implementation | | after_comfirm | N/A | Define a function to run after the user clicks the confirm button | | after_dismiss | N/A | Define a function to run after the user dismisses the modal. Passes dismiss function(dismiss) in as a param, value of dismiss can be 'cancel', 'overlay', 'close', 'timer' | | title | N/A | The title of the modal. It can either be added to the object under the key “title” or passed as the first parameter of the function. | | text | N/A | A description for the modal. It can either be added to the object under the key “text” or passed as the second parameter of the function. | | html | N/A | A HTML description for the modal. If text and html parameters are provided in the same time, “text” will be used. | | type | N/A | The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key type or passed as the third parameter of the function. | | custom_class | N/A | A custom CSS class for the modal. | | animation | true | If set to false, modal CSS animation will be disabled. | | allow_outside_click | true | If set to false, the user can’t dismiss the modal by clicking outside it. | | allow_escape_key | true | If set to false, the user can’t dismiss the modal by pressing the Escape key. | | show_confirm_button | true | If set to false, a “Confirm”-button will not be shown. It can be useful when you’re using html parameter for custom HTML description. | | show_cancel_button | false | If set to true, a “Cancel”-button will be shown, which the user can click on to dismiss the modal. | | confirm_button_text | "OK" | Use this to change the text on the “Confirm”-button. | | cancel_button_text | "Cancel" | Use this to change the text on the “Cancel”-button. | | confirm_button_color | "#3085d6" | Use this to change the background color of the “Confirm”-button (must be a HEX value). | | cancel_button_color | "#aaa" | Use this to change the background color of the “Cancel”-button (must be a HEX value). | | confirm_button_class | N/A | A custom CSS class for the “Confirm”-button. | | cancel_button_class | N/A | A custom CSS class for the “Cancel”-button. | | buttons_styling | true | Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false. | | reverse_buttons | false | Set to true if you want to invert default buttons positions. | | show_close_button | false | Set to true to show close button in top right corner of the modal. | | show_loader_on_confirm | false | Set to true to disable buttons and show that something is loading. Useful for AJAX requests. | | pre_confirm | N/A | Function to execute before confirm, should return Promise, see usage example. | | image_url | N/A | Add a customized icon for the modal. Should contain a string with the path or URL to the image. | | image_width | N/A | If image_url is set, you can specify image_width to describes image width in px. | | image_height | N/A | Custom image height in px. | | image_class | N/A | A custom CSS class for the customized icon. | | timer | N/A | Auto close timer of the modal. Set in ms (milliseconds). | | width | 500 | Modal window width, including paddings (box-sizing: border-box). | | padding | 20 | Modal window padding. | | background | "#fff" | Modal window background (CSS background property). | | input | N/A | Input field type, can be "text", "email", "password", "textarea", "select", "radio", "checkbox" and "file". | | input_placeholder | N/A | Input field placeholder. | | input_value | N/A | Input field initial value. | | input_options | N/A | If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values. | | input_auto_trim | true | Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming. | | input_validator | N/A | Validator for input field, should return Promise, see usage example. | | input_class | N/A | A custom CSS class for the input field. | | on_open | N/A | Function to run when modal opens, provides modal DOM element as first param. | | on_close | N/A | Function to run when modal closes, provides modal DOM element as first param. | N/A means that the value isn’t submitted unless defined

Please refer to the SweetAlert2 Documentation for the correct values

`success`	`error`	`warning`	`info`	`question`

Browser compatibility

SweetAlert2 works in most major browsers (yes, even IE). Some details:

IE: 10+, Promise polyfill should be included (see SweetAlert2 usage example).
Microsoft Edge: 12+
Safari: 4+
Firefox: 4+
Chrome 14+
Opera: 15+

Rails SweetAlert2 Confirmations

Installation

Requirements

Usage

Modal Types

Browser compatibility