confirmo

A lightweight front-end confirmation library that helps you to get confirmations before actions are taken on your web apps

Installation/Usage

To use confirmo in your project, simply add the links to the CSS and JS source files which are included in the source code, named confiro.css and confirmo.js respectively.

<link rel="stylesheet" type="text/css" href="./src/confirmo.css"/>
<script type="text/javascript" src="./src/confirmo.js"></script>

NOTE: Your JavaScript must be at the bottom of the body tag, where all your elements must have been rendered.

Once this is done, you are able to define your confirmation modals with either HTML attributes or JavaScript. Ideally (at default), to initialize the package in your project to be ready to use, the below is your object:

confirmo.init(options)

Where options represents an object containing configuration and design properties of the modal such as:

Property	Usage
yesBg	This defines the background color of the "Yes" button of the confirmation modal. The above illustrated in the image was red.
noBg	This defines the background color of the "No" button of the confirmation modal. The above illustrated in the image was green.
backColor	This defines the background color of the confirmation modal itself. The above illustrated in the image was a hex value (#2a2b2d).
textColor	This defines the text (font) color of the contents of the confirmation modal. The above illustrated in the image was white.

In summary, the above modal was initialized with the following code:

confirmo.init({
   yesBg:'red',
   noBg:'green',
   backColor:'#2a2b2d',
   textColor:'white'
});

Note that the above code won't bring up any modal for you. You have two approaches of wiring your modals:

1. HTML Attributes
2. Programmatic Trigger

HTML Attributes

To make use of HTML attributes in initializing your confirmation, you have to specify the message to display and the callback function (in the case where the user accepts or clicks yes). To do this, simply specify the HTML attributes of confirmo-message and cofirmo-func to an element. Such an element would then serve as a confirmation trigger for the modal.

confirmo-message:

This is the message which will be displayed in the confirmation modal, awaiting action.

confirmo-func:

This is the name of a function to call when the "Yes" button has been clicked. Just in the form functionName. Avoid using brackets ().

An illustration of this is shown below:

<button class="btn" confirmo-message="Do you want to take the action?" confirmo-func="hello">Confirmation Trigger</button>

The above will display a modal when clicked with the message "Do you want to take the action?". When the "Yes" button is clicked, the function "hello()" would be called.

Programmatic Trigger

This occurs where you need to display a confirmation without any HTML trigger (or via script-only approach). You can do that by setting the callback function and the message to display thus:

confirmo.show({
    msg:"Are you sure you want to delete the file? The owner won't have access to it again",
    callback:function (){
        return true;
    }
});

The very first image shown above was generated by the snippet above and you could notice the use of the msg and callback properties as properties of an object sent as an argument to confirmo.show().

Examples

There is an example which you could try out in the Examples folder of this project. Good luck.

NOTE:

In order to use the HTML, you MUST initialize the library using confirmo.init(), else, the HTML attribute usage won't work. That also is a means of customizing your modal to your project's design. Meanwhile, the confirmo.show() can work without the confirmo.init(), except that the default UI will be rendered on popup.

Contributors

Currently, I am the owner of this project, but you can hit me up via +2348117093601 so we could talk about it or ask questions concerning it