Notifications

This is an extension of the notification atom and can be used to add some interactivity to notifications.

Summary

Usage
Options
Dynamic notification
Non-dynamic notification
Temporary notification

Usage

To initiate the component you can use any valid selector, such as a class or a [data-something] attribute.

You can use it as a jQuery plugin:

$('.any-selector').notification();

Or as a vanilla constructor:

import Notification from 'garden/src/js/components/notification';

new Notification(document.querySelector('[data-notification]'));

Options

These are the options provided with the component, along with their default values.

Option	Default	Description
autoHide	false	When `autoHide` is true, the notification will close after some time
closeButton	`.notification-close`	Selector to bind the close action to when you are using a non-dynamic notification
dynamic	true	When true, the selector used will be a wrapper and the notification markup will be appended inside of it
hideIn	3000ms	Time, in milliseconds, used when `autoHide` is true
message	null	A message is required, if the `message` is empty, the notification will not be appended
showIn	1000ms	Time delay, in millisecons, used to show the notification after its initialization
type	primary	An interactive notification has two variations: `primary` and `warning`

Below is an example on how to initialize the component using customized options.

let options = {
  message: 'This is an interactive notification',
  autoHide: true,
  showIn: 2000,
  hideIn: 20000,
  type: 'warning'
}

// Using it as a jQuery plugin
$(`.any-selector`).notification(options);

// Using it as a vanilla constructor
import Notification from 'garden/src/js/components/notification';

new Notification(document.querySelector('.any-selector'), options);

Dynamic notification

By default, a notification is dynamic, which means that its markup will be generated via JavaScript and appended to the selector used.

<div data-notification-dynamic></div>

let options = {
  message: 'This is a dynamic notification',
  type: 'warning'
}

// As a jQuery plugin
$('[data-notification-dynamic]').notification(options);

// As a vanilla constructor
import Notification from 'garden/src/js/components/notification';

new Notification(document.querySelector('[data-notification-dynamic]'), options);

Non-dynamic notification

When using a non-dynamic notification, you need to add all the markup in your view, add a selector, and initiate the plugin, as described below.

This is a non-dynamic notification.

<div class="notification notification-primary" data-notification>
  This is a non-dynamic notification.
  <i class="notification-close glyph glyph-x" data-close="notification"></i>
</div>

As a jQuery plugin:

// using selector as data-*
$('[data-notification]').notification({
  dynamic: false,
  closeButton: '[data-close="notification"]'
});

// using as a class
$('.any-class').notification({
  dynamic: false
});

Using as vanilla constructor :

import Notification from 'garden/src/js/components/notification';

let options = {
  dynamic: false
}

new Notification(document.querySelector('[data-notification]'), options);

Temporary notification

You can create a temporary notification by setting the autoHide option to true, as described below.

You can click on the button below to show an example of a temporary notification.

<div data-notification-temporary></div>

let options = {
  message: 'This is a dynamic notification',
  autoHide: true,
  showIn: 2000,
  hideIn: 20000,
  type: 'warning'
}

// As a jQuery plugin
$('[data-notification-temporary]').notification(options);

// As a vanilla constructor
import Notification from 'garden/src/js/components/notification';

new Notification(document.querySelector('[data-notification-temporary]'), options);

CSS