confirmmodal.js v2.0.1
ConfirmModal.js
Modern Confirm Modal javascript module for browsers, standalone instalation. No libs/frameworks (jQuery, Bootstrap, etc...) required
Install
As npm package, from Github
npm install confirmmodal.js --save
As zip file
Setup
As ES6 module
import ConfirmModal from "confirmmodal.js/lib/ConfirmModal";
As script
include the script located on the dist
folder
<script src="dist/ConfirmModal.js"></script>
Now, you need to instantiate it passing some 'options', and open it
let modal = new ConfirmModal(options)
modal.open()
Options
User can provide an object with several keys:
- messages: json with the labels (title, description, cancel and proceed buttons)
- cssclasses: json with the css classes from the cancel and proceed buttons. If provided, will override default values
- onProceed: function to be called after proceed, if provided
- onCancel: function to be called after cancel, if provided
- prompt: json with settings for user prompt (if is enabled, and if is required)
Examples:
var options = { messages: {
title: "Título!",
desc: "descrição longa",
proceed: "ok",
cancel: "cancelar"
},
onProceed: function() {
console.log('ok clicked');
},
cssclasses: {
btn_cancel: "btn any-class", //default is 'btn btn-danger'
btn_proceed: "any-other-class" //default is 'btn btn-primary'
},
buttons: {
cancel: false, //default is true
proceed: false //default is true
},
prompt: {
enabled: true, //default is false
required: true //default is false
}
}
onProceed callback
When onProceed callback is called, the instance of the ConfirmModal is passed as the argument to it. If prompt is enabled, the value filled by in the modal can be retrieved using the 'promptvalue' attribute, as follows:
onProceed: function(my_modal) {
console.log(my_modal.promptvalue)
}
Close the confirm modal programmatically
modal.close()
Events
The ConfirmModal object has 2 events: proceed and cancel. Both return a promise, which are resolved when user clicks in one of the buttons.
confirm
.on('proceed')
.then( function(my_modal) {
console.log('Resolved, button proceed licked')
})
confirm
.on('cancel')
.then( function(my_modal) {
console.log('Resolved, button proceed licked')
})
Check the promises.html in the examples/ folder
Example
Checkout the examples/ folder for with samples TODO: online examples
Tests
Unit
Specs are under test/unit/ path
Run
npm run test-unit
Integration
Specs are under test/integration/ path. They use Webdriver.io to control a browser and automatize tests Install selenium-standalone as npm package and start it
npm install selenium-standalone@latest -g
selenium-standalone install
selenium-standalone start
Run
npm run test-integration
All definitions are set in wdio.conf.js