NotificationCenter (extends KompElement)

Render message on the top layer.

Example

Syntax

new NotificationCenter().add('Success!')

Options

animation

	types	description	default
`content`	String, HTMLElement, Array, Object	content for the notification, uses Dolla's `content`
`timeout`	Boolean or Object	true/false to animate or not, pass object to animate with options for `animate`	5000

Methods

	arguments	description	return
`intialize`	[]	method called once for each instantiation, but only after element is connected (required for accessing some properties)
`trigger`	eventName:string, ...args	triggers an event this element passes args
`addEventListenerFor`	element:HTMLElement, eventType:string, ...args	calls callback when eventType is triggered on element, enables component to tear down listener when disconnected.
`changed`	attribute, was, now	called every time an attribute of the element changes. Must include attribute in `static watch = ['foo']`
`[attribute]Changed`	was, now	called every time `attribute` of the element changes. Must include attribute in `static watch = ['foo']`
`add`	content:DollaContent, options:Object	content to add to notification center, uses Dolla's `content`. Options are Notification options	Notification

Events

	arguments	description
`beforeRemove`	[]	called before element is removed
`afterRemove`	[]	called after element is removed
`beforeConnect`	[]	called before element is connected
`afterConnect`	[]	called before element is connected
`beforeDisconnect`	[]	called before element is disconnected
`afterDisconnect`	[]	called before element is disconnected
`shown`		when notification is shown
`hidden`		when notification is hidden

Transition Animation

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

SOURCE CODE

import { append, content, css, listenerElement, createElement } from 'dolla';
import KompElement from './element.js';
import Notification from './notification-center/notification';

class NotificationCenter extends KompElement {
    
    static assignableAttributes = Notification.assignableAttributes
    
    constructor (...args) {
        super(...args)
        this.setAttribute('popover', 'manual');
    }
    
    connected () {
        this.showPopover();
    }
    
    add (content, options) {
        // bump to top of top layer
        this.hidePopover();
        this.showPopover();
        const notification = new Notification(content, Object.assign({
            timeout: this.timeout,
            dismissable: this.dismissable
        }, options))
        append(this, notification)

        return notification
    }
    
    static style = `
        komp-notification-center {
            overflow: visible;
            background: none;
            position: fixed;
            margin: 4px;
            inset: unset;
            bottom: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 1px;
            transition: all 150ms;
        }
        komp-notification {
            backdrop-filter: blur(2px);
            display: flex;
            gap: 1em;
            align-items: start;
        }
        komp-notification .dismiss-button {
            outline: none;
            appearance: none;
            border: none;
            background:none;
            padding: 0;
            margin: 0;
            cursor: pointer;
            opacity: 0.75;
            color: currentColor;
        }
        komp-notification .dismiss-button:hover {
            opacity: 1;
        }
    `
}
window.customElements.define('komp-notification-center', NotificationCenter);