API

BX.UI.Notification.Center

BX.UI.Notification.Center — основной программный интерфейс для работы с нотификациями. Является объектом-синглтоном.

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

Показывает нотификацию на странице с указанными настройками. Возвращает объект класса BX.UI.Notification.Balloon .

• options {Object}

  Коллекция опций нотификации. Все настройки являются необязательными.

• content {string|Element}

  Содержимое нотификации. HTML-строка или DOM-объект.

• position {string}

  Позиция нотификации на странице. Допустимые значения:

  • top-left - Верхний левый угол.
  • top-center - Центральная точка верхней границы.
  • top-right - Верхний правый угол. Значение по умолчанию.
  • bottom-left - Нижный левый угол.
  • bottom-center - Центральная точка нижней границы.
  • bottom-right - Нижний правый угол.
• autoHide {boolean}

  Автоматически закрыть нотификацию по таймауту. По умолчанию true.

• autoHideDelay {number}

  Время задержки перед автоматическим закрытием в миллисекундах. По умолчанию 8000.

• zIndex {number}

  Z-index нотификации. По умолчанию 3200.

• closeButton {boolean}

  Отображать кнопку закрытия нотификации. По умолчанию true.

• category {string}

  Название категории. Нотификации с одинаковой категорией заменяют друг друга.

• actions {Array}

  Массив действий нотификации. Каждое действие — объект со следующими ключами:

• title {string} — Название действия.
• href {string} — Ссылка действия.
• events {object} — коллекция обработчиков DOM-событий.
• id {string} — идентификатор действия.

BX.UI.Notification.Center.notify({
content: "Файл успешно удален",
	actions: [
		{
			title: "Корзина",
			href: "/trash/"
		},
		{
			title: "Отмена",
			events: {
				click: function(event, balloon, action) {
					balloon.close();
				}
			} 
		}
	]
});

• id {string}

  Идентификатор нотификации. Используется совместно с BX.UI.Notification.Center.getBalloonById.

• type {string}

  Название класса, определяющего внешний вид нотификации. Класс должен наследоваться от BX.UI.Notification.Balloon и реализовать метод 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}

  Функция, возвращающая верстку нотификации. Может использоваться, как упрощенная замена опции 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"}

  Ширина нотификации в пикселах. Используйте значение auto, чтобы ширина нотификации зависела от контента. По умолчанию 400.

• data {object}

  Набор своих данных для нотификации, который можно использовать для создания произвольной верстки нотификации.

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

  Коллекция обработчиков событий.

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)

Возвращает нотификацию (объект класса BX.UI.Notification.Balloon) по идентификатору. null — если нотификация не найдена.

balloonId {string} — идентификатор нотификации.

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

Возвращает нотификацию (объект класса BX.UI.Notification.Balloon) по названию категории. null — если нотификация не найдена.

category {string} — название категории.

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

Устанавливает положение нотификаций на странице по умолчанию.

position {string} — позиция нотифкаций по умолчанию. Подробнее см. в BX.UI.Notification.Center.notify.

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

Устанавливает опции нотификации по умолчанию.

options {object} — коллекция опций нотификации. Подробнее см. в BX.UI.Notification.Center.notify.

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

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

Уставливает настройки стека.

position {string} — позиция стека.

options {object} — опции стека, подробнее см. описание BX.UI.Notification.Stack.

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

Опции по умолчанию для всех стеков.

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

События

UI.Notification.Balloon:onOpen — событие открытия нотификации.

UI.Notification.Balloon:onClose — событие закрытия нотификации.

UI.Notification.Balloon:onMouseEnter — событие возникает при наведении курсора мыши на нотификацию.

UI.Notification.Balloon:onMouseLeave — событие возникает при покидании курсора мыши из области нотификации.

BX.UI.Notification.Balloon

BX.UI.Notification.Balloon- класс представляет отдельную нотификацию.

new BX.UI.Notification.Balloon(options)

• options {Object}

Коллекция опций нотификации.

• stack {BX.UI.Notification.Stack}

Стек, в котором должна появится нотификация. Обязательный параметр.

• Остальные опции см. в BX.UI.Notification.Center.notify.

Методы класса

• balloon.show() — показывает нотификацию на странице.
• balloon.close() — закрывает нотификацию.

• balloon.update(options) — перерисовывает нотификацию с новыми данными.
  • options {object} — коллекция опций нотификации. Подробнее см. в BX.UI.Notification.Center.notify.

• balloon.adjustPosition() — позиционирует нотификацию в стеке.
• balloon.getId() — возвращает идентификатор нотификации.
• balloon.setCloseButtonVisibility(visibility) — устанавливает видимость кнопки закрытия.
• visibility {boolean} — флаг видимости кнопки закрытия.
• balloon.isCloseButtonVisible() — возвращает true, если отображается кнопка закрытия нотификации.
• balloon.getContent() — возвращает содержимое нотификации.
• balloon.setContent(content) — устанавливает содержимое нотификации.
• content {string|Element} — содержимое нотификации. HTML-строка или DOM-объект.
• balloon.getWidth() — возвращает ширину нотификации.
• balloon.setWidth(width) — устанавливает ширину нотификации.
• width {number} — значение ширины нотификации в пикселях.
• balloon.getHeight() — возвращает высоту нотификации.
• balloon.getZIndex() — возвращает z-index нотификации.
• balloon.setZIndex(zIndex) — устанавливает z-index нотификации.
• zIndex {number} — значение z-index.
• balloon.getCategory() — возвращает категорию нотификации. null — если категория не установлена.
• balloon.setCategory(category) — устанавливает категорию нотификации.
• category {string} - название категории.
• balloon.setActions(actions) — устанавливает действия нотификации.
• actions — массив действий. Подробнее см. в BX.UI.Notification.Center.notify.
• balloon.getActions() — возращает массив действий (объекты класса BX.UI.Notification.Action).
• balloon.getAction(id) — возвращает действие (объект класса BX.UI.Notification.Action) по идентификатору.
• id {string} — идентификатор действия.
• balloon.getContainer() — возвращает ссылку на контейнер (DOM-элемент) нотификации.
• balloon.setCustomRender(render) — устанавливает callback-функцию, которая формирует внешний вид нотификации.
• render {function} — callback-функция.
• balloon.getCustomRender() — возвращает функцию, которая создает верстку нотификации.
• balloon.getStack() — возвращает стек (объект класса BX.UI.Notification.Stack), в котором находится нотификация.
• balloon.activateAutoHide() — активирует автоматическое закрытие нотификации.
• balloon.deactivateAutoHide() — деактивирует автоматическое закрытие нотификации.
• balloon.setAutoHide(autoHide) — устанавливает или сбрасывает режим автоматического закрытия.
• balloon.getAutoHide() — возвращает true, если включен режим автоматического закрытия.
• balloon.setAutoHideDelay(delay) — устанавливает время задержки перед автоматическим закрытием.
• delay {number} — значение задержки в миллисекундах.
• balloon.getAutoHideDelay() — возвращает время задержки перед автоматическим закрытием.
• balloon.getData() — возвращает коллекцию данных нотификации.
• balloon.setData(data) — устанавливает произвольные данные для нотификации.
• data {object} - коллекция с произвольными данными нотификации.

BX.UI.Notification.Stack

Класс BX.UI.Notification.Stack представляет виртуальный стек, в котором будут показываться нотификации. Стек определяет их местоположение на странице.

new BX.UI.Notification.Stack(options)

• options {Object}

  Коллекция опций стека.

  • position {string}

  Позиция стека на странице. Допустимые значения:

  • top-left - Верхний левый угол.
  • top-center - Центральная точка верхней границы.
  • top-right - Верхний правый угол. Значение по умолчанию.
  • bottom-left - Нижный левый угол.
  • bottom-center - Центральная точка нижней границы.
  • bottom-right - Нижний правый угол.
  • spacing {number}

  Отступ между нотификациями в пикселях. По умолчанию 25.

  • offsetX {number}

  Отступ стека нотификаций от левой или правой границы страницы в пикселях. По умолчанию 20.

  • offsetY {number}

  Отступ стека нотификаций от верхней или нижней границы страницы в пикселях. По умолчанию 20.

  • newestOnTop {boolean}

  Если равен true, новые нотификации будут добавляться в начало стека. По умолчанию false.

  • balloonType {string}

  Имя класса, экземпляры которого будут создаваться в стеке. По умолчанию BX.UI.Notification.Balloon.

  • id {string}

  Идентификатор стека.

Методы класса

• stack.adjustPosition([balloon]) — позиционирует все нотификации в стеке. Если указан balloon, позиционирует только указанную нотификацию.
  • balloon — объект класса BX.UI.Notification.Balloon.

• stack.add(balloon) — добавляет нотификацию в стек.
  • balloon — объект класса BX.UI.Notification.Balloon.

• stack.remove(balloon) — удаляет нотификацию из стека.
  • balloon— объект класса BX.UI.Notification.Balloon.

• stack.getId() — возвращает идентификатор стека.

• stack.getBalloons() — возвращает массив нотификаций.

• stack.getPosition() — возвращает позицию стека на странице.

• stack.getSpacing() — возвращает отступ между нотификациями.

• stack.setSpacing(spacing) — устанавливает отступ между нотификациями.
  • spacing {number} — отступ между нотификациями в пикселях.

• stack.getOffsetX() — возвращает смещение от левой/правой границы страницы.

• stack.setOffsetX(offset) — устанавливает смещение от левой/правой границы страницы.
  • offset {number} — значение смещения в пикселях.

• stack.getOffsetY() — возвращает смещение от верхней/нижней границы страницы.

• stack.setOffsetY(offset) — устанавливает смещение от верхней/нижней границы страницы.
  • offset {number} — значение смещения в пикселях.

• stack.getHeight() — возвращает высоту стека.

• stack.isNewestOnTop() — возвращает true, если нотификации добавляются в начало стека.

• stack.setNewestOnTop(onTop) — устанавливает режим добавления новых нотификаций в стек.
  • onTop — флаг режима добавления новых нотификаций. Если равен true, нотификации добавляются в начало стека.