NotificationCenter extends KompElement

Render messages on the top layer.

Example

JS
const notificationCenter = new NotificationCenter()
document.body.append(notificationCenter)
notificationCenter.add('Success!')

Constructor

new NotificationCenter(options)
options : Object optional
content : string | HTMLElement | Array | Object optional

content for the notification, uses Dolla's content

timeout : number optional

default setting for notifications timeout

animation : boolean | Object optional

true/false to animate or not, pass object to animate with options for animate

Instance Properties

P   assignableAttributes: Array | Object

Attributes settable via constructor options

P   assignableMethods: Array

Methods overridable via constructor options

P   bindMethods: Array

Methods to auto-bind to this

P   events: Array

Event names that can be bound via onEventName constructor options

P   style: string

CSS injected once per component via adoptedStyleSheets

P   watch: Array

Attributes to observe for changes. Triggers changed(attribute, was, now) and [attribute]Changed(was, now) callbacks.

Instance Methods

F   add(content, options) → Notification

Add a notification to the center

Parameters

content : string | HTMLElement | Array | Object

content for the notification, uses Dolla's content

options : Object optional

Notification options

Returns

Notification

the created notification

F   addEventListenerFor(element, eventType, args)

Listen for events on another element, automatically cleaned up when this component disconnects

Parameters

element : HTMLElement

element to listen on

eventType : string

event type

args : *

additional arguments passed to addEventListener

F   changed(attribute, was, now)

Called every time an observed attribute changes. Attribute must be listed in static watch.

Parameters

attribute : string

the attribute that changed

was : *

previous value

now : *

new value

F   connected()

Called when element is connected to the DOM

F   disconnected()

Called when element is disconnected from the DOM

F   initialize()

Called once per instantiation, but only after element is connected to the DOM

F   remove(callback) → KompElement

Remove element. Fires beforeRemove, calls optional callback, removes from DOM, then fires afterRemove.

Parameters

callback : function optional

async callback called between beforeRemove and afterRemove

Returns

F   trigger(eventName, args)

Trigger an event on this element

Parameters

eventName : string

event name to trigger

args : *

additional arguments

Events

E   afterConnect

Fired after the element is connected to the DOM and initialized

E   afterDisconnect

Fired after the element is disconnected from the DOM

E   afterRemove

Fired after the element is removed

E   beforeConnect

Fired before the element is connected to the DOM

E   beforeDisconnect

Fired before the element is disconnected from the DOM

E   beforeRemove

Fired before the element is removed

E   hidden

Fired when a notification is hidden

E   shown

Fired when a notification is shown

Notes

The notification will follow the transition effects set by CSS, and adds classes -out, -out-start, -in and -in-start when hiding and showing.