Modern Confirm Modal javascript module for browsers, standalone instalation. No libs/frameworks (jQuery, Bootstrap, etc...) required
As npm package, from Github
npm install confirmmodal.js --save
As zip file
import ConfirmModal from "confirmmodal.js/lib/ConfirmModal";
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()
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
}
}
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)
}
modal.close()
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 clicked')
})
confirm
.on('cancel')
.then( function(my_modal) {
console.log('Resolved, button proceed clicked')
})
Check the promises.html in the examples/ folder
Checkout the examples/ folder for with samples or the official page of the project with links
Specs are under test/unit/ path
Run
npm run test-unit
Specs are under test/e2e/ 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-e2e
All definitions are set in wdio.conf.js
To run unit and e2e tests
npm run test