Module: deliteful/Toaster

deliteful/Toaster

require(["deliteful/Toaster"], function (Toaster) {
  new Toaster();
});

Toaster widget. Displays instances of ToasterMessage.

Messages are posted through postMessage, which takes either a full ToasterMessage instance or a message as a string.

ToasterMessage instances are displayed for a finite or infinite duration. (see the duration property of ToasterMessage).

Source:
Example
<d-toaster id="t"></d-toaster>
<d-button onclick="t.postMessage('button clicked', {duration: 1000})">...</d-button>

Extends

  • delite/Widget
Show inherited

Members

<static> animationEndClass :string

A CSS class which is inserted after animationQuitClass has completed.

If no transitionend or animationend event is heard, this class is never inserted.

Type:
  • string
Default Value:
  • "d-toaster-fadefinish"
Source:

<static> animationEnterClass :string

A CSS class which is inserted to make the message visible in DOM (ex: a fade-in CSS transition). It is removed as soon as the animation has completed.

If no transitionend or animationend event is heard, this class is never removed.

Type:
  • string
Default Value:
  • "d-toaster-fadein"
Source:

<static> animationInitialClass :string

A CSS class which is added to each message inserted in the DOM without being visible yet.

It is toggled to animationEnterClass. This class is useful when you want to set an initial state for animationEnterClass.

Type:
  • string
Default Value:
  • "d-toaster-initial"
Source:

<static> animationQuitClass :string

A CSS class which is inserted to make the message invisible in DOM (ex: a fade-out CSS transition). It is toggled to animationQuitClass when the animation has completed.

If no transitionend or animationend event is heard, this class is never removed.

Type:
  • string
Default Value:
  • "d-toaster-fadeout"
Source:

<static> invertOrder :boolean

If true, the messages are displayed bottom to top.

Type:
  • boolean
Default Value:
  • false
Source:

<static> messages :Array.<module:deliteful/ToasterMessage>

A list containing all ToasterMessage instances posted.

Type:
Default Value:
  • null
Source:

<static> placementClass :string

The name of the CSS class that specifies the placement of toaster's messages.

The toaster comes with 7 classes which can be used out-of-the-box.

  • d-toaster-placement-default for the default position
  • d-toaster-placement-tl for top-left
  • d-toaster-placement-tc for top-center
  • d-toaster-placement-tr for top-right
  • d-toaster-placement-bl for bottom-left
  • d-toaster-placement-bc for bottom-center
  • d-toaster-placement-br for bottom-right

This property can be set to any string as long as it references the name of a CSS class properly defined.

Type:
  • string
Default Value:
  • `d-toaster-placement-default`
Source:

Methods

<static> postMessage(message, props) → {module:deliteful/ToasterMessage}

Posts a message in the toaster.

The message can be either a full ToasterMessage instance or a simple string, in which case the proprieties of the message are specified through the props argument which is passed to the ToasterMessage constructor.

Parameters:
Name Type Argument Description
message string | module:deliteful/ToasterMessage

Either the content of the message as a string or an instance of deliteful/ToasterMessage.
props Object <optional>

A hash used to initialize a message instance (only relevant when message passed is a string).
Source:
Returns:

The message instance passed as a parameter or created from the string.

Type
module:deliteful/ToasterMessage