Documentation

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.

    Class methods

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

    • balloon.update(options) — re-renders notification with new data.

    • 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.
    • 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.

    • stack.add(balloon) — adds notification to stack.

    • stack.remove(balloon) — deletes notification from stack.

    • 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.


    © «Bitrix24», 2001-2024
    Up