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}stack{BX.UI.Notification.Stack}- See the rest of options at BX.UI.Notification.Center.notify.
Set of notification options.
Stack with notification. Required parameter.
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()— returnstrue, 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 objectsBX.UI.Notification.Action).balloon.getAction(id)— returns action (class objectBX.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()— returnstrue, 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}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}offsetX{number}offsetY{number}newestOnTop{boolean}balloonType{string}id{string}
Stack position at the page. Available values:
Spacing between notification in pixels. Default value:
25.Notification stack offset from left or right page border in pixels. Default value:
20.Notification stack offset from top or bottom border in pixels. Default value:
20.When true, new notification will be added to stack's top Default value:
false.Class name, which instances will be created in stack. Default value:
BX.UI.Notification.Balloon.Stack ID.
Class methods
stack.adjustPosition([balloon])— positions all notifications in stack. Whenballoon, 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.