Reusable Accessible Mapping Platform

API Docs for: 3.0.0
Show:

PopupManager Class

Uses
Defined in: src\js\RAMP\Utils\popupManager.js:9
Module: Utils

A static class to simplify the creation of UI popups, where a popup is a section of the page hidden and shown in response to some user or system action. This class takes care of assigning aria-* attributes and keeping them updated.

Item Index

Methods

Methods

newPopup

(
  • popupAttr
)
private

Defined in src\js\RAMP\Utils\popupManager.js:498

Create a new PopupBase object from the settings provided.

Parameters:

Returns:

popup

registerPopup

(
  • handle
  • event
  • openHandler
  • [settings]
)
PopupBase static

Defined in src\js\RAMP\Utils\popupManager.js:541

Register a PopupBase definition. By a popup here we mean a section of the page that reacts to the user's action on this or different section of the page. Can be used to register popups with already existing page nodes, or, using handle and target selectors with the nodes that will be created later.

Example

popupManager.registerPopup(panelToggle, "click",
    openPanel,
        {
            activeClass: cssExpandedClass,
            closeHandler: closePanel
        }
    );

Here we register a popup on the panelToggle node which will trigger openPanel function when the user clicks to open the popup and closePanel to close it; cssExpandedClass will be set on the panelToggle node when the popup is opened.

 popupManager.registerPopup(sectionNode, "hover, focus",
      openFunction,
      {
          handleSelector: "tr",

          targetSelector: ".record-controls",

          closeHandler: closeFunction,

          activeClass: "bg-very-light",
          useAria: false
      }
  );

Here we define a set of virtual popups on the sectionNode node that would be triggered when the user hovers over or sets focus to any tr child node of sectionNode. Then the openFunction will be executed with this.handle pointing to the actual handle node which trigged the popup and this.target pointing to the actual target node corresponding to a node or nodes found with the targetSelector inside the actual handle node.

Parameters:

  • handle JQuery

    A JQuery handle to listen to events on

  • event String

    The name of the event or events separated by a comma to trigger the popup. There are several predefined event names to register hover popups:

    • hoverIntent uses the hoverIntent jQuery plugin to determine when the user intends to hover over something
    • hover is a combination of two events - mouseleave and mouseenter and unlike hoverIntent it is triggered immediatelly
    • focus is a combination of two events - focusin and focusout You can subscribe to a combination of event shortcuts like focus,hover

    Additionally, almost any other JQuery event can be specified like click or keypress.

  • openHandler Function

    The function to run when the popup opens

  • [settings] PopupBaseSettings optional

    additional setting to define the popup

Returns:

PopupBase:

Returns a PopupBase with the specified conditions