mk.Infopane

Kind of a status-bar or notifier. Vertically sliding messages in area with limited height. A library agnostic, mobile friendly, css animated UI widget. Minimal restrictions on styling.

Download from GIT Hub Download as NPM package

Demo

This is infopane.
Use form below to print messages here.

text:

Inclusion

Include script and style sheet into you page:

<script src="path/to/plugin/mk-infopane.min.js"></script>
<link href="path/to/plugin/mk-infopane.min.css" rel="stylesheet">

Prepare

Create html block you want to use as an infopane.

<div id="paneElement"></div>

Create infopane instance, binded to DOM element.

var pane = new mk.Infopane( paneElement[, options] ) );

Options

height {integer} default is 36. Height of infopane in pixels. Line height is 18 pixels, so 36 is a two-lines height.
collapse {boolean} default is false. Infopane can collapse to invisible when no messages.
onMessage {function} default is null. Callback on every message publish, 'this' argument - is a pane instance, only argument is a message instance.
onMessageRemove {function} default is null. Callback on every message remove, 'this' - is a pane, only argument is a removed message.

Usage

pane.print(options);

Message options

text {string} text of message, default is empty string
type {string} type of message: Any string or predefined: echo, ok, info, warn or err. Default is 'echo'. Message element will have css class msg-{type}, for example, msg-ok or msg-mytype
duration {integer} duration of message in milliseconds, default is 3000, 0 is infinite
closeBut {boolean} if true - then close button will be added to the message box, default is true

Syntax sugar

pane.echo(text[, options])
pane.ok  (text[, options])
pane.warn(text[, options])
pane.err (text[, options])
pane.info(text[, options])

text {string} text of message
options {message options} A 'duration' and 'closeBut' properties. 'text' and 'type' properties will be ignored by this methods

Examples

// create infopane instance, binded to DOM element
var pane = new mk.Infopane( document.getElementById('paneElement') );
// call methods, corresponding to message status, to print messages
pane.echo(text, options);
pane.ok  (text);
pane.info(text);
pane.warn(text);
pane.err (text);

Messages control

If you want to control printed message programmatically, remember message instance in a variable. Then you can change or update text in message or close it by some event.

var message = pane.info (text, options); // create and print message
message.put(newText); // replace text in it
message.append(additionalText); // add text
setTimeout(function(){ message.unpublish(); },10000) // close it later

Methods

put(text) replaces text of the message
append(text) adds text to the end of the message
unpublish() removes message from the pane
publish() puts message into the pane