JavaScript Notifier

Lightweight notification module for websites

What's news doc?

1.1.3 Fixed incompatibility with eslint 6-7x in formatters/stylish, and provide the example
1.2.0 Layout support has been added: (Live demo)[http://sosie.sos-productions.com/js-notifier/example/index.html]
1.3.0 SoSIE class for the logo panel added (css/sosie-panel.css) and demo of the Embed injector panel (example/sosie.html)
1.4.0 SoSIE console panel added

Live demos

Click here for show, prompt, etc..
Click here for demo and console SoSIE's panels extensions

Installation

Install via Github

Install

git clone https://github.com/sosie-js/js-notifier.git
git checkout 1.4.0

Require module

const notifier = require('codex-notifier');

import notifier from 'codex-notifier';
import {ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions} from 'codex-notifier';

Usage

Module has only one public method — show. You should pass there object with notification properties

General properties

message — notification message (can contains HTML)
type — type of notification: alert, confirm or prompt. Alert by default
style — just add 'cdx-notify--' + style class. We have some default styles: success and error
time — notification expire time in ms. Only for alert notifies expires (8s by default)
layout — either 'middle' or string with comma holding a combinaison of 'top' or 'bottom' with 'left' or 'right'

Confirm notifications properties

okText — text for confirmation button (Confirm by default)
cancelText — text for cancel button (Cancel by default)
okHandler — fires when Confirm button was pressed
cancelHandler — fires when Cancel button was pressed or notification was closed

Prompt notifications properties

okText — text for submit button (Ok by default)
okHandler — fires when submit button was pressed. Gets input's value as a parameter
cancelHandler — fires when notification was closed
placeholder — input placeholder
default — input default value
inputType — type of input (text by default)

Examples

notifier.show({
  message: 'Refresh the page'
})

notifier.show({
  message: 'Message was sent',
  style: 'success',
  time: 5000
})

notifier.show({
  message: 'Sorry, server is busy now',
  style: 'error'
})

notifier.show({
  message: 'Delete account?',
  type: 'confirm',
  okText: 'Yes',
  cancelText: 'Oh, wait',
  okHandler: account.delete
})

notifier.show({
  message: 'Enter your email',
  type: 'prompt',
  okText: 'Enter',
  okHandler: checkEmail,
  inputType: 'email',
  placeholder: 'team@ifmo.su'
})

Custom styles

You can easily customize notifications appearance. Read more about it here

Edd-G/js-notifier