Notifie Library

A JS library to displaying notifications/alerts to end users

The notifie library is a library written by Kinetic Data to allow for nice, on screen, mobile-friendly warnings, alerts, and confirmations. You can leverage this by calling .notifie(options) on a jQuery element, where options is a Javascript object with settings for the notifications.

Usage

Use the section below to describe how to implement the solution.  Code or screenshots should be used here.

  1. Download the library from https://github.com/KineticCommunity/Notifie
  2. Add CSS and JS file to //libraries/jquery.notifie/ (You will have to create the jquery.notifie directory.)
  3. Open head.jspf (Found in //common/interface/fragments/)

Import CSS file at the top of head.jspf with the other CSS files
<link rel="stylesheet" type="text/css" href="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.css" >

Import JS file at the bottom of head.jspf with the other JS files
<script type="text/javascript" src="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.js"></script>

Call .notifie(options) on a jQuery element, where options is a Javascript object with settings for the notifications.

Example:

$('input').notifie({ type: 'alert', severity: 'info', message: 'This is an informative notification.' });

Available Options

(All of these are optional. If you pass it, it will overwrite the default.):

Option NameOption Type, optionsOption DefaultOption Description
anchorString -> jQuery selectornullFinds the closest element matching this selector to use as anchor of the notifications. Examples: 'div' or 'li.main'
typeString -> 'alert' or 'confirm'alertDefines the type of notification to display.
severityString -> 'danger' or 'warning' or 'info' or 'success'dangerDefines the style of the notification.
messageStringErrorText to display inside the notification.
marginObject -> Available properties: inherit{true|false|padding}, margin[#px|#px #px|...], margin-top[#px], margin-bottom, margin-left, margin-right{inherit:true}Sets the margins of the notification.
onShowFunctionfunction(){}Function to call when the notification is shown. Context is the calling element.
onConfirmFunctionfunction(){}Function to call when alert is closed or confirm button is pressed in confirmation notification.
onRejectFunctionfunction(){}Function to call when confirmation notification is closed or reject button is pressed in confirmation notification.
clearExistingBooleantrueIf true, closes any existing notifications at this level before opening a new one.
exitEventsString -> Javascript event name(s)''Applies only when 1 notification will be opened (ie: calling element or its anchor translates toa single element, not a list of elements). Events that will get added to calling element that will close the notifications. You may pass multiple events by separating them by spaces. Examples: 'click' or 'focus' or 'click focus'
textButtonsBooleanfalseIf true, buttons in a confirmation notification will show text instead of icons.
confirmTextString'OK'If textButtons is true, this text will display on the confirm button.
rejectTextString'Cancel'If textButtons is true, this text will display on the reject button.
durationNumber100Amount of milliseconds that the animation of showing/hiding the notification should take. Setting to 0 removes the animation.
expireNumbernullApplies only if type is alert. Amount of milliseconds that the alert will stay on screen before automatically disappearing.
disableBooleantrueIf true, the calling element will be disabled when the notification is shown, and enabled when the notification is closed.
toggleBooleanfalseIf true and if notification at the anchor level already exists, this .notifie() call will only close that notification.
exitBooleanfalseIf true, this .notifie() call will only close the notification(s) at the anchor level.
recurseExitBooleanfalseApplies only if exit is true. If true, closes all notifications at the anchor level and inside all children of the anchor.

Examples

Use the section for an example of the how to use the solution in this section.

Below are a series of examples and the line of javascript that created them. Note all of these notifications appeared above the header (h2) element on the page in question.

infonotifinfonotif

$("h2").notifie({ type: 'alert', severity: 'info', message: 'This is an informative notification.' }); }

warningnotifwarningnotif

$("h2").notifie({ type: 'alert', severity: 'warning', message: 'This is an warning notification.' }); }

dangernotifdangernotif

$("h2").notifie({ type: 'alert', severity: 'danger', message: 'This is an danger notification.' }); }

infoconfirminfoconfirm

$("h2").notifie({ type: 'confirm', severity: 'info', message: 'This is an info confirmation with default buttons.' }); }

dangerconfirmdangerconfirm

$("h2").notifie({ type: 'confirm', severity: 'danger', message: 'This is an danger confirmation with default text buttons.', textButtons: true }); }


Did this page help you?