https://github.com/janmarkuslanger/attention.js

📣 A vanilla js library for creating alerts, prompts and confirms.
https://github.com/janmarkuslanger/attention.js

alert confirm confirmation-dialog notifications prompt

Last synced: 10 days ago
JSON representation

📣 A vanilla js library for creating alerts, prompts and confirms.

• Host: GitHub
• URL: https://github.com/janmarkuslanger/attention.js
• Owner: janmarkuslanger
• License: mit
• Created: 2019-01-18T20:54:55.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-11T11:06:32.000Z (about 2 months ago)
• Last Synced: 2024-10-11T08:50:54.642Z (27 days ago)
• Topics: alert, confirm, confirmation-dialog, notifications, prompt
• Language: JavaScript
• Homepage: https://janmarkuslanger.github.io/attention.js/
• Size: 159 KB
• Stars: 14
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# attention.js

> This library will be released soon as 1.0 with a whole new codebase! Stay tuned!

A vanilla js library for creating alerts, prompts, and confirms.



    



---

## Demo

## Need help?

Create an issue or write me [email protected]

## Install

Install attention.js is quite easy.

### Install script

Just include the script `dist/attention.js` into your project and put the script before the closing body tag.

You also need to put the CSS into your project `dist/attention.css`.

``` html

    

        

        

    

    

        

    

```

## Components

### Alert

``` javascript

    import { Alert } from 'attention';

    new Alert({

        title: 'This is a Title',

        content: 'This is my content'

    });

```

### Confirm

``` javascript

    import { Confirm } from 'attention';

    new Confirm({

        title: 'This is a Confirm',

        content: 'This is my content',

        onConfirm(component) {

            console.log('Accepted');

        },

        onCancel(component) {

            console.log('Canceled');

        }

    });

```

### Prompt

``` javascript

    import { Prompt } from 'attention';

    new Prompt({

        title: 'This is a Prompt',

        content: 'This is my content',

        onSubmit(component, value) {

            console.log(`Value: ${value}`

        }

    });

```

## Config / Option

When creating a new Object of an Alert, Prompt, or Confirm, it is needed to pass an object.

This object has a few options that you can change.

key | description | type | mandatory|

----|-----------|----|-----|

title | Title | string | true |

content | Content | string | true |

buttonCancel | Text for the cancel button (confirm) | string | false |

buttonConfirm | Text for the confirm button (confirm)| string | false |

placeholderText | Placeholder text (prompt) | string | false

submitText | Text for the submit button (prompt) | false | 

## Callbacks

Attention offers a lot of lifecycle methods. These methods are allowing changing the behavior of the life of a component.

Here is a list of available methods. These methods are available in every component.

name | description |

----|----------|

beforeRender | fires before rendering a component |

afterRender | fires after rendering a component |

beforeClose | fires before closing a component |

afterClose | fires after closing a component |

Furthermore, we have methods which are only available in some methods.

### Callbacks - Confirm

name | description |

-----|---------|

onAccept(component) | fires when a user has accepted |

onCancel(component) | fires when a user has canceled |

### Callbacks - Prompt

name | description |

-----|---------|

onSubmit(component, value) | fires when the user has entered the input |

## Questions

For questions and support feel free to create an issue or write an email to

[email protected]

## Issues

If you found a bug, then please create an issue. It will help me a lot to make my work better. :)

## Contribution

Pull requests are always welcome. I am always happy to see others working on

my GitHub projects.

## Get in touch

Write an email to [email protected] :)