swiftotter/popup

SwiftOtter's Popup JS module adds a widget into your webpack/AMD-style code to trigger a popup wherever you are.



Documentation

SwiftOtter Popup Module

This module is quite powerful and very customizable. Some inspiration from: http://zurb.com/playground/reveal-modal-plugin

Three entry points:

  • modules/popup-click.js: watches elements with the .js-popup-click class for a click event
  • modules/popup-hover.js: watches elements with the .js-popup-hover class for a hover event
    • The idea behind this entry-point is that the system waits for a specified amount of time to ensure that the mouse is still in the
  • modules/popup-manual.js: listens to PubSub for popupbox:open event (data parameter is used for options)

Options:

(specified in global PopupOptions node or passed in via watch() function):

  • addPopupAfter: the element after which to add the popup area
  • url: url to load data from
  • selector: element to load data from
  • visibleBodyClasses: classes to apply to the </body> tag when a popup box is visible
  • hideLoading: whether to hide the loading indicator
  • loadingImageUrl: the url of the loading indicator (if no url is present, no loading indicator will be shown)
  • showBackground: whether or not to show the background
  • hover: whether or not this was triggered by a mouse event
  • background: options for the background
    • className (default js-modal-background): class that is applied to the background </div> element
    • additionalClasses (default ['js-cover-screen']): additional classes to apply to the background element
    • bodyClassName (default js-background-visible): class that is apply to the </body> tag when the background is visible

Callbacks:

  • positionCallback: the callback to position the popup box (left, top, width, height)
    • This is called twice: after the popup-box is visible and after the data has loaded (as they will likely be different sizes).
  • afterShowCallback: the callback to run events after the popup box is done showing (but might not have content yet)
  • completeCallback: the callback that is run when the popup box is done loading

Classes:

  • .js-popup-visible: applied to popup container when visible
  • .js-popup-box: the popup container
  • .js-popup-loading: the loading indicator
  • .jsjs-popup-close-box: the close popup link
  • .js-modal-background: (a default): applied to the background element.
  • .js-cover-screen: (a default): also applied to the background element.
  • .js-background-visible: (a default): applied to the </body> element when background is visible.
  • .js-popup-click: applied to an element so that clicking it makes the popup box appear
  • .js-popup-hover: applied to an element so that hovering over it makes the popup box appear
  • .js-popup-disable-background: applied to a click or hover element to disable the loading of the background (only for click elements)

Notes:

  • Two areas of events:
    • Internal events: these originate from within a popup instance (such as _uniqueID:_internal:close). The easiest way to subscribe to these is by calling the popup instance.addEventListener('close', callback);
    • External events: make an action happen on the popup instance, like closing it (_uniqueID:popup:close).