Check with your designers to help you design this section
Check with your designers to help you design this section
no-left-navigation class to the body tag.
Any HTML element that contains a .data-notification-toggle
will generate a new Notification every time it's clicked.
* Time to live should be added in milliseconds.
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="info"
data-notification-title="Info Notification"
>
Show Info
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="success"
data-notification-title="Success Notification"
>
Show Success
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="warning"
data-notification-title="Warning Notification"
>
Show Warning
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="danger"
data-notification-title="Danger Notification"
>
Show Danger
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="success"
data-notification-title="I will fade away in 3 seconds...!"
data-notification-ttl="3000"
>
Show Auto-Fade (TTL*)
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="danger"
data-notification-more-details-link="https://www.realpage.com/"
data-notification-more-details-text="Clicking me will take you to RealPage.com home page"
>
Show Link Only
</button>
<button
class="btn btn-default"
data-notification-toggle
data-notification-type="success"
data-notification-title="Saved!"
data-notification-description="Unit 12B has been updated"
data-notification-more-details-link="#"
data-notification-more-details-text="View"
data-notification-ttl="5000"
data-notification-show-close-button="false"
data-notification-prevent-display="false"
>
Show All Options
</button>
There are 4 flavors of Notifications: info, success, warning and danger.
Every Notification has an "X" button on its right side which will
close the Notification.
Closing a Notification will make it slide out of the view and once it does that
it disappears. There is an isClosed variable on each Notification
which lets you know its status, as well as there is an addedToDOM
variable to let you know whether the element is in the DOM or not.
There are also 2 types of Notification list displays: the default one will
add the new Notifications on top of the old ones and the expanded one that lists
the Notifications one under another, keeping the newest ones on the top side of
the list.
Having more than one active Notifications at the same time (e.g. 3 Notifications
that are not closed) will make the bulk actions container appear. It contains
two different buttons: "Show X" / "Hide X" button
(X being the number of active Notifications),
which toggles between the default and the extended Notification list view, and
the "Close All" button, which closes all the Notifications.
Bulk action container and close button are displayed by default but they can
be hidden if desired.
Notification's javascript usage is as simple as declaring a new Notification
instance with the desired options set. The notification will slide in as default as soon
as the instance is created, but this behaviour can be changed (more information in the
following javascript documentation).
| Option | Expected | Default | Description |
|---|---|---|---|
description
|
string
|
null
|
Sets Notification's description. |
moreDetailsHref
|
string
|
null
|
Notification optionally has the possibility to add an URL. If a correct URL
is provided, |
moreDetailsText
|
string
|
null
|
The text that will be shown for the URL if |
preventDisplay
|
boolean
|
false
|
Determines whether the Notification should be added to the DOM and shown as soon as the object is created or not. |
showCloseButton
|
boolean
|
true
|
Determines the existence of the close button when creating the Notification. |
title
|
string
|
null
|
Sets Notification's title. |
ttl
|
number
Represents time in milliseconds |
null
|
Represents the time after which the Notification will slide away.
Its least set value will be considered valid once the |
type
|
string
Valid options:
|
'info'
|
Determines the Notification style that will be added. |
The Notification template is created with the options provided when creating
the Notification, therefore every desired options must be passed to the
options object when creating a new instance and changing one
option's value will have no effect after the instance is created
(except for the ttl option which will be used once the
#show method is called).
|
|||
| Method | Syntax | Parameters | Description | Returned value |
|---|---|---|---|---|
<constructor>
|
new RAUL.Notification(options)
|
Optional options object (described above)
|
Creates a new notification instance. |
New notification instance |
|
|
|
Optional options object (described above); the type
will be set automatically based on the method used
|
Creates a new notification instance of the specified type. |
New notification instance |
#addToDOM
|
notification.addToDOM()
|
N/A |
Attaches Notification to the DOM. See |
N/A |
#close
|
notification.close()
|
N/A |
Closes the Notification, triggering it to slide away from view. |
N/A |
#remove
|
notification.remove()
|
N/A |
Detaches Notification from the DOM. |
N/A |
#show
|
notification.show()
|
N/A |
Calls the |
N/A |
.active
Represented by a getter |
RAUL.Notifications.active
|
N/A |
Returns an array containing all of the active Notifications that are currently available on the screen. |
An array with all of the active Notifications |
.activeNotificationsExpandedStatus
Represented by a getter and a setter |
|
boolean value expected
|
Gets/Sets the expanded display status for Notifications' header.
It's toggled by default by the " |
boolean
|
.all
Represented by a getter |
RAUL.Notifications.all
|
N/A |
Returns an array containing all the notifications that have been created, whatever their statuses. |
An array with all the notifications |
.bulkActionButtonsDisplayStatus
Represented by a getter and a setter |
|
boolean value expected
|
Gets/Sets the visibility status for the bulk action buttons.
Default value: |
boolean
|
.closeAll
|
RAUL.Notifications.closeAll()
|
N/A |
Calls the |
N/A |
.showAll
|
RAUL.Notifications.showAll()
|
N/A |
Makes all Notifications active again, displaying them on the screen. |
N/A |
<fn> = contructor method
.fn = class (static) method
#fn = instance method
|
||||
// Basic usage:
const notification = new RAUL.Notification({
type: 'success',
title: 'You made it!',
description: 'You created a notification!',
preventDisplay: true,
showCloseButton: false,
})
notification.ttl = 2000
notification.show()
const notification2 = RAUL.Notification.danger({
title: 'Oh no...',
description: 'Something bad happened!',
moreDetailsHref: '#some-url',
moreDetailsText: 'Find more about it here...',
})
const notification3 = RAUL.Notification.info({
description: 'This is an afirmation',
})
// Static methods usage:
const everyEachActiveNotificationInThisVeryMoment = RAUL.Notification.allNotifications
RAUL.Notifications.showAll()
RAUL.Notifications.activeNotificationsExpandedStatus = true