Документация для разработчиков
Документация для разработчиков Документация по D7 Документация по REST Пользовательская документация
Темная тема

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) — перерисовывает нотификацию с новыми данными.

    • 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) — устанавливает действия нотификации.

    • 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, позиционирует только указанную нотификацию.

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

    • stack.remove(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, нотификации добавляются в начало стека.


    Пользовательские комментарии

    Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

    Для этого нужно всего лишь авторизоваться на сайте

    Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

    Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
    © «Битрикс», 2001-2024, «1С-Битрикс», 2024
    Наверх