swiftotter / popup
SwiftOtter's Popup JS module adds a widget into your webpack/AMD-style code to trigger a popup wherever you are.
Installs: 368
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Language:JavaScript
Type:magento-module
Requires
This package is not auto-updated.
Last update: 2017-03-08 14:36:31 UTC
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 eventmodules/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 toPubSub
forpopupbox: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 areaurl
: url to load data fromselector
: element to load data fromvisibleBodyClasses
: classes to apply to the</body>
tag when a popup box is visiblehideLoading
: whether to hide the loading indicatorloadingImageUrl
: the url of the loading indicator (if no url is present, no loading indicator will be shown)showBackground
: whether or not to show the backgroundhover
: whether or not this was triggered by a mouse eventbackground
: options for the backgroundclassName
(defaultjs-modal-background
): class that is applied to the background</div>
elementadditionalClasses
(default['js-cover-screen']
): additional classes to apply to the background elementbodyClassName
(defaultjs-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 popupinstance.addEventListener('close', callback);
- External events: make an action happen on the popup instance, like closing it (
_uniqueID:popup:close
).
- Internal events: these originate from within a popup instance (such as