https://github.com/jenstornell/message.js

A message library to alert the user
https://github.com/jenstornell/message.js

ajax alert dialog message modal vanilla-javascript vanilla-js

Last synced: about 22 hours ago
JSON representation

A message library to alert the user

• Host: GitHub
• URL: https://github.com/jenstornell/message.js
• Owner: jenstornell
• Created: 2019-01-05T09:18:00.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-03T19:47:13.000Z (almost 6 years ago)
• Last Synced: 2024-01-14T08:12:14.681Z (about 1 year ago)
• Topics: ajax, alert, dialog, message, modal, vanilla-javascript, vanilla-js
• Language: CSS
• Homepage:
• Size: 26.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md

Awesome Lists containing this project

README

        
# message.js

*Version 1.2*

A message library to alert the user. Can be especially useful in ajax requests.

![Screenshot](screenshot.png)

## In short

- Vanilla js

- No dependencies

- Small filesize

- Autoload init

- Super simple setup

## Usage

In a real life project you may want to put `message.open` inside the final response of an ajax function.

The HTML needed is automatically injected before the end body tag, so no additional HTML is needed.

### CSS

```html

```

###  HTML

You don't need to add anything to your HTML.

If you want to prevent the script to be autoloaded, add `data-message-autoload` to `false` in your body tag. Not recommended.

```js

```

### Javascript

It does not check if DOM has loaded, because you may trigger the message from an ajax function or somewhere else. Therefor in this example I put the `message.open()` inside a dom content loaded event.

```html

document.addEventListener('DOMContentLoaded', () => {

  message.open('success');

});

```

## Methods

### open

The first param is the `type`. It can be `error`, `info`, `success` or `warning`.

When using this method, you need to send a few options with it.

- `text` - The text message that will be displayed.

- `autohide` - If the text message is set to be closed, the box icon will fade away after a time limit.

- `openText` - You can choose to have the text message opened or closed when box is opened.

```js

let message = new Message();

message.open('error', {

  text: 'Hello! This is an error!',

  autohide: false,

  openText: true

});

```

**Type `success` defaults**

On a success message, just a check-icon is visible by default and autohides after a time interval. When clicking the icon, you can still see the text message if any.

```js

autohide: true,

openText: false

```

**Type "the rest" defaults**

On all other types the defaults are to show text and not autohide. Instead you close it by clicking the close icon.

## Libraries used

- https://feathericons.com/

## License

MIT

## Donate

Donate to [DevoneraAB](https://www.paypal.me/DevoneraAB) if you want.