Документация для разработчиков
Темная тема

API

Array

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-2022, «1С-Битрикс», 2022
    Наверх