142 lines
4.6 KiB
Markdown
142 lines
4.6 KiB
Markdown
# Prompt-Boxes
|
|
A small package I created for my own project so currently there's limited functionality. I will update it as and when I require more functionality (or a request is made).
|
|
|
|
##### Migrating from version <2.0 to 2.0
|
|
`I've re-written a lot of mechanics. There are a lot more options available to each instance. Please review the ReadMe and update your current implementation accordingly.`
|
|
|
|
#### Demo
|
|
You can find an old demo [here](https://iamrobert.co.uk/projects/prompt-boxes). For a better demo, download the repo and open the 'index.html' page within the demo folder
|
|
|
|
#### Installation
|
|
``npm install prompt-boxes --save``
|
|
|
|
#### Screenshots
|
|
<img src="https://media.giphy.com/media/oXcJZgdxOLBvy/giphy.gif" width="275"> <img src="https://media.giphy.com/media/OAscHqRSi6a9W/giphy.gif" width="275"> <img src="https://media.giphy.com/media/10BsPpLXKTW67m/giphy.gif" width="275">
|
|
|
|
#### Add scripts
|
|
~~~
|
|
<link rel="stylesheet" type="text/css" href="prompt-boxes.min.css">
|
|
<script src="prompt-boxes.min.dist.js"></script>
|
|
~~~
|
|
|
|
#### Create instance
|
|
~~~
|
|
<script>
|
|
var pb = new PromptBoxes({
|
|
attrPrefix: 'pb',
|
|
speeds: {
|
|
backdrop: 500, // The enter/leaving animation speed of the backdrop
|
|
toasts: 500 // The enter/leaving animation speed of the toast
|
|
},
|
|
alert: {
|
|
okText: 'Ok', // The text for the ok button
|
|
okClass: '', // A class for the ok button
|
|
closeWithEscape: false, // Allow closing with escaping
|
|
absolute: false // Show prompt popup as absolute
|
|
},
|
|
confirm: {
|
|
confirmText: 'Confirm', // The text for the confirm button
|
|
confirmClass: '', // A class for the confirm button
|
|
cancelText: 'Cancel', // The text for the cancel button
|
|
cancelClass: '', // A class for the cancel button
|
|
closeWithEscape: true, // Allow closing with escaping
|
|
absolute: false // Show prompt popup as absolute
|
|
},
|
|
prompt: {
|
|
inputType: 'text', // The type of input 'text' | 'password' etc.
|
|
submitText: 'Submit', // The text for the submit button
|
|
submitClass: '', // A class for the submit button
|
|
cancelText: 'Cancel', // The text for the cancel button
|
|
cancelClass: '', // A class for the cancel button
|
|
closeWithEscape: true, // Allow closing with escaping
|
|
absolute: false // Show prompt popup as absolute
|
|
},
|
|
toasts: {
|
|
direction: 'top', // Which direction to show the toast 'top' | 'bottom'
|
|
max: 5, // The number of toasts that can be in the stack
|
|
duration: 5000, // The time the toast appears
|
|
showTimerBar: true, // Show timer bar countdown
|
|
closeWithEscape: true, // Allow closing with escaping
|
|
allowClose: false, // Whether to show a "x" to close the toast
|
|
}
|
|
});
|
|
</script>
|
|
~~~
|
|
|
|
#### Permanent toast
|
|
~~~
|
|
pb.success(
|
|
'This is a permanent toast with a close option', // Message text
|
|
{
|
|
duration: 0, // Show permanently
|
|
allowClose: true // Add manual close button
|
|
}
|
|
);
|
|
~~~
|
|
|
|
#### Success toast
|
|
~~~
|
|
pb.success(
|
|
'This is an example success toast' // Message text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Error toast
|
|
~~~
|
|
pb.error(
|
|
'This is an example error toast' // Message text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Info toast
|
|
~~~
|
|
pb.info(
|
|
'This is an example info toast' // Message text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Alert dialogue
|
|
~~~
|
|
pb.alert(
|
|
(confirmed) => alert('You have: ' + (confirmed ? 'confirmed' : 'cancelled')),
|
|
'This is an example alert', // Message text
|
|
'Ok', // Ok text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Confirmation dialogue
|
|
~~~
|
|
pb.confirm(
|
|
(outcome) => alert('You have: ' + (outcome ? 'confirmed' : 'cancelled')), // Callback
|
|
'This is an example confirm', // Message text
|
|
'Yes', // Confirm text
|
|
'No' // Cancel text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Prompt dialogue
|
|
~~~
|
|
pb.prompt(
|
|
function (value) { alert('You have: ' + (value ? 'entered ' + value : 'cancelled')) }, // Callback
|
|
'This is an example prompt', // Message text
|
|
'text', // Input type
|
|
'Submit', // Submit text
|
|
'Cancel', // Cancel text
|
|
{} // Addition options
|
|
);
|
|
~~~
|
|
|
|
#### Clear instances
|
|
~~~
|
|
pb.clear();
|
|
~~~
|
|
|
|
#### Style Sheet
|
|
There is a default stylesheet that you'll need to include. You're more than welcome to create your own and style it the way you want!
|
|
|