API

BX.UI.Notification.Center

BX.UI.Notification.Center — main software interface for handling notifications. It is a singleton object.

BX.UI.Notification.Center.notify([options])

Shows notification at the page with specified settings. Returns object of class BX.UI.Notification.Balloon .

• options {Object}

  Set of notification options. All settings are optional.

• content {string|Element}

  Notification content. HTML string or DOM object.

• position {string}

  Notification position on a page. Available values:

  • top-left - Top left corner.
  • top-center - Top border central point.
  • top-right - Top right corner. Default value.
  • bottom-left - Bottom left corner.
  • bottom-center - Bottom border central point.
  • bottom-right - Bottom right corner.
• autoHide {boolean}

  Automatically close notification by timeout. Default value: true.

• autoHideDelay {number}

  Delay time before automatically closing in milliseconds. Default value: 8000.

• zIndex {number}

  Z-index for notification. Default value: 3200.

• closeButton {boolean}

  Show notification closing button. Default value: true.

• category {string}

  Category name. Notifications with the same category replace each other.

• actions {Array}

  Array of notification actions. Each action — object with the following keys:

• title {string} — Action name.
• href {string} — Action link.
• events {object} — set of handler for DOM events.
• id {string} — action ID.

        BX.UI.Notification.Center.notify({
            content: "File deleted successfully",
            actions: [
                {
                    title: "Shopping cart",
                    href: "/trash/"
                },
                {
                    title: "Cancel",
                    events: {
                        click: function(event, balloon, action) {
                            balloon.close();
                        }
                    } 
                }
            ]
        });

• id {string}

  Notification ID. Used jointly with BX.UI.Notification.Center.getBalloonById.

• type {string}

  Class name that defines notification external appearance. Class must be inherited from BX.UI.Notification.Balloon and implement the method render.

        class MyBalloon extends BX.UI.Notification.Balloon
        {
            /**
             * @protected
             * @return {Element}
             */
            render()
            {
               var content = this.getContent();
               return BX.create("div", {
                  props: {
                    className: "my-balloon"
                  },
                  html: BX.type.isDomNode(content) ? null : content,
                  children: BX.type.isDomNode(content) ? [content] : []
               })
            }    
        }

        BX.UI.Notification.Center.notify({
          content: "Custom Balloon",
          type: "MyBalloon"
        });

• render {function}

  Function returns notification layout. Can be used as simplified replacement for option type.

        BX.UI.Notification.Center.notify({
            content: "Custom Balloon",
            autoHideDelay: 5000,
            render: function() {
               return BX.create("div", {
                 props: {
                   className: "my-balloon"
                 },
                 html: this.getContent() + "  " + this.getData().time
               })
            },
            data: {
               time: Date.now()
            }     
        });

• width {number|"auto"}

  Notification width in pixels. Use the value auto, for notification width to be dependent on content. Default value 400.

• data {object}

  Set of your data for notification that can be used for creating arbitrary/custom notification layout.

• events {?object.<string, function>}

  Set of event handlers.

BX.UI.Notification.Center.notify({
            content: "Balloon Events",
            position: "top-center",
            autoHideDelay: 10000,
            events: {
                onOpen: function(event) {
                    var balloon = event.getBalloon();
                    console.log("onOpen", balloon.getContent());
                },
                onClose: function(event) {
                    console.log("onClose");
                },
                onMouseEnter: function(event) {
                    console.log("onMouseEnter");
                },
                onMouseLeave: function(event) {
                    console.log("onMouseLeave");
                }
            }
        });    

BX.UI.Notification.Center.getBalloonById(balloonId)

Returns notification (class object BX.UI.Notification.Balloon) by ID. null — when notification is not found.

balloonId {string} — notification ID.

BX.UI.Notification.Center.getBalloonByCategory(category)

Returns notification (class object BX.UI.Notification.Balloon) by category name. null — when notification is not found.

category {string} — category name.

BX.UI.Notification.Center.setDefaultPosition(position)

Sets default notification position on the page.

position {string} — notification position by default . See details at BX.UI.Notification.Center.notify.

BX.UI.Notification.Center.setBalloonDefaults(options)

Sets notification options by default.

options {object} — set of notification options. See details at BX.UI.Notification.Center.notify.

BX.UI.Notification.Center.setBalloonDefaults({
	autoHideDelay: 9999,
	width: 600
});

BX.UI.Notification.Center.setStackDefaults([position][, options])

Sets stack settings.

position {string} — stack position.

options {object} — stack options, see details in description for BX.UI.Notification.Stack.

BX.UI.Notification.Center.setStackDefaults(
	"top-left",
	{
		spacing: 10,
		offsetX: 10,
		offsetY: 10,
	}
);

Default options for all stacks.

BX.UI.Notification.Center.setStackDefaults({
	spacing: 20,
	offsetX: 20,
	offsetY: 20,
	balloonType: "CircleBalloon"
});

Events

UI.Notification.Balloon:onOpen — notification open event.

UI.Notification.Balloon:onClose — notification close event.

UI.Notification.Balloon:onMouseEnter — event triggered when notification is hovered on by a mouse pointer.

UI.Notification.Balloon:onMouseLeave — event triggered when mouse pointer leaves the notification area.

BX.UI.Notification.Balloon

BX.UI.Notification.Balloon- class is a separate notification.

new BX.UI.Notification.Balloon(options)

• options {Object}

Set of notification options.

• stack {BX.UI.Notification.Stack}

Stack with notification. Required parameter.

• See the rest of options at BX.UI.Notification.Center.notify.

Class methods

• balloon.show() — shows notification at the page.
• balloon.close() — closes the notification.

• balloon.update(options) — re-renders notification with new data.
  • options {object} — set of notification options. See details at BX.UI.Notification.Center.notify.

• balloon.adjustPosition() — positions notification in stack.
• balloon.getId() — returns a notification ID.
• balloon.setCloseButtonVisibility(visibility) — sets close button visibility.
• visibility {boolean} — close button visibility flag.
• balloon.isCloseButtonVisible() — returns true, when showing notification close button.
• balloon.getContent() — returns notification content.
• balloon.setContent(content) — sets notification content.
• content {string|Element} — notification content. HTML string or DOM object.
• balloon.getWidth() — gets notification width.
• balloon.setWidth(width) — sets notification width.
• width {number} — notification width in pixels.
• balloon.getHeight() — gets notification height.
• balloon.getZIndex() — returns notification z-index.
• balloon.setZIndex(zIndex) — sets notification z-index.
• zIndex {number} — z-index value.
• balloon.getCategory() — returns notification category. null — цру category is not set.
• balloon.setCategory(category) — sets notification category.
• category {string} - category name.
• balloon.setActions(actions) — sets notification actions.
• actions — array of actions. See details at BX.UI.Notification.Center.notify.
• balloon.getActions() — returns array of actions (class objects BX.UI.Notification.Action).
• balloon.getAction(id) — returns action (class object BX.UI.Notification.Action) by ID.
• id {string} — action ID.
• balloon.getContainer() — returns link to notification container (DOM element).
• balloon.setCustomRender(render) — sets callback function, which generates notification external appearance.
• render {function} — callback function.
• balloon.getCustomRender() — returns function that creates notification layout.
• balloon.getStack() — returns stack (class object BX.UI.Notification.Stack), containing notification.
• balloon.activateAutoHide() — activates automatic notification closing.
• balloon.deactivateAutoHide() — deactivates automatic notification closing.
• balloon.setAutoHide(autoHide) — sets or resets automatic closing mode.
• balloon.getAutoHide() — returns true, when automatic closing mode is enabled.
• balloon.setAutoHideDelay(delay) — sets delay time before automatic closing.
• delay {number} — delay time in milliseconds.
• balloon.getAutoHideDelay() — returns delay time before automatic closing.
• balloon.getData() — returns sets of notification data.
• balloon.setData(data) — sets arbitrary data for notification.
• data {object} - set of arbitrary notification data.

BX.UI.Notification.Stack

Class BX.UI.Notification.Stack is virtual stack showing notifications. Stack defines notifications location at the page.

new BX.UI.Notification.Stack(options)

• options {Object}

  Set of stack options.

  • position {string}

  Stack position at the page. Available values:

  • top-left - Top left corner.
  • top-center - Top border central point.
  • top-right - top right corner. Default value.
  • bottom-left - Bottom left corner.
  • bottom-center - Bottom border central point.
  • bottom-right - Bottom right corner.
  • spacing {number}

  Spacing between notification in pixels. Default value: 25.

  • offsetX {number}

  Notification stack offset from left or right page border in pixels. Default value: 20.

  • offsetY {number}

  Notification stack offset from top or bottom border in pixels. Default value: 20.

  • newestOnTop {boolean}

  When true, new notification will be added to stack's top Default value: false.

  • balloonType {string}

  Class name, which instances will be created in stack. Default value: BX.UI.Notification.Balloon.

  • id {string}

  Stack ID.

Class methods

• stack.adjustPosition([balloon]) — positions all notifications in stack. When balloon, positions only the indicated notification.
  • balloon — class object BX.UI.Notification.Balloon.

• stack.add(balloon) — adds notification to stack.
  • balloon — class object BX.UI.Notification.Balloon.

• stack.remove(balloon) — deletes notification from stack.
  • balloon— class object BX.UI.Notification.Balloon.

• stack.getId() — returns stack notifications.

• stack.getBalloons() — returns array of notifications.

• stack.getPosition() — returns stack position at the page.

• stack.getSpacing() — returns offset between notifications.

• stack.setSpacing(spacing) — sets offset between notifications.
  • spacing {number} — offset between notifications in pixels.

• stack.getOffsetX() — returns offset from left/right page border.

• stack.setOffsetX(offset) — sets offset from left/right page border.
  • offset {number} — offset value in pixels.

• stack.getOffsetY() — returns offset from top/bottom page border.

• stack.setOffsetY(offset) — sets offset from top/bottom page border.
  • offset {number} — offset value in pixels.

• stack.getHeight() — returns stack height.

• stack.isNewestOnTop() — returns true, when notification is added to stack's top.

• stack.setNewestOnTop(onTop) — sets mode for adding new notifications into stack.
  • onTop — flag for adding new notifications. When true, notifications are added to stack's top.