swiftotter/popup

This package is abandoned and no longer maintained. No replacement package was suggested.

There is no license information available for the latest version (1.2.2) of this package.

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

1.2.2 2017-03-08 01:50 UTC

Requires

• magento-hackathon/magento-composer-installer: *
• swiftotter/base: *

Unknown License

• Joseph Maxwell

README

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